fix(ui) add a better linter configuration

kestra-io · Nov 5, 2020 · cd99681 · cd99681
1 parent 367f951
commit cd99681
Show file tree

Hide file tree

Showing 89 changed files with 2,748 additions and 2,600 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,25 @@
+root = true
+
+[*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=false
+trim_trailing_whitespace=true
+indent_style=space
+indent_size=4
+continuation_indent_size=4
+
+[*.yml]
+indent_size=2
+
+[*.md]
+indent_size=2
+
+[*.yaml]
+indent_size=2
+
+[*.json]
+indent_size=2
+
+[*.css]
+indent_size=2
diff --git a/ui/babel.config.js b/ui/babel.config.js
@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}
+    presets: ["@vue/app"]
+};
diff --git a/ui/package.json b/ui/package.json
@@ -65,10 +65,37 @@
       "node": true
     },
     "extends": [
-      "plugin:vue/essential",
+      "plugin:vue/strongly-recommended",
       "eslint:recommended"
     ],
-    "rules": {},
+    "rules": {
+      "vue/html-indent": [
+        "error",
+        4,
+        {
+          "baseIndent": 1
+        }
+      ],
+      "vue/script-indent": [
+        "error",
+        4,
+        {
+          "baseIndent": 1
+        }
+      ],
+      "vue/max-attributes-per-line": [
+        "error",
+        {
+          "singleline": 7
+        }
+      ],
+      "quotes": [
+        "error",
+        "double"
+      ],
+      "vue/object-curly-spacing": ["error", "never"],
+      "object-curly-spacing": ["error", "never"]
+    },
     "parserOptions": {
       "parser": "babel-eslint"
     }

diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -1,59 +1,59 @@
 <template>
     <div>
-        <nprogress-container></nprogress-container>
-        <top-nav-bar :menuCollapsed="menuCollapsed" />
+        <nprogress-container />
+        <top-nav-bar :menu-collapsed="menuCollapsed" />
         <Menu @onMenuCollapse="onMenuCollapse" />
-        <custom-toast v-if="errorMessage" :noAutoHide="true" toastId="errorToast" :content="errorMessage" :title="$t('error')" />
+        <custom-toast v-if="errorMessage" :no-auto-hide="true" toast-id="errorToast" :content="errorMessage" :title="$t('error')" />
         <div id="app" class="container-fluid">
             <div class="content-wrapper" :class="menuCollapsed">
-                <router-view></router-view>
+                <router-view />
             </div>
         </div>
     </div>
 </template>
 
 <script>
-import Menu from "Override/components/Menu.vue";
-import TopNavBar from "./components/layout/TopNavBar";
-import CustomToast from "./components/customToast";
-import NprogressContainer from "vue-nprogress/src/NprogressContainer";
-import { mapState } from "vuex";
+    import Menu from "Override/components/Menu.vue";
+    import TopNavBar from "./components/layout/TopNavBar";
+    import CustomToast from "./components/customToast";
+    import NprogressContainer from "vue-nprogress/src/NprogressContainer";
+    import {mapState} from "vuex";
 
