[WIP] Use GModal in Selection Dialog

client/src/components/FilesDialog/FilesDialog.vue

@@ -450,7 +450,6 @@ onMounted(() => {
         :provider-url="currentDirectory?.url"
         :total-items="totalItems"
         :modal-show="modalShow"
-        :modal-static="modalStatic"
         :multiple="multiple"
         :options-show="optionsShow"
         :select-all-variant="selectAllIcon"

client/src/components/SelectionDialog/SelectionDialog.vue

@@ -3,16 +3,16 @@ import { type IconDefinition, library } from "@fortawesome/fontawesome-svg-core"
 import { faCheckSquare, faMinusSquare, faSquare } from "@fortawesome/free-regular-svg-icons";
 import { faCaretLeft, faCheck, faFolder, faSpinner, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BLink, BModal, BPagination, BSpinner, BTable } from "bootstrap-vue";
+import { BAlert, BButton, BLink, BPagination, BSpinner, BTable } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import { type ItemsProvider, SELECTION_STATES, type SelectionState } from "@/components/SelectionDialog/selectionTypes";
 import type Filtering from "@/utils/filtering";
 
 import type { FieldEntry, SelectionItem } from "./selectionTypes";
 
+import GModal from "../BaseComponents/GModal.vue";
 import FilterMenu from "@/components/Common/FilterMenu.vue";
-import Heading from "@/components/Common/Heading.vue";
 import DataDialogSearch from "@/components/SelectionDialog/DataDialogSearch.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
@@ -35,7 +35,6 @@ interface Props {
     leafIcon?: string;
     folderIcon?: IconDefinition;
     modalShow?: boolean;
-    modalStatic?: boolean;
     multiple?: boolean;
     optionsShow?: boolean;
     undoShow?: boolean;
@@ -168,35 +167,48 @@ watch(
         }
     }
 );
+
+const dialog = ref<InstanceType<typeof GModal> | null>(null);
+watch(
+    () => dialog.value,
+    (newValue) => {
+        if (newValue) {
+            dialog.value?.showModal();
+        }
+    },
+    { immediate: true }
+);
 </script>
 
 <template>
-    <BModal
-        v-if="modalShow"
-        modal-class="selection-dialog-modal"
-        header-class="flex-column"
-        visible
-        :static="modalStatic"
+    <GModal
+        ref="dialog"
+        class="selection-dialog-modal"
+        size="medium"
+        :show="props.modalShow"
+        fixed-height
+        footer
         :title="title"
-        @hide="emit('onCancel')">
-        <template v-slot:modal-header>
-            <slot name="header">
-                <Heading v-if="props.title" h2> {{ props.title }} </Heading>
+        @close="emit('onCancel')">
+        <template v-slot:header>
+            <slot name="header" />
+        </template>
 
-                <FilterMenu
-                    v-if="props.filterClass"
-                    :name="props.title"
-                    class="w-100"
-                    :placeholder="props.searchTitle || props.title"
-                    :filter-class="props.filterClass"
-                    :filter-text.sync="filter"
-                    :loading="props.isBusy"
-                    :show-advanced.sync="showAdvancedSearch" />
+        <FilterMenu
+            v-if="props.filterClass"
+            :name="props.title"
+            class="w-100"
+            :placeholder="props.searchTitle || props.title"
+            :filter-class="props.filterClass"
+            :filter-text.sync="filter"
+            :loading="props.isBusy"
+            :show-advanced.sync="showAdvancedSearch" />
+        <DataDialogSearch v-else v-model="filter" :title="props.searchTitle || props.title" />
+
+        <div class="mt-2">
+            <slot name="helper" />
+        </div>
 
-                <DataDialogSearch v-else v-model="filter" :title="props.searchTitle || props.title" />
-            </slot>
-        </template>
-        <slot name="helper" />
         <BAlert v-if="errorMessage" variant="danger" show>
             {{ errorMessage }}
         </BAlert>
@@ -274,7 +286,7 @@ watch(
                 <span>Please wait...</span>
             </div>
         </div>
-        <template v-slot:modal-footer>
+        <template v-slot:footer>
             <div class="d-flex justify-content-between w-100">
                 <div>
                     <BButton v-if="undoShow" data-description="selection dialog undo" size="sm" @click="emit('onUndo')">
@@ -312,13 +324,11 @@ watch(
                 </div>
             </div>
         </template>
-    </BModal>
+    </GModal>
 </template>
 
-<style>
-.selection-dialog-modal .modal-body {
-    max-height: 50vh;
-    height: 50vh;
-    overflow-y: auto;
+<style lang="scss" scoped>
+.selection-dialog-modal {
+    max-height: 70vh;
 }
 </style>

client/src/utils/dataModalUtils.js

@@ -3,6 +3,8 @@ import $ from "jquery";
 import { getAppRoot } from "onload/loadConfig";
 import Vue from "vue";
 
+let lastSelectionDialog = null;
+
 // This should be moved more centrally (though still hanging off Galaxy for
 // external use?), and populated from the store; just using this as a temporary
 // interface.
@@ -25,10 +27,16 @@ export async function getCurrentGalaxyHistory(galaxy) {
 }
 
 export function mountSelectionDialog(clazz, options) {
+    if (lastSelectionDialog) {
+        lastSelectionDialog.$destroy();
+        $(lastSelectionDialog.$el).remove();
+        lastSelectionDialog = null;
+    }
+
     const instance = Vue.extend(clazz);
     const vm = document.createElement("div");
     $("body").append(vm);
-    new instance({
+    lastSelectionDialog = new instance({
         propsData: options,
     }).$mount(vm);
 }