refactor: add async loading for better performance (#6643)

Co-authored-by: YannC <[email protected]>

ui/.storybook/main.ts

@@ -2,7 +2,7 @@ import type {StorybookConfig} from "@storybook/vue3-vite";
 
 const config: StorybookConfig = {
   stories: [
-    "../@(tests|theme)/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+    "../tests/**/*.stories.@(js|jsx|mjs|ts|tsx)"
 ],
   addons: [
     "@storybook/addon-essentials",

ui/package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@js-joda/core": "^5.6.3",
-    "@kestra-io/ui-libs": "^0.0.83",
+    "@kestra-io/ui-libs": "^0.0.100",
     "@vue-flow/background": "^1.3.2",
     "@vue-flow/controls": "^1.1.2",
     "@vue-flow/core": "^1.41.6",

ui/src/components/ErrorToastContainer.vue

@@ -20,7 +20,7 @@
 
 <script>
     import Slack from "vue-material-design-icons/Slack.vue";
-    import Markdown from "../utils/markdown";
+    import * as Markdown from "../utils/markdown";
 
     export default {
         props: {

ui/src/components/Status.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-    import State from "../utils/state";
+    import {State} from "@kestra-io/ui-libs"
 
     const StatusRemap = {
         "failed": "error",

ui/src/components/content/ApiDoc.vue

@@ -1,6 +1,7 @@
 <template>
     <rapi-doc
-        :spec-url="$store.getters['doc/resourceUrl']('kestra.yml')"
+        v-if="ready"
+        :spec-url="store.getters['doc/resourceUrl']('kestra.yml')"
         :theme="theme"
         render-style="view"
         show-header="false"
@@ -14,23 +15,23 @@
 </template>
 
 <script setup lang="ts">
-    import "rapidoc";
-</script>
+    import {ref} from "vue";
+    import {useStore} from "vuex";
+    
+    const store = useStore();
+    const ready = ref(false)
+    // @ts-expect-error rapidoc is not typed
+    import("rapidoc").then(() => {
+        ready.value = true
+    });
 
-<script lang="ts">
-    export default {
-        data() {
-            return {
-                theme: localStorage.getItem("theme") === "dark" ? "dark" : "light"
-            }
-        }
-    }
+
+    const theme = ref(localStorage.getItem("theme") === "dark" ? "dark" : "light")
 </script>
 
 <style lang="scss" scoped>
     rapi-doc {
         background: transparent;
         width: 100%;
     }
-
 </style>

ui/src/components/content/ApiDocee.vue

@@ -1,6 +1,6 @@
 <template>
     <rapi-doc
-        :spec-url="$store.getters['doc/resourceUrl']('kestra-ee.yml')"
+        :spec-url="store.getters['doc/resourceUrl']('kestra-ee.yml')"
         :theme="theme"
         render-style="view"
         show-header="false"
@@ -14,17 +14,18 @@
 </template>
 
 <script setup lang="ts">
-    import "rapidoc";
-</script>
+    import {ref} from "vue";
+    import {useStore} from "vuex";
+    
+    const store = useStore();
+    const ready = ref(false)
+    // @ts-expect-error rapidoc is not typed
+    import("rapidoc").then(() => {
+        ready.value = true
+    });
 
-<script lang="ts">
-    export default {
-        data() {
-            return {
-                theme: localStorage.getItem("theme") === "dark" ? "dark" : "light"
-            }
-        }
-    }
+
+    const theme = ref(localStorage.getItem("theme") === "dark" ? "dark" : "light")
 </script>
 
 <style lang="scss" scoped>

ui/src/components/dashboard/Dashboard.vue

@@ -236,7 +236,7 @@
     import moment from "moment";
 
     import {apiUrl} from "override/utils/route";
-    import State from "../../utils/state";
+    import {State} from "@kestra-io/ui-libs"
 
     import Header from "./components/Header.vue";
     import Card from "./components/Card.vue";

ui/src/components/dashboard/components/charts/custom/Bar.vue

@@ -24,7 +24,7 @@
     import moment from "moment";
 
     import {useRoute} from "vue-router";
-    import Utils from "@kestra-io/ui-libs/src/utils/Utils";
+    import {Utils} from "@kestra-io/ui-libs";
 
     const store = useStore();
 

ui/src/components/dashboard/components/charts/custom/TimeSeries.vue

@@ -25,7 +25,7 @@
     import moment from "moment";
 
     import {useRoute} from "vue-router";
-    import Utils from "@kestra-io/ui-libs/src/utils/Utils";
+    import {Utils} from "@kestra-io/ui-libs";
 
     const store = useStore();
 

ui/src/components/dashboard/components/charts/legend.js

@@ -1,5 +1,5 @@
 import Utils from "../../../../utils/utils.js";
-import {cssVariable} from "@kestra-io/ui-libs/src/utils/global";
+import {cssVariable} from "@kestra-io/ui-libs";
 import {getConsistentHEXColor} from "../../../../utils/charts.js";
 
 const getOrCreateLegendList = (chart, id, direction = "row") => {

ui/src/components/dashboard/components/tables/custom/Table.vue

@@ -40,7 +40,7 @@
     import moment from "moment";
 
     import {useRoute} from "vue-router";
-    import Utils from "@kestra-io/ui-libs/src/utils/Utils";
+    import {Utils} from "@kestra-io/ui-libs";
 
     const {t} = useI18n({useScope: "global"});
 

ui/src/components/dashboard/components/tables/executions/InProgress.vue

@@ -130,7 +130,7 @@
 
     import moment from "moment";
 
-    import State from "../../../../../utils/state.js"
+    import {State} from "@kestra-io/ui-libs";
 
     import Status from "../../../../Status.vue";
     import NoData from "../../../../layout/NoData.vue";

ui/src/components/docs/ContextDocs.vue

@@ -31,16 +31,14 @@
 
     import OpenInNew from "vue-material-design-icons/OpenInNew.vue";
 
-    import useMarkdownParser from "@kestra-io/ui-libs/src/composables/useMarkdownParser";
-    import MDCRenderer from "@kestra-io/ui-libs/src/components/content/MDCRenderer.vue";
+    import {MDCRenderer, getMDCParser} from "@kestra-io/ui-libs";
     import DocsLayout from "./DocsLayout.vue";
     import ContextDocsLink from "./ContextDocsLink.vue";
     import ContextChildCard from "./ContextChildCard.vue";
     import DocsMenu from "./ContextDocsMenu.vue";
     import ContextInfoContent from "../ContextInfoContent.vue";
     import ContextChildTableOfContents from "./ContextChildTableOfContents.vue";
 
-    const parse = useMarkdownParser();
     const store = useStore();
     const {t} = useI18n({useScope: "global"});
 
@@ -102,6 +100,7 @@
         if (!("canShare" in navigator)) {
             content = content.replaceAll(/\s*web-share\s*/g, "");
         }
+        const parse = await getMDCParser()
         ast.value = await parse(content);
     }
 </script>

ui/src/components/docs/Docs.vue

@@ -14,15 +14,13 @@
 </template>
 
 <script>
-    import useMarkdownParser from "@kestra-io/ui-libs/src/composables/useMarkdownParser";
-    import MDCRenderer from "@kestra-io/ui-libs/src/components/content/MDCRenderer.vue";
+    import {MDCRenderer, getMDCParser} from "@kestra-io/ui-libs";
     import TopNavBar from "../layout/TopNavBar.vue";
     import {mapGetters} from "vuex";
     import DocsLayout from "./DocsLayout.vue";
     import Toc from "./Toc.vue";
     import {getCurrentInstance} from "vue";
 
-    const parse = useMarkdownParser();
 
     export default {
         computed: {
@@ -79,6 +77,7 @@
                     if (!("canShare" in navigator)) {
                         content = content.replaceAll(/\s*web-share\s*/g, "");
                     }
+                    const parse = await getMDCParser();
                     this.ast = await parse(content);
                 },
                 immediate: true

ui/src/components/executions/ChangeExecutionStatus.vue

@@ -73,7 +73,7 @@
     import {mapState} from "vuex";
     import permission from "../../models/permission";
     import action from "../../models/action";
-    import State from "../../utils/state";
+    import {State} from "@kestra-io/ui-libs"
     import Status from "../../components/Status.vue";
     import ExecutionUtils from "../../utils/executionUtils";
 

ui/src/components/executions/ChangeStatus.vue

@@ -67,7 +67,7 @@
     import {mapState} from "vuex";
     import permission from "../../models/permission";
     import action from "../../models/action";
-    import State from "../../utils/state";
+    import {State} from "@kestra-io/ui-libs"
     import Status from "../../components/Status.vue";
     import ExecutionUtils from "../../utils/executionUtils";
     import {shallowRef} from "vue";

ui/src/components/executions/ExecutionRootTopBar.vue

@@ -41,7 +41,7 @@
     import TopNavBar from "../layout/TopNavBar.vue";
     import permission from "../../models/permission";
     import action from "../../models/action";
-    import State from "../../utils/state";
+    import {State} from "@kestra-io/ui-libs"
     import {apiUrl} from "override/utils/route";
     import {mapState} from "vuex";
 

ui/src/components/executions/Executions.vue

@@ -379,7 +379,7 @@
     import Kicon from "../Kicon.vue"
     import Labels from "../layout/Labels.vue"
     import RestoreUrl from "../../mixins/restoreUrl";
-    import State from "../../utils/state";
+    import {State} from "@kestra-io/ui-libs"
     import Id from "../Id.vue";
     import _merge from "lodash/merge";
     import permission from "../../models/permission";

ui/src/components/executions/ForEachStatus.vue

@@ -28,9 +28,9 @@
     </div>
 </template>
 <script>
-    import {cssVariable} from "@kestra-io/ui-libs/src/utils/global";
+    import {cssVariable} from "@kestra-io/ui-libs";
     import {stateDisplayValues} from "../../utils/constants";
-    import State from "../../utils/state";
+    import {State} from "@kestra-io/ui-libs"
     import throttle from "lodash/throttle"
 
     export default {

ui/src/components/executions/ForceRun.vue

@@ -36,9 +36,9 @@
 
 <script>
     import {mapState} from "vuex";
+    import {State} from "@kestra-io/ui-libs";
     import permission from "../../models/permission";
     import action from "../../models/action";
-    import State from "../../utils/state.js";
 
     export default {
         props: {

ui/src/components/executions/Gantt.vue

@@ -84,7 +84,7 @@
 <script>
     import TaskRunDetails from "../logs/TaskRunDetails.vue";
     import {mapState} from "vuex";
-    import State from "../../utils/state";
+    import {State} from "@kestra-io/ui-libs"
     import Duration from "../layout/Duration.vue";
     import Utils from "../../utils/utils";
     import FlowUtils from "../../utils/flowUtils";

ui/src/components/executions/Kill.vue

@@ -33,7 +33,7 @@
     import {mapState} from "vuex";
     import permission from "../../models/permission";
     import action from "../../models/action";
-    import State from "../../utils/state";
+    import {State} from "@kestra-io/ui-libs"
 
     export default {
         props: {

ui/src/components/executions/Logs.vue

@@ -117,7 +117,7 @@
     import {DynamicScroller, DynamicScrollerItem} from "vue-virtual-scroller";
     import "vue-virtual-scroller/dist/vue-virtual-scroller.css"
     import Collapse from "../layout/Collapse.vue";
-    import State from "../../utils/state";
+    import {State} from "@kestra-io/ui-libs"
     import Utils from "../../utils/utils";
     import LogLine from "../logs/LogLine.vue";
     import Restart from "./Restart.vue";