feat(ui): update v-select to vue3 version

kestra-io · Dec 21, 2022 · 560ac04 · 560ac04
1 parent 411e116
commit 560ac04
Show file tree

Hide file tree

Showing 13 changed files with 23,304 additions and 8,585 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -35,7 +35,6 @@
     "prismjs": "^1.29.0",
     "qs": "^6.11.0",
     "throttle-debounce": "^5.0.0",
-    "v-hotkey": "^0.9.0",
     "vue": "^3.2.41",
     "vue-analytics": "^5.22.1",
     "vue-axios": "3.5.2",
@@ -45,7 +44,7 @@
     "vue-material-design-icons": "^5.1.2",
     "vue-nprogress": "^0.2.0",
     "vue-router": "^4.1.6",
-    "vue-select": "^3.20.0",
+    "vue-select": "^4.0.0-beta.6",
     "vue-sidebar-menu": "^5.2.4",
     "vue2-datepicker": "^3.11.0",
     "vuex": "^4.1.0",
@@ -56,9 +55,8 @@
     "@babel/eslint-parser": "^7.19.1",
     "@babel/preset-env": "^7.19.4",
     "@vue/cli-plugin-babel": "^5.0.8",
-    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.2.41",
     "@vue/test-utils": "^2.2.1",
     "@vue/vue3-jest": "^29.2.0",
     "babel-jest": "^29.1.2",
@@ -73,8 +71,7 @@
     "monaco-yaml": "4.0.0-alpha.0",
     "process": "^0.11.10",
     "sass": "^1.55.0",
