Migrate dashboard to Fluent UI Blazor v5

Directory.Packages.props

@@ -6,6 +6,9 @@
   <PropertyGroup>
     <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
     <CentralPackageTransitivePinningEnabled>true</CentralPackageTransitivePinningEnabled>
+    <!-- Set this to false when switching Microsoft.FluentUI.AspNetCore.Components to a release package. -->
+    <MicrosoftFluentUIAspNetCoreComponentsVersion>5.0.0-preview.26251.2</MicrosoftFluentUIAspNetCoreComponentsVersion>
+    <MicrosoftFluentUIAspNetCoreComponentsIsPreview>true</MicrosoftFluentUIAspNetCoreComponentsIsPreview>
     <!-- The Npgsql versions used when using Npgsql EF Core on net8/net9. The major versions need to match between Npgsql and EF Core. -->
     <Npgsql8Version>8.0.9</Npgsql8Version>
     <Npgsql9Version>9.0.5</Npgsql9Version>
@@ -123,8 +126,8 @@
     <PackageVersion Include="Microsoft.Data.SqlClient" Version="7.0.2" />
     <PackageVersion Include="Microsoft.Data.SqlClient.Extensions.Azure" Version="7.0.2" />
     <PackageVersion Include="Microsoft.Data.Sqlite.Core" Version="10.0.11" />
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.14.4" />
-    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.14.4" />
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components" Version="$(MicrosoftFluentUIAspNetCoreComponentsVersion)" />
+    <PackageVersion Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="5.0.0-rc.6.26241.1" />
     <PackageVersion Include="Milvus.Client" Version="2.3.0-preview.1" /> <!-- No stable release available -->
     <PackageVersion Include="ModelContextProtocol" Version="1.3.0" />
     <PackageVersion Include="MongoDB.Driver" Version="3.9.0" />

NuGet.config

@@ -36,12 +36,12 @@
       <!-- These versions span dotnet-public and dotnet-tools. Map both sources at the same specificity so NuGet searches both. -->
       <package pattern="Microsoft.Diagnostics.NETCore.Client" />
       <package pattern="Microsoft.Diagnostics.Runtime" />
-      <!-- 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="*" />
+      <!-- Move these FluentUI mappings back to dotnet-public when v5 is public. -->
+      <package pattern="Microsoft.FluentUI.AspNetCore.Components" />
+      <package pattern="Microsoft.FluentUI.AspNetCore.Components.Icons" />
     </packageSource>
     <packageSource key="dotnet10">
       <package pattern="*" />

THIRD-PARTY-NOTICES.TXT

@@ -8,6 +8,31 @@ bring it to our attention. Post an issue or email us:
 
 The attached notices are provided for information only.
 
+License notice for IMask
+------------------------
+
+MIT License
+
+Copyright (c) 2016 uNmAnNeR
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
 License notice for plotly.js
 ----------------------------
 

benchmarks/Aspire.Dashboard.Benchmarks/Aspire.Dashboard.Benchmarks.csproj

@@ -15,6 +15,8 @@
   <ItemGroup>
     <PackageReference Include="BenchmarkDotNet" />
     <PackageReference Include="Microsoft.Data.Sqlite.Core" />
+    <!-- Preview package warning suppressions do not flow through the Aspire.Dashboard project reference. -->
+    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" PrivateAssets="all" NoWarn="NU3018;NU3027;NU3042" Condition="'$(MicrosoftFluentUIAspNetCoreComponentsIsPreview)' == 'true'" />
     <PackageReference Include="SQLitePCLRaw.bundle_e_sqlite3" />
   </ItemGroup>
 

playground/Stress/Stress.AppHost/AppHost.cs

@@ -51,9 +51,10 @@
     }
 }
 
+// Remove the initial values to test the unresolved parameters dialog.
 builder.AddParameter("testParameterResource", () => "value", secret: true);
