feat(ui): multiple improvements of no code editor (#6981)

* feat(ui): introduced re-worked metadata inputs * chore(ui): reset panel on each breadcrumb click * chore(ui): improve styling of metadata inputs section * chore(ui): improve the metadata inputs section
kestra-io · Jan 27, 2025 · cdc1cce · cdc1cce
1 parent 125a277
commit cdc1cce
Show file tree

Hide file tree

Showing 10 changed files with 247 additions and 120 deletions.
diff --git a/ui/src/components/code/components/Breadcrumbs.vue b/ui/src/components/code/components/Breadcrumbs.vue
@@ -4,7 +4,10 @@
             v-for="(breadcrumb, index) in breadcrumbs"
             :key="index"
             class="item"
-            @click="store.commit('code/removeBreadcrumb', {position: index})"
+            @click="
+                (store.commit('code/removeBreadcrumb', {position: index}),
+                 store.commit('code/unsetPanel'))
+            "
         >
             <router-link :to="breadcrumb.to">
                 {{ breadcrumb.label }}

diff --git a/ui/src/components/code/components/inputs/InputPair.vue b/ui/src/components/code/components/inputs/InputPair.vue
@@ -7,22 +7,21 @@
             :key="index"
             :gutter="10"
         >
-            <el-col :span="6">
+            <el-col :span="8">
                 <InputText
                     :model-value="key"
                     :placeholder="t('key')"
                     @update:model-value="(changed) => updateKey(key, changed)"
                 />
             </el-col>
-            <el-col :span="16">
+            <el-col :span="16" class="d-flex">
                 <InputText
                     :model-value="value"
                     :placeholder="t('value')"
                     @update:model-value="(changed) => updateValue(key, changed)"
+                    class="w-100 me-2"
                 />
-            </el-col>
-            <el-col :span="2" class="col align-self-center delete">
-                <DeleteOutline @click="removePair(key)" />
+                <DeleteOutline @click="removePair(key)" class="delete" />
             </el-col>
         </el-row>
 

diff --git a/ui/src/components/code/segments/Editor.vue b/ui/src/components/code/segments/Editor.vue
@@ -1,34 +1,47 @@
 <template>
     <div class="p-4">
         <template v-if="!route.query.section && !route.query.identifier">
-            <component
-                v-for="([k, v], index) in Object.entries(getFields())"
-                :key="index"
-                :is="v.component"
-                v-model="v.value"
-                v-bind="trimmed(v)"
-                @update:model-value="emits('updateMetadata', k, v.value)"
-            />
-
-            <hr class="my-4">
-
-            <Collapse
-                :items="sections"
-                creation
-                :flow
-                @remove="(yaml) => emits('updateTask', yaml)"
-            />
-
-            <hr class="my-4">
-
-            <component
-                v-for="([k, v], index) in Object.entries(getFields(false))"
-                :key="index"
-                :is="v.component"
-                v-model="v.value"
-                v-bind="trimmed(v)"
-                @update:model-value="emits('updateMetadata', k, v.value)"
-            />
+            <template v-if="panel">
+                <component
+                    :is="panel.type"
+                    :model-value="panel.props.modelValue"
+                    v-bind="panel.props"
+                    @update:model-value="
+                        (value) => emits('updateMetadata', 'inputs', value)
+                    "
+                />
+            </template>
+
+            <template v-else>
+                <component
+                    v-for="([k, v], index) in Object.entries(getFields())"
+                    :key="index"
+                    :is="v.component"
+                    v-model="v.value"
+                    v-bind="trimmed(v)"
+                    @update:model-value="emits('updateMetadata', k, v.value)"
+                />
+
+                <hr class="my-4">
+
+                <Collapse
+                    :items="sections"
+                    creation
+                    :flow
+                    @remove="(yaml) => emits('updateTask', yaml)"
+                />
+
+                <hr class="my-4">
+
+                <component
+                    v-for="([k, v], index) in Object.entries(getFields(false))"
+                    :key="index"
+                    :is="v.component"
+                    v-model="v.value"
+                    v-bind="trimmed(v)"
+                    @update:model-value="emits('updateMetadata', k, v.value)"
+                />
+            </template>
         </template>
 
         <Task
@@ -62,6 +75,11 @@
     import {useI18n} from "vue-i18n";
     const {t} = useI18n({useScope: "global"});
 
+    import {useStore} from "vuex";
+    const store = useStore();
+
+    const panel = computed(() => store.state.code.panel);
+
     const emits = defineEmits(["save", "updateTask", "updateMetadata"]);
 
     const saveEvent = (e: KeyboardEvent) => {

diff --git a/ui/src/components/code/utils/types.ts b/ui/src/components/code/utils/types.ts
@@ -63,10 +63,11 @@ export type CollapseItem = {
 export type Breadcrumb = {
     label: string;
     to: {
-        name: RouteRecordName;
-        params: RouteParams;
+        name?: RouteRecordName;
+        params?: RouteParams;
     };
     component?: ReturnType<typeof defineComponent>;
+    panel?: boolean;
 };
 
 export type Component = ReturnType<typeof defineComponent>;
diff --git a/ui/src/components/flows/MetadataInputs.vue b/ui/src/components/flows/MetadataInputs.vue
@@ -2,89 +2,37 @@
     <span v-if="required" class="me-1 text-danger">*</span>
     <span class="label">{{ label }}</span>
     <div class="mt-1 mb-2 wrapper">
-        <drawer v-if="isEditOpen" v-model="isEditOpen">
-            <template #header>
-                <code>inputs</code>
-            </template>
-
-            <template #footer>
-                <div>
-                    <el-button
-                        :icon="ContentSave"
-                        @click="update()"
-                        type="primary"
-                    >
-                        {{ $t("save") }}
-                    </el-button>
-                </div>
-            </template>
-            <div>
-                <el-select
-                    :model-value="selectedInput.type"
-                    @update:model-value="onChangeType"
-                >
-                    <el-option
-                        v-for="(input, index) in inputsType"
-                        :key="index"
-                        :label="input.type"
-                        :value="input.type"
-                    />
-                </el-select>
-                <task-root
-                    v-loading="loading"
-                    v-if="inputSchema"
-                    name="root"
-                    :model-value="selectedInput"
-                    @update:model-value="updateSelected($event, selectedIndex)"
-                    :schema="inputSchema.schema"
-                    :definitions="inputSchema.schema.definitions"
+        <el-row
+            v-for="(input, index) in newInputs"
+            :key="index"
+            @click="selectInput(input, index)"
+        >
+            <el-col :span="24" class="d-flex">
+                <InputText disabled :model-value="input.id" class="w-100" />
+                <DeleteOutline
+                    @click.prevent.stop="deleteInput(index)"
+                    class="ms-2 delete"
                 />
-            </div>
-        </drawer>
-        <div class="w-100 mb-3">
-            <div>
-                <div
-                    class="d-flex w-100 mb-2"
-                    v-for="(input, index) in newInputs"
-                    :key="index"
-                >
-                    <div class="flex-fill flex-grow-1 w-100 me-2">
-                        <el-input disabled :model-value="input.id" />
-                    </div>
-                    <div class="flex-shrink-1">
-                        <el-button-group class="d-flex flex-nowrap">
-                            <el-button
-                                :icon="TextSearch"
-                                @click="selectInput(input, index)"
-                            />
-                            <el-button :icon="Plus" @click="addInput" />
-                            <el-button
-                                :icon="Minus"
-                                @click="deleteInput(index)"
-                                :disabled="
-                                    index === 0 && newInputs.length === 1
-                                "
-                            />
-                        </el-button-group>
-                    </div>
-                </div>
-            </div>
-        </div>
+            </el-col>
+        </el-row>
+        <Add @add="addInput(index)" />
     </div>
 </template>
+
 <script setup>
-    import Plus from "vue-material-design-icons/Plus.vue";
-    import Minus from "vue-material-design-icons/Minus.vue";
-    import TextSearch from "vue-material-design-icons/TextSearch.vue";
-    import ContentSave from "vue-material-design-icons/ContentSave.vue";
-    import TaskRoot from "./tasks/TaskRoot.vue";
+    import MetadataInputsContent from "./MetadataInputsContent.vue";
+    import InputText from "../code/components/inputs/InputText.vue";
+    import Add from "../code/components/Add.vue";
+
+    import {DeleteOutline} from "../code/utils/icons";
 </script>
+
 <script>
+    import {h} from "vue";
+
     import {mapState} from "vuex";
-    import Drawer from "../Drawer.vue";
 
     export default {
-        components: {Drawer},
         emits: ["update:modelValue"],
         props: {
             modelValue: {
@@ -104,7 +52,8 @@
         },
         mounted() {
             if (this.inputs && this.inputs.length > 0) {
-                this.newInputs = this.inputs;
+                if (this.inputs.at(-1).length) this.newInputs = this.inputs.at(-1);
+                else this.newInputs = this.inputs;
             }
 
             this.$store
@@ -125,8 +74,26 @@
                 this.loading = true;
                 this.selectedInput = input;
                 this.selectedIndex = index;
-                this.isEditOpen = true;
+                // this.isEditOpen = true;
                 this.loadSchema(input.type);
+
+                this.$store.commit("code/setPanel", {
+                    breadcrumb: {
+                        label: this.$t("inputs").toLowerCase(),
+                        to: {
+                            name: this.$route.name,
+                            params: this.$route.params,
+                            query: this.$route.query,
+                        },
+                    },
+                    panel: h(MetadataInputsContent, {
+                        modelValue: input,
+                        inputs: this.inputs,
+                        label: this.$t("inputs"),
+                        selectedIndex: index,
+                        "onUpdate:modelValue": this.updateSelected,
+                    }),
+                });
             },
             getCls(type) {
                 return this.inputsType.find((e) => e.type === type).cls;
@@ -162,6 +129,7 @@
             },
             addInput() {
                 this.newInputs.push({type: "STRING"});
+                this.selectInput(this.newInputs.at(-1), 0);
             },
             onChangeType(value) {
                 this.loading = true;