-    "sass-loader": "^13.1.0",
-    "@vue/compiler-sfc": "^3.2.41"
+    "sass-loader": "^13.1.0"
   },
   "babel": {
     "presets": [

diff --git a/ui/src/components/executions/ChangeStatus.vue b/ui/src/components/executions/ChangeStatus.vue
@@ -119,7 +119,7 @@
                         if (execution.id === this.execution.id) {
                             this.$emit("follow")
                         } else {
-                            this.$router.push({name: "executions/update", params: {...execution, ...{tab: "gantt"}}});
+                            this.$router.push({name: "executions/update", params: {...{namespace: execution.namespace, flowId: execution.flowId, id: execution.id}, ...{tab: "gantt"}}});
                         }
 
                         this.$toast().success(this.$t("change status done"));

diff --git a/ui/src/components/executions/Restart.vue b/ui/src/components/executions/Restart.vue
@@ -112,7 +112,7 @@
                         if (execution.id === this.execution.id) {
                             this.$emit("follow")
                         } else {
-                            this.$router.push({name: "executions/update", params: {...execution, ...{tab: "gantt"}}});
+                            this.$router.push({name: "executions/update", params: {...{namespace: execution.namespace, flowId: execution.flowId, id: execution.id}, ...{tab: "gantt"}}});
                         }
 
                         this.$toast().success(this.$t(this.replayOrRestart + "ed"));

diff --git a/ui/src/components/flows/ScheduleItem.vue b/ui/src/components/flows/ScheduleItem.vue
@@ -65,7 +65,6 @@
     </b-list-group-item>
 </template>
 <script>
-    import Vue from "vue";
     const cronstrue = require("cronstrue/i18n");
     const cronParser = require("cron-parser");
     const cronValidator = require("cron-validator");
@@ -124,7 +123,7 @@
                     let current = this.item;
 
                     if (current.backfill === undefined) {
-                        Vue.set(current, "backfill", {})
+                        current.backfill = {};
                     }
 
                     if (val) {

diff --git a/ui/src/components/layout/TopNavBar.vue b/ui/src/components/layout/TopNavBar.vue
@@ -8,10 +8,14 @@
                 <b-breadcrumb>
                     <b-breadcrumb-item>
                         <router-link :to="{name: 'home'}">
-                            <home-outline /> {{ $t('home') }}
+                            <home-outline />
+                        </router-link>
+                    </b-breadcrumb-item>
+                    <b-breadcrumb-item v-for="(item, x) in topNavbar.breadcrumb" :to="item.link" :key="x">
+                        <router-link :to="item.link">
+                            {{ item.label }}
                         </router-link>
                     </b-breadcrumb-item>
-                    <b-breadcrumb-item v-for="(item, x) in topNavbar.breadcrumb" :to="item.link" :text="item.label" :key="x" />
                 </b-breadcrumb>
             </b-nav-text>
         </b-navbar-nav>

diff --git a/ui/src/components/logs/LogList.vue b/ui/src/components/logs/LogList.vue
@@ -13,7 +13,7 @@
                                 triggers="hover"
                             >
                                 {{ $t("from") }} :
-                                {{ $filter.date(attempt.state.startDate) }}
+                                {{ $filters.date(attempt.state.startDate) }}
                                 <br>
                                 {{ $t("to") }} :
                                 {{ $filters.date(attempt.state.endDate) }}

diff --git a/ui/src/main.js b/ui/src/main.js
@@ -4,7 +4,7 @@ import "./utils/global"
 
 import App from "./App.vue"
 import BootstrapVue from "bootstrap-vue"
-import Vue from "vue"
+import {createApp} from "vue"
 import {createI18n} from "vue-i18n"
 import NProgress from "vue-nprogress"
 
@@ -21,7 +21,7 @@ import moment from "moment"
 import routes from "./routes/routes"
 import stores from "./stores/store"
 import vSelect from "vue-select"
-import VueHotkey from "v-hotkey"
+// import VueHotkey from "v-hotkey"
 
 import {
     Chart,
@@ -49,7 +49,7 @@ Chart.register(
     Filler
 );
 
-const app = Vue.createApp(App)
+const app = createApp(App)
 
 // store
 let store = createStore(stores);
@@ -98,7 +98,7 @@ app.use()
 // })
 
 // others plugins
-app.use(VueHotkey)
+// app.use(VueHotkey)
 app.use(VueSidebarMenu);
 app.use(BootstrapVue);
 

diff --git a/ui/src/styles/_variable.scss b/ui/src/styles/_variable.scss
@@ -173,16 +173,6 @@ $modal-backdrop-bg: #000;
 // popover
 $popover-inner-border-radius: $border-radius;
 
-// v-side-bar
-$primary-color: $secondary !default;
-$base-bg: $white !default;
-$item-color: $tertiary !default;
-$item-active-color: $primary-color !default;
-$item-font-size: $font-size-base !default;
-$item-hover-bg: darken($secondary, 5%) !default;
-$item-hover-color: $white !default;
-$item-hover-bg: darken($secondary, 5%) !default;
-
 // Import
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/mixins";

diff --git a/ui/src/styles/components/vue-select.scss b/ui/src/styles/components/vue-select.scss
@@ -1,22 +1,26 @@
 
-$vs-colors: (
-    lightest: $gray-400,
-    light: $gray-600,
-    dark: $white-always,
-    darkest: $gray-900,
-);
-$vs-border-color: $input-border-color;
-$vs-dropdown-box-shadow: none;
-$vs-border-radius: $input-border-radius;
-$vs-dropdown-bg: $input-bg;
-$vs-state-active-bg: $primary;
-$vs-selected-bg: $light;
-$vs-selected-bg: $primary;
-$vs-controls-color: $gray-400;
-$vs-state-disabled-bg: $input-disabled-bg;
-$vs-state-disabled-color: $input-color;
-
-@import '~vue-select/src/scss/vue-select.scss';
+
+
+
+@import '~vue-select/dist/vue-select.css';
+
+:root {
+    --vs-colors--lightest: #{$gray-400};
+    --vs-colors--light: #{$gray-600};
+    --vs-colors--dark: #{$white-always};
+    --vs-colors--darkest: #{$gray-900};
+    --vs-border-color: #{$input-border-color};
+    --vs-dropdown-box-shadow: none;
+
+    --vs-border-radius: #{$input-border-radius};
+    --vs-dropdown-bg: #{$input-bg};
+    --vs-state-active-bg: #{$primary};
+    --vs-selected-bg: #{$primary};
+    --vs-controls-color: #{$gray-400};
+    --vs-state-disabled-bg: #{$input-disabled-bg};
+    --vs-state-disabled-color: #{$input-color};
+
+}
 
 .v-select {
     background: $input-bg;

diff --git a/ui/src/styles/components/vue-sidebar-menu.scss b/ui/src/styles/components/vue-sidebar-menu.scss
@@ -1,3 +1,13 @@
+// v-side-bar
+$primary-color: $secondary !default;
+$base-bg: $white !default;
+$item-color: $tertiary !default;
+$item-active-color: $primary-color !default;
+$item-font-size: $font-size-base !default;
+$item-hover-bg: darken($secondary, 5%) !default;
+$item-hover-color: $white !default;
+$item-hover-bg: darken($secondary, 5%) !default;
+
 @import "~vue-sidebar-menu/src/scss/vue-sidebar-menu.scss";
 
 .v-sidebar-menu {
@@ -15,14 +25,24 @@
     .vsm--icon {
         transition: left 0.3s ease;
         left: 25px;
+        font-size: 1.5em;
+        background-color: transparent !important;
+        padding-bottom: 15px;
+
+        svg {
+            top: 3px;
+            left: 3px;
+        }
     }
 
     .vsm--title {
         position: relative;
         left: 25px;
     }
 
-    .vsm-item {
+    .vsm--item {
+        transition: opacity 0.2s;
+
         * {
             transition: 0.3s all;
         }
@@ -56,4 +76,25 @@
     &.vsm_collapsed .vsm--icon {
         left: 0;
     }
+
+
+    a.vsm--link_active[href="#"] {
+        cursor: initial !important;
+    }
+
+
+    .vsm--dropdown {
+        .vsm--title {
+            top: 3px;
+        }
+    }
+
+    .vsm--dropdown_mobile-item {
+        .vsm--item {
+            .vsm--title {
+                left: 0;
+                position: relative;
+            }
+        }
+    }
 }
diff --git a/ui/src/utils/executionUtils.js b/ui/src/utils/executionUtils.js
@@ -1,10 +1,10 @@
-import Vue from "vue"
+import {getCurrentInstance} from "vue";
 
 export default class ExecutionUtils {
     static waitFor(execution, predicate) {
         return new Promise((resolve) => {
             let callback = () => {
-                Vue.axios.get(`/api/v1/executions/${execution.id}`).then(response => {
+                getCurrentInstance().appContext.config.globalProperties.$http.get(`/api/v1/executions/${execution.id}`).then(response => {
                     const result = predicate(response.data)
 
                     if (result === true) {

diff --git a/ui/src/utils/submitTask.js b/ui/src/utils/submitTask.js
@@ -32,7 +32,7 @@ export const executeTask = (submitor, flow, options) => {
         .then(response => {
             submitor.$store.commit("execution/setExecution", response.data)
             if (options.redirect) {
-                submitor.$router.push({name: "executions/update", params: {...response.data, ...{tab: "gantt"}}})
+                submitor.$router.push({name: "executions/update", params: {...{namespace: response.data.namespace, flowId: response.data.flowId, id: response.data.id}, ...{tab: "gantt"}}})
             }
 
             return response.data;