Replace browser-native dialogs with custom Datalab components

webapp/cypress/support/commands.js

@@ -85,10 +85,8 @@ Cypress.Commands.add("deleteItems", (type, items_id) => {
   cy.get('[data-testid="selected-dropdown"]').click();
   cy.get('[data-testid="delete-selected-button"]').click();
 
-  cy.on("window:confirm", (text) => {
-    expect(text).to.contains(items_id);
-    return true;
-  });
+  cy.findByText("Confirm Deletion").should("exist");
+  cy.get('[data-testid="dialog-modal-confirm-button"]').click();
 
   items_id.forEach((item_id) => {
     cy.get(`[data-testid=${type}-table]`)

webapp/src/App.vue

@@ -1,7 +1,18 @@
 <template>
   <router-view />
+  <DialogContainer />
 </template>
 
+<script>
+import DialogContainer from "@/components/DialogContainer.vue";
+
+export default {
+  components: {
+    DialogContainer,
+  },
+};
+</script>
+
 <style>
 body {
   margin: 0rem !important; /* for some reason, tinymce sets margin 1rem globally :o */

webapp/src/components/CollectionSelect.vue

@@ -37,6 +37,8 @@
 </template>
 
 <script>
+import { DialogService } from "@/services/DialogService";
+
 import vSelect from "vue-select";
 import FormattedCollectionName from "@/components/FormattedCollectionName.vue";
 import { searchCollections, createNewCollection } from "@/server_fetch_utils.js";
@@ -145,9 +147,11 @@ export default {
           }
         } catch (error) {
           console.error("Error:", error);
-          alert(
-            "An error occurred while creating the collection. Please check that your desired collection ID is valid.",
-          );
+          DialogService.error({
+            title: "Collection Creation Failed",
+            message:
+              "An error occurred while creating the collection. Please check that your desired collection ID is valid.",
+          });
         }
       }
     },

webapp/src/components/CreateCollectionModal.vue

@@ -44,6 +44,8 @@
 </template>
 
 <script>
+import { DialogService } from "@/services/DialogService";
+
 import Modal from "@/components/Modal.vue";
 import ItemSelect from "@/components/ItemSelect.vue";
 import { createNewCollection } from "@/server_fetch_utils.js";
@@ -100,7 +102,10 @@ export default {
             console.log("error parsing error message", e);
           } finally {
             if (!id_error) {
-              alert("Error with creating new sample: " + error);
+              DialogService.error({
+                title: "Collection Creation Failed",
+                message: "Error with creating new collection: " + error,
+              });
             }
           }
         });

webapp/src/components/CreateEquipmentModal.vue

@@ -95,6 +95,8 @@
 </template>
 
 <script>
+import { DialogService } from "@/services/DialogService";
+
 import Modal from "@/components/Modal.vue";
 import ItemSelect from "@/components/ItemSelect.vue";
 import { createNewItem } from "@/server_fetch_utils.js";
@@ -189,7 +191,10 @@ export default {
             console.log("error parsing error message", e);
           } finally {
             if (!is_item_id_error) {
-              alert("Error with creating new equipment: " + error);
+              DialogService.error({
+                title: "Creation Error",
+                message: "Error with creating new equipment: " + error,
+              });
             }
           }
         });

webapp/src/components/CreateItemModal.vue

@@ -104,6 +104,8 @@
 </template>
 
 <script>
+import { DialogService } from "@/services/DialogService";
+
 import Modal from "@/components/Modal.vue";
 import ItemSelect from "@/components/ItemSelect.vue";
 import { createNewItem } from "@/server_fetch_utils.js";
@@ -208,7 +210,10 @@ export default {
             console.log("error parsing error message", e);
           } finally {
             if (!is_item_id_error) {
-              alert("Error with creating new item: " + error);
+              DialogService.error({
+                title: "Creation Error",
+                message: "Error with creating new item: " + error,
+              });
             }
           }
         });

webapp/src/components/DialogContainer.vue

@@ -0,0 +1,51 @@
+<template>
+  <DialogModal
+    v-if="currentDialog"
+    v-model:isVisible="isVisible"
+    :title="currentDialog.title"
+    :message="currentDialog.message"
+    :type="currentDialog.type"
+    :confirm-button-text="currentDialog.confirmButtonText"
+    :cancel-button-text="currentDialog.cancelButtonText"
+    :show-cancel-button="currentDialog.showCancelButton"
+    :show-close-button="currentDialog.showCloseButton"
+    :close-on-overlay-click="currentDialog.closeOnOverlayClick"
+    @confirm="handleConfirm"
+    @cancel="handleCancel"
+  />
+</template>
+
+<script>
+import { DialogService } from "@/services/DialogService";
+import DialogModal from "./DialogModal.vue";
+
+export default {
+  name: "DialogContainer",
+  components: {
+    DialogModal,
+  },
+  data() {
+    return {
+      isVisible: false,
+    };
+  },
+  computed: {
+    currentDialog() {
+      return DialogService.getState().currentDialog;
+    },
+  },
+  watch: {
+    currentDialog(newValue) {
+      this.isVisible = !!newValue;
+    },
+  },
+  methods: {
+    handleConfirm() {
+      DialogService.closeCurrentDialog(true);
+    },
+    handleCancel() {
+      DialogService.closeCurrentDialog(false);
+    },
+  },
+};
+</script>

webapp/src/components/DialogModal.vue

