Migrate BModal components to GModal - second (and hopefully final) batch

client/src/components/BaseComponents/GTabs.vue

@@ -227,3 +227,29 @@ const TabTitleContent = defineComponent({
         </div>
     </div>
 </template>
+
+<style scoped lang="scss">
+// Vertical tabs: enable scrollable content while keeping nav fixed
+.tabs.row {
+    position: relative;
+    height: 100%;
+
+    // Nav column stays in normal flow on the left
+    .col-auto {
+        position: relative;
+        z-index: 1;
+    }
+
+    // Content area fills remaining space with absolute positioning
+    .tab-content.col {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: auto;
+        width: calc(100% - 200px); // Adjust based on typical nav width
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+}
+</style>

client/src/components/History/Archiving/HistoryArchiveExportSelector.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { BAlert, BButton, BFormCheckbox, BModal } from "bootstrap-vue";
+import { BAlert, BFormCheckbox } from "bootstrap-vue";
 import { computed, onMounted, ref, watch } from "vue";
-import { RouterLink } from "vue-router";
 
 import type { HistorySummary } from "@/api";
 import { exportHistoryToFileSource, fetchHistoryExportRecords } from "@/api/histories.export";
@@ -10,6 +9,9 @@ import { DEFAULT_EXPORT_PARAMS } from "@/composables/shortTermStorage";
 import { useTaskMonitor } from "@/composables/taskMonitor";
 
 import ExportRecordCard from "./ExportRecordCard.vue";
+import GButton from "@/components/BaseComponents/GButton.vue";
+import GLink from "@/components/BaseComponents/GLink.vue";
+import GModal from "@/components/BaseComponents/GModal.vue";
 import GTab from "@/components/BaseComponents/GTab.vue";
 import GTabs from "@/components/BaseComponents/GTabs.vue";
 import ExportToFileSourceForm from "@/components/Common/ExportForm.vue";
@@ -177,13 +179,13 @@ function onArchiveHistoryWithExport() {
                     </b>
                 </p>
                 <p>Use the button below to create a new export record before archiving the history.</p>
-                <BButton
+                <GButton
                     id="create-export-record-btn"
                     :disabled="!canCreateExportRecord"
-                    variant="primary"
+                    color="blue"
                     @click="onCreateExportRecord">
                     Create export record
-                </BButton>
+                </GButton>
             </BAlert>
         </div>
         <p v-if="!isDeleteContentsConfirmed" class="mt-3 mb-0">
@@ -198,16 +200,16 @@ function onArchiveHistoryWithExport() {
             Remember that you cannot undo this action. Once you archive and delete the history, you can only recover it
             by importing it as a new copy from the export record.
         </BAlert>
-        <BButton
+        <GButton
             id="archive-history-btn"
             class="mt-3"
             :disabled="!canArchiveHistory"
-            variant="primary"
+            color="blue"
             @click="onArchiveHistoryWithExport">
             Archive (and purge) history
-        </BButton>
+        </GButton>
 
-        <BModal v-model="isExportDialogOpen" title="Export history to permanent storage" size="lg" hide-footer>
+        <GModal :show.sync="isExportDialogOpen" title="Export history to permanent storage" size="medium" fixed-height>
             <GTabs card vertical lazy class="export-option-tabs">
                 <GTab id="to-remote-file-tab" title="To Repository" active>
                     <p>
@@ -229,8 +231,7 @@ function onArchiveHistoryWithExport() {
                     </p>
                     <p>
                         You may need to setup your credentials for the selected repository in your
-                        <RouterLink to="/user/information" target="_blank">settings page</RouterLink> to be able to
-                        export.
+                        <GLink to="/user/information">settings page</GLink> to be able to export.
                     </p>
                     <ExportToRDMRepositoryForm
                         what="history"
@@ -239,6 +240,6 @@ function onArchiveHistoryWithExport() {
                         @export="doExportToFileSource" />
                 </GTab>
             </GTabs>
-        </BModal>
+        </GModal>
     </div>
 </template>

client/src/components/History/CurrentHistory/SelectPreferredStore.test.ts

@@ -16,6 +16,8 @@ setupSelectableMock();
 
 const localVue = getLocalVue(true);
 
+const CONFIRM_BUTTON_SELECTOR = ".g-button.g-blue" as const;
+
 const TEST_HISTORY_ID = "myTestHistoryId";
 
 const TEST_HISTORY = {
@@ -54,18 +56,6 @@ async function mountComponent(preferredObjectStoreId: string | null = null) {
             showModal: true,
         },
         localVue,
-        stubs: {
-            BModal: {
-                template: `
-                    <div>
-                        <slot></slot>
-                        <div class="modal-footer">
-                            <button class="btn btn-primary" @click="$emit('ok')">OK</button>
-                        </div>
-                    </div>
-                `,
-            },
-        },
     });
 
     await flushPromises();
@@ -93,7 +83,7 @@ describe("SelectPreferredStore.vue", () => {
         const errorEl = wrapper.find(".object-store-selection-error");
         expect(errorEl.exists()).toBeFalsy();
 
-        const okButton = wrapper.find(".btn-primary");
+        const okButton = wrapper.find(".g-button.g-blue");
         await okButton.trigger("click");
 
         await flushPromises();
@@ -118,7 +108,7 @@ describe("SelectPreferredStore.vue", () => {
         const errorEl = wrapper.find(".object-store-selection-error");
         expect(errorEl.exists()).toBeFalsy();
 
-        const okButton = wrapper.find(".btn-primary");
+        const okButton = wrapper.find(".g-button.g-blue");
         await okButton.trigger("click");
 
         await flushPromises();

client/src/components/History/CurrentHistory/SelectPreferredStore.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import axios from "axios";
-import { BModal, type BvModalEvent } from "bootstrap-vue";
 import { computed, type PropType, ref } from "vue";
 
 import { getPermissions, isHistoryPrivate, makePrivate, type PermissionsResponse } from "@/components/History/services";
@@ -9,6 +8,7 @@ import { useStorageLocationConfiguration } from "@/composables/storageLocation";
 import { prependPath } from "@/utils/redirect";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GModal from "@/components/BaseComponents/GModal.vue";
 import SelectObjectStore from "@/components/ObjectStore/SelectObjectStore.vue";
 
 const props = defineProps({
@@ -122,14 +122,10 @@ function selectionChanged(preferredObjectStoreId: string | null, isPrivate: bool
     currentSelectedStorePrivate.value = isPrivate;
 }
 
-async function modalOk(event: BvModalEvent) {
-    event?.preventDefault();
-
+async function modalOk() {
     try {
         await handleSubmit(currentSelectedStoreId.value, currentSelectedStorePrivate.value);
-
         reset();
-        emit("close");
     } catch (_e) {
         // pass
     }
@@ -143,24 +139,17 @@ function reset() {
 </script>
 
 <template>
-    <BModal
+    <GModal
         id="modal-select-history-storage-location"
-        :visible="props.showModal"
-        centered
-        scrollable
-        size="lg"
+        :show="props.showModal"
+        size="small"
         :title="storageLocationTitle"
-        title-class="h-sm"
-        title-tag="h3"
-        ok-title="Change Storage Location"
-        cancel-variant="outline-primary"
-        dialog-class="modal-select-history-storage-location"
+        ok-text="Change Storage Location"
+        class="modal-select-history-storage-location"
         :ok-disabled="currentSelectedStoreId === props.preferredObjectStoreId"
-        :no-close-on-backdrop="currentSelectedStoreId !== props.preferredObjectStoreId"
-        :no-close-on-esc="currentSelectedStoreId !== props.preferredObjectStoreId"
+        confirm
         @cancel="reset"
-        @change="emit('close')"
-        @close="reset"
+        @close="emit('close')"
         @ok="modalOk">
         <SelectObjectStore
             :show-sub-setting="props.showSubSetting"
@@ -170,5 +159,5 @@ function reset() {
             :default-option-title="defaultOptionTitle"
             :default-option-description="defaultOptionDescription"
             @onSubmit="selectionChanged" />
-    </BModal>
+    </GModal>
 </template>

client/src/components/PageEditor/ObjectPermissionsModal.vue

@@ -1,17 +1,33 @@
 <script setup lang="ts">
+import { computed } from "vue";
+
 import { PERMISSIONS_LABELS } from "@/components/Page/constants";
 
+import GModal from "../BaseComponents/GModal.vue";
 import ObjectPermissions from "./ObjectPermissions.vue";
 
 interface ObjectPermissionsProps {
     markdownContent: string;
+    show: boolean;
 }
 
-defineProps<ObjectPermissionsProps>();
+const props = defineProps<ObjectPermissionsProps>();
+
+const emit = defineEmits<{
+    (e: "update:show", show: boolean): void;
+}>();
+
+/** Computed toggle that handles showing and hiding the modal */
+const localShowToggle = computed({
+    get: () => props.show,
+    set: (value: boolean) => {
+        emit("update:show", value);
+    },
+});
 </script>
 
 <template>
-    <b-modal v-bind="$attrs" :title="PERMISSIONS_LABELS.modalTitle" title-tag="h2" ok-only v-on="$listeners">
+    <GModal :show.sync="localShowToggle" :title="PERMISSIONS_LABELS.modalTitle" size="small">
         <ObjectPermissions :markdown-content="markdownContent" />
-    </b-modal>
+    </GModal>
 </template>

client/src/components/PageEditor/PageEditorView.vue

@@ -233,7 +233,7 @@ function handleRevisionRestore(revisionId: string) {
                 <template v-if="isStandalone" v-slot:extra-actions>
                     <ObjectPermissionsModal
                         id="object-permissions-modal"
-                        v-model="showPermissions"
+                        :show.sync="showPermissions"
                         :markdown-content="store.currentContent" />
                     <GButton
                         v-b-modal:object-permissions-modal

client/src/components/Workflow/Run/WorkflowRunFormSimple.vue

@@ -688,8 +688,8 @@ onBeforeMount(() => {
                         <div class="settings-row">
                             <WorkflowStorageConfiguration
                                 :split-object-store="splitObjectStore"
-                                :invocation-preferred-object-store-id="preferredObjectStoreId ?? undefined"
-                                :invocation-intermediate-preferred-object-store-id="preferredIntermediateObjectStoreId"
+                                :invocation-preferred-object-store-id="preferredObjectStoreId"
+                                :invocation-preferred-intermediate-object-store-id="preferredIntermediateObjectStoreId"
                                 @updated="onStorageUpdate" />
                         </div>
                     </template>