-var apiKeyParam = builder.AddParameter("api-key", secret: true);
-var connectionStringParam = builder.AddParameter("db-connection-string");
+var apiKeyParam = builder.AddParameter("api-key", () => "value", secret: true);
+var connectionStringParam = builder.AddParameter("db-connection-string", () => "value");
 builder.AddContainer("hiddenContainer", "alpine")
     .WithHidden()
     .WithInitialState(new CustomResourceSnapshot

playground/Stress/Stress.AppHost/InteractionCommands.cs

@@ -236,8 +236,8 @@ public static IResourceBuilder<T> AddInteractionCommands<T>(this IResourceBuilde
                 var numberOfPeopleInput = new InteractionInput { Name = "NumberOfPeople", InputType = InputType.Number, Label = "Number of people", Placeholder = "Enter number of people", Value = "2", Required = true };
                 var inputs = new List<InteractionInput>
                 {
-                    new InteractionInput { Name = "Name", InputType = InputType.Text, Label = "Name", Placeholder = "Enter name", Required = true, MaxLength = 50 },
-                    new InteractionInput { Name = "Password", InputType = InputType.SecretText, Label = "Password", Placeholder = "Enter password", Required = true, MaxLength = 20 },
+                    new InteractionInput { Name = "Name", InputType = InputType.Text, Label = "Name", Description = "The name for the dinner reservation. Maximum 50 characters.", Placeholder = "Enter name", Required = true, MaxLength = 50 },
+                    new InteractionInput { Name = "Password", InputType = InputType.SecretText, Label = "Password", Description = "The password for the reservation. Maximum 20 characters.", Placeholder = "Enter password", Required = true, MaxLength = 20 },
                     dinnerInput,
                     numberOfPeopleInput,
                     requirementsInput,
@@ -275,6 +275,87 @@ public static IResourceBuilder<T> AddInteractionCommands<T>(this IResourceBuilde
 
                 return CommandResults.Success();
             })
+            .WithCommand("disabled-input-interaction", "Disabled input interactions", executeCommand: async commandContext =>
+            {
+                var interactionService = commandContext.Services.GetRequiredService<IInteractionService>();
+                var inputs = new List<InteractionInput>
+                {
+                    new InteractionInput
+                    {
+                        Name = "Text",
+                        InputType = InputType.Text,
+                        Label = "Text",
+                        Description = "The name for the dinner reservation.",
+                        Value = "Alex",
+                        Disabled = true
+                    },
+                    new InteractionInput
+                    {
+                        Name = "Password",
+                        InputType = InputType.SecretText,
+                        Label = "Password",
+                        Description = "The password for the reservation.",
+                        Value = "example-password",
+                        Disabled = true
+                    },
+                    new InteractionInput
+                    {
+                        Name = "Choice",
+                        InputType = InputType.Choice,
+                        Label = "Choice",
+                        Description = "The selected dinner from the available menu.",
+                        AllowCustomChoice = false,
+                        Options = [KeyValuePair.Create("pizza", "Pizza"), KeyValuePair.Create("salad", "Salad")],
+                        Value = "pizza",
+                        Disabled = true
+                    },
+                    new InteractionInput
+                    {
+                        Name = "CustomChoice",
+                        InputType = InputType.Choice,
+                        Label = "Custom choice",
+                        Description = "Dietary requirements, including values outside the suggested options.",
+                        AllowCustomChoice = true,
+                        Options = [KeyValuePair.Create("vegetarian", "Vegetarian"), KeyValuePair.Create("vegan", "Vegan")],
+                        Value = "Gluten-free",
+                        Disabled = true
+                    },
+                    new InteractionInput
+                    {
+                        Name = "Number",
+                        InputType = InputType.Number,
+                        Label = "Number of people",
+                        Description = "The number of guests included in the reservation.",
+                        Value = "2",
+                        Disabled = true
+                    },
+                    new InteractionInput
+                    {
+                        Name = "Boolean",
+                        InputType = InputType.Boolean,
+                        Label = "Remember me",
+                        Description = "Whether to remember these reservation details.",
+                        Value = "true",
+                        Disabled = true
+                    },
+                    new InteractionInput
+                    {
+                        Name = "File",
+                        InputType = InputType.File,
+                        Label = "Attachment",
+                        Description = "An attachment with additional reservation details.",
+                        Placeholder = "Select a file",
+                        Disabled = true
+                    }
+                };
+                var result = await interactionService.PromptInputsAsync(
+                    "Disabled inputs",
+                    "Reservation details",
+                    inputs,
+                    cancellationToken: commandContext.CancellationToken);
+
+                return result.Canceled ? CommandResults.Failure("Canceled") : CommandResults.Success();
+            })
             .WithCommand("choice-interaction", "Choice interactions", executeCommand: async commandContext =>
             {
                 var interactionService = commandContext.Services.GetRequiredService<IInteractionService>();

src/Aspire.Dashboard/Aspire.Dashboard.csproj

@@ -14,7 +14,7 @@
 
     <!-- This Application is a framework-dependent application that targets .NET 8.0. This means that the
     application is not able to run if the place where it is deployed does not have the .NET 8.0 runtime installed.
-    Given we want to be able to support people running on environments where they only have the 9.0 SDK/runtime installed,
+    Given we want to be able to support people running on environments where they only have a newer SDK/runtime installed,
     we allow roll-forward to the next major in order to support these customers.-->
     <RollForward>Major</RollForward>
 
@@ -62,7 +62,10 @@
     <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" />
     <PackageReference Include="Microsoft.Data.Sqlite.Core" />
     <PackageReference Include="SQLitePCLRaw.bundle_e_sqlite3" />
-    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" />
+    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components">
+      <!-- Daily Fluent UI previews are signed with an untrusted, untimestamped certificate. -->
+      <NoWarn Condition="'$(MicrosoftFluentUIAspNetCoreComponentsIsPreview)' == 'true'">NU3018;NU3027;NU3042</NoWarn>
+    </PackageReference>
     <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" />
     <PackageReference Include="OpenTelemetry.Exporter.OpenTelemetryProtocol" />
     <PackageReference Include="OpenTelemetry.Extensions.Hosting" />

src/Aspire.Dashboard/BlazorAssets.targets

@@ -18,18 +18,36 @@
     </ParameterGroup>
     <Task>
       <Using Namespace="System.IO" />
+      <Using Namespace="System.Threading" />
       <Code Type="Fragment" Language="cs">
 <![CDATA[
-foreach (var filePath in FilePaths)
+  using var mutex = new Mutex(initiallyOwned: false, "Aspire.Dashboard.BlazorWebJs");
+  try
 {
-    var sourceText = File.ReadAllText(filePath.ItemSpec);
-    var updatedText = sourceText.Replace(",isComposing:t.isComposing", string.Empty);
+    try
+    {
+      mutex.WaitOne();
+    }
+    catch (AbandonedMutexException)
+    {
+      // The abandoned mutex is now owned by this process, so the shared files can still be repaired.
+    }
 
-    if (updatedText != sourceText)
+    foreach (var filePath in FilePaths)
     {
+      var sourceText = File.ReadAllText(filePath.ItemSpec);
+      var updatedText = sourceText.Replace(",isComposing:t.isComposing", string.Empty);
+
+      if (updatedText != sourceText)
+      {
         File.WriteAllText(filePath.ItemSpec, updatedText);
+      }
     }
 }
+  finally
+  {
+    mutex.ReleaseMutex();
+  }
 ]]>
       </Code>
     </Task>

src/Aspire.Dashboard/Components/App.razor

@@ -10,44 +10,25 @@
     <base href="/" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link rel="stylesheet" href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" />
-    @* Preload the variable fonts so text paints in Geist without a fallback flash.
-       crossorigin is required for font preloads even when same-origin. *@
-    <link rel="preload" href="fonts/geist/Geist-Variable.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="preload" href="fonts/geist/GeistMono-Variable.woff2" as="font" type="font/woff2" crossorigin />
-    @* tokens.css must load before app.css so the --aspire-* primitives it defines are available to app.css. *@
-    <link rel="stylesheet" href="css/tokens.css" />
-    <link rel="stylesheet" href="css/app.css" />
+    <link rel="stylesheet" href="css/design.css" />
+    <link rel="stylesheet" href="css/controls.css" />
+    <link rel="stylesheet" href="css/layout.css" />
     <link rel="stylesheet" href="css/highlight.css" />
     <link rel="stylesheet" href="css/markdown.css" />
     <link rel="stylesheet" href="Aspire.Dashboard.styles.css" />
+    <script src="js/app-theme-bootstrap.js"></script>
 
     <HeadOutlet @rendermode="@(new InteractiveServerRenderMode(prerender: false))" />
-    <!-- Make the body background dark if dark mode will be enabled to prevent a flash of white
-         before fully rendered. This value is from --neutral-layer-2, but that custom
-         property isn't available at this point. -->
-    <style>
-        @@media (prefers-color-scheme: dark) {
-            body {
-                background-color: #272727;
-            }
-        }
-    </style>
-
 </head>
 
-<body class="before-upgrade"
-      data-scroll-to-bottom-label="@ControlsLoc[nameof(Aspire.Dashboard.Resources.ControlsStrings.ScrollToBottom)]">
+<body data-scroll-to-bottom-label="@ControlsLoc[nameof(Aspire.Dashboard.Resources.ControlsStrings.ScrollToBottom)]">
     <Routes @rendermode="@(new InteractiveServerRenderMode(prerender: false))" />
     <ReconnectModal />
+    <script src="js/imask-7.6.1.min.js"></script>
     <BlazorScript />
     <script src="js/app.js"></script>
     <script src="js/app-reconnect.js"></script>
 
-    @*
-        Directly reference theme and dependencies from HTML so they load quickly.
-        It's much faster to load them here than wait for module load from Blazor interop.
-        Load time is important here because the theme should be applied ASAP.
-    *@
     <script src="js/app-theme.js" type="module"></script>
     <script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module"></script>
 </body>