From e6ebd993dc0c4b71612635f15937862f55662c42 Mon Sep 17 00:00:00 2001
From: axel7083 <42176370+axel7083@users.noreply.github.com>
Date: Thu, 4 Jul 2024 17:00:43 +0200
Subject: [PATCH] chore(frontend): adopt status icon component from ui (#1332)

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>
---
 packages/frontend/package.json                |  2 +-
 .../frontend/src/lib/RecipeDetails.svelte     |  3 +-
 packages/frontend/src/lib/StatusIcon.svelte   | 35 -----------------
 packages/frontend/src/lib/StatusIcon.ts       | 19 ---------
 .../lib/table/application/ColumnStatus.svelte |  3 +-
 .../lib/table/model/ModelColumnIcon.svelte    |  4 +-
 .../lib/table/service/ServiceStatus.svelte    |  3 +-
 packages/frontend/src/pages/Playground.svelte |  3 +-
 packages/frontend/src/pages/applications.ts   |  5 +--
 yarn.lock                                     | 39 ++++---------------
 10 files changed, 17 insertions(+), 99 deletions(-)
 delete mode 100644 packages/frontend/src/lib/StatusIcon.svelte
 delete mode 100644 packages/frontend/src/lib/StatusIcon.ts

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index b5dad8a34..24cb99b08 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -12,7 +12,7 @@
     "watch": "vite --mode development build -w"
   },
   "dependencies": {
-    "@podman-desktop/ui-svelte": "1.12.0-202407021227-4f9d4c6",
+    "@podman-desktop/ui-svelte": "1.12.0-202407040932-c24ce23",
     "tinro": "^0.6.12"
   },
   "devDependencies": {
diff --git a/packages/frontend/src/lib/RecipeDetails.svelte b/packages/frontend/src/lib/RecipeDetails.svelte
index 5576a5e09..ad07c2525 100644
--- a/packages/frontend/src/lib/RecipeDetails.svelte
+++ b/packages/frontend/src/lib/RecipeDetails.svelte
@@ -16,9 +16,8 @@ import { findLocalRepositoryByRecipeId } from '/@/utils/localRepositoriesUtils';
 import { tasks } from '/@/stores/tasks';
 import { filterByLabel } from '/@/utils/taskUtils';
 import PodIcon from '/@/lib/images/PodIcon.svelte';
-import StatusIcon from '/@/lib/StatusIcon.svelte';
 import { getApplicationStatus, getApplicationStatusText } from '../pages/applications';
-import { Button, Spinner } from '@podman-desktop/ui-svelte';
+import { Button, Spinner, StatusIcon } from '@podman-desktop/ui-svelte';
 
 export let recipeId: string;
 export let modelId: string;
diff --git a/packages/frontend/src/lib/StatusIcon.svelte b/packages/frontend/src/lib/StatusIcon.svelte
deleted file mode 100644
index 8c04410c3..000000000
--- a/packages/frontend/src/lib/StatusIcon.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-import type { KnownStatus } from './StatusIcon';
-// status: one of RUNNING, STARTING, USED, CREATED, DELETING, or DEGRADED
-// any other status will result in a standard outlined box
-import { Spinner } from '@podman-desktop/ui-svelte';
-
-export let status: KnownStatus | string = '';
-export let icon: any = undefined;
-export let size = 20;
-
-$: solid = status === 'RUNNING' || status === 'STARTING' || status === 'USED' || status === 'DEGRADED';
-</script>
-
-<div class="grid place-content-center" style="position:relative">
-  <div
-    class="grid place-content-center rounded aspect-square text-xs"
-    class:bg-status-running="{status === 'RUNNING' || status === 'USED'}"
-    class:bg-status-starting="{status === 'STARTING'}"
-    class:bg-status-degraded="{status === 'DEGRADED'}"
-    class:border-2="{!solid && status !== 'DELETING'}"
-    class:p-0.5="{!solid}"
-    class:p-1="{solid}"
-    class:border-gray-700="{!solid}"
-    class:text-gray-700="{!solid}"
-    role="status"
-    title="{status}">
-    {#if status === 'DELETING'}
-      <Spinner size="1.4em" />
-    {:else if typeof icon === 'string'}
-      <span class="{icon}" aria-hidden="true"></span>
-    {:else}
-      <svelte:component this="{icon}" size="{size}" solid="{solid}" />
-    {/if}
-  </div>
-</div>
diff --git a/packages/frontend/src/lib/StatusIcon.ts b/packages/frontend/src/lib/StatusIcon.ts
deleted file mode 100644
index 0e92b8219..000000000
--- a/packages/frontend/src/lib/StatusIcon.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**********************************************************************
- * Copyright (C) 2024 Red Hat, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- ***********************************************************************/
-
-export type KnownStatus = 'RUNNING' | 'STARTING' | 'USED' | 'CREATED' | 'DELETING' | 'DEGRADED';
diff --git a/packages/frontend/src/lib/table/application/ColumnStatus.svelte b/packages/frontend/src/lib/table/application/ColumnStatus.svelte
index 773ec439c..8703c1a68 100644
--- a/packages/frontend/src/lib/table/application/ColumnStatus.svelte
+++ b/packages/frontend/src/lib/table/application/ColumnStatus.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 import { getApplicationStatus } from '../../../pages/applications';
 import type { ApplicationState } from '@shared/src/models/IApplicationState';
-import StatusIcon from '../../StatusIcon.svelte';
 import PodIcon from '../../images/PodIcon.svelte';
-import { Spinner } from '@podman-desktop/ui-svelte';
+import { Spinner, StatusIcon } from '@podman-desktop/ui-svelte';
 export let object: ApplicationState;
 
 $: status = getApplicationStatus(object);
diff --git a/packages/frontend/src/lib/table/model/ModelColumnIcon.svelte b/packages/frontend/src/lib/table/model/ModelColumnIcon.svelte
index 44ea78323..9069a5d32 100644
--- a/packages/frontend/src/lib/table/model/ModelColumnIcon.svelte
+++ b/packages/frontend/src/lib/table/model/ModelColumnIcon.svelte
@@ -3,7 +3,9 @@ import type { ModelInfo } from '@shared/src/models/IModelInfo';
 import ModelWhite from '../../icons/ModelWhite.svelte';
 import { onMount } from 'svelte';
 import { inferenceServers } from '/@/stores/inferenceServers';
-import StatusIcon from '/@/lib/StatusIcon.svelte';
+
+import { StatusIcon } from '@podman-desktop/ui-svelte';
+
 export let object: ModelInfo;
 
 let status: string | undefined = undefined;
diff --git a/packages/frontend/src/lib/table/service/ServiceStatus.svelte b/packages/frontend/src/lib/table/service/ServiceStatus.svelte
index fb62c8bb1..597d8244a 100644
--- a/packages/frontend/src/lib/table/service/ServiceStatus.svelte
+++ b/packages/frontend/src/lib/table/service/ServiceStatus.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 import type { InferenceServer } from '@shared/src/models/IInference';
-import StatusIcon from '/@/lib/StatusIcon.svelte';
 import { studioClient } from '/@/utils/client';
-import { Spinner } from '@podman-desktop/ui-svelte';
+import { Spinner, StatusIcon } from '@podman-desktop/ui-svelte';
 import { ContainerIcon } from '@podman-desktop/ui-svelte/icons';
 export let object: InferenceServer;
 
diff --git a/packages/frontend/src/pages/Playground.svelte b/packages/frontend/src/pages/Playground.svelte
index 74c7bd335..53b85bad2 100644
--- a/packages/frontend/src/pages/Playground.svelte
+++ b/packages/frontend/src/pages/Playground.svelte
@@ -12,8 +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, DetailsPage } from '@podman-desktop/ui-svelte';
-import StatusIcon from '../lib/StatusIcon.svelte';
+import { Button, Tooltip, DetailsPage, StatusIcon } from '@podman-desktop/ui-svelte';
 import Badge from '../lib/Badge.svelte';
 import { router } from 'tinro';
 import ConversationActions from '../lib/conversation/ConversationActions.svelte';
diff --git a/packages/frontend/src/pages/applications.ts b/packages/frontend/src/pages/applications.ts
index 2b075bbf8..36ac91b24 100644
--- a/packages/frontend/src/pages/applications.ts
+++ b/packages/frontend/src/pages/applications.ts
@@ -17,13 +17,12 @@
  ***********************************************************************/
 
 import type { ApplicationState } from '@shared/src/models/IApplicationState';
-import type { KnownStatus } from '../lib/StatusIcon';
 
 /* returns the status of the AI application, to be used by <IconStatus> */
-export function getApplicationStatus(appState: ApplicationState): KnownStatus | 'UNKNOWN' {
+export function getApplicationStatus(appState: ApplicationState): string {
   const podStatus = appState.pod.Status.toUpperCase();
   if (['DEGRADED', 'STARTING', 'USED', 'DELETING', 'CREATED'].includes(podStatus)) {
-    return podStatus as KnownStatus;
+    return podStatus;
   }
   if (podStatus !== 'RUNNING') {
     return 'UNKNOWN';
diff --git a/yarn.lock b/yarn.lock
index 6d6e2974c..32f048c9c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -401,10 +401,10 @@
   resolved "https://registry.yarnpkg.com/@podman-desktop/tests-playwright/-/tests-playwright-1.11.1.tgz#0d9944367853ba81df828c633c6dae4a7a954409"
   integrity sha512-qwVOagtPopld3/LgZkGhl+HgexpCPrJ/uc1r/yR0bJk8Wiz2Ox+xGfljihav/8lAgHue0z6wI9hxgbVEmxaQnQ==
 
-"@podman-desktop/ui-svelte@1.12.0-202407021227-4f9d4c6":
-  version "1.12.0-202407021227-4f9d4c6"
-  resolved "https://registry.yarnpkg.com/@podman-desktop/ui-svelte/-/ui-svelte-1.12.0-202407021227-4f9d4c6.tgz#32320c66ecceef21d03ac333b736affd61870179"
-  integrity sha512-gHbrgopcOj6mET0HqGHjtLBnnFnUGRxtzJniVTogJGvI4VfprDuhXGbyjZMuZStAhg2zD6OegPLrxpAcBJd3Fg==
+"@podman-desktop/ui-svelte@1.12.0-202407040932-c24ce23":
+  version "1.12.0-202407040932-c24ce23"
+  resolved "https://registry.yarnpkg.com/@podman-desktop/ui-svelte/-/ui-svelte-1.12.0-202407040932-c24ce23.tgz#89cc1b6a6297d00e586f1f06ad598156a9dd3024"
+  integrity sha512-00IL3/XEZWDCiW/l4YrESMmUCs/5E+DLC7s2RKxPZIa0F3lch4ZyGabAyD0NLxq+YHQDHCMg3Ht4rXXWmYGClA==
   dependencies:
     "@fortawesome/fontawesome-free" "^6.5.2"
     "@fortawesome/free-brands-svg-icons" "^6.5.2"
@@ -4176,16 +4176,7 @@ std-env@^3.5.0:
   resolved "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz"
   integrity sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -4237,14 +4228,7 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -4864,16 +4848,7 @@ winreg@^1.2.5:
   resolved "https://registry.yarnpkg.com/winreg/-/winreg-1.2.5.tgz#b650383e89278952494b5d113ba049a5a4fa96d8"
   integrity sha512-uf7tHf+tw0B1y+x+mKTLHkykBgK2KMs3g+KlzmyMbLvICSHQyB/xOFjTT8qZ3oeTFyU7Bbj4FzXitGG6jvKhYw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==