Enable Urls to display using FluentIcon #12346

mcumming · 2025-10-24T13:54:25Z

Description

Added IconName, IconVarient to ResourceUrlAnnotation to display urls using Fluent Icons.

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
Does the change require an update in our Aspire docs?
- Yes
  - Link to aspire-docs issue (consider using one of the following templates):
- No

Added IconName, IconVarient to ResourceUrlAnnotaion and plumbed through.

github-actions · 2025-10-24T13:54:39Z

🚀 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/dotnet/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 12346

Or

Run remotely in PowerShell:

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

Copilot

Pull Request Overview

This PR adds support for displaying URLs with FluentUI icons in the Aspire Dashboard by introducing IconName and IconVariant properties to ResourceUrlAnnotation. This enhancement allows resources to display custom icons alongside their URLs, improving visual identification in the dashboard UI.

Key changes:

Added IconName and IconVariant properties to ResourceUrlAnnotation class
Updated protobuf definitions and snapshot records to include icon properties
Modified dashboard components to render URLs with icons using FluentButton when icon data is present

Reviewed Changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/Aspire.Hosting/ApplicationModel/ResourceUrlAnnotation.cs	Added IconName and IconVariant properties to store icon metadata
src/Aspire.Hosting/ApplicationModel/CustomResourceSnapshot.cs	Extended UrlDisplayPropertiesSnapshot record to include icon parameters
src/Aspire.Hosting/Dashboard/proto/dashboard_service.proto	Added optional icon_name and icon_variant fields to UrlDisplayProperties message
src/Aspire.Hosting/Dashboard/proto/Partials.cs	Added logic to map icon properties from snapshot to protobuf message
src/Aspire.Hosting/Orchestrator/ApplicationOrchestrator.cs	Updated snapshot creation to pass icon properties
src/Aspire.Hosting/Dcp/ResourceSnapshotBuilder.cs	Updated URL snapshot creation to include icon properties
src/Aspire.Dashboard/ServiceClient/Partials.cs	Added MapIconVariant helper and updated UrlViewModel construction
src/Aspire.Dashboard/Model/ResourceViewModel.cs	Updated UrlDisplayPropertiesViewModel to include icon properties
src/Aspire.Dashboard/Model/ResourceUrlHelpers.cs	Extended DisplayedUrl model with icon properties
src/Aspire.Dashboard/Components/ResourcesGridColumns/UrlsColumnDisplay.razor.cs	Added required service injections for icon rendering
src/Aspire.Dashboard/Components/ResourcesGridColumns/UrlsColumnDisplay.razor	Updated UI to render FluentButton with icon when icon data is available
playground/TestShop/TestShop.AppHost/Program.cs	Added example usage demonstrating icon configuration for PG Admin URL

Copilot · 2025-10-24T13:55:42Z

src/Aspire.Hosting/ApplicationModel/ResourceUrlAnnotation.cs

            Endpoint = endpoint,
            DisplayOrder = DisplayOrder,
-            DisplayLocation = DisplayLocation
+            DisplayLocation = DisplayLocation,


The WithEndpoint method does not copy the IconName and IconVariant properties to the new annotation instance. These properties should be included in the object initializer to preserve icon settings when creating endpoint-specific annotations.

Suggested change

DisplayLocation = DisplayLocation,

DisplayLocation = DisplayLocation,

IconName = IconName,

IconVariant = IconVariant,

Copilot · 2025-10-24T13:55:42Z

src/Aspire.Dashboard/Components/ResourcesGridColumns/UrlsColumnDisplay.razor

+                            <FluentIcon Value="@icon" Width="16px" Title="@displayedUrl.Text" />
+                        </FluentButton>;
+            }
+            //<a href="@displayedUrl.Url" target="_blank" @onclick:stopPropagation="true">


Remove commented-out code. If this was left for reference during development, it should be deleted before merging.

Suggested change

//<a href="@displayedUrl.Url" target="_blank" @onclick:stopPropagation="true">

Copilot · 2025-10-24T13:55:42Z

src/Aspire.Hosting/ApplicationModel/CustomResourceSnapshot.cs

-public sealed record UrlDisplayPropertiesSnapshot(string DisplayName = "", int SortOrder = 0);
+/// <param name="IconName">The icon name for the Url. The name should be a valid FluentUI icon name. https://aka.ms/fluentui-system-icons</param>
+/// <param name="IconVariant">The icon variant.</param>
+/// 


Remove extra blank line in XML documentation comment. This line serves no purpose and should be deleted.

Suggested change

///

Copilot · 2025-10-24T13:55:43Z

src/Aspire.Dashboard/Model/ResourceViewModel.cs

