feat(ui): replace legacy product tour with onboarding v2 and unify onboarding i18n keys

remove legacy VueTour flow and obsolete onboarding button components

wire onboarding v2 guided/self-serve flow in create/edit journey

migrate first-flow copy to onboarding.* and clean unused en translation keys

update onboarding and flow-save unit tests

Author: proddata

ui/package-lock.json

@@ -72,7 +72,6 @@
         "vue-sidebar-menu": "^5.9.1",
         "vue-virtual-scroller": "^2.0.0-beta.8",
         "vue3-popper": "^1.5.0",
-        "vue3-tour": "github:kestra-io/vue3-tour",
         "xss": "^1.0.15",
         "yaml": "^2.8.2"
     },

ui/package.json

@@ -5,7 +5,7 @@
         <component :is="route.meta.layout ?? DefaultLayout" v-if="loaded && shouldRenderApp">
             <router-view />
         </component>
-        <VueTour v-if="shouldRenderApp && route?.name && !route.meta?.anonymous" />
+        <OnboardingOverlay v-if="shouldRenderApp && route?.name && !route.meta?.anonymous" />
         <UnsavedChangesDialog />
     </el-config-provider>
 </template>
@@ -22,7 +22,7 @@
     import * as BasicAuth from "./utils/basicAuth";
     import {initPosthogIfEnabled} from "./utils/posthog";
     import ErrorToast from "./components/ErrorToast.vue";
-    import VueTour from "./components/onboarding/VueTour.vue";
+    import OnboardingOverlay from "./components/onboarding/OnboardingOverlay.vue";
     import DefaultLayout from "override/components/layout/DefaultLayout.vue";
     import DocIdDisplay from "./components/DocIdDisplay.vue";
     import UnsavedChangesDialog from "./components/UnsavedChangesDialog.vue";

ui/src/App.vue

@@ -9,7 +9,7 @@
             <div class="d-flex align-items-center gap-2" v-if="(isAllowedEdit || isAllowedTrigger) && $route.params.tab !== 'audit-logs'">
                 <ul class="d-none d-xl-flex align-items-center">
                     <li v-if="isAllowedEdit">
-                        <el-button :icon="Pencil" @click="editFlow">
+                        <el-button class="execution-edit-flow-button" :icon="Pencil" @click="editFlow">
                             {{ $t("edit flow") }}
                         </el-button>
                     </li>
@@ -106,4 +106,4 @@
   }
 }
 
-</style>
+</style>

ui/src/components/executions/ExecutionRootTopBar.vue

@@ -13,31 +13,29 @@
     import TopNavBar from "../../components/layout/TopNavBar.vue";
     import MultiPanelFlowEditorView from "./MultiPanelFlowEditorView.vue";
     import {useBlueprintsStore} from "../../stores/blueprints";
-    import {useCoreStore} from "../../stores/core";
     import {getRandomID} from "../../../scripts/id";
     import {useFlowStore} from "../../stores/flow";
     import {defaultNamespace} from "../../composables/useNamespaces";
-    import {useVueTour} from "../../composables/useVueTour";
 
     import type {BlueprintType} from "../../stores/blueprints"
     import {useAuthStore} from "../../override/stores/auth";
     import permission from "../../models/permission";
     import action from "../../models/action";
+    import {useOnboardingV2Store} from "../../stores/onboardingV2";
 
     const route = useRoute();
     const {t} = useI18n();
 
-    const tour = useVueTour("guidedTour");
-
     const blueprintsStore = useBlueprintsStore();
-    const coreStore = useCoreStore();
     const flowStore = useFlowStore();
     const authStore = useAuthStore();
+    const onboardingV2Store = useOnboardingV2Store();
 
     const setupFlow = async () => {
         const blueprintId = route.query.blueprintId as string;
         const blueprintSource = route.query.blueprintSource as BlueprintType;
         const blueprintSourceYaml = route.query.blueprintSourceYaml as string;
+        const isGuidedOnboarding = route.query.onboarding === "guided";
         const implicitDefaultNamespace = authStore.user.getNamespacesForAction(
             permission.FLOW,
             action.CREATE,
@@ -62,6 +60,8 @@
         } else if (blueprintId) {
             const flowBlueprint = await blueprintsStore.getFlowBlueprint(blueprintId);
             flowYaml = flowBlueprint.source;
+        } else if (isGuidedOnboarding) {
+            flowYaml = `# ${t("onboarding.editor_hints.build_intro")}\n`;
         } else {
             flowYaml = `
 id: ${id}
@@ -73,10 +73,17 @@ tasks:
     message: Hello World! 🚀`.trim();
         }
 
+        let parsedFlow = {};
+        try {
+            parsedFlow = YAML_UTILS.parse(flowYaml) ?? {};
+        } catch {
+            parsedFlow = {};
+        }
+
         flowStore.flow = {
             id,
             namespace: selectedNamespace,
-            ...YAML_UTILS.parse(flowYaml),
+            ...parsedFlow,
             source: flowYaml,
         };
 
@@ -90,13 +97,8 @@ tasks:
     });
 
     flowStore.isCreating = true;
