Group and collapse PM Attention Required sections by priority

[Copilot]

The PM View “Attention Required” tab listed informational and action-oriented release plan groups together, making priority harder to scan. This updates the tab to separate non-actionable status from PM follow-up items, puts the action-oriented section first, and makes the two top-level PM groups collapsible.

• PM View layout

  • Added two parent section headers in the Attention Required tab:
    • Needs Attention
    • Informational
  • Reordered the existing groups under those headers to match the requested sequence.
  • Made both top-level PM groups collapsible.

• Section ordering

  • Needs Attention
    1. Ready to Complete Private Preview Release Plans
    2. Past Due Release Plans
    3. Stale Release Plans (No activity for 3+ months)
    4. Release Plans Without SDK for All Languages
    5. Partially Released
    6. Missing Namespace Approval
    7. Missing Product Details
  • Informational
    1. Recently Finished (Last 2 Months)
    2. Approaching SDK Release Target (This & Next Month)

• Behavior preserved

  • Kept the existing section IDs and list containers intact so existing PM section rendering, counts, and nested collapse/expand behavior continue to apply.
  • Preserved the additional Missing Product Details group in the PM action area after the issue-listed groups.

• Coverage

  • Added a focused layout test that asserts:
    • both parent group headers are present
    • the top-level PM groups are rendered in the expected order
    • each PM section is rendered exactly once

<section class="pm-section-group" aria-labelledby="pm-needs-attention">
  <div class="pm-section-group-header section-header" data-target="list-pm-needs-attention">
    <span class="caret">&#9660;</span>
    <h3 id="pm-needs-attention">Needs Attention</h3>
  </div>
  <!-- Ready to Complete Private Preview -->
  <!-- Past Due -->
  <!-- Stale -->
  <!-- Missing SDKs -->
  <!-- Partially Released -->
  <!-- Missing Namespace Approval -->
</section>

<section class="pm-section-group" aria-labelledby="pm-informational">
  <div class="pm-section-group-header section-header" data-target="list-pm-informational">
    <span class="caret">&#9660;</span>
    <h3 id="pm-informational">Informational</h3>
  </div>
  <!-- Recently Finished -->
  <!-- Approaching SDK Release Target -->
</section>

[Copilot]

Pull request overview

This PR improves the Release Plan Dashboard PM View “Attention Required” tab by separating action-oriented items from informational items, ordering sections by priority, and introducing two collapsible top-level groups to make scanning easier.

Changes:

• Added two top-level collapsible PM groups (“Needs Attention” and “Informational”) and reordered existing PM sections under them.
• Introduced new styling for the PM section group containers and headers.
• Added a Vitest layout test to assert the new grouping headers, ordering, and single-instance rendering of each PM section.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
tools/release-plan-dashboard/tests/pm-view-layout.test.js	Adds a focused layout test validating PM “Attention Required” grouping and ordering.
tools/release-plan-dashboard/public/style.css	Adds styling for the new PM section grouping containers and collapsed behavior.
tools/release-plan-dashboard/public/index.html	Updates PM View markup to add “Needs Attention” / “Informational” group wrappers and reorder sections.