Dashboard: Add InfoPopover for state column with clickable links#15996
Open
adamint wants to merge 5 commits intomicrosoft:mainfrom
Open
Dashboard: Add InfoPopover for state column with clickable links#15996adamint wants to merge 5 commits intomicrosoft:mainfrom
adamint wants to merge 5 commits intomicrosoft:mainfrom
Conversation
- Extract reusable InfoPopover component (info icon + FluentPopover) - Replace plain text tooltip on state column with InfoPopover - XML-escape HTML markup in resx so <a> tags survive as literal HTML - Show info icon only when tooltip content is available (return null for default states) - Add link styling, cursor fixes, and text wrapping for popover content Fixes microsoft#8853
Contributor
|
🚀 Dogfood this PR with:
curl -fsSL https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 15996Or
iex "& { $(irm https://raw.githubusercontent.com/microsoft/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 15996" |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an interactive InfoPopover to the Dashboard resource grid “State” column so state messages can contain clickable HTML links (instead of non-interactive tooltips), addressing #8853.
Changes:
- Updates state tooltip generation to return
nullfor default/healthy states and renders tooltip content in a newInfoPopovercomponent. - Escapes HTML in the
StateColumnResourceContainerRuntimeUnhealthyresource string so<a>markup survives localization/resource parsing. - Adds new localization string for the info button accessible label and updates tests accordingly.
Reviewed changes
Copilot reviewed 22 out of 23 changed files in this pull request and generated 16 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/Aspire.Dashboard.Tests/Model/ResourceStateViewModelTests.cs | Adjusts expectations for nullable tooltip output. |
| src/Aspire.Dashboard/Resources/Columns.resx | Updates runtime-unhealthy string to escaped HTML link; adds info button label resource. |
| src/Aspire.Dashboard/Resources/Columns.Designer.cs | Regenerated designer entries for updated/added resources. |
| src/Aspire.Dashboard/Resources/xlf/Columns.cs.xlf | Updates localized XLF entries for new/changed strings. |
| src/Aspire.Dashboard/Resources/xlf/Columns.de.xlf | Updates localized XLF entries for new/changed strings. |
| src/Aspire.Dashboard/Resources/xlf/Columns.es.xlf | Updates localized XLF entries for new/changed strings. |
| src/Aspire.Dashboard/Resources/xlf/Columns.fr.xlf | Updates localized XLF entries for new/changed strings. |
| src/Aspire.Dashboard/Resources/xlf/Columns.it.xlf | Updates localized XLF entries for new/changed strings. |
| src/Aspire.Dashboard/Resources/xlf/Columns.ja.xlf | Updates localized XLF entries for new/changed strings. |
| src/Aspire.Dashboard/Resources/xlf/Columns.ko.xlf | Updates localized XLF entries for new/changed strings. |
| src/Aspire.Dashboard/Resources/xlf/Columns.pl.xlf | Updates localized XLF entries for new/changed strings. |
| src/Aspire.Dashboard/Resources/xlf/Columns.pt-BR.xlf | Updates localized XLF entries for new/changed strings. |
| src/Aspire.Dashboard/Resources/xlf/Columns.ru.xlf | Updates localized XLF entries for new/changed strings. |
| src/Aspire.Dashboard/Resources/xlf/Columns.tr.xlf | Updates localized XLF entries for new/changed strings. |
| src/Aspire.Dashboard/Resources/xlf/Columns.zh-Hans.xlf | Updates localized XLF entries for new/changed strings. |
| src/Aspire.Dashboard/Resources/xlf/Columns.zh-Hant.xlf | Updates localized XLF entries for new/changed strings. |
| src/Aspire.Dashboard/Model/ResourceStateViewModel.cs | Makes tooltip content nullable and removes fallback-to-state-text behavior. |
| src/Aspire.Dashboard/Components/ResourcesGridColumns/StateColumnDisplay.razor | Renders InfoPopover with MarkupString content when tooltip exists. |
| src/Aspire.Dashboard/Components/ResourcesGridColumns/StateColumnDisplay.razor.css | Adjusts layout to accommodate the info icon in the state cell. |
| src/Aspire.Dashboard/Components/Pages/Resources.razor | Removes column-level tooltip usage in favor of per-cell popover. |
| src/Aspire.Dashboard/Components/Controls/InfoPopover.razor | New reusable popover control (icon button + FluentPopover). |
| src/Aspire.Dashboard/Components/Controls/InfoPopover.razor.cs | Code-behind for popover open/close state and parameters. |
| src/Aspire.Dashboard/Components/Controls/InfoPopover.razor.css | Styles popover container, sizing, and link appearance. |
Files not reviewed (1)
- src/Aspire.Dashboard/Resources/Columns.Designer.cs: Language not supported
adamint
commented
Apr 9, 2026
| "dotnet.testWindow.useTestingPlatformProtocol": true, | ||
| "aspire.enableSettingsFileCreationPromptOnStartup": false | ||
| "aspire.enableSettingsFileCreationPromptOnStartup": false, | ||
| "aspire.enableAutoRestore": false |
Member
Author
There was a problem hiding this comment.
unrelated but useful change, we have hundreds of projects so we should not automatically restore in the aspire repo
Member
|
That link is already added to the dashboard message bar, and it's clickable there. I only added the link to the tooltip because that information is also returned in MCP/CLI API calls. And it's useful for AI to help figure out what is going on. |
Member
Author
If it's going to be shown to the user on the dashboard, IMO we should give them a nice experience 😄 Also, this fixes the discoverability issue of the existing tooltip... users do not know which states have additional information. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds an interactive InfoPopover component to the dashboard's state column, replacing the plain-text tooltip. This allows state messages containing HTML markup (like clickable links) to be rendered properly.
Fixes #8853
Note that the button opens on click, not on hover. There is an established pattern of these informational button tooltips to use click instead of hover.
Checklist