Merge pull request #10003 from Budibase/fix/onboarding-tour-registration

Fix for onboarding initialisation.

packages/builder/src/components/portal/onboarding/TourPopover.svelte

@@ -15,20 +15,12 @@
   $: tourKey = $store.tourKey
   $: tourStepKey = $store.tourStepKey
 
-  const initTour = targetKey => {
+  const updateTourStep = (targetStepKey, tourKey) => {
-    if (!targetKey) {
+    if (!tourKey) {
       return
     }
-    tourSteps = [...TOURS[targetKey]]
-    tourStepIdx = 0
-    tourStep = { ...tourSteps[tourStepIdx] }
-  }
-
-  $: initTour(tourKey)
-
-  const updateTourStep = targetStepKey => {
     if (!tourSteps?.length) {
-      return
+      tourSteps = [...TOURS[tourKey]]
     }
     tourStepIdx = getCurrentStepIdx(tourSteps, targetStepKey)
     lastStep = tourStepIdx + 1 == tourSteps.length
@@ -36,7 +28,7 @@
     tourStep.onLoad()
   }
 
-  $: updateTourStep(tourStepKey)
+  $: updateTourStep(tourStepKey, tourKey)
 
   const showPopover = (tourStep, tourNodes, popover) => {
     if (!tourStep) {

packages/builder/src/components/portal/onboarding/TourWrap.svelte

@@ -8,20 +8,28 @@
 
   let currentTourStep
   let ready = false
+  let registered = false
   let handler
 
+  const registerTourNode = (tourKey, stepKey) => {
+    if (ready && !registered && tourKey) {
+      currentTourStep = TOURS[tourKey].find(step => step.id === stepKey)
+      if (!currentTourStep) {
+        return
+      }
+      const elem = document.querySelector(currentTourStep.query)
+      handler = tourHandler(elem, stepKey)
+      registered = true
+    }
+  }
+
+  $: tourKeyWatch = $store.tourKey
+  $: registerTourNode(tourKeyWatch, tourStepKey, ready)
+
   onMount(() => {
-    if (!$store.tourKey) return
-
-    currentTourStep = TOURS[$store.tourKey].find(
-      step => step.id === tourStepKey
-    )
-    if (!currentTourStep) return
-
-    const elem = document.querySelector(currentTourStep.query)
-    handler = tourHandler(elem, tourStepKey)
     ready = true
   })
+
   onDestroy(() => {
     if (handler) {
       handler.destroy()