From 786d748558037b0d28bc589e8b94dc08d52a8a18 Mon Sep 17 00:00:00 2001
From: axel7083 <42176370+axel7083@users.noreply.github.com>
Date: Tue, 6 Feb 2024 11:19:15 +0100
Subject: [PATCH] feat: using podman-desktop modals instead of custom one
 (#210)

* feat: using podman-desktop modals instead of custom one

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

* fix: prettier

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

* fix: linter & comments

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

* fix: linter

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

* fix: resolving comment

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

* fix: prettier

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>

---------

Signed-off-by: axel7083 <42176370+axel7083@users.noreply.github.com>
---
 packages/backend/src/studio-api-impl.ts       | 26 ++++++++++++-
 .../lib/table/model/ModelColumnActions.svelte | 39 ++-----------------
 packages/shared/src/StudioAPI.ts              |  2 +-
 3 files changed, 28 insertions(+), 39 deletions(-)

diff --git a/packages/backend/src/studio-api-impl.ts b/packages/backend/src/studio-api-impl.ts
index 87efd751f..c81eee6d6 100644
--- a/packages/backend/src/studio-api-impl.ts
+++ b/packages/backend/src/studio-api-impl.ts
@@ -115,8 +115,30 @@ 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);
+
+    // Do not wait on the promise as the api would probably timeout before the user answer.
+    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).catch((err: unknown) => {
+            console.error('Something went wrong while deleting the models', err);
+            // Lets reloads the models (could fix the issue)
+            this.modelsManager.loadLocalModels().catch((err: unknown) => {
+              console.error('Cannot reload the models', err);
+            });
+          });
+        }
+      })
+      .catch((err: unknown) => {
+        console.error(`Something went wrong with confirmation modals`, err);
+      });
   }
 
   async getModelsDirectory(): Promise<string> {
diff --git a/packages/frontend/src/lib/table/model/ModelColumnActions.svelte b/packages/frontend/src/lib/table/model/ModelColumnActions.svelte
index 74fc37869..5ff31bdf8 100644
--- 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;
+  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
index 76b0b9bd2..885bee6f0 100644
--- 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>;