From 97b0e0ba4a38049242544b3f82bd6ca0b7f8ac2d Mon Sep 17 00:00:00 2001
From: Philippe Martin <phmartin@redhat.com>
Date: Tue, 18 Jun 2024 16:31:14 +0200
Subject: [PATCH] fix: use FormPage component for Create Service page

Signed-off-by: Philippe Martin <phmartin@redhat.com>
---
 .../frontend/src/pages/CreateService.svelte   | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/pages/CreateService.svelte b/packages/frontend/src/pages/CreateService.svelte
index e3bfc36fa..e8b6d7a7f 100644
--- a/packages/frontend/src/pages/CreateService.svelte
+++ b/packages/frontend/src/pages/CreateService.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-import NavPage from '/@/lib/NavPage.svelte';
 import { faExclamationCircle, faLocationArrow, faPlus, faPlusCircle } from '@fortawesome/free-solid-svg-icons';
 import { modelsInfo } from '/@/stores/modelsInfo';
 import type { ModelInfo } from '@shared/src/models/IModelInfo';
@@ -15,7 +14,7 @@ import { inferenceServers } from '/@/stores/inferenceServers';
 import ContainerConnectionStatusInfo from '../lib/notification/ContainerConnectionStatusInfo.svelte';
 import type { ContainerConnectionInfo } from '@shared/src/models/IContainerConnectionInfo';
 import { checkContainerConnectionStatus } from '../utils/connectionUtils';
-import { Button, ErrorMessage } from '@podman-desktop/ui-svelte';
+import { Button, ErrorMessage, FormPage } from '@podman-desktop/ui-svelte';
 
 // List of the models available locally
 let localModels: ModelInfo[];
@@ -124,14 +123,25 @@ onMount(async () => {
     processTasks(tasks);
   });
 });
+
+export function goToUpPage(): void {
+  router.goto('/services');
+}
+
 </script>
 
-<NavPage
-  lastPage="{{ name: 'Model Services', path: '/services' }}"
-  icon="{faPlus}"
+<FormPage
   title="Creating Model service"
-  searchEnabled="{false}"
-  loading="{containerPort === undefined}">
+  breadcrumbLeftPart="Model Services"
+  breadcrumbRightPart="Creating Model service"
+  breadcrumbTitle="Go back to Model Services"
+  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="{faPlus}" />
+    </div>
+  </svelte:fragment>
   <svelte:fragment slot="content">
     <div class="flex flex-col w-full">
       <!-- warning machine resources -->
@@ -149,7 +159,7 @@ onMount(async () => {
       {/if}
 
       <!-- form -->
-      <div class="bg-charcoal-800 m-5 space-y-6 px-8 sm:pb-6 xl:pb-8 rounded-lg h-fit">
+      <div class="bg-[var(--pd-content-card-bg)] m-5 space-y-6 px-8 sm:pb-6 xl:pb-8 rounded-lg h-fit">
         <div class="w-full">
           <!-- model input -->
           <label for="model" class="pt-4 block mb-2 text-sm font-bold text-gray-400">Model</label>
@@ -219,4 +229,4 @@ onMount(async () => {
       </div>
     </div>
   </svelte:fragment>
-</NavPage>
+</FormPage>