Pebblo UI - Delete App UI (#428)

* delete app UI * Add toast for delete messages
daxa-ai · Jul 24, 2024 · c314c44 · c314c44
1 parent 9c48eb5
commit c314c44
Show file tree

Hide file tree

Showing 8 changed files with 192 additions and 12 deletions.
diff --git a/pebblo/app/pebblo-ui/index.html b/pebblo/app/pebblo-ui/index.html
@@ -29,6 +29,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="snackbar"></div>
   </body>
   <script
     type="module"

diff --git a/pebblo/app/pebblo-ui/src/components/header.js b/pebblo/app/pebblo-ui/src/components/header.js
@@ -28,7 +28,7 @@ export function Header() {
           ? `<div>Server Version ${SERVER_VERSION}</div><div class="divider bg-main"></div>`
           : ""
       }
-      <a href="${DOCUMENTATION_URL}/pebblo_ui" target="_blank" class="cursor-pointer" >${HelpIcon(
+      <a href="${DOCUMENTATION_URL}/safe_loader" target="_blank" class="cursor-pointer" >${HelpIcon(
     {
       color: "white",
       size: "sm",

diff --git a/pebblo/app/pebblo-ui/src/constants/routesConstant.js b/pebblo/app/pebblo-ui/src/constants/routesConstant.js
@@ -4,4 +4,5 @@ export const SAFE_RETRIEVAL_ROUTE = PREFIX + "/safe_retrieval/";
 export const APP_DETAILS_ROUTE = PREFIX + "/app/";
 export const SAFE_RETRIEVAL_APP_ROUTE = SAFE_RETRIEVAL_ROUTE + "app/";
 export const GET_REPORT = PREFIX + "/report/";
-export const NOT_FOUND_ROUTE = PREFIX + "/not-found/";
+export const NOT_FOUND_ROUTE = PREFIX + "/not-found/";
+export const DELETE_APP_ROUTE = PREFIX + "/app/delete/";
diff --git a/pebblo/app/pebblo-ui/src/icons/deleteIcon.js b/pebblo/app/pebblo-ui/src/icons/deleteIcon.js
@@ -0,0 +1,12 @@
+const DeleteIcon = (props) => {
+  const id = props?.id || "";
+  const color = props?.color || "";
+  const className = props?.class || "";
+  const size = props?.size || "md";
+  return /*html*/ `<svg id="${id}" class="icon-${color} ${className} icon-size-${size}" viewBox="0 0 10 14" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.75381 13.5861C2.38405 13.5861 2.06832 13.4552 1.80662 13.1935C1.54492 12.9318 1.41406 12.6161 1.41406 12.2463V2.50277H0.414062V1.41946H3.99738V0.515625H7.99738V1.41946H11.5807V2.50277H10.5807V12.2373C10.5807 12.6226 10.4512 12.9437 10.1921 13.2007C9.93312 13.4576 9.61605 13.5861 9.24094 13.5861H2.75381ZM9.49738 2.50277H2.49738V12.2463C2.49738 12.3211 2.52142 12.3826 2.5695 12.4306C2.61758 12.4787 2.67902 12.5028 2.75381 12.5028H9.24094C9.30505 12.5028 9.36382 12.4761 9.41725 12.4226C9.47067 12.3692 9.49738 12.3104 9.49738 12.2463V2.50277ZM4.33394 11.0028H5.41725V4.00277H4.33394V11.0028ZM6.5775 11.0028H7.66081V4.00277H6.5775V11.0028Z"/>
+</svg>
+`;
+};
+
+export default DeleteIcon;
diff --git a/pebblo/app/pebblo-ui/src/pages/appDetailsPage.js b/pebblo/app/pebblo-ui/src/pages/appDetailsPage.js
@@ -19,13 +19,22 @@ import {
 } from "../constants/constant.js";
 import { CLICK, LOAD, PATH } from "../constants/enums.js";
 import { GET_FILE } from "../services/get.js";
-import { GET_REPORT } from "../constants/routesConstant.js";
+import {
+  DASHBOARD_ROUTE,
+  DELETE_APP_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;
 
 const DialogBody = () => {
   return /*html*/ `
@@ -38,6 +47,44 @@ 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");
@@ -62,11 +109,6 @@ export function AppDetailsPage() {
     }, 2000);
   }
 
-  // last updated date
-  // <div class="font-thin">Last Updated 13 Feb 2024
-  // </div>
-  // <div class="divider"></div>
-
   return /*html*/ `
     <div class="flex gap-6 flex-col h-full overflow-auto">
       <div class="flex justify-between">
@@ -98,6 +140,14 @@ export function AppDetailsPage() {
             id: "load_history_dialog_btn",
             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",
+          })}
         </div>
       </div>
       ${AccordionDetails({
@@ -138,6 +188,13 @@ 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/services/delete.js b/pebblo/app/pebblo-ui/src/services/delete.js
@@ -0,0 +1,11 @@
+const DELETE_METHOD = { method: "DELETE" };
+
+export const DELETE_APP = async (apiEndpoint) => {
+  var url = window.location.origin + apiEndpoint;
+  const data = fetch(url, DELETE_METHOD)
+    .then((res) => {
+      return res;
+    })
+    .catch((error) => console.log(error));
+  return data;
+};
diff --git a/pebblo/app/pebblo-ui/src/services/snackbar.js b/pebblo/app/pebblo-ui/src/services/snackbar.js
@@ -0,0 +1,9 @@
+export const showSnackbar = (message, callback, timeout = 2000) => {
+  let snackbar = document.getElementById("snackbar");
+  snackbar.innerHTML = message;
+  snackbar.className = "show";
+  setTimeout(function () {
+    snackbar.className = snackbar.className.replace("show", "");
+    callback();
+  }, timeout);
+};
diff --git a/pebblo/app/pebblo-ui/static/index.css b/pebblo/app/pebblo-ui/static/index.css
@@ -9,6 +9,7 @@
   --surface-60: #7e83a5;
   --surface-70: #ced0dc;
   --surface-80: #838282;
+  --critical: #f03844;
 }
 * {
   margin: 0;
@@ -48,6 +49,9 @@ svg.icon-primary {
 svg.icon-white {
   fill: white;
 }
+svg.icon-critical {
+  fill: var(--critical);
+}
 
 svg:focus {
   outline: none;
@@ -129,9 +133,6 @@ svg.icon-success {
 .w-auto {
   width: auto;
 }
-.w-fit {
-  width: fit-content;
-}
 
 /* <----------- FONT FAMILY -----------> */
 .inter {
@@ -399,7 +400,7 @@ svg.icon-success {
   opacity: 0.5;
 }
 .critical {
-  color: #f03844;
+  color: var(--critical);
 }
 
 /* <----------- FONT SIZE PROPERTY -----------> */
@@ -880,6 +881,11 @@ button.btn-contained-primary {
   color: white;
 }
 
+button.btn-contained-critical {
+  background-color: var(--critical);
+  color: white;
+}
+
 button.btn-contained-primary svg {
   fill: white;
 }
@@ -894,6 +900,11 @@ button.btn-text-primary {
   padding: 8px 10px;
 }
 
+button.btn-text-critical {
+  color: var(--critical);
+  padding: 8px 10px;
+}
+
 button.btn-contained-primary:hover {
   background-color: #4d61ef;
 }
@@ -903,6 +914,10 @@ button.btn-outlined-primary:hover {
   border: 1px solid #4d61ef;
 }
 
+button.btn-text-critical:hover {
+  background: #fff4f3;
+}
+
 button.btn-text-primary:hover {
   background: #f1f3ff80;
 }
@@ -1315,3 +1330,77 @@ dialog::backdrop {
   transition: 0.5s ease;
   width: 0px;
 }
+
+.text-right {
+  text-align: right;
+}
+
+/* SNACKBAR */
+
+#snackbar {
+  visibility: hidden;
+  min-width: 250px;
+  margin-left: -125px;
+  background-color: var(--main);
+  color: var(--surface-10);
+  text-align: center;
+  border-radius: 2px;
+  padding: 8px;
+  position: fixed;
+  z-index: 1;
+  left: 50%;
+  top: 30px;
+  font-size: 14px;
+  font-family: "Inter", sans-serif;
+  border-radius: 4px;
+}
+
+#snackbar.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+@-webkit-keyframes fadein {
+  from {
+    top: 0;
+    opacity: 0;
+  }
+  to {
+    top: 30px;
+    opacity: 1;
+  }
+}
+
+@keyframes fadein {
+  from {
+    top: 0;
+    opacity: 0;
+  }
+  to {
+    top: 30px;
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeout {
+  from {
+    top: 30px;
+    opacity: 1;
+  }
+  to {
+    top: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes fadeout {
+  from {
+    top: 30px;
+    opacity: 1;
+  }
+  to {
+    top: 0;
+    opacity: 0;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,6 +29,7 @@ @@
       </head>
       <body>
         <div id="root"></div>
+        <div id="snackbar"></div>
       </body>
       <script
         type="module"
@@ Expand Down @@