fix(ui): improve the editing of labels and variables

ui/src/components/code/components/inputs/InputLabel.vue → ui/src/components/code/components/inputs/InputPair.vue

@@ -10,48 +10,54 @@
             <el-col :span="6">
                 <InputText
                     :model-value="key"
+                    :placeholder="t('key')"
                     @update:model-value="(changed) => updateKey(key, changed)"
                 />
             </el-col>
             <el-col :span="16">
                 <InputText
-                    :v-model="value"
+                    :model-value="value"
+                    :placeholder="t('value')"
                     @update:model-value="(changed) => updateValue(key, changed)"
                 />
             </el-col>
             <el-col :span="2" class="col align-self-center delete">
-                <DeleteOutline @click="removeLabel(key)" />
+                <DeleteOutline @click="removePair(key)" />
             </el-col>
         </el-row>
 
-        <Add what="label" @add="addLabel()" />
+        <Add :what="props.property" @add="addPair()" />
     </div>
 </template>
 
 <script setup lang="ts">
     import {PropType} from "vue";
 
-    import {LabelField} from "../../utils/types";
+    import {PairField} from "../../utils/types";
 
     import {DeleteOutline} from "../../utils/icons";
 
     import InputText from "./InputText.vue";
     import Add from "../Add.vue";
 
+    import {useI18n} from "vue-i18n";
+    const {t} = useI18n({useScope: "global"});
+
     const emits = defineEmits(["update:modelValue"]);
     const props = defineProps({
         modelValue: {
-            type: Array as PropType<LabelField["value"]>,
+            type: Array as PropType<PairField["value"][]>,
             default: undefined,
         },
         label: {type: String, required: true},
+        property: {type: String, required: true},
         required: {type: Boolean, default: false},
     });
 
-    const addLabel = () => {
+    const addPair = () => {
         emits("update:modelValue", {...props.modelValue, "": ""});
     };
-    const removeLabel = (key: any) => {
+    const removePair = (key: any) => {
         const values = {...props.modelValue};
         delete values[key];
 

ui/src/components/code/components/inputs/InputText.vue

@@ -1,8 +1,8 @@
 <template>
     <span v-if="required" class="me-1 text-danger">*</span>
-    <span class="label">{{ label }}</span>
+    <span v-if="label" class="label">{{ label }}</span>
     <div class="mt-1 mb-2 wrapper">
-        <el-input v-model="input" @input="handleInput" :disabled />
+        <el-input v-model="input" @input="handleInput" :placeholder :disabled />
     </div>
 </template>
 
@@ -12,7 +12,8 @@
     const emits = defineEmits(["update:modelValue"]);
     const props = defineProps({
         modelValue: {type: [String, Number, Boolean], default: undefined},
-        label: {type: String, default: ""},
+        label: {type: String, default: undefined},
+        placeholder: {type: String, default: ""},
         required: {type: Boolean, default: false},
         disabled: {type: Boolean, default: false},
     });

ui/src/components/code/segments/Editor.vue

@@ -32,11 +32,10 @@
     import Collapse from "../components/collapse/Collapse.vue";
     import InputText from "../components/inputs/InputText.vue";
     import InputSwitch from "../components/inputs/InputSwitch.vue";
-    import InputLabel from "../components/inputs/InputLabel.vue";
+    import InputPair from "../components/inputs/InputPair.vue";
 
     import Editor from "../../inputs/Editor.vue";
     import MetadataInputs from "../../flows/MetadataInputs.vue";
-    import MetadataVariables from "../../flows/MetadataVariables.vue";
 
     import Task from "./Task.vue";
 
@@ -94,9 +93,10 @@
             style: {height: "100px"},
         },
         labels: {
-            component: shallowRef(InputLabel),
+            component: shallowRef(InputPair),
             value: props.metadata.labels,
             label: t("no_code.fields.general.labels"),
+            property: t("no_code.labels.label"),
         },
         inputs: {
             component: shallowRef(MetadataInputs),
@@ -114,10 +114,10 @@
             style: {height: "100px"},
         },
         variables: {
-            component: shallowRef(MetadataVariables),
+            component: shallowRef(InputPair),
             value: props.metadata.variables,
             label: t("no_code.fields.general.variables"),
-            variables: props.metadata.variables,
+            property: t("no_code.labels.variable"),
         },
         // concurrency: {
         //     component: shallowRef(InputSwitch), // TODO: To improve slot content

ui/src/components/code/styles/code.scss

@@ -33,6 +33,7 @@ $code-font-sm: var(--el-font-size-small);
         --el-disabled-text-color: #{$code-gray-700};
 
         .el-input__inner {
+            color: $code-gray-700;
             font-size: $code-font-sm;
         }
     }

ui/src/components/code/utils/types.ts

@@ -17,18 +17,15 @@ export type Field = {
     disabled?: boolean;
 };
 
-export type LabelField = Omit<Field, "value"> & {
-    value: [string, string][];
+export type PairField = Omit<Field, "value"> & {
+    value: Record<string, string>;
+    property: string;
 };
 
 type InputField = Field & {
     inputs: any[];
 };
 
-type VariableField = Field & {
-    variables: any[];
-};
-
 type ConcurrencyField = Field & {
     root: string;
     schema: object;
@@ -48,10 +45,10 @@ export type Fields = {
     namespace: Field;
     description: Field;
     retry: EditorField;
-    labels: LabelField;
+    labels: PairField;
     inputs: InputField;
     outputs: EditorField;
-    variables: VariableField;
+    variables: PairField;
     concurrency?: ConcurrencyField; // TODO: Make it not optional
     pluginDefaults: EditorField;
     disabled: Field;

ui/src/translations/en.json

@@ -1064,7 +1064,9 @@
       "adding": "+ Add a {what}",
       "labels": {
         "yaml": "YAML Editor",
-        "no_code": "No Code Editor"
+        "no_code": "No Code Editor",
+        "label": "Label",
+        "variable": "Variable"
       },
       "sections": {
         "main": "Main properties",