fix: required Boolean & Multiselect rules (#6445)

* fix: required Boolean & Multiselect rules * fix single line in light mode dark editor
kestra-io · Dec 12, 2024 · e8a98d9 · e8a98d9
1 parent 93db727
commit e8a98d9
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 9 deletions.
diff --git a/ui/src/components/inputs/Editor.vue b/ui/src/components/inputs/Editor.vue
@@ -466,6 +466,10 @@
                 box-shadow: 0 0 0 1px var(--bs-border-color) inset;
                 padding-top: 7px;
 
+                &.custom-dark-vs-theme {
+                    background-color: $input-bg;
+                }
+
                 html.dark & {
                     background-color: var(--bs-gray-100);
                 }

diff --git a/ui/src/components/inputs/InputsForm.vue b/ui/src/components/inputs/InputsForm.vue
@@ -5,7 +5,7 @@
             :key="input.id"
             :label="input.displayName ? input.displayName : input.id"
             :required="input.required !== false"
-            :rules="input.type === 'BOOLEAN' ? [requiredBooleanRule(input)] : undefined"
+            :rules="requiredRules(input)"
             :prop="input.id"
             :error="inputError(input.id)"
             :inline-message="true"
@@ -397,15 +397,38 @@
                     });
                 }
             },
-            requiredBooleanRule(input) {
-                return input.required !== false ? {
-                    validator: (_, val, callback) => {
-                        if(val === "undefined"){
-                            return callback(new Error(this.$t("is required", {field: input.displayName || input.id})));
+            requiredRules(input) {
+                if(input.required === false)
+                    return undefined
+
+                if(input.type === "BOOLEAN"){
+                    return [{
+                        validator: (_, val, callback) => {
+                            if(val === "undefined"){
+                                return callback(new Error(this.$t("is required", {field: input.displayName || input.id})));
+                            }
+                            callback()
+                        },
+                    }]
+                }
+
+                if(["ENUM", "SELECT", "MULTISELECT"].includes(input.type)){
+                    return [
+                        {
+                            required: true,
+                            validator: (_, __, callback) => {
+                                const val = input.type === "MULTISELECT" ? this.multiSelectInputs[input.id] : this.inputsValues[input.id]
+                                if(!val?.length){
+                                    return callback(new Error(this.$t("is required", {field: input.displayName || input.id})));
+                                }
+                                callback()
+                            },
+                            trigger: "change",
                         }
-                        callback()
-                    },
-                } : undefined
+                    ]
+                }
+
+                return undefined
             }
         },
         watch: {