From d57d9dd3e8597ba28b5e275f887831e0df3d8a70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milo=C5=A1=20Paunovi=C4=87?= <paun992@hotmail.com>
Date: Thu, 8 Aug 2024 16:31:36 +0200
Subject: [PATCH] fix(ui): graciously handle situation with no tutorial flows
 loaded (#4609)

---
 ui/src/components/layout/TopNavBar.vue   |  3 ++-
 ui/src/components/onboarding/VueTour.vue | 23 ++++++++++++-----------
 ui/src/stores/core.js                    | 15 ++++++++++++---
 ui/src/translations/en.json              |  1 +
 ui/src/translations/fr.json              |  1 +
 5 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/ui/src/components/layout/TopNavBar.vue b/ui/src/components/layout/TopNavBar.vue
index a1d037c1ba..370ff216d0 100644
--- a/ui/src/components/layout/TopNavBar.vue
+++ b/ui/src/components/layout/TopNavBar.vue
@@ -124,6 +124,7 @@
         },
         computed: {
             ...mapState("api", ["version"]),
+            ...mapState("core", ["tutorialFlows"]),
             ...mapGetters("core", ["guidedProperties"]),
             ...mapGetters("auth", ["user"]),
             displayNavBar() {
@@ -131,7 +132,7 @@
             },
             tourEnabled(){
                 // Temporary solution to not showing the tour menu item for EE
-                return !Object.keys(this.user).length
+                return this.tutorialFlows?.length && !Object.keys(this.user).length
             }
         },
         methods: {
diff --git a/ui/src/components/onboarding/VueTour.vue b/ui/src/components/onboarding/VueTour.vue
index b83a0059d0..f2c050970d 100644
--- a/ui/src/components/onboarding/VueTour.vue
+++ b/ui/src/components/onboarding/VueTour.vue
@@ -27,7 +27,7 @@
                         <div
                             v-if="currentStep(tour).title"
                             class="title"
-                            :class="{dark: currentStep(tour).keepDark}"
+                            :class="{dark: currentStep(tour).keepDark, empty: !flows.length}"
                         >
                             <div v-if="currentStep(tour).icon">
                                 <img
@@ -35,7 +35,7 @@
                                     :class="{jump: currentStep(tour).jump}"
                                 >
                             </div>
-                            <span v-html="currentStep(tour).title" />
+                            <span v-html="tour.currentStep === 1 && !flows.length ? t('onboarding.no_flows') : currentStep(tour).title" />
                         </div>
                     </template>
                     <template #content>
@@ -99,6 +99,7 @@
                                     ![0, 1].includes(tour.currentStep) ||
                                         !tour.isLast
                                 "
+                                :disabled="tour.currentStep === 1 && !flows.length"
                                 @click="
                                     tour.isLast
                                         ? finishTour(tour.currentStep)
@@ -147,7 +148,6 @@
 
     import Finish from "./components/buttons/Finish.vue";
 
-    import {apiUrl} from "override/utils/route";
     import {pageFromRoute} from "../../utils/eventsRouter";
 
     import TaskIcon from "@kestra-io/ui-libs/src/components/misc/TaskIcon.vue";
@@ -208,7 +208,7 @@
     };
 
     const activeFlow = ref(0);
-    const flows = ref([]);
+    const flows = computed(() => store.state.core.tutorialFlows);
 
     const allTasks = (tasks) => {
         const uniqueTypes = new Set();
@@ -300,7 +300,7 @@
                     name: "flows/update",
                     params: {
                         namespace: "tutorial",
-                        id: flows.value[activeFlow.value].id,
+                        id: flows.value[activeFlow.value]?.id,
                         tab: "editor",
                     },
                 });
@@ -312,7 +312,7 @@
                 store.commit("editor/updateOnboarding"),
                 store.commit("core/setGuidedProperties", {
                     tourStarted: true,
-                    template: flows.value[activeFlow.value].id,
+                    template: flows.value[activeFlow.value]?.id,
                 });
 
                 wait(1);
@@ -422,11 +422,7 @@
     };
 
     onMounted(() => {
-        const HTTP = getCurrentInstance()?.appContext.config.globalProperties.$http;
-
-        HTTP.get(`${apiUrl(this)}/flows/tutorial`).then(
-            (response) => (flows.value = response.data),
-        );
+        store.dispatch("core/readTutorialFlows");
     });
 </script>
 
@@ -530,6 +526,11 @@ $flow-image-size-container: 36px;
         font-weight: 500;
         color: $color;
 
+        &.empty {
+            font-size: 1.2rem;
+            margin-bottom: 0;
+        }
+
         & div {
             height: 2rem;
             margin-bottom: 1rem;
diff --git a/ui/src/stores/core.js b/ui/src/stores/core.js
index 71c203c9b0..08d6b803a6 100644
--- a/ui/src/stores/core.js
+++ b/ui/src/stores/core.js
@@ -1,3 +1,5 @@
+import {apiUrl} from "override/utils/route";
+
 export default {
     namespaced: true,
     state: {
@@ -10,7 +12,8 @@ export default {
             template: undefined,
         },
         monacoYamlConfigured: false,
-        autocompletionSource: undefined
+        autocompletionSource: undefined,
+        tutorialFlows: []
     },
     actions: {
         showMessage({commit}, message) {
@@ -21,7 +24,10 @@ export default {
         },
         isUnsaved({commit}, unsavedChange) {
             commit("setUnsavedChange", unsavedChange)
-        }
+        },
+        readTutorialFlows({commit}) {
+            return this.$http.get(`${apiUrl(this)}/flows/tutorial`).then((response) => commit("setTutorialFlows", response.data))
+        },
     },
     mutations: {
         setMessage(state, message) {
@@ -41,7 +47,10 @@ export default {
         },
         setAutocompletionSource(state, autocompletionSource) {
             state.autocompletionSource = autocompletionSource
-        }
+        },
+        setTutorialFlows(state, flows) {
+            state.tutorialFlows = flows
+        },
     },
     getters: {
         unsavedChange(state) {
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
index ffcd600f34..dd7090002b 100644
--- a/ui/src/translations/en.json
+++ b/ui/src/translations/en.json
@@ -790,6 +790,7 @@
       "previous": "Previous",
       "finish": "Finish",
       "skip": "Skip Tutorial",
+      "no_flows": "No flows available under tutorial namespace.",
       "steps": {
         "0": {
           "title": "Welcome to Kestra!",
diff --git a/ui/src/translations/fr.json b/ui/src/translations/fr.json
index f53bb14c71..cfa88355cf 100644
--- a/ui/src/translations/fr.json
+++ b/ui/src/translations/fr.json
@@ -767,6 +767,7 @@
       "previous": "Précédent",
       "finish": "Finir",
       "skip": "Passer le tutoriel",
+      "no_flows": "Aucun flux disponible dans l'espace de noms du tutoriel.",
       "steps": {
         "0": {
           "title": "Bienvenue chez Kestra!",