+public record UrlDisplayPropertiesViewModel(string DisplayName, int SortOrder, string? IconName, IconVariant? IconVariant)
 {
-    public static readonly UrlDisplayPropertiesViewModel Empty = new(string.Empty, 0);
+    public static readonly UrlDisplayPropertiesViewModel Empty = new(string.Empty, 0, string.Empty, (IconVariant)(-1));


Using (IconVariant)(-1) as a sentinel value is fragile and could cause issues if IconVariant enum changes. Consider using null since IconVariant is already nullable in the constructor, or define a proper sentinel constant like IconVariant.None.

Suggested change

public static readonly UrlDisplayPropertiesViewModel Empty = new(string.Empty, 0, string.Empty, (IconVariant)(-1));

public static readonly UrlDisplayPropertiesViewModel Empty = new(string.Empty, 0, string.Empty, null);

Copilot · 2025-10-24T13:55:43Z

src/Aspire.Dashboard/Components/ResourcesGridColumns/UrlsColumnDisplay.razor

        {
+            if (string.IsNullOrWhiteSpace(displayedUrl.IconName) == false && IconResolver.ResolveIconName(displayedUrl.IconName, IconSize.Size16, iconVariant: displayedUrl.IconVariant) is { } icon)
+            {
+                return @<FluentButton Appearance="Appearance.Lightweight" Title="@displayedUrl.Text" StopPropagation="true" OnClick="@(() => JSRuntime.InvokeAsync<object>("open", displayedUrl.Url, "_blank"))" >


The FluentButton lacks accessible text content for screen readers. When displaying only an icon, add an aria-label attribute or use the AriaLabel parameter on FluentButton to provide accessible text equivalent to the Title attribute.

Suggested change

return @<FluentButton Appearance="Appearance.Lightweight" Title="@displayedUrl.Text" StopPropagation="true" OnClick="@(() => JSRuntime.InvokeAsync<object>("open", displayedUrl.Url, "_blank"))" >

return @<FluentButton Appearance="Appearance.Lightweight" Title="@displayedUrl.Text" AriaLabel="@displayedUrl.Text" StopPropagation="true" OnClick="@(() => JSRuntime.InvokeAsync<object>("open", displayedUrl.Url, "_blank"))" >

Copilot · 2025-10-24T13:55:43Z

src/Aspire.Hosting/Dashboard/proto/Partials.cs

+            {
+                displayProperties.IconVariant = MapIconVariant(urlSnapshot.DisplayProperties.IconVariant);
+            }
+


Remove trailing whitespace at end of line.

Suggested change

Copilot · 2025-10-24T13:55:44Z

src/Aspire.Dashboard/Components/ResourcesGridColumns/UrlsColumnDisplay.razor.cs

+
+    [Inject]
+    public required IJSRuntime JSRuntime { get; init; }
+


Remove trailing whitespace at end of line.

Suggested change

Copilot · 2025-10-24T13:55:44Z

src/Aspire.Hosting/ApplicationModel/ResourceUrlAnnotation.cs

+    /// The name of the icon to display with this URL.
+    /// </summary>
+    public string IconName { get; set; } = string.Empty;
+


Remove trailing whitespace at end of line.

Suggested change

adamint

Can I ask what prompted this request?

Ideally, I would like to bias towards including text in any button, especially if it contains user-defined content where the meaning of the icon may not be immediately obvious.

Would it fit your needs to instead, allow showing icons after the url text? Or if you do need this behavior, I do think it should be disabled in the url dropdown and only visible inline in the endpoints cell.

…riants; enhance FluentButton accessibility with AriaLabel

mcumming · 2025-10-24T16:40:28Z

Can I ask what prompted this request?

Ideally, I would like to bias towards including text in any button, especially if it contains user-defined content where the meaning of the icon may not be immediately obvious.

Would it fit your needs to instead, allow showing icons after the url text? Or if you do need this behavior, I do think it should be disabled in the url dropdown and only visible inline in the endpoints cell.

Thanks for the feedback! This was something I thought of while I was working on some extensions for another project. I thought having the ability to replace the (long) url with an icon like Actions would be a nice option. When I asked @maddymontaquila about it she thought it was a good idea so I started mocking it up, then was told ship it by @maddymontaquila. So that's why the PR is here.

I played with adding the Text to the button but was challenged by getting all the alignments working correctly.

Enable Urls to display using FluentIcon

1589fa1

Added IconName, IconVarient to ResourceUrlAnnotaion and plumbed through.

Copilot AI review requested due to automatic review settings October 24, 2025 13:54

Copilot AI reviewed Oct 24, 2025

View reviewed changes

maddymontaquila requested a review from JamesNK October 24, 2025 15:15

maddymontaquila assigned adamint Oct 24, 2025

adamint reviewed Oct 24, 2025

View reviewed changes

Refactor URL display properties to support nullable icon names and va…

55e75e6

…riants; enhance FluentButton accessibility with AriaLabel

mcumming force-pushed the add-icon-for-url branch from 67867b5 to 55e75e6 Compare October 24, 2025 16:39

Fix ResourceUrlHelpers Tests

da91fd2

	public static readonly UrlDisplayPropertiesViewModel Empty = new(string.Empty, 0, string.Empty, (IconVariant)(-1));
	public static readonly UrlDisplayPropertiesViewModel Empty = new(string.Empty, 0, string.Empty, null);

	return @<FluentButton Appearance="Appearance.Lightweight" Title="@displayedUrl.Text" StopPropagation="true" OnClick="@(() => JSRuntime.InvokeAsync<object>("open", displayedUrl.Url, "_blank"))" >
	return @<FluentButton Appearance="Appearance.Lightweight" Title="@displayedUrl.Text" AriaLabel="@displayedUrl.Text" StopPropagation="true" OnClick="@(() => JSRuntime.InvokeAsync<object>("open", displayedUrl.Url, "_blank"))" >

Uh oh!

Enable Urls to display using FluentIcon #12346

Are you sure you want to change the base?

Enable Urls to display using FluentIcon #12346

Uh oh!

Conversation

mcumming commented Oct 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Uh oh!

github-actions bot commented Oct 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 24, 2025

Choose a reason for hiding this comment

Uh oh!

adamint left a comment

Choose a reason for hiding this comment

Uh oh!

mcumming commented Oct 24, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mcumming commented Oct 24, 2025 •

edited

Loading

github-actions bot commented Oct 24, 2025 •

edited

Loading