[Admin/Playground] Add NuGet package for Fluent UI

.github/workflows/azure-dev-build-only.yml

@@ -59,10 +59,18 @@ jobs:
         dotnet test ./test/AzureOpenAIProxy.AppHost.Tests --logger "trx" --collect:"XPlat Code Coverage"
         dotnet test ./test/AzureOpenAIProxy.ApiApp.Tests --logger "trx" --collect:"XPlat Code Coverage"
 
-    # - name: Run integration tests
-    #   shell: bash
-    #   run: |
-    #     dotnet test ./test/AzureOpenAIProxy.PlaygroundApp.Tests --logger "trx" --collect:"XPlat Code Coverage"
+    - name: Run integration tests
+      shell: bash
+      run: |
+        dotnet run --project ./src/AzureOpenAIProxy.AppHost &
+
+        DOTNET_PID=$!
+
+        sleep 30
+
+        dotnet test ./test/AzureOpenAIProxy.PlaygroundApp.Tests --logger "trx" --collect:"XPlat Code Coverage"
+
+        kill $DOTNET_PID
 
     - name: Publish test results
       if: ${{ !cancelled() }}

.github/workflows/azure-dev.yml

@@ -67,10 +67,24 @@ jobs:
       run: |
         dotnet build
 
-    - name: Test solution
+    - name: Run unit tests
       shell: bash
       run: |
-        dotnet test --logger "trx" --collect:"XPlat Code Coverage"
+        dotnet test ./test/AzureOpenAIProxy.AppHost.Tests --logger "trx" --collect:"XPlat Code Coverage"
+        dotnet test ./test/AzureOpenAIProxy.ApiApp.Tests --logger "trx" --collect:"XPlat Code Coverage"
+
+    - name: Run integration tests
+      shell: bash
+      run: |
+        dotnet run --project ./src/AzureOpenAIProxy.AppHost &
+
+        DOTNET_PID=$!
+
+        sleep 30
+
+        dotnet test ./test/AzureOpenAIProxy.PlaygroundApp.Tests --logger "trx" --collect:"XPlat Code Coverage"
+
+        kill $DOTNET_PID
 
     - name: Publish test results
       uses: bibipkins/dotnet-test-reporter@main

Directory.Build.props

@@ -15,6 +15,7 @@
     <OpenTelemetryExtensionsVersion>1.*</OpenTelemetryExtensionsVersion>
     <OpenTelemetryInstrumentationVersion>1.*</OpenTelemetryInstrumentationVersion>
     <SwashbuckleVersion>6.*</SwashbuckleVersion>
+    <FluentUIVersion>4.*</FluentUIVersion>
 
     <CoverletVersion>6.*</CoverletVersion>
     <FluentAssertionsVersion>6.*</FluentAssertionsVersion>

src/AzureOpenAIProxy.ApiApp/AzureOpenAIProxy.ApiApp.csproj

@@ -1,10 +1,6 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <ImplicitUsings>enable</ImplicitUsings>
-
     <AssemblyName>AzureOpenAIProxy.ApiApp</AssemblyName>
     <RootNamespace>AzureOpenAIProxy.ApiApp</RootNamespace>
   </PropertyGroup>

src/AzureOpenAIProxy.AppHost/AzureOpenAIProxy.AppHost.csproj

@@ -2,11 +2,12 @@
 
   <PropertyGroup>
     <OutputType>Exe</OutputType>
-    <TargetFramework>net8.0</TargetFramework>
-    <ImplicitUsings>enable</ImplicitUsings>
-    <Nullable>enable</Nullable>
     <IsAspireHost>true</IsAspireHost>
+
     <UserSecretsId>f6c81741-4dbe-4a07-86e3-83a42810f5ec</UserSecretsId>
+
+    <AssemblyName>AzureOpenAIProxy.AppHost</AssemblyName>
+    <RootNamespace>AzureOpenAIProxy.AppHost</RootNamespace>
   </PropertyGroup>
 
   <ItemGroup>

src/AzureOpenAIProxy.PlaygroundApp/AzureOpenAIProxy.PlaygroundApp.csproj

@@ -1,17 +1,15 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
-    <Nullable>enable</Nullable>
-    <ImplicitUsings>enable</ImplicitUsings>
-
-
     <AssemblyName>AzureOpenAIProxy.PlaygroundApp</AssemblyName>
     <RootNamespace>AzureOpenAIProxy.PlaygroundApp</RootNamespace>
   </PropertyGroup>
 
   <ItemGroup>
     <PackageReference Include="Azure.AI.OpenAI" Version="$(AzureOpenAIVersion)" />
+    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="$(FluentUIVersion)" />
+    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Emoji" Version="$(FluentUIVersion)" />
+    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="$(FluentUIVersion)" />
   </ItemGroup>
 
   <ItemGroup>

