add tourStore that keeps track of a running tour

We mount `TourRunner` in `App.vue` instead of `Analysis.vue`, because this way we can have a tour run across all routes (even workflow editor, published views etc.).

Note that an entire page reload resets the store still...

Co-authored-by: Aysam Guerler <aysam.guerler@gmail.com>

Author: ahmedhamidawan

client/src/components/Tour/Tour.vue

@@ -7,6 +7,7 @@ import { useRouter } from "vue-router/composables";
 import { isAdminUser, isAnonymousUser } from "@/api";
 import type { TourRequirements, TourStep as TourStepType } from "@/api/tours";
 import { useHistoryStore } from "@/stores/historyStore";
+import { useTourStore } from "@/stores/tourStore";
 import { useUserStore } from "@/stores/userStore";
 import { errorMessageAsString } from "@/utils/simple-error";
 
@@ -32,7 +33,7 @@ type TourStepWithActions = TourStepType & {
 const props = defineProps<{
     steps: (TourStepType | TourStepWithActions)[];
     requirements: TourRequirements;
-    tourId?: string;
+    tourId: string;
     waitingOnElement?: string | null;
     onBefore?: (step: TourStepType) => Promise<void>;
     onNext?: (step: TourStepType) => Promise<void>;
@@ -42,16 +43,29 @@ const emit = defineEmits(["end-tour"]);
 
 const router = useRouter();
 
-const currentIndex = ref(-1);
 const errorMessage = ref("");
 const isPlaying = ref(false);
 
 // Store variables
 const historyStore = useHistoryStore();
 const { currentHistory, historiesLoading } = storeToRefs(historyStore);
 const { currentUser } = storeToRefs(useUserStore());
+const tourStore = useTourStore();
+const { currentTour } = storeToRefs(tourStore);
 
-// Step variables
+/** The current step index
+ *
+ * This is set and updated based on the currently active tour in the `tourStore`.
+ * Is `-1` if no tour is currently active (or has ended).
+ */
+const currentIndex = computed({
+    get: () => (currentTour.value?.step !== undefined ? currentTour.value?.step : -1),
+    set: (val: number) => {
+        tourStore.setTour(props.tourId, val);
+    },
+});
+
+// Local step variables
 const currentStep = computed(() => props.steps[currentIndex.value]);
 const numberOfSteps = computed(() => props.steps.length);
 const isFirst = computed(() => currentIndex.value === 0);
@@ -101,7 +115,7 @@ const modalContents = computed<{
                 ok: async () => {
                     endTour();
                     if (router) {
-                        router.push(`/login/start${props.tourId ? `?redirect=/tours/${props.tourId}` : ""}`);
+                        router.push(`/login/start?redirect=/tours/${props.tourId}`);
                     }
                 },
             };
@@ -117,7 +131,7 @@ const modalContents = computed<{
                     endTour();
                     if (router) {
                         if (isAnonymousUser(currentUser.value)) {
-                            router.push(`/login/start${props.tourId ? `?redirect=/tours/${props.tourId}` : ""}`);
+                            router.push(`/login/start?redirect=/tours/${props.tourId}`);
                         } else {
                             router.push("/");
                         }
@@ -172,7 +186,6 @@ onUnmounted(() => {
 
 function start() {
     window.addEventListener("keyup", handleKeyup);
-    currentIndex.value = 0;
 }
 
 function play(isCurrentlyPlaying: boolean) {
@@ -228,11 +241,10 @@ async function next() {
  * _In the case that_ `TourRunner` _is the parent, this will unmount the component._
  */
 function endTour() {
-    currentIndex.value = -1;
+    tourStore.setTour(undefined);
     isPlaying.value = false;
     errorMessage.value = "";
 
-    // IMPORTANT: This is what unmounts the `TourRunner` component when that is the parent
     emit("end-tour");
 }
 

client/src/components/Tour/TourRunner.vue

@@ -3,6 +3,7 @@ import { ref } from "vue";
 
 import { getTourData, type TourRequirements, type TourStep } from "@/api/tours";
 import { Toast } from "@/composables/toast";
+import { useTourStore } from "@/stores/tourStore";
 import { errorMessageAsString } from "@/utils/simple-error";
 
 import Tour from "./Tour.vue";
@@ -18,6 +19,8 @@ const props = defineProps<{
 
 const emit = defineEmits(["end-tour"]);
 
+const tourStore = useTourStore();
+
 const steps = ref<TourStep[]>([]);
 const requirements = ref<TourRequirements>([]);
 const ready = ref(false);
@@ -37,6 +40,7 @@ async function initialize() {
         ready.value = true;
     } catch (error) {
         Toast.error(errorMessageAsString(error), "Failed to start tour");
+        tourStore.setTour(undefined);
     }
 }
 

client/src/components/Tour/runTour.js

@@ -132,5 +132,5 @@ export async function runTour(tourId, tourData = null) {
         });
     });
     const requirements = tourData.requirements || [];
-    return mountTour({ steps, requirements });
+    return mountTour({ steps, requirements, tourId });
 }

client/src/entry/analysis/App.vue

@@ -42,6 +42,7 @@
             <UploadModal ref="uploadModal" />
             <BroadcastsOverlay />
             <DragGhost />
+            <TourRunner v-if="currentTour?.id" :key="currentTour.id" :tour-id="currentTour.id" />
         </template>
     </div>
 </template>
@@ -65,11 +66,13 @@ import { useRouteQueryBool } from "@/composables/route";
 import { useEntryPointStore } from "@/stores/entryPointStore";
 import { useHistoryStore } from "@/stores/historyStore";
 import { useNotificationsStore } from "@/stores/notificationsStore";
+import { useTourStore } from "@/stores/tourStore";
 import { useUserStore } from "@/stores/userStore";
 
 import Alert from "@/components/Alert.vue";
 import DragGhost from "@/components/DragGhost.vue";
 import BroadcastsOverlay from "@/components/Notifications/Broadcasts/BroadcastsOverlay.vue";
+import TourRunner from "@/components/Tour/TourRunner.vue";
 import Masthead from "components/Masthead/Masthead.vue";
 import UploadModal from "components/Upload/UploadModal.vue";
 
@@ -82,11 +85,15 @@ export default {
         ConfirmDialog,
         UploadModal,
         BroadcastsOverlay,
+        TourRunner,
     },
     directives: {
         short,
     },
     setup() {
+        const tourStore = useTourStore();
+        const { currentTour } = storeToRefs(tourStore);
+
         const userStore = useUserStore();
         const { currentTheme } = storeToRefs(userStore);
         const { currentHistory } = storeToRefs(useHistoryStore());
@@ -124,7 +131,16 @@ export default {
                 if (confirmation.value) {
                     confirmation.value = null;
                 }
-            }
+
+                // if we are on a tour route, start a tour if it wasn't already started or change tours
+                if ("tourId" in route.params) {
+                    const routeTourId = route.params.tourId === "null" ? null : route.params.tourId;
+                    if (routeTourId !== currentTour.value?.id) {
+                        tourStore.setTour(routeTourId);
+                    }
+                }
+            },
+            { immediate: true }
         );
 
         return {
@@ -135,6 +151,7 @@ export default {
             currentTheme,
             currentHistory,
             embedded,
+            currentTour,
         };
     },
     data() {

client/src/entry/analysis/modules/Analysis.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { storeToRefs } from "pinia";
-import { onMounted, onUnmounted, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router/composables";
+import { onMounted, onUnmounted, ref } from "vue";
+import { useRouter } from "vue-router/composables";
 
 import { usePanels } from "@/composables/usePanels";
 import { useUserStore } from "@/stores/userStore";
@@ -10,40 +10,15 @@ import CenterFrame from "./CenterFrame.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import HistoryIndex from "@/components/History/Index.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
-import TourRunner from "@/components/Tour/TourRunner.vue";
 import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 
 const router = useRouter();
-const route = useRoute();
 
 const showCenter = ref(false);
 const { showPanels } = usePanels();
 
 const { historyPanelWidth } = storeToRefs(useUserStore());
 
-/** Tour state - set manually */
-const isTourRoute = ref(false);
-/** Current tour ID - set manually */
-const currentTourId = ref(null);
-
-// Watch for route changes to detect tour routes
-watch(
-    () => route,
-    (newRoute) => {
-        if (newRoute.path.startsWith("/tours/") && newRoute.params.tourId) {
-            isTourRoute.value = true;
-            currentTourId.value = newRoute.params.tourId;
-        }
-    },
-    { immediate: true, deep: true }
-);
-
-// methods
-function endTour() {
-    isTourRoute.value = false;
-    currentTourId.value = null;
-}
-
 function hideCenter() {
     showCenter.value = false;
 }
@@ -77,6 +52,5 @@ onUnmounted(() => {
             <HistoryIndex />
         </FlexPanel>
         <DragAndDropModal />
-        <TourRunner v-if="isTourRoute" :key="currentTourId" :tour-id="currentTourId" @end-tour="endTour" />
     </div>
 </template>

client/src/stores/tourStore.ts

@@ -0,0 +1,45 @@
+import { defineStore } from "pinia";
+import { ref, watch } from "vue";
+
+import { useUserLocalStorage } from "@/composables/userLocalStorage";
+
+export const useTourStore = defineStore("tourStore", () => {
+    /** Track what tour ID we are expecting, to prevent any unintended localStorage
+     * reactivity problems */
+    const localTourId = ref<string>("");
+
+    const currentTour = useUserLocalStorage<{ id: string; step: number } | undefined>(
+        "currently-active-tour",
+        undefined
+    );
+
+    function setTour(tourId: string | undefined, step = 0) {
+        localTourId.value = tourId || "";
+        if (tourId) {
+            currentTour.value = { id: tourId, step };
+        } else {
+            currentTour.value = undefined;
+        }
+    }
+
+    watch(
+        () => currentTour.value?.id,
+        (newVal, oldVal) => {
+            if (newVal === oldVal) {
+                return;
+            }
+
+            // If localStorage is setting a different tour than what we expect, ignore it
+            const expectedTour = localTourId.value || undefined;
+            if (expectedTour && newVal !== expectedTour && oldVal === expectedTour) {
+                setTour(expectedTour);
+            }
+        },
+        { immediate: true }
+    );
+
+    return {
+        currentTour,
+        setTour,
+    };
+});