fix(ui): graciously handle situation with no tutorial flows loaded (#…

…4609)
kestra-io · Aug 8, 2024 · 9259a80 · 9259a80
1 parent 595459f
commit 9259a80
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 15 deletions.
diff --git a/ui/src/components/layout/TopNavBar.vue b/ui/src/components/layout/TopNavBar.vue
@@ -132,14 +132,15 @@
         },
         computed: {
             ...mapState("api", ["version"]),
+            ...mapState("core", ["tutorialFlows"]),
             ...mapGetters("core", ["guidedProperties"]),
             ...mapGetters("auth", ["user"]),
             displayNavBar() {
                 return this.$route?.name !== "welcome";
             },
             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
@@ -27,15 +27,15 @@
                         <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
                                     :src="currentStep(tour).icon"
                                     :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();
@@ -299,7 +299,7 @@
                     name: "flows/update",
                     params: {
                         namespace: "tutorial",
-                        id: flows.value[activeFlow.value].id,
+                        id: flows.value[activeFlow.value]?.id,
                         tab: "editor",
                     },
                 });
@@ -311,7 +311,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);
@@ -418,11 +418,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>
 
@@ -526,6 +522,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
@@ -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
@@ -761,6 +761,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
@@ -733,6 +733,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!",