Update Fluent UI Blazor to v4.11.3 (#6840)

Co-authored-by: Eric Erhardt <[email protected]>
Co-authored-by: James Newton-King <[email protected]>

Author: 3 people

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;