fix duplicate modals opening from HistoryNavigation

Using `v-b-modal:modal-id` had the disadvantage that if we had multiple components containing modals with same ids, they would all open simultaneously. Using `v-modal` to open modals instead removes this side effect.
galaxyproject · May 30, 2024 · 7a73c83 · 7a73c83
1 parent 721b38d
commit 7a73c83
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 11 deletions.
diff --git a/client/src/components/History/CurrentHistory/HistoryNavigation.vue b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
@@ -71,7 +71,12 @@ const props = withDefaults(defineProps<Props>(), {
     minimal: false,
 });
 
+// modal refs
 const showSwitchModal = ref(false);
+const showDeleteModal = ref(false);
+const showPrivacyModal = ref(false);
+const showCopyModal = ref(false);
+
 const purgeHistory = ref(false);
 
 const userStore = useUserStore();
@@ -202,17 +207,17 @@ function userTitle(title: string) {
                     <BDropdownDivider />
 
                     <BDropdownItem
-                        v-b-modal:copy-current-history-modal
                         :disabled="isAnonymous"
-                        :title="userTitle('Copy History to a New History')">
+                        :title="userTitle('Copy History to a New History')"
+                        @click="showCopyModal = !showCopyModal">
                         <FontAwesomeIcon fixed-width :icon="faCopy" class="mr-1" />
                         <span v-localize>Copy this History</span>
                     </BDropdownItem>
 
                     <BDropdownItem
-                        v-b-modal:delete-history-modal
                         :disabled="!canEditHistory"
-                        :title="localize('Permanently Delete History')">
+                        :title="localize('Permanently Delete History')"
+                        @click="showDeleteModal = !showDeleteModal">
                         <FontAwesomeIcon fixed-width :icon="faTrash" class="mr-1" />
                         <span v-localize>Delete this History</span>
                     </BDropdownItem>
@@ -278,9 +283,9 @@ function userTitle(title: string) {
                     </BDropdownItem>
 
                     <BDropdownItem
-                        v-b-modal:history-privacy-modal
                         :disabled="isAnonymous || !canEditHistory"
-                        :title="userTitle('Make this History Private')">
+                        :title="userTitle('Make this History Private')"
+                        @click="showPrivacyModal = !showPrivacyModal">
                         <FontAwesomeIcon fixed-width :icon="faLock" class="mr-1" />
                         <span v-localize>Make Private</span>
                     </BDropdownItem>
@@ -297,13 +302,19 @@ function userTitle(title: string) {
             :show-modal.sync="showSwitchModal"
             @selectHistory="historyStore.setCurrentHistory($event.id)" />
 
-        <CopyModal id="copy-current-history-modal" :history="history" />
+        <CopyModal :history="history" :show-modal.sync="showCopyModal" />
 
         <BModal
-            id="history-privacy-modal"
+            v-model="showPrivacyModal"
             title="Make History Private"
             title-tag="h2"
             @ok="historyStore.secureHistory(history)">
+            <h4>
+                History:
+                <b
+                    ><i>{{ history.name }}</i></b
+                >
+            </h4>
             <p v-localize>
                 This will make all the data in this history private (excluding library datasets), and will set
                 permissions such that all new data is created as private. Any datasets within that are currently shared
@@ -312,7 +323,7 @@ function userTitle(title: string) {
         </BModal>
 
         <BModal
-            id="delete-history-modal"
+            v-model="showDeleteModal"
             title="Delete History?"
             title-tag="h2"
             @ok="onDelete"

diff --git a/client/src/components/History/Modals/CopyModal.vue b/client/src/components/History/Modals/CopyModal.vue
@@ -20,9 +20,16 @@ import localize from "@/utils/localization";
 
 interface Props {
     history: HistorySummary;
+    showModal?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    showModal: false,
+});
+
+const emit = defineEmits<{
+    (e: "update:show-modal", value: boolean): void;
+}>();
 
 const userStore = useUserStore();
 const historyStore = useHistoryStore();
@@ -32,6 +39,7 @@ const { currentUser, isAnonymous } = storeToRefs(userStore);
 const name = ref("");
 const copyAll = ref(false);
 const loading = ref(false);
+const localShowModal = ref(props.showModal);
 
 const title = computed(() => {
     return `Copying History: ${props.history.name}`;
@@ -55,6 +63,18 @@ const formValid = computed(() => {
     return newNameValid.value;
 });
 
+watch(
+    () => props.showModal,
+    (newVal) => {
+        localShowModal.value = newVal;
+    }
+);
+watch(
+    () => localShowModal.value,
+    (newVal) => {
+        emit("update:show-modal", newVal);
+    }
+);
 watch(
     () => props.history,
     (newHistory) => {
@@ -74,7 +94,7 @@ async function copy(close: () => void) {
 </script>
 
 <template>
-    <BModal v-bind="$attrs" :title="title" title-tag="h2" v-on="$listeners">
+    <BModal v-model="localShowModal" v-bind="$attrs" :title="title" title-tag="h2" v-on="$listeners">
         <transition name="fade">
             <BAlert v-localize :show="isAnonymous" variant="warning">
                 As an anonymous user, unless you log in or register, you will lose your current history after copying