@@ -0,0 +1,132 @@
+<template>
+  <Teleport to="body">
+    <div v-if="isVisible" class="modal fade show d-block" @click.self="handleOverlayClick">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">{{ title }}</h5>
+            <button v-if="showCloseButton" type="button" class="close" @click="cancel">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="d-flex align-items-center">
+              <div v-if="type === 'error'" class="mr-3 text-danger">
+                <font-awesome-icon icon="exclamation-circle" size="2x" />
+              </div>
+              <div v-else-if="type === 'warning'" class="mr-3 text-warning">
+                <font-awesome-icon icon="exclamation-triangle" size="2x" />
+              </div>
+              <div v-else-if="type === 'info'" class="mr-3 text-info">
+                <font-awesome-icon icon="info-circle" size="2x" />
+              </div>
+              <div v-else-if="type === 'success'" class="mr-3 text-success">
+                <font-awesome-icon icon="check-circle" size="2x" />
+              </div>
+
+              <div class="flex-grow-1 d-flex align-items-center">
+                <!-- eslint-disable-next-line vue/no-v-html -->
+                <p v-if="message" class="mb-0" v-html="message"></p>
+                <slot></slot>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button
+              v-if="showCancelButton"
+              data-testid="dialog-modal-cancel-button"
+              type="button"
+              class="btn btn-secondary"
+              @click="cancel"
+            >
+              {{ cancelButtonText }}
+            </button>
+            <button
+              type="button"
+              data-testid="dialog-modal-confirm-button"
+              class="btn"
+              :class="confirmButtonClass"
+              @click="confirm"
+            >
+              {{ confirmButtonText }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="isVisible" class="modal-backdrop fade show"></div>
+  </Teleport>
+</template>
+
+<script>
+export default {
+  name: "DialogModal",
+  props: {
+    title: {
+      type: String,
+      default: "Dialog",
+    },
+    message: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "info",
+      validator: (value) => ["info", "warning", "error", "success", "confirm"].includes(value),
+    },
+    confirmButtonText: {
+      type: String,
+      default: "OK",
+    },
+    cancelButtonText: {
+      type: String,
+      default: "Cancel",
+    },
+    showCancelButton: {
+      type: Boolean,
+      default: false,
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
+    closeOnOverlayClick: {
+      type: Boolean,
+      default: false,
+    },
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["confirm", "cancel", "update:isVisible"],
+  computed: {
+    confirmButtonClass() {
+      const classes = {
+        info: "btn-info",
+        warning: "btn-warning",
+        error: "btn-danger",
+        success: "btn-success",
+        confirm: "btn-primary",
+      };
+      return classes[this.type] || "btn-primary";
+    },
+  },
+  methods: {
+    confirm() {
+      this.$emit("confirm");
+      this.$emit("update:isVisible", false);
+    },
+    cancel() {
+      this.$emit("cancel");
+      this.$emit("update:isVisible", false);
+    },
+    handleOverlayClick() {
+      if (this.closeOnOverlayClick) {
+        this.cancel();
+      }
+    },
+  },
+};
+</script>

webapp/src/components/DynamicDataTableButtons.vue

@@ -150,6 +150,8 @@
 </template>
 
 <script>
+import { DialogService } from "@/services/DialogService";
+
 import IconField from "primevue/iconfield";
 import InputIcon from "primevue/inputicon";
 import InputText from "primevue/inputtext";
@@ -237,13 +239,14 @@ export default {
     },
   },
   methods: {
-    confirmDeletion() {
+    async confirmDeletion() {
       const idsSelected = this.itemsSelected.map((x) => x.item_id || x.collection_id);
-      if (
-        confirm(
-          `Are you sure you want to delete ${this.itemsSelected.length} selected items? (${idsSelected})`,
-        )
-      ) {
+      const confirmed = await DialogService.confirm({
+        title: "Confirm Deletion",
+        message: `Are you sure you want to delete ${this.itemsSelected.length} selected items? (${idsSelected})`,
+        type: "warning",
+      });
+      if (confirmed) {
         this.deleteItems(idsSelected);
         this.$emit("delete-selected-items");
       }
@@ -284,12 +287,14 @@ export default {
     columnLabel(option) {
       return option.label || option.header || option.field;
     },
-    resetTable() {
-      if (
-        window.confirm(
+    async resetTable() {
+      const confirmed = await DialogService.confirm({
+        title: "Confirm reset",
+        message:
           "Are you sure you want to reset your preferences (visible columns, widths) for this table?",
-        )
-      ) {
+        type: "info",
+      });
+      if (confirmed) {
         this.$emit("reset-table");
       }
     },

webapp/src/components/EditAccountSettingsModal.vue

@@ -125,6 +125,8 @@
 </template>
 
 <script>
+import { DialogService } from "@/services/DialogService";
+
 import { API_URL } from "@/resources.js";
 import Modal from "@/components/Modal.vue";
 import UserBubble from "@/components/UserBubble.vue";
@@ -204,17 +206,22 @@ export default {
     },
     async requestAPIKey(event) {
       event.preventDefault();
-      if (
-        window.confirm(
+      const confirmed = await DialogService.confirm({
+        title: "Generate New API Key",
+        message:
           "Requesting a new API key will remove your old one. Are you sure you want to proceed?",
-        )
-      ) {
+        type: "warning",
+      });
+      if (confirmed) {
         const newKey = await requestNewAPIKey();
         this.apiKey = newKey;
         this.apiKeyDisplayed = true;
-        window.alert(
-          `A new API key has been generated. Please note that when you close the "Account Settings" window, the key will not be displayed again. `,
-        );
+        await DialogService.alert({
+          title: "API Key Generated",
+          message:
+            'A new API key has been generated. Please note that when you close the "Account Settings" window, the key will not be displayed again.',
+          type: "success",
+        });
       }
     },
     copyToClipboard() {