add routePush function since vue-router is not available in Tour.vue

The component is mounted in `runTour` and somehow doesn't have access to the router when mounted.

Author: ahmedhamidawan

client/src/components/Tour/Tour.vue

@@ -18,6 +18,8 @@ const PLAY_DELAY = 3000;
 const props = defineProps<{
     steps: { title: string; content: string; onNext?: () => Promise<void>; onBefore?: () => Promise<void> }[];
     requirements: string[];
+    /** A way to use the vue-router which won't be available in this component locally (because we mount it in `runTour`). */
+    routePush?: (path: string) => void;
 }>();
 
 const currentIndex = ref(-1);
@@ -69,13 +71,29 @@ const modalContents = computed<{
                 title: "Requires Login",
                 message: "You must log in to Galaxy to use this tour.",
                 variant: "info",
+                okText: props.routePush ? "Login or Register" : undefined,
+                ok: async () => {
+                    if (props.routePush) {
+                        props.routePush("/login/start");
+                    }
+                },
             };
         }
         if (props.requirements.indexOf("admin") >= 0 && !isAdminUser(currentUser.value)) {
             return {
                 title: "Requires Admin",
                 message: "You must be an admin to use this tour.",
                 variant: "info",
+                okText: props.routePush ? "Exit Tour" : undefined,
+                ok: async () => {
+                    if (props.routePush) {
+                        if (isAnonymousUser(currentUser.value)) {
+                            props.routePush("/login/start");
+                        } else {
+                            props.routePush("/");
+                        }
+                    }
+                },
             };
         }
         // TODO: better estimate for whether the history is new.

client/src/components/Tour/TourRunner.vue

@@ -1,24 +1,23 @@
-<template>
-    <CenterFrame src="/welcome" />
-</template>
-
-<script>
-import CenterFrame from "entry/analysis/modules/CenterFrame";
+<script setup lang="ts">
+import { useRouter } from "vue-router/composables";
 
 import { runTour } from "./runTour";
 
-export default {
-    components: {
-        CenterFrame,
-    },
-    props: {
-        tourId: {
-            type: String,
-            required: true,
-        },
-    },
-    mounted() {
-        runTour(this.tourId);
-    },
-};
+import CenterFrame from "@/entry/analysis/modules/CenterFrame.vue";
+
+const props = defineProps<{
+    tourId: string;
+}>();
+
+const router = useRouter();
+
+function routePush(path: string) {
+    router.push(path);
+}
+
+runTour(props.tourId, null, routePush);
 </script>
+
+<template>
+    <CenterFrame src="/welcome" />
+</template>

client/src/components/Tour/runTour.js

@@ -87,9 +87,10 @@ function mountTour(props) {
  * Runs a Tour by identifier or from provided data.
  * @param {String} Unique Tour identifier (for api request)
  * @param {Object} Tour data
+ * @param {Function} routePush function to handle route changes
  * @returns mounted instance
  */
-export async function runTour(tourId, tourData = null) {
+export async function runTour(tourId, tourData = null, routePush = undefined) {
     if (!tourData) {
         tourData = await getTourData(tourId);
     }
@@ -124,5 +125,5 @@ export async function runTour(tourId, tourData = null) {
         });
     });
     const requirements = tourData.requirements || [];
-    return mountTour({ steps, requirements });
+    return mountTour({ steps, requirements, routePush });
 }