[Playground] playground page layout (#291)

Author: justinyoo

src/AzureOpenAIProxy.PlaygroundApp/Components/App.razor

@@ -5,10 +5,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
-    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
+    @* <link rel="stylesheet" href="bootstrap/bootstrap.min.css" /> *@
+    <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
     <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>

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

@@ -27,23 +27,23 @@ main {
         text-decoration: none;
     }
 
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
+        .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+            text-decoration: underline;
+        }
 
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+        .top-row ::deep a:first-child {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
 @media (max-width: 640.98px) {
     .top-row {
         justify-content: space-between;
     }
 
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
-    }
+        .top-row ::deep a, .top-row ::deep .btn-link {
+            margin-left: 0;
+        }
 }
 
 @media (min-width: 641px) {
@@ -64,11 +64,11 @@ main {
         z-index: 1;
     }
 
-    .top-row.auth ::deep a:first-child {
-        flex: 1;
-        text-align: right;
-        width: 0;
-    }
+        .top-row.auth ::deep a:first-child {
+            flex: 1;
+            text-align: right;
+            width: 0;
+        }
 
     .top-row, article {
         padding-left: 2rem !important;

src/AzureOpenAIProxy.PlaygroundApp/Components/Layout/NavMenu.razor.css

@@ -1,4 +1,4 @@
-.navbar-toggler {
+/*.navbar-toggler {
     appearance: none;
     cursor: pointer;
     width: 3.5rem;
@@ -94,12 +94,12 @@
         display: none;
     }
 
-    .nav-scrollable {
-        /* Never collapse the sidebar for wide screens */
-        display: block;
+    .nav-scrollable {*/
+/* Never collapse the sidebar for wide screens */
+/*display: block;*/
 
-        /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
+/* Allow sidebar to scroll for tall menus */
+/*height: calc(100vh - 3.5rem);
         overflow-y: auto;
     }
-}
+}*/

src/AzureOpenAIProxy.PlaygroundApp/Components/Pages/Playground.razor

@@ -1,7 +1,18 @@
 @page "/playground"
+@rendermode InteractiveServer
 
 <PageTitle>Playground Page</PageTitle>
 
-<h1>playground page!</h1>
+<FluentLayout>
+    <FluentHeader Style="padding-top: 5px;"><h1>Azure OpenAI Proxy Playground</h1></FluentHeader>
 
-<ConfigTabComponent @rendermode="InteractiveServer"/>
+    <FluentGrid Spacing="3" AdaptiveRendering="true" Justify="JustifyContent.FlexStart">
+        <FluentGridItem Class="config-grid" xs="12" sm="12" md="4" lg="4" xl="4" xxl="4">
+            <ConfigTabComponent @rendermode="InteractiveServer"/>
+        </FluentGridItem>
+
+        <FluentGridItem Class="chat-grid" xs="12" sm="12" md="8" lg="8" xl="8" xxl="8">
+            Chat Window
+        </FluentGridItem>
+    </FluentGrid>
+</FluentLayout>

src/AzureOpenAIProxy.PlaygroundApp/wwwroot/app.css

@@ -13,7 +13,7 @@ a, .btn-link {
 }
 
 .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
 }
 
 .content {

test/AzureOpenAIProxy.PlaygroundApp.Tests/Pages/PlaygroundPageTests.cs

@@ -1,3 +1,5 @@
+using FluentAssertions;
+
 using Microsoft.Playwright;
 using Microsoft.Playwright.NUnit;
 
@@ -17,6 +19,34 @@ public async Task SetUp()
         await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
     }
 
+    [Test]
+    public async Task Given_Page_When_Endpoint_Invoked_Then_It_Should_Show_Header()
+    {
+        // Arrange
+        var header = Page.Locator("div.layout")
+                         .Locator("header.header")
+                         .Locator("div.header-gutters")
+                         .Locator("h1");
+
+        // Act
+        var headerText = await header.TextContentAsync();
+
+        // Assert
+        headerText.Should().Be("Azure OpenAI Proxy Playground");
+    }
+
+    [Test]
+    [TestCase("config-grid")]
+    [TestCase("chat-grid")]
+    public async Task Given_Page_When_Endpoint_Invoked_Then_It_Should_Show_Panels(string id)
+    {
+        // Act
+        var panel = Page.Locator($"div.{id}");
+
+        // Assert
+        await Expect(panel).ToBeVisibleAsync();
+    }
+
     [Test]
     public async Task Given_ConfigTab_When_Endpoint_Invoked_Then_ConfigTab_Should_Be_Displayed()
     {