From 263df94076eb7197be28fc235a0fa16b2d22d405 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 17 Jul 2023 14:07:53 +0100
Subject: [PATCH 1/5] Altered structure of the tours to allow tour level config
 with an onSkip fn option. Tour steps now moved to 'steps' entry

---
 .../portal/onboarding/TourPopover.svelte      |  38 +++-
 .../portal/onboarding/TourWrap.svelte         |   2 +-
 .../src/components/portal/onboarding/tours.js | 194 +++++++++---------
 .../builder/app/[application]/_layout.svelte  |   2 +-
 4 files changed, 125 insertions(+), 111 deletions(-)

diff --git a/packages/builder/src/components/portal/onboarding/TourPopover.svelte b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
index d4958b386e..4607150c29 100644
--- a/packages/builder/src/components/portal/onboarding/TourPopover.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { Popover, Layout, Heading, Body, Button } from "@budibase/bbui"
+  import { Popover, Layout, Heading, Body, Button, Link } from "@budibase/bbui"
   import { store } from "builderStore"
   import { TOURS } from "./tours.js"
   import { goto, layout, isActive } from "@roxi/routify"
@@ -10,17 +10,19 @@
   let tourStep
   let tourStepIdx
   let lastStep
+  let skipping = false
 
   $: tourNodes = { ...$store.tourNodes }
   $: tourKey = $store.tourKey
   $: tourStepKey = $store.tourStepKey
