feat: using podman-desktop modals instead of custom one

Signed-off-by: axel7083 <[email protected]>
containers · Feb 1, 2024 · cb791a2 · cb791a2
1 parent 92b40e2
commit cb791a2
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 40 deletions.
diff --git a/packages/backend/src/studio-api-impl.ts b/packages/backend/src/studio-api-impl.ts
@@ -115,8 +115,18 @@ export class StudioApiImpl implements StudioAPI {
     return this.catalogManager.getCatalog();
   }
 
-  async deleteLocalModel(modelId: string): Promise<void> {
-    await this.modelsManager.deleteLocalModel(modelId);
+  async requestRemoveLocalModel(modelId: string): Promise<void> {
+    const modelInfo = this.modelsManager.getLocalModelInfo(modelId);
+
+    podmanDesktopApi.window.showWarningMessage(
+      `Are you sure you want to delete ${modelId} ? The following files will be removed from disk "${modelInfo.file}".`,
+      'Confirm',
+      'Cancel'
+    ).then((result: string) => {
+      if(result === 'Confirm') {
+        this.modelsManager.deleteLocalModel(modelId);
+      }
+    });
   }
 
   async getModelsDirectory(): Promise<string> {

diff --git a/packages/frontend/src/lib/table/model/ModelColumnActions.svelte b/packages/frontend/src/lib/table/model/ModelColumnActions.svelte
@@ -4,19 +4,12 @@ import { faTrash } from "@fortawesome/free-solid-svg-icons";
 import { faFolderOpen } from "@fortawesome/free-solid-svg-icons";
 import ListItemButtonIcon from "../../button/ListItemButtonIcon.svelte";
 import { studioClient } from "/@/utils/client";
-import Modal from "../../Modal.svelte";
-import Button from "../../button/Button.svelte";
 export let object: ModelInfo;
 
-let deleteConfirmVisible: boolean = false;
-
-function deleteModel() {
-  deleteConfirmVisible= true;
-}
-
-async function goDeleteModel() {
-  await studioClient.deleteLocalModel(object.id);
-  deleteConfirmVisible= false;
+const deleteModel = () => {
+  studioClient.requestRemoveLocalModel(object.id).catch((err) => {
+    console.error(`Something went wrong while trying to delete model ${String(err)}.`);
+  })
 }
 
 function openModelFolder() {
@@ -37,29 +30,3 @@ function openModelFolder() {
   title="Delete Model"
   enabled={!object.state}
 />
-
-{#if deleteConfirmVisible}
-  <Modal
-    on:close="{() => {
-      deleteConfirmVisible = false;
-    }}">
-    <div class="flex items-center justify-between bg-black px-5 py-4 border-b-2 border-violet-700">
-      <h1 class="text-xl font-bold">Delete a model</h1>
-
-      <button class="hover:text-gray-300 px-2 py-1" on:click="{() => deleteConfirmVisible = false}">
-        <i class="fas fa-times" aria-hidden="true"></i>
-      </button>
-    </div>
-    <div class="bg-charcoal-600 p-5 h-full flex flex-col justify-items-center">
-      <span class="pb-3">The folder on disk containing the model will be deleted, it contains:</span>
-      <ul class="list-disc ml-8 space-y-2">
-        <li>{object.file?.file}</li>
-      </ul>
-
-      <div class="pt-5 grid grid-cols-2 gap-10 place-content-center w-full">
-        <Button type="primary" on:click="{() => goDeleteModel()}">Delete</Button>
-        <Button type="secondary" on:click="{() => deleteConfirmVisible = false}">Cancel</Button>
-      </div>
-    </div>
-  </Modal>
-{/if}
diff --git a/packages/shared/src/StudioAPI.ts b/packages/shared/src/StudioAPI.ts
@@ -19,7 +19,7 @@ export abstract class StudioAPI {
   /**
    * Delete the folder containing the model from local storage
    */
-  abstract deleteLocalModel(modelId: string): Promise<void>;
+  abstract requestRemoveLocalModel(modelId: string): Promise<void>;
   abstract startPlayground(modelId: string): Promise<void>;
   abstract stopPlayground(modelId: string): Promise<void>;
   abstract askPlayground(modelId: string, prompt: string): Promise<number>;