delete app for retreival apps

daxa-ai · Jul 25, 2024 · cc31fc4 · cc31fc4
1 parent a0d6bd7
commit cc31fc4
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 62 deletions.
diff --git a/pebblo/app/pebblo-ui/src/components/deleteApp.js b/pebblo/app/pebblo-ui/src/components/deleteApp.js
@@ -0,0 +1,63 @@
+import { DeleteIcon } from "../icons/index.js";
+import { showSnackbar } from "../services/snackbar.js";
+import { Button, Dialog } from "../components/index.js";
+import { CLICK, LOAD } from "../constants/enums.js";
+import { DELETE_APP_ROUTE } from "../constants/routesConstant.js";
+import { DELETE_APP } from "../services/delete.js";
+
+const SUCCESS_CODE = 200;
+
+export const DeleteAppButton = (props) => {
+  const appName = props?.appName || "";
+  const redirectAfterDelete = props?.redirectRoute || "";
+  const DeleteAppDialogBody = () => {
+    window.addEventListener(LOAD, function () {
+      const delete_icon = document.getElementById("delete_confirm_btn");
+      const DIALOG = document.getElementById("delete_app_dialog");
+      delete_icon?.addEventListener(CLICK, async function () {
+        const res = await DELETE_APP(`${DELETE_APP_ROUTE}?app_name=${appName}`);
+        if (res?.status === SUCCESS_CODE) {
+          DIALOG.close();
+          showSnackbar("App deleted successfully", () => {
+            window.location.href = redirectAfterDelete;
+          });
+        } else {
+          DIALOG.close();
+          showSnackbar("Failed to delete app");
+        }
+      });
+    });
+
+    return /*html*/ `
+         <div>
+          <div class="flex flex-col gap-1">
+            <div class="font-14 inter">Are you sure you want to delete this app?</div>
+          </div>
+          <div class="text-right">
+            ${Button({
+              class: "ml-auto",
+              id: `delete_confirm_btn`,
+              variant: "contained",
+              btnText: "Confirm",
+              color: "critical",
+            })}
+          </div>
+         </div>
+        `;
+  };
+  return `<div> ${Button({
+    variant: "text",
+    btnText: "Delete App",
+    startIcon: DeleteIcon({ color: "critical" }),
+    id: "delete_app_btn",
+    color: "critical",
+  })}
+   ${Dialog({
+     title: "Delete App",
+     maxWidth: "sm",
+     dialogBody: DeleteAppDialogBody(),
+     dialogId: "delete_app_dialog",
+     btnId: "delete_app_btn",
+   })}
+  </div>`;
+};
diff --git a/pebblo/app/pebblo-ui/src/components/index.js b/pebblo/app/pebblo-ui/src/components/index.js
@@ -17,6 +17,7 @@ import { Navbar } from "./navbar.js";
 import { RetrievalDetails } from "./retrievalDetails.js";
 import { EmptyState } from "./emptyState.js";
 import { ProgressBar } from "./progressBar.js";