-    if (route.query.reset) {
-        localStorage.setItem("tourDoneOrSkip", "");
-        coreStore.guidedProperties = {
-            ...coreStore.guidedProperties,
-            tourStarted: true,
-        };
-        tour.start();
+    if (route.query.reset || route.query.onboarding === "guided") {
+        onboardingV2Store.startGuided();
     }
     setupFlow();
 

ui/src/components/flows/FlowCreate.vue

@@ -20,7 +20,6 @@
     import FlowExecutions from "./FlowExecutions.vue";
     import RouteContext from "../../mixins/routeContext";
     import {mapStores} from "pinia";
-    import {useCoreStore} from "../../stores/core";
     import {useFlowStore} from "../../stores/flow";
     import permission from "../../models/permission";
     import action from "../../models/action";
@@ -70,18 +69,6 @@
                     }
                 }
             },
-            "coreStore.guidedProperties": {
-                deep: true,
-                immediate: true,
-                handler: function (newValue) {
-                    if (newValue?.manuallyContinue) {
-                        setTimeout(() => {
-                            this.$tours["guidedTour"]?.nextStep();
-                            this.coreStore.guidedProperties = {...this.coreStore.guidedProperties, manuallyContinue: false};
-                        }, 500);
-                    }
-                },
-            },
             "flowStore.flow": {
                 deep: true,
                 handler: function (flow) {
@@ -314,7 +301,7 @@
             }
         },
         computed: {
-            ...mapStores(useCoreStore, useFlowStore, useAuthStore, useMiscStore),
+            ...mapStores(useFlowStore, useAuthStore, useMiscStore),
             routeInfo() {
                 return {
                     title: this.$route.params.id,
@@ -362,4 +349,4 @@
 .body-color {
     color: var(--ks-content-primary);
 }
-</style>
+</style>

ui/src/components/flows/FlowRoot.vue

@@ -61,7 +61,7 @@
                         <el-button
                             :icon="buttonIcon"
                             :disabled="!flowCanBeExecuted || hasBlockingChecks()"
-                            :class="{'flow-run-trigger-button': true, 'onboarding-glow': coreStore.guidedProperties.tourStarted}"
+                            class="flow-run-trigger-button"
                             type="primary"
                             nativeType="submit"
                             @click.prevent="onSubmit($refs.form); executeClicked = true;"

ui/src/components/flows/FlowRun.vue

@@ -2,8 +2,8 @@
     <MultiPanelGenericEditorView
         ref="editorView"
         :class="{playgroundMode}"
-        :editorElements="EDITOR_ELEMENTS"
-        :defaultActiveTabs="TABS"
+        :editorElements="editorElements"
+        :defaultActiveTabs="tabs"
         :saveKey
         :preSerializePanels="preSerializePanels"
         :bottomVisible="playgroundMode"
@@ -25,8 +25,8 @@
     import {computed, markRaw, onMounted, onUnmounted, ref, watch} from "vue";
     import {useRoute} from "vue-router";
     import Utils from "../../utils/utils";
-    import {useCoreStore} from "../../stores/core";
     import {usePlaygroundStore} from "../../stores/playground";
+    import {useOnboardingV2Store} from "../../stores/onboardingV2";
 
     import FlowPlayground from "./FlowPlayground.vue";
     import EditorButtonsWrapper from "../inputs/EditorButtonsWrapper.vue";
@@ -51,7 +51,7 @@
 
     const RawNoCode = markRaw(NoCode)
 
-    const coreStore = useCoreStore()
+    const onboardingV2Store = useOnboardingV2Store()
     const flowStore = useFlowStore()
     const {showKeyShortcuts} = useKeyShortcuts()
 
@@ -95,9 +95,6 @@
 
     useInitialFilesTabs(EDITOR_ELEMENTS)
 
-    const isTourRunning = computed(() => coreStore.guidedProperties?.tourStarted)
-    const DEFAULT_TOUR_TABS = ["code", "topology"];
-
     function cleanupNoCodeTabKey(key: string): string {
         // remove the number for "nocode-1234-" prefix from the key
         return /^nocode-\d{4}/.test(key) ? key.slice(0, 6) + key.slice(11) : key
@@ -122,7 +119,18 @@
         source: computed(() => flowStore.flowYaml),
     });
 
-    const TABS = isTourRunning.value ? DEFAULT_TOUR_TABS : DEFAULT_ACTIVE_TABS;
+    const isGuidedCodeOnly = computed(
+        () => onboardingV2Store.isGuidedActive && onboardingV2Store.state.editorMode === "code_only",
+    );
+    watch(isGuidedCodeOnly, (guided) => {
+        if (guided && playgroundStore.enabled) {
+            playgroundStore.enabled = false;
+        }
+    }, {immediate: true});
+    const editorElements = computed(() => (isGuidedCodeOnly.value
+        ? EDITOR_ELEMENTS.filter((element) => element.uid === "code")
+        : EDITOR_ELEMENTS));
+    const tabs = computed(() => (isGuidedCodeOnly.value ? ["code"] : DEFAULT_ACTIVE_TABS));
 
     flowStore.creationId = flowStore.creationId ?? Utils.uid()
 

ui/src/components/flows/MultiPanelFlowEditorView.vue

@@ -3,14 +3,14 @@
         <el-button v-if="playgroundStore.enabled" id="run-all-button" :icon="icon.Play" class="el-button--playground" :disabled="isDisabled() || !playgroundStore.readyToStart" @click="playgroundStore.runUntilTask()">
             {{ $t("playground.run_all_tasks") }}
         </el-button>
-        <el-button v-else id="execute-button" :class="{'onboarding-glow': coreStore.guidedProperties.glowExecuteButton}" :icon="icon.Play" :type="type" :disabled="isDisabled()" @click="onClick()">
+        <el-button v-else id="execute-button" :icon="icon.Play" :type="type" :disabled="isDisabled()" @click="onClick()">
             {{ $t("execute") }}
         </el-button>
         <el-dialog
             id="execute-flow-dialog"
             v-model="isOpen"
             destroyOnClose
-            :showClose="!coreStore.guidedProperties.tourStarted"
+            :showClose="true"
             :beforeClose="(done) => beforeClose(done)"
             :appendToBody="true"
             :width="dialogWidth"
@@ -75,11 +75,9 @@
     import Play from "vue-material-design-icons/Play.vue";
     import {shallowRef} from "vue";
     import {useMediaQuery} from "@vueuse/core";
-    import {pageFromRoute} from "../../utils/eventsRouter";
     import FlowWarningDialog from "./FlowWarningDialog.vue";
     import {mapStores} from "pinia";
     import {useApiStore} from "../../stores/api";
-    import {useCoreStore} from "../../stores/core";
     import {useExecutionsStore} from "../../stores/executions";
     import {usePlaygroundStore} from "../../stores/playground";
     import {useFlowStore} from "../../stores/flow";
@@ -135,21 +133,7 @@
             },
             onClick() {
                 this.trackExecutionAction("open_modal");
-                if (this.$tours["guidedTour"]?.isRunning?.value) {
-                    this.$tours["guidedTour"]?.nextStep();
-                    this.apiStore.events({
-                        type: "ONBOARDING",
-                        onboarding: {
-                            step: this.$tours["guidedTour"]?.currentStep?._value,
-                            action: "next",
-                            template: this.coreStore.guidedProperties.template
-                        },
-                        page: pageFromRoute(this.$router.currentRoute.value)
-                    });
-                    this.toggleModal()
-                    return;
-                }
-                else if (this.checkForTrigger) {
+                if (this.checkForTrigger) {
                     this.$toast().confirm(FlowWarningDialog, () => (this.toggleModal()), true, null);
                 }
                 else if (this.computedNamespace !== undefined && this.computedFlowId !== undefined) {
@@ -190,14 +174,12 @@
                 this.localNamespace = undefined;
             },
             beforeClose(done){
-                if(this.coreStore.guidedProperties.tourStarted) return;
-
                 this.reset();
                 done()
             }
         },
         computed: {
-            ...mapStores(useApiStore, useCoreStore, useExecutionsStore, usePlaygroundStore, useFlowStore),
+            ...mapStores(useApiStore, useExecutionsStore, usePlaygroundStore, useFlowStore),
             dialogWidth() {
                 return this.isLargeScreen ? "50%" : "90%";
             },
@@ -216,14 +198,6 @@
             }
         },
         watch: {
-            "coreStore.guidedProperties": {
-                handler() {
-                    if (this.coreStore.guidedProperties.executeFlow) {
-                        this.onClick();
-                    }
-                },
-                deep: true
-            },
             "flowStore.executeFlow": {
                 handler(value) {
                     if (value && !this.isDisabled()) {
@@ -270,18 +244,4 @@
     .trigger-flow-wrapper {
         display: inline;
     }
-    
-    .onboarding-glow {
-        animation: glowAnimation 1s infinite alternate;
-    }
-    
-    
-    @keyframes glowAnimation {
-        0% {
-            box-shadow: 0px 0px 0px 0px #8405FF;
-        }
-        100% {
-            box-shadow: 0px 0px 50px 2px #8405FF;
-        }
-    }
 </style>