fix(pa): show save/delete cohort toast after the modal closes

plugins/ui/apps/vue-mri-ui-lib/src/components/Bookmarks.vue

@@ -565,8 +565,11 @@ export default {
           })
         }
 
-        await this.fireBookmarkQuery({ method: 'get', params: { cmd: 'loadAll' } })
+        // Close the delete dialog right after the delete succeeds so the success toast is
+        // shown after the modal closes instead of expiring behind the still-open modal.
         this.showDeleteDialog = false
+
+        await this.fireBookmarkQuery({ method: 'get', params: { cmd: 'loadAll' } })
         if (!isMaterializedCohort && activeBookmark && activeBookmark.bookmarkname === bookmarkDisplay.bookmark.name) {
           this[types.SET_ACTIVE_BOOKMARK](null)
           this.reset()

plugins/ui/apps/vue-mri-ui-lib/src/components/FiltersFooter.vue

@@ -79,7 +79,7 @@
       <div class="d-flex align-items-center">
         <d4l-button
           ref="saveBookmarkButton"
-          :disabled="!hasChanges"
+          :disabled="!hasChanges || this.isSavingBookmark"
           :text="getText('MRI_PA_BUTTON_SAVE')"
           :title="getText('MRI_PA_BUTTON_SAVE')"
           @click="openSaveBookmark"
@@ -148,7 +148,7 @@
           :click="saveBookmark"
           :text="getText('MRI_PA_BUTTON_SAVE')"
           :tooltip="getText('MRI_PA_BUTTON_SAVE')"
-          :disabled="this.hasExceededLength || getBookmarksLoading"
+          :disabled="this.hasExceededLength || getBookmarksLoading || this.isSavingBookmark"
           testId="pa-save-dialog-save-btn"
         ></appButton>
         <appButton
@@ -194,6 +194,7 @@ import * as types from '../store/mutation-types'
 import DialogBox from './DialogBox.vue'
 import messageBox from './MessageBox.vue'
 import { usePortalContext } from '../composables/usePortalContext'
+import { useNotificationStore } from '../stores/notifications'
 import { useUserRole } from '../composables/useUserRole'
 
 export default {
@@ -219,6 +220,7 @@ export default {
       saveDialogWidth: 260,
       cohortNameValidationState: 'valid' as 'invalid' | 'valid' | 'empty',
       cohortName: '',
+      isSavingBookmark: false,
       maxLength: 255,
       maxFiltercardCount: 10,
     }
@@ -312,6 +314,7 @@ export default {
       this.showResetDialog = true
     },
     async saveBookmark() {
+      if (this.isSavingBookmark) return
       if (this.hasChanges) {
         if (this.hasExceededLength) return
 
@@ -341,6 +344,8 @@ export default {
           }
         }
 
+        this.isSavingBookmark = true
+
         try {
           if (isNewBookmark || this.isNotUserSharedBookmark) {
             const params = {
@@ -349,7 +354,7 @@ export default {
               shareBookmark: this.shareBookmark,
               bookmark: JSON.stringify(bookmark),
             }
-            await this.fireBookmarkQuery({ params, method: 'post' })
+            await this.fireBookmarkQuery({ params, method: 'post', suppressToast: true })
           } else {
             const request = {
               cmd: 'update',
@@ -360,15 +365,28 @@ export default {
               method: 'put',
               params: request,
               bookmarkId: activeBookmark.bmkId,
+              suppressToast: true,
             })
           }
+
+          const successMessage =
+            isNewBookmark || this.isNotUserSharedBookmark
+              ? this.getText('MRI_PA_SAVE_BMK_SUCCESS')
+              : this.getText('MRI_PA_UPDATE_BMK_SUCCESS')
+
+          // Close the dialog right after the save succeeds so the success toast is shown
+          // after the modal closes, not while the subsequent list refresh is still running.
+          this.closeSaveBookmark()
+          useNotificationStore().setToastMessage({ text: successMessage })
+
           await this.fireBookmarkQuery({ method: 'get', params: { cmd: 'loadAll' } })
           const savedBookmark = this.getBookmarkByNameAndUsername(bookmarkName, username)
           this[types.SET_ACTIVE_BOOKMARK](savedBookmark)
           this[types.SET_ACTIVE_BOOKMARK_BASELINE](this.getBookmarksData)
         } catch (error) {
           console.error('Error during bookmark save or reload:', error)
         } finally {
+          this.isSavingBookmark = false
           this.cohortName = ''
           this.closeSaveBookmark()
         }

plugins/ui/apps/vue-mri-ui-lib/src/components/ShinyViewer/SaveCohortModal.vue

@@ -138,6 +138,7 @@ import VProgressCircular from '../vuetify/VProgressCircular.vue'
 import appMessageStrip from '@/lib/ui/app-message-strip.vue'
 import * as types from '../../store/mutation-types'
 import { usePortalContext } from '../../composables/usePortalContext'
+import { useNotificationStore } from '../../stores/notifications'
 
 export default {
   name: 'SaveCohortModal',
@@ -396,6 +397,9 @@ export default {
           cohortId: this.savedCohortId,
           bookmarkId: this.savedBookmarkId,
         })
+        // Fire the success toast after the modal closes (the parent closes it on success)
+        // so the user always sees confirmation, even when materialization is slow.
+        useNotificationStore().setToastMessage({ text: successMessage })
       } catch (error) {
         console.error('[SaveCohortModal] Error:', error)
 
@@ -479,7 +483,7 @@ export default {
           datasetId: selectedDataset?.id,
         }
 
-        await this.fireBookmarkQuery({ params, method: 'post' })
+        await this.fireBookmarkQuery({ params, method: 'post', suppressToast: true })
       } else {
         this.savingStep = 'saving-filter'
         const params = {
@@ -492,6 +496,7 @@ export default {
           method: 'put',
           params,
           bookmarkId: activeBookmark.bmkId,
+          suppressToast: true,
         })
       }
 
@@ -530,7 +535,7 @@ export default {
       const url = '/analytics-svc/api/services/cohort'
 
       this.savingStep = 'materializing-cohort'
-      const materializeResponse = await this.onAddCohortOkButtonPress({ params, url })
+      const materializeResponse = await this.onAddCohortOkButtonPress({ params, url, suppressToast: true })
       const cohortDefinitionId = Number(materializeResponse?.cohortDefinitionId)
 
       if (!Number.isInteger(cohortDefinitionId)) {

plugins/ui/apps/vue-mri-ui-lib/src/store/modules/bookmark.ts

@@ -344,7 +344,7 @@ const actions = {
   setAddNewCohort({ commit }, { addNewCohort }) {
     commit(types.SET_ADD_NEW_COHORT, { addNewCohort })
   },
-  fireBookmarkQuery({ state, commit, dispatch, rootGetters }, { method = 'post', params, bookmarkId, cancelToken }) {
+  fireBookmarkQuery({ state, commit, dispatch, rootGetters }, { method = 'post', params, bookmarkId, cancelToken, suppressToast }) {
     commit(types.SET_BOOKMARKS_LOADING, { loading: true })
     const isLoadAll = params.cmd === 'loadAll'
     const requestDatasetId = isLoadAll ? rootGetters.getSelectedDataset.id : ''
@@ -402,7 +402,7 @@ const actions = {
         } else if (params.cmd === 'insert') {
           toastMessage = rootGetters.getText('MRI_PA_SAVE_BMK_SUCCESS')
         }
-        if (toastMessage) {
+        if (toastMessage && !suppressToast) {
           useNotificationStore().setToastMessage({
             text: toastMessage,
           })
@@ -429,7 +429,8 @@ const actions = {
           useNotificationStore().setAlertMessage({
             message: errorMessage,
           })
-        } else {
+        }
+        if (params.cmd === 'delete' || !errorMessage) {
           throw error
         }
       })

plugins/ui/apps/vue-mri-ui-lib/src/store/modules/cohortDefinition.ts

@@ -133,6 +133,7 @@ const actions = {
         useNotificationStore().setAlertMessage({
           message: rootGetters.getText('MRI_PA_DELETE_BMK_ERROR'),
         })
+        throw error
       })
   },
   fireDeleteAtlasCohortDefinitionQuery({ commit, dispatch, getters, rootGetters }, atlasCohortDefinitionId) {
@@ -155,6 +156,7 @@ const actions = {
         useNotificationStore().setAlertMessage({
           message: rootGetters.getText('MRI_PA_DELETE_BMK_ERROR'),
         })
+        throw error
       })
   },
   fireUpdateAtlasCohortDefinitionQuery({ commit, dispatch, getters, rootGetters }, { cancelToken,  content }) {

plugins/ui/apps/vue-mri-ui-lib/src/store/modules/collections.ts

@@ -77,7 +77,7 @@ const actions = {
       commit(types.COLLECTIONS_SET_SUBSETCOUNT, response.data.data[0]['patient.attributes.pcount'])
     })
   },
-  onAddCohortOkButtonPress({ state, commit, dispatch, rootGetters }, { params, url }) {
+  onAddCohortOkButtonPress({ state, commit, dispatch, rootGetters }, { params, url, suppressToast }) {
     if (cancel) {
       cancel()
     }
@@ -104,14 +104,18 @@ const actions = {
               text: response.data.Title,
             })
             commit(types.COLLECTIONS_SET_OLDCOLLECTION, oldColl)
+            if (!suppressToast) {
+              useNotificationStore().setToastMessage({
+                text: rootGetters.getText('MRI_PA_COLL_SUCCESS_CREATE_AND_ADD', title),
+              })
+            }
+          }
+        } else {
+          if (!suppressToast) {
             useNotificationStore().setToastMessage({
-              text: rootGetters.getText('MRI_PA_COLL_SUCCESS_CREATE_AND_ADD', title),
+              text: rootGetters.getText('MRI_PA_COLL_SUCCESS_ADD_PATIENT'),
             })
           }
-        } else {
-          useNotificationStore().setToastMessage({
-            text: rootGetters.getText('MRI_PA_COLL_SUCCESS_ADD_PATIENT'),
-          })
         }
         return response?.data
       })

plugins/ui/apps/vue-mri-ui-lib/src/styles/toast.scss

@@ -9,7 +9,7 @@
   padding: 16px 16px 16px 16px;
   box-shadow: 0 0.625rem 1.875rem 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.2);
   opacity: 0.9;
-  z-index: 1000;
+  z-index: 100000;
   .app-mri-toast-body {
     display: block;
     text-align: center;