+import { DeleteAppButton } from "./deleteApp.js";
 
 export {
   AccordionDetails,
@@ -43,4 +44,5 @@ export {
   Thead,
   Td,
   ViewMore,
+  DeleteAppButton,
 };
diff --git a/pebblo/app/pebblo-ui/src/icons/index.js b/pebblo/app/pebblo-ui/src/icons/index.js
@@ -8,6 +8,7 @@ import StraightIcon from "./straightIcon.js";
 import CloseIcon from "./closeIcon.js";
 import SearchIcon from "./searchIcon.js";
 import HelpIcon from "./helpIcon.js";
+import DeleteIcon from "./deleteIcon.js";
 
 export {
   DownloadIcon,
@@ -20,4 +21,5 @@ export {
   CloseIcon,
   SearchIcon,
   HelpIcon,
+  DeleteIcon,
 };
diff --git a/pebblo/app/pebblo-ui/src/pages/appDetailsPage.js b/pebblo/app/pebblo-ui/src/pages/appDetailsPage.js
@@ -19,22 +19,14 @@ import {
 } from "../constants/constant.js";
 import { CLICK, LOAD, PATH } from "../constants/enums.js";
 import { GET_FILE } from "../services/get.js";
-import {
-  DASHBOARD_ROUTE,
-  DELETE_APP_ROUTE,
-  GET_REPORT,
-} from "../constants/routesConstant.js";
+import { DASHBOARD_ROUTE, GET_REPORT } from "../constants/routesConstant.js";
 import {
   CheckIcon,
   CopyIcon,
   DownloadIcon,
   LoadHistoryIcon,
 } from "../icons/index.js";
-import DeleteIcon from "../icons/deleteIcon.js";
-import { DELETE_APP } from "../services/delete.js";
-import { showSnackbar } from "../services/snackbar.js";
-
-const SUCCESS_CODE = 200;
+import { DeleteAppButton } from "../components/index.js";
 
 const DialogBody = () => {
   return /*html*/ `
@@ -47,44 +39,6 @@ const DialogBody = () => {
   `;
 };
 
-const DeleteAppDialogBody = () => {
-  window.addEventListener(LOAD, function () {
-    const delete_icon = document.getElementById("delete_confirm_btn");
-    const DIALOG = document.getElementById("delete_app_dialog");
-    delete_icon?.addEventListener(CLICK, async function () {
-      const res = await DELETE_APP(
-        `${DELETE_APP_ROUTE}?app_name=${APP_DATA?.name}`
-      );
-      if (res.status === SUCCESS_CODE) {
-        DIALOG.close();
-        showSnackbar("App deleted successfully", () => {
-          window.location.href = DASHBOARD_ROUTE;
-        });
-      } else {
-        DIALOG.close();
-        showSnackbar("Failed to delete app");
-      }
-    });
-  });
-
-  return /*html*/ `
-   <div>
-    <div class="flex flex-col gap-1">
-      <div class="font-14 inter">Are you sure you want to delete this app?</div>
-    </div>
-    <div class="text-right">
-      ${Button({
-        class: "ml-auto",
-        id: `delete_confirm_btn`,
-        variant: "contained",
-        btnText: "Confirm",
-        color: "critical",
-      })}
-    </div>
-   </div>
-  `;
-};
-
 export function AppDetailsPage() {
   window.addEventListener(LOAD, function () {
     const download_icon = document.getElementById("download_report_btn");
@@ -141,13 +95,10 @@ export function AppDetailsPage() {
             color: "primary",
           })}
           <div class="divider mt-2 mb-2"></div>
-          ${Button({
-            variant: "text",
-            btnText: "Delete App",
-            startIcon: DeleteIcon({ color: "critical" }),
-            id: "delete_app_btn",
-            color: "critical",
-          })}
+         ${DeleteAppButton({
+           appName: APP_DATA?.name,
+           redirectRoute: DASHBOARD_ROUTE,
+         })}
         </div>
       </div>
       ${AccordionDetails({
@@ -188,13 +139,6 @@ export function AppDetailsPage() {
         dialogId: "load_history_dialog",
         btnId: "load_history_dialog_btn",
       })}
-      ${Dialog({
-        title: "Delete App",
-        maxWidth: "sm",
-        dialogBody: DeleteAppDialogBody(),
-        dialogId: "delete_app_dialog",
-        btnId: "delete_app_btn",
-      })}
    </div>
     `;
 }
diff --git a/pebblo/app/pebblo-ui/src/pages/safeRetrievalAppDetails.js b/pebblo/app/pebblo-ui/src/pages/safeRetrievalAppDetails.js
@@ -1,6 +1,7 @@
 import {
   AccordionDetails,
   AccordionSummary,
+  DeleteAppButton,
   KeyValue,
   Tabs,
 } from "../components/index.js";
@@ -13,6 +14,7 @@ import {
   TAB_PANEL_ARR_APP_DETAILS_RETRIEVAL,
 } from "../constants/constant.js";
 import { PATH } from "../constants/enums.js";
+import { SAFE_RETRIEVAL_ROUTE } from "../constants/routesConstant.js";
 import { capitalizeFirstLetter, getFormattedDate } from "../util.js";
 
 export function SafeRetrievalAppDetails(props) {
@@ -31,6 +33,12 @@ export function SafeRetrievalAppDetails(props) {
          </div>
        </div>
     </div>
+    <div>
+      ${DeleteAppButton({
+        appName: APP_DATA?.name,
+        redirectRoute: SAFE_RETRIEVAL_ROUTE,
+      })}
+    </div>
   </div>
   ${AccordionDetails({
     children: /*html*/ `<div class="grid grid-cols-4 row-gap-3 col-gap-3 w-full">