feat(core): allow SELECT input to be radio UI type

close #5591
kestra-io · Dec 18, 2024 · 18a2b55 · 18a2b55
1 parent 38dcc75
commit 18a2b55
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 21 deletions.
diff --git a/core/src/main/java/io/kestra/core/models/flows/input/SelectInput.java b/core/src/main/java/io/kestra/core/models/flows/input/SelectInput.java
@@ -39,6 +39,13 @@ public class SelectInput extends Input<String> implements RenderableInput {
     @Builder.Default
     Boolean allowCustomValue = false;
 
+    @Schema(
+        title = "Indicates if the input should be rendered as a radio button group."
+    )
+    @NotNull
+    @Builder.Default
+    Boolean isRadio = false;
+
     @Override
     public void validate(String input) throws ConstraintViolationException {
         if (!values.contains(input) && this.getRequired()) {
@@ -70,6 +77,7 @@ public Input<?> render(final Function<String, Object> renderer) {
                 .description(getDescription())
                 .dependsOn(getDependsOn())
                 .displayName(getDisplayName())
+                .isRadio(getIsRadio())
                 .build();
         }
         return this;

diff --git a/ui/src/components/inputs/InputsForm.vue b/ui/src/components/inputs/InputsForm.vue
@@ -24,7 +24,7 @@
                 :full-height="false"
                 :input="true"
                 :navbar="false"
-                v-if="input.type === 'ENUM' || input.type === 'SELECT'"
+                v-if="(input.type === 'ENUM' || input.type === 'SELECT') && !input.isRadio"
                 :data-test-id="`input-form-${input.id}`"
                 v-model="inputsValues[input.id]"
                 @update:model-value="onChange(input)"
@@ -41,6 +41,19 @@
                     {{ item }}
                 </el-option>
             </el-select>
+            <el-radio-group
+                v-if="(input.type === 'ENUM' || input.type === 'SELECT') && input.isRadio"
+                :data-test-id="`input-form-${input.id}`"
+                v-model="inputsValues[input.id]"
+                @update:model-value="onChange(input)"
+            >
+                <el-radio v-for="item in input.values" :key="item" :label="item" :value="item" />
+                <el-input
+                    v-model="inputsValues[input.id]"
+                    @update:model-value="onChange(input)"
+                    :placeholder="$t('custom value')"
+                />
+            </el-radio-group>
             <el-select
                 :full-height="false"
                 :input="true"
@@ -459,30 +472,38 @@
 </style>
 
 <style scoped lang="scss">
-:deep(.boolean-inputs) {
-    .el-radio-button {
-        &.is-active {
-            .el-radio-button__original-radio:not(:disabled) + .el-radio-button__inner {
-                color: var(--el-text-color-regular);
-                background-color: var(--bs-gray-100);
-                box-shadow: 0 0 0 0 var(--el-color-primary);
+    :deep(.boolean-inputs) {
+        display: flex;
+        align-items: center;
+
+        .el-radio-button {
+            &.is-active {
+                .el-radio-button__original-radio:not(:disabled) + .el-radio-button__inner {
+                    color: var(--el-text-color-regular);
+                    background-color: var(--bs-gray-100);
+                    box-shadow: 0 0 0 0 var(--el-color-primary);
+                }
             }
-        }
 
-        .el-radio-button__inner {
-            border: var(--el-border);
-            transition: 0.3s ease-in-out;
+            .el-radio-button__inner {
+                border: var(--el-border);
+                transition: 0.3s ease-in-out;
 
-            &:hover {
-                color: var(--bs-secondary);
-                border-color: var(--el-color-primary);
-                background-color: var(--bs-card-bg);
-            }
+                &:hover {
+                    color: var(--bs-secondary);
+                    border-color: var(--el-color-primary);
+                    background-color: var(--bs-card-bg);
+                }
 
-            &:first-child {
-                border-left: var(--el-border);
+                &:first-child {
+                    border-left: var(--el-border);
+                }
             }
         }
     }
-}
+
+    .el-input-file {
+        display: flex;
+        align-items: center;
+    }
 </style>
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
@@ -1047,6 +1047,7 @@
         "label": "Page settings",
         "show_chart": "Show main chart"
       }
-    }
+    },
+    "custom value": "Custom value"
   }
 }