From cdc1cceb3436561944916e3f97c9ab70732ce4ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milo=C5=A1=20Paunovi=C4=87?= <paun992@hotmail.com>
Date: Mon, 27 Jan 2025 19:02:11 +0100
Subject: [PATCH] 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
---
 .../code/components/Breadcrumbs.vue           |   5 +-
 .../code/components/inputs/InputPair.vue      |   9 +-
 ui/src/components/code/segments/Editor.vue    |  74 ++++++----
 ui/src/components/code/utils/types.ts         |   5 +-
 ui/src/components/flows/MetadataInputs.vue    | 120 ++++++----------
 .../flows/MetadataInputsContent.vue           | 130 ++++++++++++++++++
 ui/src/components/inputs/EditorView.vue       |  12 +-
 ui/src/stores/code.ts                         |   7 +-
 ui/src/translations/en.json                   |   3 +-
 ui/src/translations/pt.json                   |   2 +-
 10 files changed, 247 insertions(+), 120 deletions(-)
 create mode 100644 ui/src/components/flows/MetadataInputsContent.vue

diff --git a/ui/src/components/code/components/Breadcrumbs.vue b/ui/src/components/code/components/Breadcrumbs.vue
index a10f670b7f5..b90a00cfe02 100644
--- 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
index ca09d99382c..b25dedf764d 100644
--- 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
index 9558858bad0..eb1823e2a3b 100644
--- 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
index acddcbf3a25..8300e65c7ff 100644
--- 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
index 3e0afcac011..4dfd5508420 100644
--- 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;
diff --git a/ui/src/components/flows/MetadataInputsContent.vue b/ui/src/components/flows/MetadataInputsContent.vue
new file mode 100644
index 00000000000..4f3b4382bd9
--- /dev/null
+++ b/ui/src/components/flows/MetadataInputsContent.vue
@@ -0,0 +1,130 @@
+<template>
+    <el-select
+        :model-value="selectedInput.type"
+        @update:model-value="onChangeType"
+        class="mb-3"
+    >
+        <el-option
+            v-for="(input, index) in inputsType"
+            :key="index"
+            :label="input.type"
+            :value="input.type"
+        />
+    </el-select>
+    <task-root
+        v-loading="loading"
+        name="root"
+        :model-value="selectedInput"
+        @update:model-value="updateSelected($event, selectedIndex)"
+        :schema="inputSchema?.schema"
+        :definitions="inputSchema?.schema?.definitions"
+    />
+
+    <Save @click="update" what="input" class="w-100 mt-3" />
+</template>
+
+<script setup>
+    import TaskRoot from "./tasks/TaskRoot.vue";
+    import Save from "../code/components/Save.vue";
+</script>
+
+<script>
+    import {mapState} from "vuex";
+
+    export default {
+        emits: ["update:modelValue"],
+        props: {
+            modelValue: {
+                type: Array,
+                default: () => [],
+            },
+            inputs: {
+                type: Array,
+                default: () => [],
+            },
+            label: {type: String, required: true},
+            selectedIndex: {type: Number, required: true},
+            required: {type: Boolean, default: false},
+            disabled: {type: Boolean, default: false},
+        },
+        computed: {
+            ...mapState("plugin", ["inputSchema", "inputsType"]),
+        },
+        created() {
+            if (this.inputs && this.inputs.length > 0) {
+                this.newInputs = this.inputs;
+            }
+
+            this.selectedInput = this.modelValue ?? {type: "STRING"};
+
+            this.$store
+                .dispatch("plugin/loadInputsType")
+                .then((_) => (this.loading = false));
+        },
+        data() {
+            return {
+                newInputs: [{type: "STRING"}],
+                selectedInput: undefined,
+                loading: false,
+            };
+        },
+        methods: {
+            selectInput(input) {
+                this.loading = true;
+                this.selectedInput = input;
+                this.loadSchema(input.type);
+            },
+            getCls(type) {
+                return this.inputsType.find((e) => e.type === type).cls;
+            },
+            getType(cls) {
+                return this.inputsType.find((e) => e.cls === cls).type;
+            },
+            loadSchema(type) {
+                this.$store
+                    .dispatch("plugin/loadInputSchema", {type: type})
+                    .then((_) => (this.loading = false));
+            },
+            update() {
+                if (
+                    this.newInputs.map((e) => e.id).length !==
+                    new Set(this.newInputs.map((e) => e.id)).size
+                ) {
+                    this.$store.dispatch("core/showMessage", {
+                        variant: "error",
+                        title: this.$t("error"),
+                        message: this.$t("duplicate input id"),
+                    });
+                } else {
+                    this.$store.commit("code/unsetPanel");
+                    this.$emit("update:modelValue", [...this.inputs]);
+                }
+            },
+            updateSelected(value) {
+                if (!this.selectedIndex) {
+                    return;
+                }
+                this.newInputs[this.selectedIndex] = value;
+            },
+            deleteInput(index) {
+                this.newInputs.splice(index, 1);
+            },
+            addInput() {
+                this.newInputs.push({type: "STRING"});
+            },
+            onChangeType(value) {
+                this.loading = true;
+                this.selectedInput = {
+                    type: value,
+                    id: this.newInputs[this.selectedIndex].id,
+                };
+                this.newInputs[this.selectedIndex] = this.selectedInput;
+                this.loadSchema(value);
+            },
+        },
+    };
+</script>
+
+<style scoped lang="scss">
+@import "../../components/code/styles/code.scss";
+</style>
diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
index ee1cd17fe05..fc498ea481b 100644
--- a/ui/src/components/inputs/EditorView.vue
+++ b/ui/src/components/inputs/EditorView.vue
@@ -637,7 +637,7 @@
 
         // validate flow on first load
         store
