Initial work for using Fluent UI Blazor v4.11.0

Aspire.sln

@@ -631,6 +631,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DaprServiceC", "playground\
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Dashboard", "Dashboard", "{830F7CA9-8E51-4D62-832F-91F53F85B7AE}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Microsoft.FluentUI.AspNetCore.Components", "..\..\FluentUI\fluentui-blazor\src\Core\Microsoft.FluentUI.AspNetCore.Components.csproj", "{A5BC27B2-FD07-BC9E-67C5-3353ACBDBFB5}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -1653,6 +1655,10 @@ Global
 		{B26653B9-439E-4850-A7F8-43C6E5121952}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{B26653B9-439E-4850-A7F8-43C6E5121952}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{B26653B9-439E-4850-A7F8-43C6E5121952}.Release|Any CPU.Build.0 = Release|Any CPU
+		{A5BC27B2-FD07-BC9E-67C5-3353ACBDBFB5}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{A5BC27B2-FD07-BC9E-67C5-3353ACBDBFB5}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{A5BC27B2-FD07-BC9E-67C5-3353ACBDBFB5}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{A5BC27B2-FD07-BC9E-67C5-3353ACBDBFB5}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

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 -->
@@ -50,7 +50,7 @@
     <PackageReference Include="Humanizer.Core" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.Certificate" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" />
-    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" />
+    <!--<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" />-->
     <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" />
   </ItemGroup>
 
@@ -250,4 +250,8 @@
     <Content Remove="wwwroot\js\README.md" />
     <None Include="wwwroot\js\README.md" />
   </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\..\..\..\FluentUI\fluentui-blazor\src\Core\Microsoft.FluentUI.AspNetCore.Components.csproj" />
+  </ItemGroup>
 </Project>

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

