Merge pull request #16830 from guerler/replace_modal

Use vue modal instead of global backbone modal in user preferences
galaxyproject · Oct 20, 2023 · 4e13b2d · 4e13b2d
2 parents 5134f2f + 298637d
commit 4e13b2d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 27 deletions.
diff --git a/client/src/components/User/UserPreferences.vue b/client/src/components/User/UserPreferences.vue
@@ -106,7 +106,23 @@
             icon="fa-sign-out"
             title="Sign Out"
             description="Click here to sign out of all sessions."
-            @click="signOut" />
+            @click="showLogoutModal = true" />
+        <b-modal v-model="showDataPrivateModal" title="Datasets are now private" title-class="font-weight-bold" ok-only>
+            <span v-localize>
+                All of your histories and datasets have been made private. If you'd like to make all *future* histories
+                private please use the
+            </span>
+            <a :href="userPermissionsUrl">User Permissions</a>
+            <span v-localize>interface</span>.
+        </b-modal>
+        <b-modal
+            v-model="showLogoutModal"
+            title="Sign out"
+            title-class="font-weight-bold"
+            ok-title="Sign out"
+            @ok="signOut">
+            <span v-localize> Do you want to continue and sign out of all active sessions? </span>
+        </b-modal>
     </b-container>
 </template>
 
@@ -165,6 +181,8 @@ export default {
             diskQuota: "",
             messageVariant: null,
             message: null,
+            showLogoutModal: false,
+            showDataPrivateModal: false,
             toggleActivityBar: false,
             toggleTheme: false,
         };
@@ -186,6 +204,9 @@ export default {
             const themes = Object.keys(this.config.themes);
             return themes?.length > 1 ?? false;
         },
+        userPermissionsUrl() {
+            return withPrefix("/user/permissions");
+        },
     },
     created() {
         const message = QueryStringParsing.get("message");
@@ -202,7 +223,6 @@ export default {
     },
     methods: {
         makeDataPrivate() {
-            const Galaxy = getGalaxyInstance();
             if (
                 confirm(
                     _l(
@@ -216,33 +236,13 @@ export default {
                     )
                 )
             ) {
-                axios.post(withPrefix(`/history/make_private?all_histories=true`)).then((response) => {
-                    Galaxy.modal.show({
-                        title: _l("Datasets are now private"),
-                        body: `All of your histories and datasets have been made private.  If you'd like to make all *future* histories private please use the <a href="${withPrefix(
-                            "/user/permissions"
-                        )}">User Permissions</a> interface.`,
-                        buttons: {
-                            Close: () => {
-                                Galaxy.modal.hide();
-                            },
-                        },
-                    });
+                axios.post(withPrefix(`/history/make_private?all_histories=true`)).then(() => {
+                    this.showDataPrivateModal = true;
                 });
             }
         },
         signOut() {
-            const Galaxy = getGalaxyInstance();
-            Galaxy.modal.show({
-                title: _l("Sign out"),
-                body: "Do you want to continue and sign out of all active sessions?",
-                buttons: {
-                    Cancel: function () {
-                        Galaxy.modal.hide();
-                    },
-                    "Sign out": userLogoutAll,
-                },
-            });
+            userLogoutAll();
         },
     },
 };

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
@@ -122,8 +122,8 @@ change_user_address:
 
 sign_out:
   selectors:
-    cancel_button: '.modal-footer .buttons #button-0'
-    sign_out_button: '.modal-footer .buttons #button-1'
+    cancel_button: '.modal-footer .btn-secondary'
+    sign_out_button: '.modal-footer .btn-primary'
 
 dataset_details:
   selectors: