Improve resource graph action discoverability - #19905
Conversation
Show a hover cog on graph resources and identify the target resource in the context menu. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
|
🚀 Dogfood this PR with:
curl -fsSL https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 19905Or
iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 19905" |
This comment has been minimized.
This comment has been minimized.
There was a problem hiding this comment.
🟡 Changes recommended
Accessibility and menu-clipping issues must be resolved before approval.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Improves resource action discoverability in the dashboard Graph view and clarifies which resource a context menu targets.
Changes:
- Adds a hover cog for opening resource actions.
- Adds an icon/name header and localized tooltip.
- Updates styling, interaction handling, and component tests.
File summaries
| File | Description |
|---|---|
tests/Aspire.Dashboard.Components.Tests/Pages/ResourcesTests.cs |
Verifies context-menu header data. |
src/Aspire.Dashboard/wwwroot/js/app-resourcegraph.js |
Adds cog rendering and interaction. |
src/Aspire.Dashboard/Resources/xlf/Resources.zh-Hant.xlf |
Updates Traditional Chinese localization. |
src/Aspire.Dashboard/Resources/xlf/Resources.zh-Hans.xlf |
Updates Simplified Chinese localization. |
src/Aspire.Dashboard/Resources/xlf/Resources.tr.xlf |
Updates Turkish localization. |
src/Aspire.Dashboard/Resources/xlf/Resources.ru.xlf |
Updates Russian localization. |
src/Aspire.Dashboard/Resources/xlf/Resources.pt-BR.xlf |
Updates Portuguese localization. |
src/Aspire.Dashboard/Resources/xlf/Resources.pl.xlf |
Updates Polish localization. |
src/Aspire.Dashboard/Resources/xlf/Resources.ko.xlf |
Updates Korean localization. |
src/Aspire.Dashboard/Resources/xlf/Resources.ja.xlf |
Updates Japanese localization. |
src/Aspire.Dashboard/Resources/xlf/Resources.it.xlf |
Updates Italian localization. |
src/Aspire.Dashboard/Resources/xlf/Resources.fr.xlf |
Updates French localization. |
src/Aspire.Dashboard/Resources/xlf/Resources.es.xlf |
Updates Spanish localization. |
src/Aspire.Dashboard/Resources/xlf/Resources.de.xlf |
Updates German localization. |
src/Aspire.Dashboard/Resources/xlf/Resources.cs.xlf |
Updates Czech localization. |
src/Aspire.Dashboard/Resources/Resources.resx |
Defines the cog tooltip resource. |
src/Aspire.Dashboard/Resources/Resources.Designer.cs |
Exposes the generated tooltip property. |
src/Aspire.Dashboard/Model/MenuButtonItem.cs |
Supports non-interactive menu headers. |
src/Aspire.Dashboard/Components/Pages/Resources.razor.css |
Styles graph cog visibility. |
src/Aspire.Dashboard/Components/Pages/Resources.razor.cs |
Supplies cog metadata and menu header data. |
src/Aspire.Dashboard/Components/Controls/AspireMenu.razor.css |
Styles menu headers. |
src/Aspire.Dashboard/Components/Controls/AspireMenu.razor |
Renders resource menu headers. |
Review details
Files not reviewed (1)
- src/Aspire.Dashboard/Resources/Resources.Designer.cs: Generated file
Suppressed comments (2)
src/Aspire.Dashboard/Components/Controls/AspireMenu.razor:35
- Use the repository's required null-pattern syntax here (
AGENTS.md:218) rather than!= null.
@if (item.Icon != null)
src/Aspire.Dashboard/wwwroot/js/app-resourcegraph.js:439
- The added component test calls
ShowContextMenuAsyncvia reflection, so it bypasses all new browser behavior and would still pass if the cog never appeared, selected or dragged the node, or failed to invoke the menu. Add a focused Resources Playwright regression test that hovers a graph node, activates the cog, verifies the labeled menu, and confirms cog interaction does not select or move the node.
.on('mousedown touchstart', event => event.stopPropagation())
.on('click', this.cogMenuClick);
- Files reviewed: 21/22 changed files
- Comments generated: 3
- Review effort level: Balanced
|
Retrying the failed CI jobs for this pull request from the CI run attempt. The rerun is being tracked in the rerun attempt. |
Label the context menu from its resource header, include the header in viewport positioning, and make the cog keyboard accessible. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
This comment has been minimized.
This comment has been minimized.
There was a problem hiding this comment.
🟡 Changes recommended
Two moderate menu sizing and accessibility issues remain unresolved.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
Files not reviewed (1)
- src/Aspire.Dashboard/Resources/Resources.Designer.cs: Generated file
Suppressed comments (1)
src/Aspire.Dashboard/Components/Controls/AspireMenu.razor.css:38
- The header uses the default
content-boxsizing, so its minimum outer height is 57px (40px content + 12px padding + 1px border + 4px margin), whileEstimatedHeaderHeightcounts only 44px. This still lets cursor-positioned menus open below the pointer and clip within the remaining 13px window. Include padding and border in the declared 40px height so the estimate matches the rendered layout.
min-height: 40px;
margin: 0 4px 4px;
padding: 4px 8px 8px 0;
border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
- Files reviewed: 24/25 changed files
- Comments generated: 1
- Review effort level: Balanced
Include each resource name in the cog label and align the menu header sizing estimate with its rendered box. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
This comment has been minimized.
This comment has been minimized.
There was a problem hiding this comment.
🟡 Changes recommended
Touch access, popup ARIA state, coordinate rounding, and direct click regression coverage remain unresolved.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
Files not reviewed (1)
- src/Aspire.Dashboard/Resources/Resources.Designer.cs: Generated file
- Files reviewed: 24/25 changed files
- Comments generated: 4
- Review effort level: Balanced
Expose the cog on touch devices, report popup state, round keyboard menu coordinates, and cover direct click activation. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
This comment has been minimized.
This comment has been minimized.
There was a problem hiding this comment.
🟡 Changes recommended
Keyboard-triggered menus must restore focus to the cog and include regression coverage.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
Files not reviewed (1)
- src/Aspire.Dashboard/Resources/Resources.Designer.cs: Generated file
- Files reviewed: 24/25 changed files
- Comments generated: 1
- Review effort level: Balanced
Return keyboard focus to the resource cog before menu action callbacks execute and cover the Escape path in Playwright. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
This comment has been minimized.
This comment has been minimized.
There was a problem hiding this comment.
🟢 Approval recommended
The reviewed changes have appropriate coverage and no unresolved approval-blocking issues.
Review details
Files not reviewed (1)
- src/Aspire.Dashboard/Resources/Resources.Designer.cs: Generated file
- Files reviewed: 24/25 changed files
- Comments generated: 0 new
- Review effort level: Balanced
|
Border is still there: |
Forward the keyboard trigger ID into resource details and verify focus returns after the pane is dismissed. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Suppress the SVG focus rectangle while the resource menu is open, while preserving it after focus returns on close. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
🟢 Approval recommended
The reviewed changes have no unresolved approval-blocking issues.
Review details
Files not reviewed (1)
- src/Aspire.Dashboard/Resources/Resources.Designer.cs: Generated file
- Files reviewed: 24/25 changed files
- Comments generated: 0 new
- Review effort level: Balanced
Apply the outline reset to every expanded cog instead of relying on SVG focus-visible matching. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
You were right: that rectangle was the browser's focus outline on the SVG group, not the circle stroke. Fixed in |
This comment has been minimized.
This comment has been minimized.
There was a problem hiding this comment.
🟢 Approval recommended
The reviewed changes have regression coverage and no unresolved issues.
Review details
Files not reviewed (1)
- src/Aspire.Dashboard/Resources/Resources.Designer.cs: Generated file
- Files reviewed: 24/25 changed files
- Comments generated: 0 new
- Review effort level: Balanced
|
The border is visible during the click (time between start of mouse down and mouse up): 
|
Remove the transient SVG focus rectangle during pointer-down and cover the exact active state in Playwright. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Fixed in Pressed-state proof:
|
There was a problem hiding this comment.
🟢 Approval recommended
The reviewed changes have appropriate regression coverage and no unresolved issues.
Review details
Files not reviewed (1)
- src/Aspire.Dashboard/Resources/Resources.Designer.cs: Generated file
- Files reviewed: 24/25 changed files
- Comments generated: 0 new
- Review effort level: Balanced
Tests selector9 / 99 PR test projects · 3 PR jobs · 1 advisory-only target, from 25 changed files. Selected PR test projects (9 / 99)
Selected PR jobs (3)
Advisory workflow impact (1)
How these were chosen — grouped by what changed🔧 📦 affected project 🔧 🧪 🧪 🧪 Job reasons
Selection computed for commit |
|
Retrying the failed CI jobs for this pull request from the CI run attempt. The rerun is being tracked in the rerun attempt. |
|
Pull request created: #1617
|
|
📝 Documentation has been drafted in microsoft/aspire.dev#1617 targeting Updated Note This draft PR needs human review before merging. |
Description
Resource actions in the dashboard Graph view were difficult to discover because nodes only exposed their context menu through right-click. The menu also did not identify which resource its actions targeted.
This change:
User-facing usage
On Resources > Graph, hover a resource node and select the cog to open its actions. Right-clicking the node continues to open the same menu. The menu header identifies the selected resource.
Screenshots / Recordings
Validation
src/Aspire.Dashboard/Aspire.Dashboard.csprojandtests/Aspire.Dashboard.Tests/Aspire.Dashboard.Tests.csproj.ResourcesTestsandAspireMenuTestscomponent tests.app-resourcegraph.js.DotnetProjectplayground AppHost.Fixes #19892
Checklist
<remarks />and<code />elements on your triple slash comments?