From e9d60961ef66caa01ed94b2ef112e145197ff083 Mon Sep 17 00:00:00 2001
From: Philippe Martin <phmartin@redhat.com>
Date: Thu, 20 Jun 2024 09:29:41 +0200
Subject: [PATCH] refactor: use DetailsPage for Recipe details page (#1245)

Signed-off-by: Philippe Martin <phmartin@redhat.com>
---
 packages/frontend/src/pages/Recipe.svelte     | 76 +++++++++++--------
 .../frontend/src/utils/categoriesUtils.ts     |  2 +-
 2 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/packages/frontend/src/pages/Recipe.svelte b/packages/frontend/src/pages/Recipe.svelte
index a9741f622..4cdba8649 100644
--- a/packages/frontend/src/pages/Recipe.svelte
+++ b/packages/frontend/src/pages/Recipe.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-import NavPage from '/@/lib/NavPage.svelte';
 import { studioClient } from '/@/utils/client';
-import { Tab } from '@podman-desktop/ui-svelte';
+import { Tab, DetailsPage } from '@podman-desktop/ui-svelte';
 import Route from '/@/Route.svelte';
 import Card from '/@/lib/Card.svelte';
 import MarkdownRenderer from '/@/lib/markdown/MarkdownRenderer.svelte';
@@ -17,6 +16,7 @@ import { checkContainerConnectionStatus } from '../utils/connectionUtils';
 import { router } from 'tinro';
 import { InferenceType } from '@shared/src/models/IInference';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
+import Fa from 'svelte-fa';
 
 export let recipeId: string;
 
@@ -51,43 +51,55 @@ function setSelectedModel(modelId: string) {
   selectedModelId = modelId;
   studioClient.telemetryLogUsage('recipe.select-model', { 'recipe.id': recipe?.id, 'model.id': modelId });
 }
+
+export function goToUpPage(): void {
+  router.goto('/recipes');
+}
 </script>
 
-<NavPage
-  lastPage="{{ name: 'Recipes', path: '/recipes' }}"
+<DetailsPage
   title="{recipe?.name || ''}"
-  icon="{getIcon(recipe?.icon)}"
-  searchEnabled="{false}"
-  contentBackground="bg-charcoal-700">
+  breadcrumbLeftPart="Recipes"
+  breadcrumbRightPart="{recipe?.name || ''}"
+  breadcrumbTitle="Go back to Recipes"
+  on:close="{goToUpPage}"
+  on:breadcrumbClick="{goToUpPage}">
+  <svelte:fragment slot="icon">
+    <div class="rounded-full w-8 h-8 flex items-center justify-center">
+      <Fa size="1.125x" class="text-[var(--pd-content-header-icon)]" icon="{getIcon(recipe?.icon)}" />
+    </div>
+  </svelte:fragment>
   <svelte:fragment slot="tabs">
     <Tab title="Summary" url="/recipe/{recipeId}" selected="{$router.path === `/recipe/${recipeId}`}" />
     <Tab title="Models" url="/recipe/{recipeId}/models" selected="{$router.path === `/recipe/${recipeId}/models`}" />
   </svelte:fragment>
   <svelte:fragment slot="content">
-    <ContentDetailsLayout detailsTitle="AI App Details" detailsLabel="application details">
-      <svelte:fragment slot="header">
-        {#if connectionInfo}
-          <div class="px-4">
-            <ContainerConnectionStatusInfo connectionInfo="{connectionInfo}" background="dark" />
-          </div>
-        {/if}
-      </svelte:fragment>
-      <svelte:fragment slot="content">
-        <Route path="/">
-          <MarkdownRenderer source="{recipe?.readme}" />
-        </Route>
-        <Route path="/models">
-          <RecipeModels
-            models="{models}"
-            selected="{selectedModelId}"
-            recommended="{recipe?.recommended ?? []}"
-            setSelectedModel="{setSelectedModel}" />
-        </Route>
-      </svelte:fragment>
-      <svelte:fragment slot="details">
-        <RecipeDetails recipeId="{recipeId}" modelId="{selectedModelId}" />
-      </svelte:fragment>
-    </ContentDetailsLayout>
+    <div class="bg-[var(--pd-content-bg)] h-full overflow-y-auto">
+      <ContentDetailsLayout detailsTitle="AI App Details" detailsLabel="application details">
+        <svelte:fragment slot="header">
+          {#if connectionInfo}
+            <div class="px-4">
+              <ContainerConnectionStatusInfo connectionInfo="{connectionInfo}" background="dark" />
+            </div>
+          {/if}
+        </svelte:fragment>
+        <svelte:fragment slot="content">
+          <Route path="/">
+            <MarkdownRenderer source="{recipe?.readme}" />
+          </Route>
+          <Route path="/models">
+            <RecipeModels
+              models="{models}"
+              selected="{selectedModelId}"
+              recommended="{recipe?.recommended ?? []}"
+              setSelectedModel="{setSelectedModel}" />
+          </Route>
+        </svelte:fragment>
+        <svelte:fragment slot="details">
+          <RecipeDetails recipeId="{recipeId}" modelId="{selectedModelId}" />
+        </svelte:fragment>
+      </ContentDetailsLayout>
+    </div>
   </svelte:fragment>
   <svelte:fragment slot="subtitle">
     <div class="mt-2">
@@ -98,4 +110,4 @@ function setSelectedModel(modelId: string) {
       {/each}
     </div>
   </svelte:fragment>
-</NavPage>
+</DetailsPage>
diff --git a/packages/frontend/src/utils/categoriesUtils.ts b/packages/frontend/src/utils/categoriesUtils.ts
index 1bbd34309..a2ca81f79 100644
--- a/packages/frontend/src/utils/categoriesUtils.ts
+++ b/packages/frontend/src/utils/categoriesUtils.ts
@@ -19,7 +19,7 @@
 import type { IconDefinition } from '@fortawesome/free-regular-svg-icons';
 
 import { faAlignLeft, faEdit, faImages, faQuestion } from '@fortawesome/free-solid-svg-icons';
-export const getIcon = (scope: string | undefined): IconDefinition | undefined => {
+export const getIcon = (scope: string | undefined): IconDefinition => {
   switch (scope) {
     case 'natural-language-processing':
       return faAlignLeft;