+  $: tourOnSkip = TOURS[tourKey]?.onSkip
 
   const updateTourStep = (targetStepKey, tourKey) => {
     if (!tourKey) {
       return
     }
     if (!tourSteps?.length) {
-      tourSteps = [...TOURS[tourKey]]
+      tourSteps = [...TOURS[tourKey].steps]
     }
     tourStepIdx = getCurrentStepIdx(tourSteps, targetStepKey)
     lastStep = tourStepIdx + 1 == tourSteps.length
@@ -132,16 +134,28 @@
           </Body>
           <div class="tour-footer">
             <div class="tour-navigation">
-              {#if tourStepIdx > 0}
-                <Button
+              {#if typeof tourOnSkip === "function"}
+                <!-- <Button
                   secondary
-                  on:click={previousStep}
-                  disabled={tourStepIdx == 0}
+                  quiet
+                  on:click={() => {
+                    skipping = true
+                    tourOnSkip()
+                  }}
+                  disabled={skipping}
+                >
+                  Skip
+                </Button> -->
+                <Link
+                  quiet
+                  on:click={() => {
+                    skipping = true
+                    tourOnSkip()
+                  }}
+                  disabled={skipping}>Skip</Link
                 >
-                  <div>Back</div>
-                </Button>
               {/if}
-              <Button cta on:click={nextStep}>
+              <Button cta on:click={nextStep} disabled={skipping}>
                 <div>{lastStep ? "Finish" : "Next"}</div>
               </Button>
             </div>
@@ -157,9 +171,13 @@
     padding: var(--spacing-xl);
   }
   .tour-navigation {
-    grid-gap: var(--spectrum-alias-grid-baseline);
+    grid-gap: var(--spacing-xl);
     display: flex;
     justify-content: end;
+    align-items: center;
+  }
+  .tour-navigation :global(.spectrum-Link) {
+    color: white;
   }
   .tour-body :global(.feature-list) {
     margin-bottom: 0px;
diff --git a/packages/builder/src/components/portal/onboarding/TourWrap.svelte b/packages/builder/src/components/portal/onboarding/TourWrap.svelte
index fd47d7b48e..dd667057ca 100644
--- a/packages/builder/src/components/portal/onboarding/TourWrap.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourWrap.svelte
@@ -13,7 +13,7 @@
 
   const registerTourNode = (tourKey, stepKey) => {
     if (ready && !registered && tourKey) {
-      currentTourStep = TOURS[tourKey].find(step => step.id === stepKey)
+      currentTourStep = TOURS[tourKey].steps.find(step => step.id === stepKey)
       if (!currentTourStep) {
         return
       }
diff --git a/packages/builder/src/components/portal/onboarding/tours.js b/packages/builder/src/components/portal/onboarding/tours.js
index 1101034e0f..0fcefce6f4 100644
--- a/packages/builder/src/components/portal/onboarding/tours.js
+++ b/packages/builder/src/components/portal/onboarding/tours.js
@@ -20,6 +20,34 @@ export const TOUR_KEYS = {
   FEATURE_ONBOARDING: "feature-onboarding",
 }
 
+// TOUR_BUILDER_ONBOARDING - termination
+const endUserOnboarding = async () => {
+  // Mark the users onboarding as complete
+  // Clear all tour related state
+  if (get(auth).user) {
+    try {
+      await API.updateSelf({
+        onboardedAt: new Date().toISOString(),
+      })
+
+      // Update the cached user
+      await auth.getSelf()
+
+      store.update(state => ({
+        ...state,
+        tourNodes: undefined,
+        tourKey: undefined,
+        tourKeyStep: undefined,
+        onboarding: false,
+      }))
+    } catch (e) {
+      console.log("Onboarding failed", e)
+      return false
+    }
+    return true
+  }
+}
+
 const tourEvent = eventKey => {
   analytics.captureEvent(`${ONBOARDING_EVENT_PREFIX}:${eventKey}`, {
     eventSource: EventSource.PORTAL,
@@ -28,111 +56,79 @@ const tourEvent = eventKey => {
 
 const getTours = () => {
   return {
-    [TOUR_KEYS.TOUR_BUILDER_ONBOARDING]: [
-      {
-        id: TOUR_STEP_KEYS.BUILDER_DATA_SECTION,
-        title: "Data",
-        route: "/builder/app/:application/data",
-        layout: OnboardingData,
-        query: ".topleftnav .spectrum-Tabs-item#builder-data-tab",
-        onLoad: async () => {
-          tourEvent(TOUR_STEP_KEYS.BUILDER_DATA_SECTION)
+    [TOUR_KEYS.TOUR_BUILDER_ONBOARDING]: {
+      onSkip: endUserOnboarding,
+      steps: [
+        {
+          id: TOUR_STEP_KEYS.BUILDER_DATA_SECTION,
+          title: "Data",
+          route: "/builder/app/:application/data",
+          layout: OnboardingData,
+          query: ".topleftnav .spectrum-Tabs-item#builder-data-tab",
+          onLoad: async () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_DATA_SECTION)
+          },
+          align: "left",
         },
-        align: "left",
-      },
-      {
-        id: TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION,
-        title: "Design",
-        route: "/builder/app/:application/design",
-        layout: OnboardingDesign,
-        query: ".topleftnav .spectrum-Tabs-item#builder-design-tab",
-        onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION)
+        {
+          id: TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION,
+          title: "Design",
+          route: "/builder/app/:application/design",
+          layout: OnboardingDesign,
+          query: ".topleftnav .spectrum-Tabs-item#builder-design-tab",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_DESIGN_SECTION)
+          },
+          align: "left",
         },
-        align: "left",
-      },
-      {
-        id: TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION,
-        title: "Automations",
-        route: "/builder/app/:application/automation",
-        query: ".topleftnav .spectrum-Tabs-item#builder-automation-tab",
-        body: "Once you have your app screens made, you can set up automations to fit in with your current workflow",
-        onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION)
+        {
+          id: TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION,
+          title: "Automations",
+          route: "/builder/app/:application/automation",
+          query: ".topleftnav .spectrum-Tabs-item#builder-automation-tab",
+          body: "Once you have your app screens made, you can set up automations to fit in with your current workflow",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_AUTOMATION_SECTION)
+          },
+          align: "left",
         },
-        align: "left",
-      },
-      {
-        id: TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT,
-        title: "Users",
-        query: ".toprightnav #builder-app-users-button",
-        body: "Add users to your app and control what level of access they have.",
-        onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT)
+        {
+          id: TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT,
+          title: "Users",
+          query: ".toprightnav #builder-app-users-button",
+          body: "Add users to your app and control what level of access they have.",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT)
+          },
         },
-      },
-      {
-        id: TOUR_STEP_KEYS.BUILDER_APP_PUBLISH,
-        title: "Publish",
-        layout: OnboardingPublish,
-        route: "/builder/app/:application/design",
-        endRoute: "/builder/app/:application/data",
-        query: ".toprightnav #builder-app-publish-button",
-        onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.BUILDER_APP_PUBLISH)
+        {
+          id: TOUR_STEP_KEYS.BUILDER_APP_PUBLISH,
+          title: "Publish",
+          layout: OnboardingPublish,
+          route: "/builder/app/:application/design",
+          endRoute: "/builder/app/:application/data",
+          query: ".toprightnav #builder-app-publish-button",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.BUILDER_APP_PUBLISH)
+          },
+          onComplete: endUserOnboarding,
         },
-        onComplete: async () => {
-          // Mark the users onboarding as complete
-          // Clear all tour related state
-          if (get(auth).user) {
-            await API.updateSelf({
-              onboardedAt: new Date().toISOString(),
-            })
-
-            // Update the cached user
-            await auth.getSelf()
-
-            store.update(state => ({
-              ...state,
-              tourNodes: undefined,
-              tourKey: undefined,
-              tourKeyStep: undefined,
-              onboarding: false,
-            }))
-          }
+      ],
+    },
+    [TOUR_KEYS.FEATURE_ONBOARDING]: {
+      steps: [
+        {
+          id: TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT,
+          title: "Users",
+          query: ".toprightnav #builder-app-users-button",
+          body: "Add users to your app and control what level of access they have.",
+          onLoad: () => {
+            tourEvent(TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT)
+          },
+          onComplete: endUserOnboarding,
         },
-      },
-    ],
-    [TOUR_KEYS.FEATURE_ONBOARDING]: [
-      {
-        id: TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT,
-        title: "Users",
-        query: ".toprightnav #builder-app-users-button",
-        body: "Add users to your app and control what level of access they have.",
-        onLoad: () => {
-          tourEvent(TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT)
-        },
-        onComplete: async () => {
-          // Push the onboarding forward
-          if (get(auth).user) {
-            await API.updateSelf({
-              onboardedAt: new Date().toISOString(),
-            })
-
-            // Update the cached user
-            await auth.getSelf()
-
-            store.update(state => ({
-              ...state,
-              tourNodes: undefined,
-              tourKey: undefined,
-              tourKeyStep: undefined,
-              onboarding: false,
-            }))
-          }
-        },
-      },
-    ],
+      ],
+    },
   }
 }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 8e637d6fa2..779b906587 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -91,7 +91,7 @@
         const activeNav = $layout.children.find(c => $isActive(c.path))
         const onboardingTour = TOURS[TOUR_KEYS.TOUR_BUILDER_ONBOARDING]
         const targetStep = activeNav
