From a3a8863f46295055172a255d4dfe6c96aa5d8a91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milo=C5=A1=20Paunovi=C4=87?= <paun992@hotmail.com>
Date: Mon, 3 Feb 2025 11:35:03 +0100
Subject: [PATCH] feat(ui): multiple improvements of no code editor (#7146)

* refactor(ui): prevent multiple warning in console by adding inheritAttrs properly

* chore(ui): make plugin selector field not clearable

* feat(ui): allow re-ordering of array items

* fix(ui): remove concurrency when limit set to 0
---
 .../code/components/inputs/InputText.vue      |  2 ++
 ui/src/components/code/styles/code.scss       |  6 ++--
 ui/src/components/flows/TaskEditor.vue        |  1 +
 ui/src/components/flows/tasks/TaskArray.vue   | 30 +++++++++++++++++--
 ui/src/components/inputs/EditorView.vue       |  6 ++--
 ui/src/components/plugins/PluginSelect.vue    |  1 -
 6 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/code/components/inputs/InputText.vue b/ui/src/components/code/components/inputs/InputText.vue
index 146a9f1de25..e3418690968 100644
--- a/ui/src/components/code/components/inputs/InputText.vue
+++ b/ui/src/components/code/components/inputs/InputText.vue
@@ -16,6 +16,8 @@
 <script setup lang="ts">
     import {ref, watch} from "vue";
 
+    defineOptions({inheritAttrs: false});
+
     const emits = defineEmits(["update:modelValue"]);
     const props = defineProps({
         modelValue: {type: [String, Number, Boolean], default: undefined},
diff --git a/ui/src/components/code/styles/code.scss b/ui/src/components/code/styles/code.scss
index 3172f843c61..7672e9a5d7e 100644
--- a/ui/src/components/code/styles/code.scss
+++ b/ui/src/components/code/styles/code.scss
@@ -53,7 +53,8 @@ $code-font-sm: var(--el-font-size-small);
     font-size: $code-font-sm;
 }
 
-.delete {
+.delete,
+.reorder {
     cursor: pointer;
     padding-left: 0;
     color: $code-gray-700;
@@ -64,7 +65,8 @@ $code-font-sm: var(--el-font-size-small);
     :deep(*) {
         --el-disabled-text-color: #{$code-gray-700};
 
-        .el-input__inner {
+        .el-input__inner,
+        .el-textarea__inner {
             color: $code-gray-700;
             font-size: $code-font-sm;
         }
diff --git a/ui/src/components/flows/TaskEditor.vue b/ui/src/components/flows/TaskEditor.vue
index 90bd113f953..10a5fd4e8ba 100644
--- a/ui/src/components/flows/TaskEditor.vue
+++ b/ui/src/components/flows/TaskEditor.vue
@@ -32,6 +32,7 @@
     import {SECTIONS} from "../../utils/constants.js";
 
     export default {
+        inheritAttrs: false,
         computed: {
             ...mapGetters("flow", ["taskError"]),
         },
diff --git a/ui/src/components/flows/tasks/TaskArray.vue b/ui/src/components/flows/tasks/TaskArray.vue
index b019037ce55..392808c7d63 100644
--- a/ui/src/components/flows/tasks/TaskArray.vue
+++ b/ui/src/components/flows/tasks/TaskArray.vue
@@ -3,9 +3,13 @@
         v-for="(element, index) in items"
         :key="'array-' + index"
         :gutter="10"
-        class="w-100 mb-2"
+        class="w-100"
     >
-        <el-col :span="22">
+        <el-col :span="2" class="d-flex flex-column mt-1 mb-2 reorder">
+            <ChevronUp @click.prevent.stop="moveItem(index, 'up')" />
+            <ChevronDown @click.prevent.stop="moveItem(index, 'down')" />
+        </el-col>
+        <el-col :span="20">
             <InputText
                 :model-value="element"
                 @update:model-value="(v) => handleInput(v, index)"
@@ -23,11 +27,13 @@
 <script setup lang="ts">
     import {ref} from "vue";
 
-    import {DeleteOutline} from "../../code/utils/icons";
+    import {DeleteOutline, ChevronUp, ChevronDown} from "../../code/utils/icons";
 
     import InputText from "../../code/components/inputs/InputText.vue";
     import Add from "../../code/components/Add.vue";
 
+    defineOptions({inheritAttrs: false});
+
     const emits = defineEmits(["update:modelValue"]);
     const props = defineProps({modelValue: {type: Array, default: undefined}});
 
@@ -48,4 +54,22 @@
         items.value.splice(index, 1);
         emits("update:modelValue", items.value);
     };
+    const moveItem = (index: number, direction: "up" | "down") => {
+        if (direction === "up" && index > 0) {
+            [items.value[index - 1], items.value[index]] = [
+                items.value[index],
+                items.value[index - 1],
+            ];
+        } else if (direction === "down" && index < items.value.length - 1) {
+            [items.value[index + 1], items.value[index]] = [
+                items.value[index],
+                items.value[index + 1],
+            ];
+        }
+        emits("update:modelValue", items.value);
+    };
 </script>
+
+<style scoped lang="scss">
+@import "../../code/styles/code.scss";
+</style>
diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
index 57bdef2737d..edf9f021cf3 100644
--- a/ui/src/components/inputs/EditorView.vue
+++ b/ui/src/components/inputs/EditorView.vue
@@ -940,15 +940,13 @@
     };
 
     const onUpdateMetadata = (event, shouldSave) => {
-        metadata.value = event;
-
         if(shouldSave) {
-            metadata.value = {...metadata.value, ...event};
+            metadata.value = {...metadata.value, ...(event.concurrency.limit === 0 ? {concurrency: null} : event)};
             onSaveMetadata();
             validateFlow(flowYaml.value)
 
         } else {
-            metadata.value = event;
+            metadata.value = event.concurrency.limit === 0 ?  {concurrency: null} : event;
         }
     };
 
diff --git a/ui/src/components/plugins/PluginSelect.vue b/ui/src/components/plugins/PluginSelect.vue
index 85acbca433e..337bcac7dec 100644
--- a/ui/src/components/plugins/PluginSelect.vue
+++ b/ui/src/components/plugins/PluginSelect.vue
@@ -3,7 +3,6 @@
         :model-value="modelValue"
         :placeholder="$t('no_code.creation.select', {section: section.toLowerCase().slice(0, -1)})"
         filterable
-        clearable
         @update:model-value="onInput"
     >
         <el-option