chore: update podman desktop ui to latest and fix files (#3514)

Changed files to use snippets rather than fragments/slots. Some tests
and an api had to change due to snippets not rendering elements immediately.
Some interfaces needed an extra optional variable to stop linter from complaining.
Parent needed min-w-0 to allow carousel to hide overflow.

Signed-off-by: Brian <[email protected]>

Author: bmahabirbu

packages/frontend/package.json

@@ -16,7 +16,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@podman-desktop/ui-svelte": "1.16.0-202501131429-9076680fda2",
+    "@podman-desktop/ui-svelte": "1.21.0",
     "tinro": "^0.6.12",
     "filesize": "^11.0.2",
     "humanize-duration": "^3.32.2",

packages/frontend/src/App.svelte

@@ -69,7 +69,7 @@ onDestroy(() => {
     <div class="flex flex-row w-full h-full overflow-hidden">
       <Navigation meta={meta} />
 
-      <div class="flex flex-col w-full h-full">
+      <div class="flex flex-col w-full h-full min-w-0">
         <GPUPromotion />
 
         <!-- Dashboard -->

packages/frontend/src/lib/table/application/ApplicationTable.svelte

@@ -27,7 +27,7 @@ const columns: TableColumn<ApplicationState>[] = [
   }),
 ];
 const row = new TableRow<ApplicationState>({});
-let data: (ApplicationState & { selected?: boolean })[];
+let data: ApplicationState[] = [];
 onMount(() => {
   return applicationStates.subscribe(items => {
     data = filter ? filter(items) : items;

packages/frontend/src/lib/table/service/ServiceStatus.spec.ts

@@ -40,11 +40,12 @@ describe('transition statuses', () => {
           status: status,
           container: { containerId: 'dummyContainerId', engineId: 'dummyEngineId' },
           type: InferenceType.LLAMA_CPP,
+          labels: {},
         },
       });
 
-      const img = screen.getByRole('img');
-      expect(img).toBeDefined();
+      const spinner = screen.queryByRole('progressbar');
+      expect(spinner).toBeDefined();
 
       const button = screen.queryByRole('button');
       expect(button).toBeNull();
@@ -64,11 +65,12 @@ describe('stable statuses', () => {
           status: status,
           container: { containerId: 'dummyContainerId', engineId: 'dummyEngineId' },
           type: InferenceType.LLAMA_CPP,
+          labels: {},
         },
       });
 
-      const img = screen.queryByRole('img');
-      expect(img).toBeNull();
+      const spinner = screen.queryByRole('progressbar');
+      expect(spinner).toBeNull();
 
       const button = screen.getByRole('button');
       expect(button).toBeDefined();
@@ -89,11 +91,12 @@ test('defined health should not display a spinner', async () => {
       status: 'running',
       container: { containerId: 'dummyContainerId', engineId: 'dummyEngineId' },
       type: InferenceType.LLAMA_CPP,
+      labels: {},
     },
   });
 
-  const img = screen.queryByRole('img');
-  expect(img).toBeNull();
+  const spinner = screen.queryByRole('progressbar');
+  expect(spinner).toBeNull();
 
   const button = screen.getByRole('button');
   expect(button).toBeDefined();
@@ -112,6 +115,7 @@ test('click on status icon should redirect to container', async () => {
       status: 'running',
       container: { containerId: 'dummyContainerId', engineId: 'dummyEngineId' },
       type: InferenceType.LLAMA_CPP,
+      labels: {},
     },
   });
   // Get button and click on it
@@ -131,6 +135,7 @@ test('error status should show degraded', async () => {
       status: 'error',
       container: { containerId: 'dummyContainerId', engineId: 'dummyEngineId' },
       type: InferenceType.LLAMA_CPP,
+      labels: {},
     },
   });
   // Get button and click on it
@@ -146,6 +151,7 @@ test('running status with no healthcheck should show starting', async () => {
       status: 'running',
       container: { containerId: 'dummyContainerId', engineId: 'dummyEngineId' },
       type: InferenceType.LLAMA_CPP,
+      labels: {},
     },
   });
   // Get button and click on it