-          ? onboardingTour.find(step => step.route === activeNav?.path)
+          ? onboardingTour.steps.find(step => step.route === activeNav?.path)
           : null
         await store.update(state => ({
           ...state,

From 2ee3427645108a663c3a619f03c5ecccb6002b57 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 17 Jul 2023 16:14:40 +0100
Subject: [PATCH 2/5] Added eventing for the onboarding:skipped. Added a
 redirect to the data section when skipping. Moved endRoute to the tour level
 config

---
 .../portal/onboarding/TourPopover.svelte      | 38 ++++---------------
 .../src/components/portal/onboarding/tours.js | 14 +++++--
 .../builder/app/[application]/_layout.svelte  |  7 ----
 3 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/packages/builder/src/components/portal/onboarding/TourPopover.svelte b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
index 4607150c29..d514441815 100644
--- a/packages/builder/src/components/portal/onboarding/TourPopover.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
@@ -15,14 +15,15 @@
   $: tourNodes = { ...$store.tourNodes }
   $: tourKey = $store.tourKey
   $: tourStepKey = $store.tourStepKey
-  $: tourOnSkip = TOURS[tourKey]?.onSkip
+  $: tour = TOURS[tourKey]
+  $: tourOnSkip = tour?.onSkip
 
   const updateTourStep = (targetStepKey, tourKey) => {
     if (!tourKey) {
       return
     }
     if (!tourSteps?.length) {
-      tourSteps = [...TOURS[tourKey].steps]
+      tourSteps = [...tour.steps]
     }
     tourStepIdx = getCurrentStepIdx(tourSteps, targetStepKey)
     lastStep = tourStepIdx + 1 == tourSteps.length
@@ -73,23 +74,8 @@
         tourStep.onComplete()
       }
       popover.hide()
-      if (tourStep.endRoute) {
-        $goto(tourStep.endRoute)
-      }
-    }
-  }
-
-  const previousStep = async () => {
-    if (tourStepIdx > 0) {
-      let target = tourSteps[tourStepIdx - 1]
-      if (target) {
-        store.update(state => ({
-          ...state,
-          tourStepKey: target.id,
-        }))
-        navigateStep(target)
-      } else {
-        console.log("Could not retrieve step")
+      if (tour.endRoute) {
+        $goto(tour.endRoute)
       }
     }
   }
@@ -135,22 +121,14 @@
           <div class="tour-footer">
             <div class="tour-navigation">
               {#if typeof tourOnSkip === "function"}
-                <!-- <Button
-                  secondary
-                  quiet
-                  on:click={() => {
-                    skipping = true
-                    tourOnSkip()
-                  }}
-                  disabled={skipping}
-                >
-                  Skip
-                </Button> -->
                 <Link
                   quiet
                   on:click={() => {
                     skipping = true
                     tourOnSkip()
+                    if (tour.endRoute) {
+                      $goto(tour.endRoute)
+                    }
                   }}
                   disabled={skipping}>Skip</Link
                 >
diff --git a/packages/builder/src/components/portal/onboarding/tours.js b/packages/builder/src/components/portal/onboarding/tours.js
index 0fcefce6f4..2b2e4c1f88 100644
--- a/packages/builder/src/components/portal/onboarding/tours.js
+++ b/packages/builder/src/components/portal/onboarding/tours.js
@@ -4,6 +4,7 @@ import { auth } from "stores/portal"
 import analytics from "analytics"
 import { OnboardingData, OnboardingDesign, OnboardingPublish } from "./steps"
 import { API } from "api"
+
 const ONBOARDING_EVENT_PREFIX = "onboarding"
 
 export const TOUR_STEP_KEYS = {
@@ -20,8 +21,7 @@ export const TOUR_KEYS = {
   FEATURE_ONBOARDING: "feature-onboarding",
 }
 
-// TOUR_BUILDER_ONBOARDING - termination
-const endUserOnboarding = async () => {
+const endUserOnboarding = async ({ skipped = false }) => {
   // Mark the users onboarding as complete
   // Clear all tour related state
   if (get(auth).user) {
@@ -30,6 +30,10 @@ const endUserOnboarding = async () => {
         onboardedAt: new Date().toISOString(),
       })
 
+      if (skipped) {
+        tourEvent("skipped")
+      }
+
       // Update the cached user
       await auth.getSelf()
 
@@ -57,7 +61,6 @@ const tourEvent = eventKey => {
 const getTours = () => {
   return {
     [TOUR_KEYS.TOUR_BUILDER_ONBOARDING]: {
-      onSkip: endUserOnboarding,
       steps: [
         {
           id: TOUR_STEP_KEYS.BUILDER_DATA_SECTION,
@@ -106,7 +109,6 @@ const getTours = () => {
           title: "Publish",
           layout: OnboardingPublish,
           route: "/builder/app/:application/design",
-          endRoute: "/builder/app/:application/data",
           query: ".toprightnav #builder-app-publish-button",
           onLoad: () => {
             tourEvent(TOUR_STEP_KEYS.BUILDER_APP_PUBLISH)
@@ -114,6 +116,10 @@ const getTours = () => {
           onComplete: endUserOnboarding,
         },
       ],
+      onSkip: async () => {
+        await endUserOnboarding({ skipped: true })
+      },
+      endRoute: "/builder/app/:application/data",
     },
     [TOUR_KEYS.FEATURE_ONBOARDING]: {
       steps: [
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 779b906587..64e892e83c 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -87,17 +87,10 @@
     // Check if onboarding is enabled.
     if (isEnabled(TENANT_FEATURE_FLAGS.ONBOARDING_TOUR)) {
       if (!$auth.user?.onboardedAt) {
-        // Determine the correct step
-        const activeNav = $layout.children.find(c => $isActive(c.path))
-        const onboardingTour = TOURS[TOUR_KEYS.TOUR_BUILDER_ONBOARDING]
-        const targetStep = activeNav
-          ? onboardingTour.steps.find(step => step.route === activeNav?.path)
-          : null
         await store.update(state => ({
           ...state,
           onboarding: true,
           tourKey: TOUR_KEYS.TOUR_BUILDER_ONBOARDING,
-          tourStepKey: targetStep?.id,
         }))
       } else {
         // Feature tour date

From 19c73dc20e1bb96aae07b9bbc78d272bb4cabda4 Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Mon, 17 Jul 2023 17:44:54 +0100
Subject: [PATCH 3/5] Fixes and linting

---
 packages/builder/src/components/portal/onboarding/tours.js      | 2 +-
 .../builder/src/pages/builder/app/[application]/_layout.svelte  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/portal/onboarding/tours.js b/packages/builder/src/components/portal/onboarding/tours.js
index 2b2e4c1f88..e82026da94 100644
--- a/packages/builder/src/components/portal/onboarding/tours.js
+++ b/packages/builder/src/components/portal/onboarding/tours.js
@@ -21,7 +21,7 @@ export const TOUR_KEYS = {
   FEATURE_ONBOARDING: "feature-onboarding",
 }
 
-const endUserOnboarding = async ({ skipped = false }) => {
+const endUserOnboarding = async ({ skipped = false } = {}) => {
   // Mark the users onboarding as complete
   // Clear all tour related state
   if (get(auth).user) {
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index b5c2943af7..92df771e38 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -27,7 +27,7 @@
   import TourPopover from "components/portal/onboarding/TourPopover.svelte"
   import BuilderSidePanel from "./_components/BuilderSidePanel.svelte"
   import UserAvatars from "./_components/UserAvatars.svelte"
-  import { TOUR_KEYS, TOURS } from "components/portal/onboarding/tours.js"
+  import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
   import PreviewOverlay from "./_components/PreviewOverlay.svelte"
 
   export let application

From 69e68e27a9b5def42710dac7cb9f2a480f55f4da Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 18 Jul 2023 09:42:32 +0100
Subject: [PATCH 4/5] Fixed import for the UserAvatars

---
 .../builder/src/pages/builder/app/[application]/_layout.svelte  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index 92df771e38..872151b4a3 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -26,7 +26,7 @@
   import TourWrap from "components/portal/onboarding/TourWrap.svelte"
   import TourPopover from "components/portal/onboarding/TourPopover.svelte"
   import BuilderSidePanel from "./_components/BuilderSidePanel.svelte"
-  import UserAvatars from "./_components/UserAvatars.svelte"
+  import { UserAvatars } from "@budibase/frontend-core"
   import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
   import PreviewOverlay from "./_components/PreviewOverlay.svelte"
 

From cbc67c6fdb73e6292dc24a2204b30aad6c88a8bd Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Tue, 18 Jul 2023 09:53:47 +0100
Subject: [PATCH 5/5] Changed link to secondary to ensure it adapts correctly
 to the theme

---
 .../src/components/portal/onboarding/TourPopover.svelte   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/portal/onboarding/TourPopover.svelte b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
index d514441815..d959a6ef95 100644
--- a/packages/builder/src/components/portal/onboarding/TourPopover.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
@@ -122,6 +122,7 @@
             <div class="tour-navigation">
               {#if typeof tourOnSkip === "function"}
                 <Link
+                  secondary
                   quiet
                   on:click={() => {
                     skipping = true
@@ -130,8 +131,10 @@
                       $goto(tour.endRoute)
                     }
                   }}
-                  disabled={skipping}>Skip</Link
+                  disabled={skipping}
                 >
+                  Skip
+                </Link>
               {/if}
               <Button cta on:click={nextStep} disabled={skipping}>
                 <div>{lastStep ? "Finish" : "Next"}</div>
@@ -154,9 +157,6 @@
     justify-content: end;
     align-items: center;
   }
-  .tour-navigation :global(.spectrum-Link) {
-    color: white;
-  }
   .tour-body :global(.feature-list) {
     margin-bottom: 0px;
     padding-left: var(--spacing-xl);