From e8a98d9d3ca7d955c1676eb6395796849fcfd843 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Barth=C3=A9l=C3=A9my=20Ledoux?= <ledouxb@me.com>
Date: Thu, 12 Dec 2024 16:36:34 +0100
Subject: [PATCH] fix: required Boolean & Multiselect rules (#6445)

* fix: required Boolean & Multiselect rules

* fix single line in light mode dark editor
---
 ui/src/components/inputs/Editor.vue     |  4 +++
 ui/src/components/inputs/InputsForm.vue | 41 +++++++++++++++++++------
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/inputs/Editor.vue b/ui/src/components/inputs/Editor.vue
index 0ae58a9e3a3..bd18f1f316a 100644
--- 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
index fb758208a33..232c65edb78 100644
--- 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: {