feat(ui): add helpers card on home

kestra-io · Mar 2, 2023 · 1808cfe · 1808cfe
1 parent e0dd016
commit 1808cfe
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 66 deletions.
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -106,7 +106,7 @@
         watch: {
             $route(to) {
                 if (to.name === "home" && localStorage.getItem("tourDoneOrSkip") !== "true") {
-                    this.redirectToWelcome();
+                    this.redirectToWelcome && this.redirectToWelcome();
                 }
             }
         }

diff --git a/ui/src/components/home/Home.vue b/ui/src/components/home/Home.vue
@@ -100,6 +100,7 @@
                     </router-link>
                 </el-row>
             </el-card>
+            <onboarding-bottom v-if="!flowId" />
         </div>
     </div>
 
@@ -121,10 +122,12 @@
     import TriggerFlow from "../flows/TriggerFlow.vue";
     import permission from "../../models/permission";
     import action from "../../models/action";
+    import OnboardingBottom from "../onboarding/OnboardingBottom.vue";
 
     export default {
         mixins: [RouteContext, RestoreUrl],
         components: {
+            OnboardingBottom,
             Collapse,
             StateGlobalChart,
             NamespaceSelect,

diff --git a/ui/src/components/onboarding/OnboardingBottom.vue b/ui/src/components/onboarding/OnboardingBottom.vue
@@ -0,0 +1,59 @@
+<template>
+    <el-col class="main-col mt-4">
+        <el-row :gutter="25" justify="center">
+            <el-col
+                v-for="card in cards"
+                :key="card.title"
+                :lg="8"
+                :md="24"
+                :offset="32"
+            >
+                <onboarding-card
+                    :title="card.title"
+                    :content="card.content"
+                    :img-class="card.imgClass"
+                    :link="card.link"
+                />
+            </el-col>
+        </el-row>
+    </el-col>
+</template>
+
+<script>
+    import {mapGetters} from "vuex";
+    import OnboardingCard from "./OnboardingCard.vue";
+
+    export default {
+        components: {
+            OnboardingCard
+        },
+        data() {
+            return {
+                cards: [
+                    {
+                        title: this.$t("get started"),
+                        content: this.$t("get started content"),
+                        imgClass: "get-started",
+                        link: "https://kestra.io/docs/getting-started/"
+                    },
+                    {
+                        title: this.$t("watch demo"),
+                        content: this.$t("watch demo content"),
+                        imgClass: "demo-video",
+                        link: "https://api.kestra.io/r/onboarding-video"
+                    },
+                    {
+                        title: this.$t("need help?"),
+                        content: this.$t("need help? content"),
+                        imgClass: "help",
+                        link: "https://api.kestra.io/v1/communities/slack/redirect"
+                    }
+                ]
+            }
+        },
+        computed: {
+            ...mapGetters("core", ["guidedProperties"])
+        }
+    }
+</script>
+
diff --git a/ui/src/components/onboarding/Welcome.vue b/ui/src/components/onboarding/Welcome.vue
@@ -1,12 +1,12 @@
 <template>
-    <el-col class="main-col">
+    <el-col class="mt-4">
         <div>
             <h1>{{ $t('welcome aboard') }}</h1>
             <h4>
                 {{ $t('welcome aboard content') }}
             </h4>
         </div>
-        <el-row>
+        <el-row class="mt-4">
             <el-col :lg="24">
                 <el-card>
                     <el-row justify="center">
@@ -17,7 +17,7 @@
                             <h3 v-html="$t('welcome display require')" />
                         </el-col>
                     </el-row>
-                    <el-row justify="center">
+                    <el-row justify="center" class="mt-4">
                         <router-link :to="{name: 'flows/create'}">
                             <el-button size="large" type="info">
                                 {{ $t('welcome button create') }}
@@ -27,57 +27,18 @@
                 </el-card>
             </el-col>
         </el-row>
-        <el-row :gutter="32" justify="center">
-            <el-col
-                v-for="card in cards"
-                :key="card.title"
-                :lg="8"
-                :md="24"
-                :offset="32"
-            >
-                <onboarding-card
-                    :title="card.title"
-                    :content="card.content"
-                    :img-class="card.imgClass"
-                    :link="card.link"
-                />
-            </el-col>
-        </el-row>
+        <onboarding-bottom />
     </el-col>
 </template>
 
 <script>
     import {mapGetters} from "vuex";
-    import OnboardingCard from "./OnboardingCard.vue";
+    import OnboardingBottom from "./OnboardingBottom.vue";
 
     export default {
         name: "CreateFlow",
         components: {
-            OnboardingCard
-        },
-        data() {
-            return {
-                cards: [
-                    {
-                        title: this.$t("get started"),
-                        content: this.$t("get started content"),
-                        imgClass: "get-started",
-                        link: "https://kestra.io/docs/getting-started/"
-                    },
-                    {
-                        title: this.$t("watch demo"),
-                        content: this.$t("watch demo content"),
-                        imgClass: "demo-video",
-                        link: "https://api.kestra.io/r/onboarding-video"
-                    },
-                    {
-                        title: this.$t("need help?"),
-                        content: this.$t("need help? content"),
-                        imgClass: "help",
-                        link: "https://api.kestra.io/v1/communities/slack/redirect"
-                    }
-                ]
-            }
+            OnboardingBottom
         },
         computed: {
             ...mapGetters("core", ["guidedProperties"])
@@ -86,26 +47,10 @@
 </script>
 
 <style scoped lang="scss">
-    .main-col {
-        padding-top: calc(var(--spacer) * 2);
-    }
-
     h3 {
         text-align: center;
     }
 
-    h3, h4 {
-        line-height: var(--line-height-lg);
-    }
-
-    .el-col {
-        margin-bottom: var(--spacer);
-    }
-
-    h4 {
-        margin-bottom: var(--spacer);
-    }
-
     .onboarding-img {
         height: 300px;
         width: 100%;

diff --git a/ui/src/main.js b/ui/src/main.js
@@ -1,6 +1,5 @@
 import {createApp} from "vue"
 import VueAxios from "vue-axios";
-import Vue3Tour from "vue3-tour"
 
 import App from "./App.vue"
 import initApp from "./utils/init"
@@ -21,7 +20,5 @@ configureAxios((instance) => {
     store.axios = app.axios;
 }, store, router);
 
-app.use(Vue3Tour)
-
 // mount
 app.mount("#app")
diff --git a/ui/src/utils/init.js b/ui/src/utils/init.js
@@ -22,7 +22,7 @@ import {
 } from "chart.js";
 import {TreemapController, TreemapElement} from "chartjs-chart-treemap"
 import {MatrixController, MatrixElement} from "chartjs-chart-matrix";
-
+import Vue3Tour from "vue3-tour"
 
 import Toast from "./toast";
 import filters from "./filters";
@@ -111,6 +111,7 @@ export default (app, routes, stores, translations) => {
     // others plugins
     app.use(VueSidebarMenu);
     app.use(Toast)
+    app.use(Vue3Tour)
 
     // filters
     app.config.globalProperties.$filters = filters;