feat(ui): add guided tour on top bar

close #3152
kestra-io · Mar 8, 2024 · ec3515c · ec3515c
1 parent 6268a8d
commit ec3515c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 25 deletions.
diff --git a/ui/src/components/inputs/Editor.vue b/ui/src/components/inputs/Editor.vue
@@ -10,15 +10,6 @@
                         <el-tooltip :content="$t('Unfold content lines')" :persistent="false" transition="" :hide-after="0">
                             <el-button :icon="icon.UnfoldMoreHorizontal" @click="unfoldAll" size="small" />
                         </el-tooltip>
-                        <el-tooltip
-                            v-if="schemaType === 'flow' && creating"
-                            :content="$t('Reset guided tour')"
-                            :persistent="false"
-                            transition=""
-                            :hide-after="0"
-                        >
-                            <el-button :icon="icon.Help" @click="restartGuidedTour" size="small" />
-                        </el-tooltip>
                     </el-button-group>
                     <slot name="extends-navbar" />
                 </div>
@@ -89,7 +80,7 @@
         components: {
             MonacoEditor,
         },
-        emits: ["save", "execute", "focusout", "tab", "update:modelValue", "cursor", "restartGuidedTour"],
+        emits: ["save", "execute", "focusout", "tab", "update:modelValue", "cursor"],
         editor: undefined,
         data() {
             return {
@@ -356,21 +347,6 @@
                 this.editor.layout()
                 this.editor.focus()
             },
-            restartGuidedTour() {
-                localStorage.setItem("tourDoneOrSkip", undefined);
-                this.$store.commit("core/setGuidedProperties", {
-                    tourStarted: false,
-                    flowSource: undefined,
-                    saveFlow: false,
-                    executeFlow: false,
-                    validateInputs: false,
-                    monacoRange: undefined,
-                    monacoDisableRange: undefined
-                }
-                );
-                this.$tours["guidedTour"].start();
-                this.$emit("restartGuidedTour", true);
-            }
         },
     };
 </script>

diff --git a/ui/src/components/layout/TopNavBar.vue b/ui/src/components/layout/TopNavBar.vue
@@ -33,6 +33,13 @@
                             >
                                 <HelpBox class="align-middle" /> {{ $t("live help") }}
                             </a>
+                            <a
+                                @click="restartGuidedTour"
+                                class="d-flex gap-2 el-dropdown-menu__item"
+                            >
+                                <ProgressQuestion class="align-middle" /> {{ $t('Reset guided tour') }}
+                            </a>
+
                             <a
                                 href="https://kestra.io/docs?utm_source=app&utm_content=top-nav-bar"
                                 target="_blank"
@@ -95,6 +102,7 @@
     import Slack from "vue-material-design-icons/Slack.vue";
     import EmailHeartOutline from "vue-material-design-icons/EmailHeartOutline.vue";
     import Update from "vue-material-design-icons/Update.vue";
+    import ProgressQuestion from "vue-material-design-icons/ProgressQuestion.vue";
     import GlobalSearch from "./GlobalSearch.vue"
 
     export default {
@@ -108,6 +116,7 @@
             Slack,
             EmailHeartOutline,
             Update,
+            ProgressQuestion,
             GlobalSearch
         },
         props: {
@@ -125,6 +134,25 @@
             displayNavBar() {
                 return this.$route?.name !== "welcome";
             }
+        },
+        methods: {
+            restartGuidedTour() {
+                localStorage.setItem("tourDoneOrSkip", undefined);
+                this.$store.commit("core/setGuidedProperties", {
+                    tourStarted: false,
+                    flowSource: undefined,
+                    saveFlow: false,
+                    executeFlow: false,
+                    validateInputs: false,
+                    monacoRange: undefined,
+                    monacoDisableRange: undefined
+                });
+
+                this.$router
+                    .push({name: "flows/create"}).then(() => {
+                        this.$tours["guidedTour"].start();
+                    })
+            }
         }
     };
 </script>