feat(ui): display input error (#5919)

close #5515
kestra-io · Nov 14, 2024 · fb34f7b · fb34f7b
1 parent cf615e8
commit fb34f7b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/ui/src/components/flows/ValidationError.vue b/ui/src/components/flows/ValidationError.vue
@@ -25,7 +25,7 @@
                             {{ $t("error detected") }}
                         </span>
                     </el-header>
-                    <el-main>{{ errors.join("\n") }}</el-main>
+                    <el-main v-for="error in errors" :key="error">{{ error }}</el-main>
                 </el-container>
             </template>
             <el-button v-bind="$attrs" :link="link" :size="size" type="default" class="error">

diff --git a/ui/src/components/inputs/InputsForm.vue b/ui/src/components/inputs/InputsForm.vue
@@ -171,12 +171,16 @@
                 </template>
             </template>
         </el-form-item>
+        <ValidationError :errors="inputErrors" />
     </template>
+
     <el-alert type="info" :show-icon="true" :closable="false" v-else>
         {{ $t("no inputs") }}
     </el-alert>
 </template>
-
+<script setup>
+    import ValidationError from "../flows/ValidationError.vue";
+</script>
 <script>
     import Editor from "../../components/inputs/Editor.vue";
     import Markdown from "../layout/Markdown.vue";
@@ -192,6 +196,11 @@
             YamlUtils() {
                 return YamlUtils
             },
+            inputErrors() {
+                return this.inputsList.filter(it => it.errors && it.errors.length > 0).length > 0 ?
+                    this.inputsList.filter(it => it.errors && it.errors.length > 0).flatMap(it => it.errors?.flatMap(err => err.message)) :
+                    null
+            }
         },
         components: {Editor, Markdown, DurationPicker},
         props: {