-export default {
-    name: "app",
-    components: {
-        Menu,
-        TopNavBar,
-        CustomToast,
-        NprogressContainer
-    },
-    data() {
-        return {
-            menuCollapsed: "",
-        };
-    },
-    computed: {
-        ...mapState('core', ['errorMessage'])
-    },
-    created() {
-        if (this.$route.path === "/") {
-            this.$router.push({ name: "flowsList" });
-        }
+    export default {
+        name: "App",
+        components: {
+            Menu,
+            TopNavBar,
+            CustomToast,
+            NprogressContainer
+        },
+        data() {
+            return {
+                menuCollapsed: "",
+            };
+        },
+        computed: {
+            ...mapState("core", ["errorMessage"])
+        },
+        created() {
+            if (this.$route.path === "/") {
+                this.$router.push({name: "flowsList"});
+            }
 
-        this.displayApp()
+            this.displayApp()
 
-        this.onMenuCollapse(localStorage.getItem("menuCollapsed") === "true");
-    },
-    methods: {
-        onMenuCollapse(collapse) {
-            this.menuCollapsed = collapse ? "menu-collapsed" : "menu-not-collapsed";
+            this.onMenuCollapse(localStorage.getItem("menuCollapsed") === "true");
         },
-        displayApp() {
-            document.getElementById("loader-wrapper").style.display = "none";
-            document.getElementById("app-container").style.display = "block";
+        methods: {
+            onMenuCollapse(collapse) {
+                this.menuCollapsed = collapse ? "menu-collapsed" : "menu-not-collapsed";
+            },
+            displayApp() {
+                document.getElementById("loader-wrapper").style.display = "none";
+                document.getElementById("app-container").style.display = "block";
+            }
         }
-    }
-};
+    };
 </script>
 
 

diff --git a/ui/src/components/Status.vue b/ui/src/components/Status.vue
@@ -1,45 +1,45 @@
 <template>
     <b-button class="status text-white rounded-lg" :class="'btn-' + cls">
-        <component :is="icon"></component>
-        {{status | lower | cap }}
+        <component :is="icon" />
+        {{ status | lower | cap }}
     </b-button>
 </template>
 <script>
 
-import State from "../utils/state";
-import PauseCircleOutline from "vue-material-design-icons/PauseCircleOutline";
-import CheckCircleOutline from "vue-material-design-icons/CheckCircleOutline";
-import PlayCircleOutline from "vue-material-design-icons/PlayCircleOutline";
-import CloseCircleOutline from "vue-material-design-icons/CloseCircleOutline";
-import StopCircleOutline from "vue-material-design-icons/StopCircleOutline";
+    import State from "../utils/state";
+    import PauseCircleOutline from "vue-material-design-icons/PauseCircleOutline";
+    import CheckCircleOutline from "vue-material-design-icons/CheckCircleOutline";
+    import PlayCircleOutline from "vue-material-design-icons/PlayCircleOutline";
+    import CloseCircleOutline from "vue-material-design-icons/CloseCircleOutline";
+    import StopCircleOutline from "vue-material-design-icons/StopCircleOutline";
 
-export default {
-    components: {
-        PauseCircleOutline,
-        CheckCircleOutline,
-        PlayCircleOutline,
-        CloseCircleOutline,
-        StopCircleOutline
-    },
-    props: {
-        status: {
-            type: String,
-            required: true
+    export default {
+        components: {
+            PauseCircleOutline,
+            CheckCircleOutline,
+            PlayCircleOutline,
+            CloseCircleOutline,
+            StopCircleOutline
         },
-        size: {
-            type: String,
-            default: ""
-        }
-    },
-    computed: {
-        cls() {
-            return State.colorClass()[this.status] + (this.size ? " btn-" + this.size : "");
+        props: {
+            status: {
+                type: String,
+                required: true
+            },
+            size: {
+                type: String,
+                default: ""
+            }
         },
-        icon () {
-            return State.icon()[this.status];
+        computed: {
+            cls() {
+                return State.colorClass()[this.status] + (this.size ? " btn-" + this.size : "");
+            },
+            icon () {
+                return State.icon()[this.status];
+            }
         }
-    }
-};
+    };
 </script>
 <style scoped>
 button.status {

diff --git a/ui/src/components/customToast.vue b/ui/src/components/customToast.vue
@@ -2,55 +2,62 @@
     <b-toast @hide="onHide" :id="toastId" :variant="variant" solid :no-auto-hide="noAutoHide">
         <template v-slot:toast-title>
             <div class="d-flex flex-grow-1 align-items-baseline">
-                <strong class="mr-auto">{{title}}</strong>
+                <strong class="mr-auto">{{ title }}</strong>
             </div>
         </template>
-        <span>{{content.message || content}}</span>
-        <b-table class="mt-2 mb-0" small bordered v-if="items && items.length > 0" striped hover
-                 :items="items"></b-table>
+        <span>{{ content.message || content }}</span>
+        <b-table
+            class="mt-2 mb-0"
+            small
+            bordered
+            v-if="items && items.length > 0"
+            striped
+            hover
+            :items="items"
+        />
     </b-toast>
 </template>
 <script>
-export default {
-    props: {
-        variant: {
-            type: String,
-            default: "danger"
+    export default {
+        props: {
+            variant: {
+                type: String,
+                default: "danger"
+            },
+            title: {
+                type: String,
+                required: true
+            },
+            toastId: {
+                type: String,
+                required: true
+            },
+            content: {
+                type: Object,
+                required: true
+            },
+            noAutoHide: {
+                type: Boolean,
+                default: false
+            }
         },
-        title: {
-            type: String,
-            required: true
+        mounted() {
+            this.$bvToast.show(this.toastId);
         },
-        toastId: {
-            type: String,
-            required: true
+        computed: {
+            items() {
+                const messages = this.content && this.content._embedded && this.content._embedded.errors ? this.content._embedded.errors : []
+                return Array.isArray(messages) ? messages : [messages]
+            }
         },
-        content: {
-            type: Object,
-            required: true
-        },
-        noAutoHide: {
-            type: Boolean,
-            default: false
-        }
-    },
-    mounted() {
-        this.$bvToast.show(this.toastId);
-    },
-    computed: {
-        items() {
-            const messages = this.content && this.content._embedded && this.content._embedded.errors ? this.content._embedded.errors : []
-            return Array.isArray(messages) ? messages : [messages]
+        methods: {
+            onHide() {
+                setTimeout(() => {
+                    this.$store.commit("core/setErrorMessage", undefined);
+                }, 1000);
+            }
         }
-    },
-    methods: {
-        onHide() {
-            setTimeout(() => {
-                this.$store.commit("core/setErrorMessage", undefined);
-            }, 1000);
-        }
-    }
-};
+    };
 </script>
 <style lang="scss">
     @import "../styles/variable";