@@ -11,7 +11,9 @@
     {
         <div class="metrics-filters-section">
             <h5>@Loc[nameof(ControlsStrings.ChartContainerFiltersHeader)]</h5>
-            <FluentDataGrid ResizeLabel="@AspireFluentDataGridHeaderCell.GetResizeLabel(Loc)"
+            <FluentDataGrid ColumnResizeLabels="@_resizeLabels"
+                            ColumnSortLabels="@_sortLabels"
+                            HeaderCellAsButtonWithMenu="true"
                             ResizeType="DataGridResizeType.Discrete"
                             Items="@Queryable.AsQueryable(DimensionFilters)"
                             GridTemplateColumns="200px 1fr auto"

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

@@ -3,7 +3,9 @@
 
 using Aspire.Dashboard.Model;
 using Aspire.Dashboard.Otlp.Model;
+using Aspire.Dashboard.Resources;
 using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components;
 
 namespace Aspire.Dashboard.Components;
 
@@ -18,10 +20,27 @@ public partial class ChartFilters
     [Parameter, EditorRequired]
     public required List<DimensionFilterViewModel> DimensionFilters { get; set; }
 
+    private ColumnResizeLabels _resizeLabels = ColumnResizeLabels.Default;
+    private ColumnSortLabels _sortLabels = ColumnSortLabels.Default;
+
     public bool ShowCounts { get; set; }
 
     protected override void OnInitialized()
     {
+        _resizeLabels = ColumnResizeLabels.Default with
+        {
+            ExactLabel = @Loc[nameof(ControlsStrings.FluentDataGridHeaderCellResizeLabel)],
+            ResizeMenu = @Loc[nameof(ControlsStrings.FluentDataGridHeaderCellResizeButtonText)]
+
+        };
+        _sortLabels = ColumnSortLabels.Default with
+        {
+            SortMenu = Loc[nameof(ControlsStrings.FluentDataGridHeaderCellSortButtonText)],
+            SortMenuAscendingLabel = Loc[nameof(ControlsStrings.FluentDataGridHeaderCellSortAscendingButtonText)],
+            SortMenuDescendingLabel = Loc[nameof(ControlsStrings.FluentDataGridHeaderCellSortDescendingButtonText)]
+
+        };
+
         InstrumentViewModel.DataUpdateSubscriptions.Add(() =>
         {
             ShowCounts = InstrumentViewModel.ShowCount;

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/PropertyGrid.razor

@@ -3,7 +3,9 @@
 @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"

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

@@ -1,6 +1,6 @@
 // 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.Resources;
 using Microsoft.AspNetCore.Components;
 using Microsoft.FluentUI.AspNetCore.Components;
 
@@ -143,6 +143,26 @@ public partial class PropertyGrid<TItem> where TItem : IPropertyGridItem
     [Parameter]
     public string? Class { get; set; }
 
+    private ColumnResizeLabels _resizeLabels = ColumnResizeLabels.Default;
+    private ColumnSortLabels _sortLabels = ColumnSortLabels.Default;
+
+    protected override void OnInitialized()
+    {
+        _resizeLabels = ColumnResizeLabels.Default with
+        {
+            ExactLabel = @Loc[nameof(ControlsStrings.FluentDataGridHeaderCellResizeLabel)],
+            ResizeMenu = @Loc[nameof(ControlsStrings.FluentDataGridHeaderCellResizeButtonText)]
+
+        };
+        _sortLabels = ColumnSortLabels.Default with
+        {
+            SortMenu = Loc[nameof(ControlsStrings.FluentDataGridHeaderCellSortButtonText)],
+            SortMenuAscendingLabel = Loc[nameof(ControlsStrings.FluentDataGridHeaderCellSortAscendingButtonText)],
+            SortMenuDescendingLabel = Loc[nameof(ControlsStrings.FluentDataGridHeaderCellSortDescendingButtonText)]
+
+        };
+    }
+
     // 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/ResourceDetails.razor

@@ -155,7 +155,9 @@
                     </FluentBadge>
                 </div>
 
-                <FluentDataGrid ResizeLabel="@AspireFluentDataGridHeaderCell.GetResizeLabel(ControlStringsLoc)"
+                <FluentDataGrid ColumnResizeLabels="@_resizeLabels"
+                                ColumnSortLabels="@_sortLabels"
+                                HeaderCellAsButtonWithMenu="true"
                                 ResizeType="DataGridResizeType.Discrete"
                                 Items="@FilteredHealthReports"
                                 ItemKey="r => r.Name"

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

@@ -4,6 +4,7 @@
 using System.Collections.Concurrent;
 using System.Diagnostics;
 using Aspire.Dashboard.Model;
+using Aspire.Dashboard.Resources;
 using Aspire.Dashboard.Utils;
 using Google.Protobuf.WellKnownTypes;
 using Microsoft.AspNetCore.Components;
@@ -34,6 +35,9 @@ public partial class ResourceDetails
     private ResourceViewModel? _resource;
     private readonly HashSet<string> _unmaskedItemNames = new();
 
+    private ColumnResizeLabels _resizeLabels = ColumnResizeLabels.Default;
+    private ColumnSortLabels _sortLabels = ColumnSortLabels.Default;
+
     internal IQueryable<EnvironmentVariableViewModel> FilteredEnvironmentVariables =>
         Resource.Environment
             .Where(vm => (_showAll || vm.FromSpec) && ((IPropertyGridItem)vm).MatchesFilter(_filter))
@@ -122,6 +126,23 @@ protected override void OnParametersSet()
         }
     }
 
+    protected override void OnInitialized()
+    {
+        _resizeLabels = ColumnResizeLabels.Default with
+        {
+            ExactLabel = @Loc[nameof(ControlsStrings.FluentDataGridHeaderCellResizeLabel)],
+            ResizeMenu = @Loc[nameof(ControlsStrings.FluentDataGridHeaderCellResizeButtonText)]
+
+        };
+        _sortLabels = ColumnSortLabels.Default with
+        {
+            SortMenu = Loc[nameof(ControlsStrings.FluentDataGridHeaderCellSortButtonText)],
+            SortMenuAscendingLabel = Loc[nameof(ControlsStrings.FluentDataGridHeaderCellSortAscendingButtonText)],
+            SortMenuDescendingLabel = Loc[nameof(ControlsStrings.FluentDataGridHeaderCellSortDescendingButtonText)]
+
+        };
+    }
+
     private IEnumerable<ResourceDetailRelationship> GetRelationships()
     {
         if (ResourceByName == null)

src/Aspire.Dashboard/Components/Pages/Resources.razor

@@ -75,7 +75,9 @@
                 <Summary>
                     <GridColumnManager @ref="_manager" Columns="@_gridColumns">
                         <FluentDataGrid @ref="_dataGrid"
-                                        ResizeLabel="@AspireFluentDataGridHeaderCell.GetResizeLabel(ControlsStringsLoc)"
+                                        ColumnResizeLabels="@_resizeLabels"
+                                        ColumnSortLabels="@_sortLabels"
+                                        HeaderCellAsButtonWithMenu="true"
                                         ResizeType="DataGridResizeType.Discrete"
                                         Virtualize="true"
                                         GenerateHeader="GenerateHeaderOption.Sticky"