[James Newton-King (JamesNK)]

Description

Make resource switching available while the dashboard sidebar is collapsed, without reopening the full sidebar. This extracts only the resource-selector dropdown from #21793.

User-facing usage

Click the resource-name button to open the searchable resource list. Normal selection closes it; Ctrl/Cmd/Shift selection keeps it open. Selecting all closes it. Mobile retains the existing drawer.

Validation

• Passed: 1,394 component tests (before the final CSS-only adjustments):

  dotnet test --project tests\Aspire.Dashboard.Components.Tests\Aspire.Dashboard.Components.Tests.csproj --no-launch-profile -- --filter-not-trait "quarantined=true" --filter-not-trait "outerloop=true"

• Passed after the styling changes:

  aspire resource aspire-dashboard rebuild --apphost playground\TestShop\TestShop.AppHost\TestShop.AppHost.csproj --non-interactive

• Browser-verified popup placement, normal/modifier selection, Select all, dismissal, and button styling.

Screenshots / Recordings

This PR includes UI changes. Please add screenshots or screen recordings so reviewers can evaluate the visual changes without running locally.

• For before/after comparisons, place them side-by-side or label them clearly.
• For interactive changes (animations, transitions, new flows), prefer a short screen recording (GIF or video).
• If you cannot capture visuals now, note what scenario to test and mark this section as TODO.

Fixes # (issue)

Checklist

• Is this feature complete?
  • Yes. Ready to ship.
  • No. Follow-up changes expected.
• Are you including unit tests for the changes and scenario tests if relevant?
  • Yes
  • No
• Did you add public API?
  • Yes
    • If yes, did you have an API Review for it?
      • Yes
      • No
    • Did you add <remarks /> and <code /> elements on your triple slash comments?
      • Yes
      • No
  • No
• Does the change make any security assumptions or guarantees?
  • Yes
    • If yes, have you done a threat model and had a security review?
      • Yes
      • No
  • No

[github-actions]

🚀 Dogfood this PR with:

⚠️ WARNING: Do not do this without first carefully reviewing the code of this PR to satisfy yourself it is safe.

curl -fsSL https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 21861

Or

• Run remotely in PowerShell:

iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 21861"

[Copilot]

🟡 Changes recommended

Unmounting the collapsed pane breaks all four collapse/restore motion tests, while popover sizing hides controls and incomplete resize tracking can leave activity queries disabled.

3 open issues

• Collapse animation tests fail when the pane is unmounted · New
• Popup contents overflow the visible width · New
• Pane expansion is not observed during full-canvas transition · New

What changed in this PR

Adds a searchable resource-selector dropdown to the dashboard’s collapsed desktop sidebar, extracting that feature from #21793 while preserving the existing mobile drawer.

Changes:

• Adds a toolbar picker with normal, modifier-key, and Select all selection behavior.
• Integrates popover styling, dismissal, search focus, and lifecycle cleanup.
• Adds component coverage and documents the new interaction.

File	Description
tests/​Aspire.Dashboard.Components.Tests/​Shared/​ResourceSetupHelpers.cs	Adds picker JavaScript interop stubs.
tests/​Aspire.Dashboard.Components.Tests/​Layout/​ResourcesLayoutTests.cs	Covers picker selection, dismissal, and mobile behavior.
src/​Aspire.Dashboard/​README.md	Documents picker usage and available controls.
src/​Aspire.Dashboard/​Components/​Layout/​ResourcesLayout.razor.js	Manages native popover state and adjusts activity observation.
src/​Aspire.Dashboard/​Components/​Layout/​ResourcesLayout.razor.css	Adds popup layout and toolbar-button styling.
src/​Aspire.Dashboard/​Components/​Layout/​ResourcesLayout.razor.cs	Coordinates picker state, navigation, focus, and cleanup.
src/​Aspire.Dashboard/​Components/​Layout/​ResourcesLayout.razor	Reuses pane markup in the dropdown and adds the picker button.

_{Review effort: Balanced}

[github-actions]

Retrying the failed CI jobs for this pull request from the CI run attempt. The rerun is being tracked in the rerun attempt.

[github-actions]

Tests selector

14 / 101 PR test projects · 2 PR jobs, from 8 changed files.

Selected PR test projects (14 / 101)

