From 815467ec61f3463cc31ff972038f3f9533e6e2e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milo=C5=A1=20Paunovi=C4=87?= <paun992@hotmail.com>
Date: Wed, 29 Jan 2025 10:56:08 +0100
Subject: [PATCH] feat(ui): multiple improvements of no code editor (#7028)

* chore(ui): properly handle metadata inputs adding and removal

* feat(ui): make sure plugin documentation is properly updated on task selection
---
 ui/src/components/code/NoCode.vue             |  7 +++++-
 ui/src/components/code/segments/Editor.vue    | 22 ++++++++++++++++---
 ui/src/components/code/segments/Task.vue      | 11 +++++++---
 ui/src/components/flows/MetadataInputs.vue    | 10 ++++-----
 .../flows/MetadataInputsContent.vue           |  4 ++--
 ui/src/components/inputs/EditorView.vue       |  5 +++--
 6 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/code/NoCode.vue b/ui/src/components/code/NoCode.vue
index b46542ee8d3..cbc1a9e978d 100644
--- a/ui/src/components/code/NoCode.vue
+++ b/ui/src/components/code/NoCode.vue
@@ -13,6 +13,7 @@
             :metadata
             @update-metadata="(k, v) => emits('updateMetadata', {[k]: v})"
             @update-task="(yaml) => emits('updateTask', yaml)"
+            @update-documentation="(task) => emits('updateDocumentation', task)"
         />
     </div>
 </template>
@@ -25,7 +26,11 @@
     import Breadcrumbs from "./components/Breadcrumbs.vue";
     import Editor from "./segments/Editor.vue";
 
-    const emits = defineEmits(["updateTask", "updateMetadata"]);
+    const emits = defineEmits([
+        "updateTask",
+        "updateMetadata",
+        "updateDocumentation",
+    ]);
     const props = defineProps({
         flow: {type: String, required: true},
     });
diff --git a/ui/src/components/code/segments/Editor.vue b/ui/src/components/code/segments/Editor.vue
index eb1823e2a3b..21d8ce1af22 100644
--- a/ui/src/components/code/segments/Editor.vue
+++ b/ui/src/components/code/segments/Editor.vue
@@ -49,12 +49,13 @@
             :flow
             :creation
             @update-task="(yaml) => emits('updateTask', yaml)"
+            @update-documentation="(task) => emits('updateDocumentation', task)"
         />
     </div>
 </template>
 
 <script setup lang="ts">
-    import {ref, shallowRef, computed} from "vue";
+    import {watch, ref, shallowRef, computed} from "vue";
 
     import {Field, Fields, CollapseItem} from "../utils/types";
 
@@ -72,6 +73,16 @@
     import {useRoute} from "vue-router";
     const route = useRoute();
 
+    watch(
+        () => route.query,
+        async (newQuery) => {
+            if (!newQuery?.section && !newQuery?.identifier) {
+                emits("updateDocumentation", null);
+            }
+        },
+        {deep: true},
+    );
+
     import {useI18n} from "vue-i18n";
     const {t} = useI18n({useScope: "global"});
 
@@ -80,7 +91,12 @@
 
     const panel = computed(() => store.state.code.panel);
 
-    const emits = defineEmits(["save", "updateTask", "updateMetadata"]);
+    const emits = defineEmits([
+        "save",
+        "updateTask",
+        "updateMetadata",
+        "updateDocumentation",
+    ]);
 
     const saveEvent = (e: KeyboardEvent) => {
         if (e.type === "keydown" && e.key === "s" && e.ctrlKey) {
@@ -144,7 +160,7 @@
             component: shallowRef(MetadataInputs),
             value: props.metadata.inputs,
             label: t("no_code.fields.general.inputs"),
-            inputs: props.metadata.inputs,
+            inputs: props.metadata.inputs ?? [],
         },
         outputs: {
             component: shallowRef(Editor),
diff --git a/ui/src/components/code/segments/Task.vue b/ui/src/components/code/segments/Task.vue
index 336305831a7..c1308f0b7c7 100644
--- a/ui/src/components/code/segments/Task.vue
+++ b/ui/src/components/code/segments/Task.vue
@@ -5,7 +5,7 @@
         :section
         @update:model-value="validateTask"
     />
-    
+
     <component
         v-else
         :is="lastBreadcumb.component.type"
@@ -28,9 +28,9 @@
 </template>
 
 <script setup lang="ts">
-    import {ref, watch, computed} from "vue";
+    import {onBeforeMount, ref, watch, computed} from "vue";
 
-    const emits = defineEmits(["updateTask"]);
+    const emits = defineEmits(["updateTask", "updateDocumentation"]);
     const props = defineProps({
         flow: {type: String, required: true},
         creation: {type: Boolean, default: false},
@@ -64,6 +64,11 @@
         YamlUtils.extractTask(props.flow, route.query.identifier)?.toString() || "",
     );
 
+    onBeforeMount(() => {
+        const type = YamlUtils.parse(yaml.value)?.type ?? null;
+        emits("updateDocumentation", type);
+    });
+
     watch(
         () => route.query.section,
         (value) => {
diff --git a/ui/src/components/flows/MetadataInputs.vue b/ui/src/components/flows/MetadataInputs.vue
index 4dfd5508420..39e1f7fec20 100644
--- a/ui/src/components/flows/MetadataInputs.vue
+++ b/ui/src/components/flows/MetadataInputs.vue
@@ -51,10 +51,7 @@
             ...mapState("plugin", ["inputSchema", "inputsType"]),
         },
         mounted() {
-            if (this.inputs && this.inputs.length > 0) {
-                if (this.inputs.at(-1).length) this.newInputs = this.inputs.at(-1);
-                else this.newInputs = this.inputs;
-            }
+            this.newInputs = this.inputs;
 
             this.$store
                 .dispatch("plugin/loadInputsType")
@@ -62,7 +59,7 @@
         },
         data() {
             return {
-                newInputs: [{type: "STRING"}],
+                newInputs: [],
                 selectedInput: undefined,
                 selectedIndex: undefined,
                 isEditOpen: false,
@@ -122,10 +119,11 @@
                 }
             },
             updateSelected(value) {
-                this.newInputs[this.selectedIndex] = value;
+                this.newInputs = value;
             },
             deleteInput(index) {
                 this.newInputs.splice(index, 1);
+                this.$emit("update:modelValue", this.newInputs);
             },
             addInput() {
                 this.newInputs.push({type: "STRING"});
diff --git a/ui/src/components/flows/MetadataInputsContent.vue b/ui/src/components/flows/MetadataInputsContent.vue
index 4f3b4382bd9..610029fc7ea 100644
--- a/ui/src/components/flows/MetadataInputsContent.vue
+++ b/ui/src/components/flows/MetadataInputsContent.vue
@@ -35,8 +35,8 @@
         emits: ["update:modelValue"],
         props: {
             modelValue: {
-                type: Array,
-                default: () => [],
+                type: Object,
+                default: () => {},
             },
             inputs: {
                 type: Array,
diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
index 63fd262f6ed..9c937d34da7 100644
--- a/ui/src/components/inputs/EditorView.vue
+++ b/ui/src/components/inputs/EditorView.vue
@@ -166,6 +166,7 @@
                 :flow="flowYaml"
                 @update-metadata="(e) => onUpdateMetadata(e, true)"
                 @update-task="(e) => editorUpdate(e)"
+                @update-documentation="(task) => updatePluginDocumentation(undefined, task)"
             />
         </div>
         <div class="slider" @mousedown.prevent.stop="dragEditor" v-if="combinedEditor" />
@@ -740,9 +741,9 @@
         emit(type, event);
     };
 
-    const updatePluginDocumentation = (event) => {
+    const updatePluginDocumentation = (event, task) => {
         const pluginSingleList = store.getters["plugin/getPluginSingleList"];
-        const taskType = YamlUtils.getTaskType(
+        const taskType = task !== undefined ? task : YamlUtils.getTaskType(
             event.model.getValue(),
             event.position,
             pluginSingleList