Update Fluent UI Blazor to v4.11.3

Directory.Packages.props

@@ -88,8 +88,8 @@
     <PackageVersion Include="KubernetesClient" Version="15.0.1" />
     <PackageVersion Include="JsonPatch.Net" Version="3.2.3" />
     <PackageVersion Include="Microsoft.Data.SqlClient" Version="5.2.2" />
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.10.3" />
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.10.3" />
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.11.3" />
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.11.3" />
     <PackageVersion Include="Milvus.Client" Version="2.3.0-preview.1" />
     <PackageVersion Include="MongoDB.Driver" Version="[2.30.0,3.0.0)" />
     <PackageVersion Include="MongoDB.Driver.Core.Extensions.DiagnosticSources" Version="1.5.0" />

NuGet.config

@@ -24,6 +24,9 @@
     </packageSource>
     <packageSource key="dotnet-public">
       <package pattern="*" />
+      <!-- FluentUI is present on both public an internal dotnet feeds. Prefer public feed -->
+      <package pattern="Microsoft.FluentUI.AspNetCore.Components" />
+      <package pattern="Microsoft.FluentUI.AspNetCore.Components.Icons" />
     </packageSource>
     <packageSource key="dotnet9">
       <package pattern="*" />

src/Aspire.Dashboard/Aspire.Dashboard.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
     <!-- This list of runtimes needs to match the set of runtimes specified in eng/workloads/workloads.csproj -->

src/Aspire.Dashboard/Components/Controls/AspireMenuButton.razor.cs

@@ -5,6 +5,7 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons;
 
 namespace Aspire.Dashboard.Components;
 

src/Aspire.Dashboard/Components/Controls/Chart/ChartFilters.razor