src/AzureOpenAIProxy.PlaygroundApp/Components/App.razor

@@ -8,13 +8,15 @@
     <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
     <link rel="stylesheet" href="app.css" />
     <link rel="stylesheet" href="AzureOpenAIProxy.PlaygroundApp.styles.css" />
+    <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
     <link rel="icon" type="image/png" href="favicon.png" />
     <HeadOutlet />
 </head>
 
 <body>
     <Routes />
     <script src="_framework/blazor.web.js"></script>
+    <script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
 </body>
 
 </html>

src/AzureOpenAIProxy.PlaygroundApp/Components/Layout/MainLayout.razor

@@ -21,3 +21,8 @@
     <a href="" class="reload">Reload</a>
     <a class="dismiss">🗙</a>
 </div>
+
+<FluentToastProvider />
+<FluentDialogProvider />
+<FluentTooltipProvider />
+<FluentMessageBarProvider />

src/AzureOpenAIProxy.PlaygroundApp/Components/_Imports.razor

@@ -1,10 +1,16 @@
 @using System.Net.Http
 @using System.Net.Http.Json
+
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.AspNetCore.Components.Web
-@using static Microsoft.AspNetCore.Components.Web.RenderMode
 @using Microsoft.AspNetCore.Components.Web.Virtualization
+
+@using Microsoft.FluentUI.AspNetCore.Components
+
 @using Microsoft.JSInterop
+
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+
 @using AzureOpenAIProxy.PlaygroundApp
 @using AzureOpenAIProxy.PlaygroundApp.Components

src/AzureOpenAIProxy.PlaygroundApp/Program.cs

@@ -1,5 +1,7 @@
 using AzureOpenAIProxy.PlaygroundApp.Clients;
 
+using Microsoft.FluentUI.AspNetCore.Components;
+
 using App = AzureOpenAIProxy.PlaygroundApp.Components.App;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -10,6 +12,8 @@
 builder.Services.AddRazorComponents()
     .AddInteractiveServerComponents();
 
+builder.Services.AddFluentUIComponents();
+
 builder.Services.AddScoped<IOpenAIApiClient, OpenAIApiClient>();
 
 var app = builder.Build();

src/AzureOpenAIProxy.ServiceDefaults/AzureOpenAIProxy.ServiceDefaults.csproj

@@ -1,10 +1,10 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
-    <ImplicitUsings>enable</ImplicitUsings>
-    <Nullable>enable</Nullable>
     <IsAspireSharedProject>true</IsAspireSharedProject>
+
+    <AssemblyName>AzureOpenAIProxy.ServiceDefaults</AssemblyName>
+    <RootNamespace>AzureOpenAIProxy.ServiceDefaults</RootNamespace>
   </PropertyGroup>
 
   <ItemGroup>

test/AzureOpenAIProxy.AppHost.Tests/PlaygroundApp/Pages/HomePageTests.cs

@@ -0,0 +1,65 @@
+using System.Net;
+
+using AzureOpenAIProxy.AppHost.Tests.Fixtures;
+
+using FluentAssertions;
+
+namespace AzureOpenAIProxy.AppHost.Tests.PlaygroundApp.Pages;
+
+public class HomePageTests(AspireAppHostFixture host) : IClassFixture<AspireAppHostFixture>
+{
+    [Fact]
+    public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_OK()
+    {
+        // Arrange
+        using var httpClient = host.App!.CreateHttpClient("playgroundapp");
+
+        // Act
+        var response = await httpClient.GetAsync("/");
+
+        // Assert
+        response.StatusCode.Should().Be(HttpStatusCode.OK);
+    }
+
+    [Theory]
+    [InlineData("_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css")]
+    public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_CSS_Elements(string expected)
+    {
+        // Arrange
+        using var httpClient = host.App!.CreateHttpClient("playgroundapp");
+
+        // Act
+        var html = await httpClient.GetStringAsync("/");
+
+        // Assert
+        html.Should().Contain(expected);
+    }
+
+    [Theory]
+    [InlineData("_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js")]
+    public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_JavaScript_Elements(string expected)
+    {
+        // Arrange
+        using var httpClient = host.App!.CreateHttpClient("playgroundapp");
+
+        // Act
+        var html = await httpClient.GetStringAsync("/");
+
+        // Assert
+        html.Should().Contain(expected);
+    }
+
+    [Theory]
+    [InlineData("<div class=\"fluent-tooltip-provider\"></div>")]
+    public async Task Given_Resource_When_Invoked_Endpoint_Then_It_Should_Return_HTML_Elements(string expected)
+    {
+        // Arrange
+        using var httpClient = host.App!.CreateHttpClient("playgroundapp");
+
+        // Act
+        var html = await httpClient.GetStringAsync("/");
+
+        // Assert
+        html.Should().Contain(expected);
+    }
+}