packages/frontend/src/pages/Applications.svelte

@@ -11,25 +11,27 @@ const openApplicationCatalog = (): void => {
 </script>
 
 <NavPage title="AI Apps" searchEnabled={false}>
-  <div slot="content" class="flex flex-col min-w-full min-h-full space-y-5">
-    <!-- showing running tasks -->
-    <div class="w-full">
-      <TasksBanner title="Pulling recipes" labels={{ 'recipe-pulling': undefined }} />
-    </div>
+  {#snippet content()}
+    <div class="flex flex-col min-w-full min-h-full space-y-5">
+      <!-- showing running tasks -->
+      <div class="w-full">
+        <TasksBanner title="Pulling recipes" labels={{ 'recipe-pulling': undefined }} />
+      </div>
 
-    <div class="flex w-full h-full">
-      <ApplicationTable>
-        <svelte:fragment slot="empty-screen">
-          <EmptyScreen
-            icon={faServer}
-            title="No application running"
-            message="There is no AI App running. You can go to Recipes page to start an application.">
-            <div class="flex gap-2 justify-center">
-              <Button type="link" on:click={openApplicationCatalog}>Recipes</Button>
-            </div>
-          </EmptyScreen>
-        </svelte:fragment>
-      </ApplicationTable>
+      <div class="flex w-full h-full">
+        <ApplicationTable>
+          <svelte:fragment slot="empty-screen">
+            <EmptyScreen
+              icon={faServer}
+              title="No application running"
+              message="There is no AI App running. You can go to Recipes page to start an application.">
+              <div class="flex gap-2 justify-center">
+                <Button type="link" on:click={openApplicationCatalog}>Recipes</Button>
+              </div>
+            </EmptyScreen>
+          </svelte:fragment>
+        </ApplicationTable>
+      </div>
     </div>
-  </div>
+  {/snippet}
 </NavPage>

packages/frontend/src/pages/CreateService.svelte

@@ -157,15 +157,14 @@ export function goToUpPage(): void {
   title="Creating Model service"
   breadcrumbLeftPart="Model Services"
   breadcrumbRightPart="Creating Model service"
-  breadcrumbTitle="Go back to Model Services"
   onclose={goToUpPage}
   onbreadcrumbClick={goToUpPage}>
-  <svelte:fragment slot="icon">
+  {#snippet 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">
+  {/snippet}
+  {#snippet content()}
     <div class="flex flex-col w-full">
       <!-- warning machine resources -->
       {#if containerProviderConnection}
@@ -211,7 +210,6 @@ export function goToUpPage(): void {
           <label for="containerPort" class="pt-4 block mb-2 font-bold text-[var(--pd-content-card-header-text)]"
             >Container port</label>
           <Input
-            type="number"
             value={String(containerPort ?? 0)}
             on:input={onContainerPortInput}
             class="w-full"
@@ -220,6 +218,7 @@ export function goToUpPage(): void {
             aria-label="Port input"
             disabled={loading}
             required />
+          <!-- Removed "type" above, svelte 5 "Input" no longer uses it -->
         </div>
         {#if errorMsg !== undefined || !containerProviderConnection}
           <ErrorMessage error={errorMsg ?? 'No running container engine found'} />
@@ -248,5 +247,5 @@ export function goToUpPage(): void {
         </footer>
       </div>
     </div>
-  </svelte:fragment>
+  {/snippet}
 </FormPage>

packages/frontend/src/pages/Dashboard.svelte

@@ -50,10 +50,10 @@ const openDiscussionsPage = (): void => {
 </script>
 
 <NavPage title="Welcome to Podman AI Lab" searchEnabled={false}>
-  <svelte:fragment slot="additional-actions">
+  {#snippet additionalActions()}
     <Button type="secondary" title="Open GitHub repository" on:click={openGithub} icon={faGithub}>Github</Button>
-  </svelte:fragment>
-  <svelte:fragment slot="content">
+  {/snippet}
+  {#snippet content()}
     <div class="flex flex-col min-w-full min-h-full text-[var(--pd-details-body-text)]">
       <div class="mt-4 px-5 space-y-5" aria-label="inner-content">
         <DashboardBanner class="rounded-md my-2 w-full" />
@@ -117,5 +117,5 @@ const openDiscussionsPage = (): void => {
         </p>
       </div>
     </div>
-  </svelte:fragment>
+  {/snippet}
 </NavPage>

packages/frontend/src/pages/ImportModel.svelte

@@ -108,15 +108,14 @@ function handleDragLeave(): void {
   title="Import Model"
   breadcrumbLeftPart="Models"
   breadcrumbRightPart="Import Model"
-  breadcrumbTitle="Go back to Models Catalog"
   onclose={goToUpPage}
   onbreadcrumbClick={goToUpPage}>
-  <svelte:fragment slot="icon">
+  {#snippet 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={faFileImport} />
     </div>
-  </svelte:fragment>
-  <svelte:fragment slot="content">
+  {/snippet}
+  {#snippet content()}
     <div class="flex m-5 flex-col w-full">
       <!-- Error banner -->
       <div aria-label="importError">
@@ -197,5 +196,5 @@ function handleDragLeave(): void {
         </div>
       </div>
     </div>
-  </svelte:fragment>
+  {/snippet}
 </FormPage>

packages/frontend/src/pages/InferenceServerDetails.svelte

@@ -199,29 +199,29 @@ function handleOnChange(): void {
   title="Service details"
   breadcrumbLeftPart="Model Services"
   breadcrumbRightPart="Service details"
-  breadcrumbTitle="Go back to Model Services"
   onclose={goToUpPage}
   onbreadcrumbClick={goToUpPage}>
-  <svelte:fragment slot="icon">
+  <!-- Removed breadcrumbTitle above, no longer needed for svelte 5 detailspage -->
+  {#snippet iconSnippet()}
     <div class="mr-3">
       {#if service !== undefined}
         <ServiceStatus object={service} />
       {/if}
     </div>
-  </svelte:fragment>
-  <svelte:fragment slot="subtitle">
+  {/snippet}
+  {#snippet subtitleSnippet()}
     <div class="flex gap-x-2 items-center text-[var(--pd-content-sub-header)]">
       {#if service}
         <span class="text-xs">{service.container.containerId}</span>
       {/if}
     </div>
-  </svelte:fragment>
-  <svelte:fragment slot="actions">
+  {/snippet}
+  {#snippet actionsSnippet()}
     {#if service !== undefined}
       <ServiceAction detailed object={service} />
     {/if}
-  </svelte:fragment>
-  <svelte:fragment slot="content">
+  {/snippet}
+  {#snippet contentSnippet()}
     <div class="h-full overflow-y-auto bg-[var(--pd-content-bg)]">
       <div class="flex flex-col min-w-full min-h-full">
         <div class="min-w-full min-h-full flex-1">
@@ -402,5 +402,5 @@ function handleOnChange(): void {
         </div>
       </div>
     </div>
-  </svelte:fragment>
+  {/snippet}
 </DetailsPage>

packages/frontend/src/pages/InferenceServers.svelte

@@ -47,15 +47,15 @@ function createNewService(): void {
 </script>
 
 <NavPage title="Model Services" searchEnabled={false}>
-  <svelte:fragment slot="additional-actions">
+  {#snippet additionalActions()}
     {#if selectedItemsNumber > 0}
       <Button title="Delete selected items" on:click={deleteSelected} icon={faTrash}
         >Delete {selectedItemsNumber} selected items</Button>
     {/if}
     <Button icon={faPlusCircle} title="Create a new model service" on:click={createNewService}
       >New Model Service</Button>
-  </svelte:fragment>
-  <svelte:fragment slot="content">
+  {/snippet}
+  {#snippet content()}
     <div class="flex min-w-full min-h-full">
       {#if data?.length > 0}
         <Table kind="service" data={data} columns={columns} row={row} bind:selectedItemsNumber={selectedItemsNumber} />
@@ -70,5 +70,5 @@ function createNewService(): void {
         </EmptyScreen>
       {/if}
     </div>
-  </svelte:fragment>
+  {/snippet}
 </NavPage>