fix(ui): tabs are loaded after config is loaded (#1385)

kestra-io · May 23, 2023 · c7e8ad9 · c7e8ad9
1 parent 694af59
commit c7e8ad9
Showing 1 changed file with 30 additions and 33 deletions.
diff --git a/ui/src/override/components/LeftMenu.vue b/ui/src/override/components/LeftMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <sidebar-menu
         id="side-menu"
-        :menu="disabledCurrentRoute(menu)"
+        :menu="menu"
         @update:collapsed="onToggleCollapse"
         :show-one-child="true"
         width="268px"
@@ -27,8 +27,6 @@
 </template>
 
 <script>
-    import {shallowRef} from "vue"
-
     import {SidebarMenu} from "vue-sidebar-menu";
     import ChevronLeft from "vue-material-design-icons/ChevronLeft.vue";
     import ChevronRight from "vue-material-design-icons/ChevronRight.vue";
@@ -80,7 +78,7 @@
                         href: "/",
                         title: this.$t("home"),
                         icon: {
-                            element: shallowRef(ViewDashboardVariantOutline),
+                            element: ViewDashboardVariantOutline,
                             class: "menu-icon",
                         },
                     },
@@ -91,7 +89,7 @@
                         ],
                         title: this.$t("flows"),
                         icon: {
-                            element: shallowRef(FileTreeOutline),
+                            element: FileTreeOutline,
                             class: "menu-icon",
                         },
                         exact: false,
@@ -103,7 +101,7 @@
                         ],
                         title: this.$t("templates"),
                         icon: {
-                            element: shallowRef(ContentCopy),
+                            element: ContentCopy,
                             class: "menu-icon",
                         },
                     },
@@ -114,7 +112,7 @@
                         ],
                         title: this.$t("executions"),
                         icon: {
-                            element: shallowRef(TimelineClockOutline),
+                            element: TimelineClockOutline,
                             class: "menu-icon"
                         },
                     },
@@ -123,7 +121,7 @@
                         alias: ["/taskruns*"],
                         title: this.$t("taskruns"),
                         icon: {
-                            element: shallowRef(TimelineTextOutline),
+                            element: TimelineTextOutline,
                             class: "menu-icon"
                         },
                         hidden: !(this.configs && this.configs.isTaskRunEnabled)
@@ -135,7 +133,7 @@
                         ],
                         title: this.$t("logs"),
                         icon: {
-                            element: shallowRef(NotebookOutline),
+                            element: NotebookOutline,
                             class: "menu-icon"
                         },
                     },
@@ -145,15 +143,15 @@
                         ],
                         title: this.$t("documentation.documentation"),
                         icon: {
-                            element: shallowRef(BookMultipleOutline),
+                            element: BookMultipleOutline,
                             class: "menu-icon"
                         },
                         child: [
                             {
                                 href: "https://kestra.io/docs/",
                                 title: this.$t("documentation.developer"),
                                 icon: {
-                                    element: shallowRef(FileCodeOutline),
+                                    element: FileCodeOutline,
                                     class: "menu-icon"
                                 },
                                 external: true
@@ -162,15 +160,15 @@
                                 href: "/plugins",
                                 title: this.$t("plugins.names"),
                                 icon: {
-                                    element: shallowRef(GoogleCirclesExtended),
+                                    element: GoogleCirclesExtended,
                                     class: "menu-icon"
                                 },
                             },
                             {
                                 href: "https://kestra.io/docs/flow-examples/",
                                 title: this.$t("documentation.examples"),
                                 icon: {
-                                    element: shallowRef(FileDocumentArrowRightOutline),
+                                    element: FileDocumentArrowRightOutline,
                                     class: "menu-icon"
                                 },
                                 external: true
@@ -179,7 +177,7 @@
                                 href: "https://api.kestra.io/v1/communities/slack/redirect",
                                 title: "Slack",
                                 icon: {
-                                    element: shallowRef(Slack),
+                                    element: Slack,
                                     class: "menu-icon"
                                 },
                                 external: true
@@ -188,7 +186,7 @@
                                 href: "https://github.com/kestra-io/kestra/issues",
                                 title: this.$t("documentation.github"),
                                 icon: {
-                                    element: shallowRef(Github),
+                                    element: Github,
                                     class: "menu-icon"
                                 },
                                 external: true
@@ -203,39 +201,38 @@
                         ],
                         title: this.$t("settings"),
                         icon: {
-                            element: shallowRef(CogOutline),
+                            element: CogOutline,
                             class: "menu-icon"
                         }
                     }
                 ];
             }
 
         },
-        created() {
-            this.menu = this.disabledCurrentRoute(this.generateMenu());
-        },
         watch: {
-            "$i18n.locale"() {
-                this.menu = this.disabledCurrentRoute(this.generateMenu());
-            },
-            $route() {
-                this.menu = this.disabledCurrentRoute(this.generateMenu());
+            menu: {
+                handler() {
+                        this.$el.querySelectorAll(".vsm--item span").forEach(e => {
+                            //empty icon name on mouseover
+                            e.setAttribute("title", "")
+                        });
+                },
+                flush: 'post'
             }
         },
         data() {
             return {
-                collapsed: localStorage.getItem("menuCollapsed") === "true",
-                menu: []
+                collapsed: localStorage.getItem("menuCollapsed") === "true"
             };
         },
-        mounted() {
-            this.$el.querySelectorAll(".vsm--item span").forEach(e => {
-                //empty icon name on mouseover
-                e.setAttribute("title","")
-            })
-        },
         computed: {
-            ...mapState("misc", ["configs"])
+            ...mapState("misc", ["configs"]),
+            menu() {
+                if (this.configs) {
+                    return this.disabledCurrentRoute(this.generateMenu());
+                }
+                return [];
+            }
         }
     };
 </script>