-            .dispatch("flow/validateFlow", {flow: yamlWithNextRevision.value})
+            .dispatch("flow/validateFlow", {flow: props.isCreating ? flowYaml.value : yamlWithNextRevision.value})
             .then((value) => {
                 if (validationDomElement.value && editorDomElement.value) {
                     validationDomElement.value.onResize(
@@ -807,7 +807,7 @@
         if(!currentIsFlow) return;
 
         return store
-            .dispatch("flow/validateFlow", {flow: yamlWithNextRevision.value})
+            .dispatch("flow/validateFlow", {flow: props.isCreating ? flowYaml.value : yamlWithNextRevision.value})
             .then((value) => {
                 if (
                     flowHaveTasks() &&
@@ -913,7 +913,9 @@
         );
     };
 
-    const validateFlow = (flow = yamlWithNextRevision.value) => {
+    const validateFlow = (flow) => {
+        if(!flow) return;
+        
         return store
             .dispatch("flow/validateFlow", {flow})
             .then((value) => {
@@ -933,7 +935,7 @@
         if(shouldSave) {
             metadata.value = {...metadata.value, ...event};
             onSaveMetadata();
-            validateFlow()
+            validateFlow(flowYaml.value)
 
         } else {
             metadata.value = event;
@@ -1052,7 +1054,7 @@
 
         haveChange.value = false;
         await store.dispatch("flow/validateFlow", {
-            flow: yamlWithNextRevision.value,
+            flow: props.isCreating ? flowYaml.value : yamlWithNextRevision.value
         });
     };
 
diff --git a/ui/src/stores/code.ts b/ui/src/stores/code.ts
index ecbc0c8a489..6a0560d285c 100644
--- a/ui/src/stores/code.ts
+++ b/ui/src/stores/code.ts
@@ -34,11 +34,16 @@ export default {
         clearBreadcrumbs(state: State) {
             state.breadcrumbs = [];
         },
-        setPanel(state: State, panel: Component) {
+        setPanel(
+            state: State,
+            {breadcrumb, panel}: { breadcrumb: Breadcrumb; panel: Component },
+        ) {
             state.panel = panel;
+            state.breadcrumbs[1] = {...breadcrumb, panel: true};
         },
         unsetPanel(state: State) {
             state.panel = undefined;
+            state.breadcrumbs.splice(1);
         },
     },
 };
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
index 7cae5f15dd8..c1643de6d57 100644
--- a/ui/src/translations/en.json
+++ b/ui/src/translations/en.json
@@ -1100,7 +1100,8 @@
       "save": {
         "tasks": "Save task",
         "triggers": "Save trigger",
-        "error handlers": "Save error handler"
+        "error handlers": "Save error handler",
+        "input": "Save input"
       }
     }
   }
diff --git a/ui/src/translations/pt.json b/ui/src/translations/pt.json
index 4c8936b6528..2e56ad8cf95 100644
--- a/ui/src/translations/pt.json
+++ b/ui/src/translations/pt.json
@@ -359,7 +359,7 @@
     },
     "cancel": "Cancelar",
     "homeDashboard": {
-      "title": "Painéis",
+      "title": "Dashboards",
       "today": "Hoje",
       "yesterday": "Ontem",
       "last28Days": "Últimos 28 dias",