@@ -11,11 +11,10 @@
     {
         <div class="metrics-filters-section">
             <h5>@Loc[nameof(ControlsStrings.ChartContainerFiltersHeader)]</h5>
-            <FluentDataGrid ResizeLabel="@AspireFluentDataGridHeaderCell.GetResizeLabel(Loc)"
-                            ResizeType="DataGridResizeType.Discrete"
-                            Items="@Queryable.AsQueryable(DimensionFilters)"
+            <FluentDataGrid Items="@Queryable.AsQueryable(DimensionFilters)"
                             GridTemplateColumns="200px 1fr auto"
-                            GenerateHeader="GenerateHeaderOption.None">
+                            GenerateHeader="GenerateHeaderOption.None"
+                            RowSize="DataGridRowSize.Medium">
                 <ChildContent>
                     <AspirePropertyColumn Tooltip="true" TooltipText="@(c => c.Name)" Property="@(c => c.Name)"/>
                     <AspireTemplateColumn Tooltip="true" TooltipText="@(c => c.SelectedValues.Count == 0 ? Loc[nameof(ControlsStrings.LabelNone)] : string.Join(", ", c.SelectedValues.OrderBy(v => v.Text).Select(v => v.Text)))">

src/Aspire.Dashboard/Components/Controls/Chart/MetricTable.razor.cs

@@ -11,6 +11,7 @@
 using Aspire.Dashboard.Utils;
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons;
 using Microsoft.JSInterop;
 
 namespace Aspire.Dashboard.Components.Controls;

src/Aspire.Dashboard/Components/Controls/Chart/MetricTable.razor.js

@@ -34,13 +34,13 @@ function getRowText(dataGridContainerId, index) {
         return null;
     }
     const dataGrid = container.children[0];
-    const row = dataGrid.getElementsByTagName("fluent-data-grid-row")[index + 1];
+    const row = dataGrid.getElementsByClassName("fluent-data-grid-row")[index + 1];
 
     if (!row) {
         return null;
     }
 
-    const cells = row.getElementsByTagName("fluent-data-grid-cell");
+    const cells = row.getElementsByTagName("td");
     let texts = [];
     for (let i = 0; i < cells.length; i++) {
         texts.push(cells[i].textContent);

src/Aspire.Dashboard/Components/Controls/ClearSignalsButton.razor.cs

@@ -9,6 +9,7 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons;
 
 namespace Aspire.Dashboard.Components.Controls;
 

src/Aspire.Dashboard/Components/Controls/Grid/AspirePropertyColumn.cs

@@ -14,19 +14,6 @@ public class AspirePropertyColumn<TGridItem, TProp> : PropertyColumn<TGridItem,
     [Parameter]
     public string? ColumnId { get; set; }
 
-    [Parameter]
-    public bool UseCustomHeaderTemplate { get; set; } = true;
-
-    protected override void OnParametersSet()
-    {
-        base.OnParametersSet();
-
-        if (UseCustomHeaderTemplate)
-        {
-            HeaderCellItemTemplate = AspireFluentDataGridHeaderCell.RenderHeaderContent(Grid);
-        }
-    }
-
     protected override bool ShouldRender()
     {
         if (ColumnManager is not null && ColumnId is not null && !ColumnManager.IsColumnVisible(ColumnId))

src/Aspire.Dashboard/Components/Controls/Grid/AspireTemplateColumn.cs

@@ -14,19 +14,6 @@ public class AspireTemplateColumn<TGridItem> : TemplateColumn<TGridItem>, IAspir
     [Parameter]
     public string? ColumnId { get; set; }
 
-    [Parameter]
-    public bool UseCustomHeaderTemplate { get; set; } = true;
-
-    protected override void OnParametersSet()
-    {
-        base.OnParametersSet();
-
-        if (UseCustomHeaderTemplate)
-        {
-            HeaderCellItemTemplate = AspireFluentDataGridHeaderCell.RenderHeaderContent(Grid);
-        }
-    }
-
     protected override bool ShouldRender()
     {
         if (ColumnManager is not null && ColumnId is not null && !ColumnManager.IsColumnVisible(ColumnId))

src/Aspire.Dashboard/Components/Controls/Grid/IAspireColumn.cs

@@ -8,6 +8,4 @@ internal interface IAspireColumn
     public GridColumnManager? ColumnManager { get; set; }
 
     public string? ColumnId { get; set; }
-
-    public bool UseCustomHeaderTemplate { get; set; }
 }

src/Aspire.Dashboard/Components/Controls/GridValue.razor.cs

@@ -7,6 +7,7 @@
 using Aspire.Dashboard.Resources;
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons;
 using Microsoft.JSInterop;
 
 namespace Aspire.Dashboard.Components.Controls;

src/Aspire.Dashboard/Components/Controls/GridValue.razor.css

@@ -14,7 +14,7 @@
     margin-left: 0; /* by default there shouldn't be a margin on the button container because it has no contents */
 }
 
-::deep .masking-enabled .button-container, fluent-data-grid-cell:hover .button-container, fluent-data-grid-cell:focus-within .button-container {
+::deep .masking-enabled .button-container, td:hover .button-container, td:focus-within .button-container {
     /* the button container always has contents if masking is enabled or it is hovered over, so display margin */
     margin-left: calc((6 + (var(--design-unit) * var(--density))) * 1px);
 }
@@ -26,7 +26,7 @@
     display: inline-block;
 }
 
-fluent-data-grid-cell:hover .defaultHidden, fluent-data-grid-cell:focus-within .defaultHidden {
+td:hover .defaultHidden, td:focus-within .defaultHidden {
     opacity: 1; /* safari has a bug where hover is not always called on an invisible element, so we use opacity instead */
     width: auto;
 }

src/Aspire.Dashboard/Components/Controls/PropertyGrid.razor

@@ -3,14 +3,17 @@
 @typeparam TItem where TItem : IPropertyGridItem
 @inject IStringLocalizer<ControlsStrings> Loc
 
-<FluentDataGrid ResizeLabel="@AspireFluentDataGridHeaderCell.GetResizeLabel(Loc)"
+<FluentDataGrid ColumnResizeLabels="@_resizeLabels"
+                ColumnSortLabels="@_sortLabels"
+                HeaderCellAsButtonWithMenu="true"
                 ResizeType="DataGridResizeType.Discrete"
                 Items="@Items"
                 ItemKey="@ItemKey"
                 ResizableColumns="true"
                 Style="width:100%"
                 GenerateHeader="@GenerateHeader"
                 GridTemplateColumns="@GridTemplateColumns"
+                RowSize="DataGridRowSize.Medium"
                 ShowHover="true"
                 Class="@Class">
     <AspireTemplateColumn Title="@(NameColumnTitle ?? Loc[nameof(ControlsStrings.NameColumnHeader)])" Class="nameColumn" SortBy="@NameSort" Sortable="@IsNameSortable">

src/Aspire.Dashboard/Components/Controls/PropertyGrid.razor.cs

@@ -1,6 +1,7 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
+using Aspire.Dashboard.Utils;
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
 
@@ -133,11 +134,19 @@ public partial class PropertyGrid<TItem> where TItem : IPropertyGridItem
     public RenderFragment<TItem> ExtraValueContent { get; set; } = s_emptyChildContent;
 
     [Parameter]
-    public GenerateHeaderOption GenerateHeader { get; set; } = GenerateHeaderOption.Sticky;
+    public GenerateHeaderOption GenerateHeader { get; set; } = GenerateHeaderOption.Default;
 
     [Parameter]
     public string? Class { get; set; }
 
+    private ColumnResizeLabels _resizeLabels = ColumnResizeLabels.Default;
+    private ColumnSortLabels _sortLabels = ColumnSortLabels.Default;
+
+    protected override void OnInitialized()
+    {
+        (_resizeLabels, _sortLabels) = DashboardUIHelpers.CreateGridLabels(Loc);
+    }
+
     // Return null if empty so GridValue knows there is no template.
     private RenderFragment? GetContentAfterValue(TItem context) => ContentAfterValue == s_emptyChildContent
         ? null

src/Aspire.Dashboard/Components/Controls/ResourceActions.razor.cs

@@ -7,6 +7,7 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
 using Microsoft.FluentUI.AspNetCore.Components;
+using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons;
 
 namespace Aspire.Dashboard.Components;