Use DetailsPage for Playground page (#1243)

* refactor: use DetailsPage for Playground page Signed-off-by: Philippe Martin <[email protected]> * fix: unit tests Signed-off-by: Philippe Martin <[email protected]> --------- Signed-off-by: Philippe Martin <[email protected]>
containers · Jun 19, 2024 · 121238b · 121238b
1 parent db12f83
commit 121238b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/packages/frontend/src/pages/Playground.spec.ts b/packages/frontend/src/pages/Playground.spec.ts
@@ -99,11 +99,10 @@ test('should display playground and model names in header', async () => {
   });
 
   await waitFor(() => {
-    const header = screen.getByRole('region', { name: 'header' });
-    expect(header).toBeInTheDocument();
-    const title = within(header).getAllByText('Playground 1')[0];
+    // TODO: restrict to header when https://github.com/containers/podman-desktop/issues/7740 is fixed
+    const title = screen.getAllByText('Playground 1')[0];
     expect(title).toBeInTheDocument();
-    const subtitle = within(header).getByLabelText('Model name');
+    const subtitle = screen.getByLabelText('Model name');
     expect(subtitle).toBeInTheDocument();
     expect(subtitle.textContent).equals('Model 1');
   });

diff --git a/packages/frontend/src/pages/Playground.svelte b/packages/frontend/src/pages/Playground.svelte
@@ -2,7 +2,6 @@
 import { conversations } from '../stores/conversations';
 import { studioClient } from '/@/utils/client';
 import { isAssistantChat, isPendingChat, isUserChat, isSystemPrompt } from '@shared/src/models/IPlaygroundMessage';
-import NavPage from '../lib/NavPage.svelte';
 import { catalog } from '../stores/catalog';
 import { afterUpdate } from 'svelte';
 import ContentDetailsLayout from '../lib/ContentDetailsLayout.svelte';
@@ -13,7 +12,7 @@ import ChatMessage from '../lib/conversation/ChatMessage.svelte';
 import SystemPromptBanner from '/@/lib/conversation/SystemPromptBanner.svelte';
 import { inferenceServers } from '/@/stores/inferenceServers';
 import { faCircleInfo, faMicrochip, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
-import { Button, Tooltip } from '@podman-desktop/ui-svelte';
+import { Button, Tooltip, DetailsPage } from '@podman-desktop/ui-svelte';
 import StatusIcon from '../lib/StatusIcon.svelte';
 import Badge from '../lib/Badge.svelte';
 import { router } from 'tinro';
@@ -134,14 +133,20 @@ function getSendPromptTitle(sendEnabled: boolean, status?: string, health?: stri
   }
   return undefined;
 }
+
+export function goToUpPage(): void {
+  router.goto('/playgrounds');
+}
 </script>
 
 {#if conversation}
-  <NavPage
-    lastPage="{{ name: 'Playgrounds', path: '/playgrounds' }}"
+  <DetailsPage
     title="{conversation?.name}"
-    searchEnabled="{false}"
-    contentBackground="bg-charcoal-500">
+    breadcrumbLeftPart="Playgrounds"
+    breadcrumbRightPart="{conversation?.name}"
+    breadcrumbTitle="Go back to Playgrounds"
+    on:close="{goToUpPage}"
+    on:breadcrumbClick="{goToUpPage}">
     <svelte:fragment slot="icon">
       <div class="mr-3">
         <StatusIcon
@@ -160,13 +165,13 @@ function getSendPromptTitle(sendEnabled: boolean, status?: string, health?: stri
         {/if}
       </div>
     </svelte:fragment>
-    <svelte:fragment slot="additional-actions">
+    <svelte:fragment slot="actions">
       <div class="bg-charcoal-800 rounded-lg">
         <ConversationActions conversation="{conversation}" />
       </div>
     </svelte:fragment>
     <svelte:fragment slot="content">
-      <div class="flex flex-col w-full h-full">
+      <div class="flex flex-col w-full h-full bg-charcoal-500">
         <div class="h-full overflow-auto" bind:this="{scrollable}">
           <ContentDetailsLayout detailsTitle="Settings" detailsLabel="settings">
             <svelte:fragment slot="content">
@@ -266,5 +271,5 @@ function getSendPromptTitle(sendEnabled: boolean, status?: string, health?: stri
         </div>
       </div>
     </svelte:fragment>
-  </NavPage>
+  </DetailsPage>
 {/if}