Aspire.Dashboard.Components.Tests, Aspire.Dashboard.Tests, Aspire.Hosting.Azure.Kubernetes.Tests, Aspire.Hosting.Azure.Tests, Aspire.Hosting.Blazor.Tests, Aspire.Hosting.Dotnet.Tests, Aspire.Hosting.DotnetTool.Tests, Aspire.Hosting.JavaScript.Tests, Aspire.Hosting.Radius.Tests, Aspire.Hosting.Testing.Tests, Aspire.Hosting.Tests, Aspire.Playground.Tests, Aspire.Templates.Tests, Infrastructure.Tests

Selected PR jobs (2)

extension-e2e, native-dashboard-validation

---

How these were chosen — grouped by what changed

⚠️ 11 of the 14 selected test projects come from a single change — src/Aspire.Dashboard/Components/Layout/ResourcesLayout.razor.

🔧 src/Aspire.Dashboard/Components/Layout/ResourcesLayout.razor (changed source)
→ 11 via the project graph: Aspire.Dashboard.Tests, Aspire.Hosting.Azure.Kubernetes.Tests (3 hops), Aspire.Hosting.Azure.Tests (2 hops), Aspire.Hosting.Blazor.Tests (2 hops), Aspire.Hosting.Dotnet.Tests (2 hops), Aspire.Hosting.DotnetTool.Tests (2 hops), Aspire.Hosting.JavaScript.Tests, Aspire.Hosting.Radius.Tests (2 hops), Aspire.Hosting.Testing.Tests, Aspire.Hosting.Tests, Aspire.Playground.Tests (2 hops)

📦 affected project Aspire.Dashboard
→ 1 test: Aspire.Templates.Tests

🔧 src/Aspire.Dashboard/Components/Layout/ResourcesLayout.razor.js (changed source)
→ 1 directly: Infrastructure.Tests

🧪 tests/Aspire.Dashboard.Components.Tests/Layout/ResourcesLayoutTests.cs (changed test)
→ 1 directly: Aspire.Dashboard.Components.Tests

🧪 tests/Aspire.Dashboard.Components.Tests/Shared/ResourceSetupHelpers.cs (changed test)
→ 1 directly: Aspire.Dashboard.Components.Tests

Job reasons

Job	Triggered by
extension-e2e	• src/Aspire.Dashboard/Components/Layout/ResourcesLayout.razor, src/Aspire.Dashboard/Components/Layout/ResourcesLayout.razor.cs, src/Aspire.Dashboard/Components/Layout/ResourcesLayout.razor.css, src/Aspire.Dashboard/Components/Layout/ResourcesLayout.razor.js • affected project Aspire.Dashboard
native-dashboard-validation	affected project Aspire.Dashboard

---

Selection computed for commit e8374c7.

[Copilot]

🔵 Needs a closer look

Keyboard selection can leave focus on the document body when the picker closes; restore focus to the trigger without disrupting outside-click dismissal and add a Playwright regression test.

No open issues 🎉

1 previously missed issue

In code that hasn't changed since last review

Restore focus to picker trigger after keyboard selection

src/​Aspire.Dashboard/​Components/​Layout/​ResourcesLayout.razor.js:138

Normal keyboard selection unmounts the focused row or Select all control before this call hides the popover, leaving focus on the document body rather than returning it to the resource-name button. Restore focus to the picker trigger on programmatic closure when focus has not moved elsewhere, while preserving outside-click dismissal behavior. Add a Playwright regression test for keyboard selection and focus restoration.

3 resolved since last review

• Collapse animation tests fail when the pane is unmounted
• Pane expansion is not observed during full-canvas transition
• Popup contents overflow the visible width

_{Review effort: Balanced}

[aspire-repo-bot]

Pull request created: #2079

Generated by PR Documentation Check · copilot · auto · 25.6 AIC · ⌖ 1.17 AIC · ⊞ 7.4K

[aspire-repo-bot]

📝 Documentation has been drafted in microsoft/aspire.dev#2079 targeting release/17.0.

Documented the new dashboard resource-selector dropdown in dashboard/explore.mdx. Signals: pr_body_has_user_facing_section (the "User-facing usage" section) and pr_body_has_cli_flag_mention.

Note

This draft PR needs human review before merging.