feat(ui): re-work the task array field for the no code editor (#6885)

* chore(ui): make the task save button span fully

* chore(ui): make the task save button have the proper top margin

* feat(ui): re-work the task array field for the no code editor

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

@@ -98,11 +98,4 @@
 
 <style scoped lang="scss">
 @import "../../styles/code.scss";
-
-.delete {
-    cursor: pointer;
-    padding-left: 0;
-    color: $code-gray-700;
-    text-align: right;
-}
 </style>

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

@@ -14,15 +14,17 @@
     />
 
     <template v-if="yaml">
-        <hr>
-
         <div class="d-flex justify-content-between">
             <div class="d-flex align-items-center">
                 <!-- TODO: Properly handle validation errors -->
                 <ValidationError v-if="false" :errors link />
             </div>
 
-            <Save @click="saveTask" :what="route.query.section?.toString()" />
+            <Save
+                @click="saveTask"
+                :what="route.query.section?.toString()"
+                class="w-100 mt-3"
+            />
         </div>
     </template>
 </template>

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

@@ -28,6 +28,13 @@ $code-font-sm: var(--el-font-size-small);
     font-size: $code-font-sm;
 }
 
+.delete {
+    cursor: pointer;
+    padding-left: 0;
+    color: $code-gray-700;
+    text-align: right;
+}
+
 .wrapper {
     :deep(*) {
         --el-disabled-text-color: #{$code-gray-700};

ui/src/components/flows/tasks/TaskArray.vue

@@ -1,27 +1,33 @@
 <template>
-    <div class="d-flex w-100 task-array" v-for="(item, index) in values" :key="'array-' + index">
-        <div class="flex-fill flex-grow-1 w-100 me-2">
+    <el-row
+        v-for="(item, index) in values"
+        :key="'array-' + index"
+        :gutter="10"
+        class="w-100"
+    >
+        <el-col :span="22">
             <component
                 :is="`task-${getType(schema.items)}`"
                 :model-value="item"
                 @update:model-value="onInput(index, $event)"
                 :root="getKey(index)"
                 :schema="schema.items"
                 :definitions="definitions"
+                :placeholder="$t('value')"
+                class="w-100"
             />
-        </div>
-        <div class="flex-shrink-1">
-            <el-button-group class="d-flex flex-nowrap">
-                <el-button :icon="Plus" @click="addItem" />
-                <el-button :icon="Minus" @click="removeItem(index)" :disabled="index === 0 && values.length === 1" />
-            </el-button-group>
-        </div>
-    </div>
+        </el-col>
+        <el-col :span="2" class="col align-self-center delete">
+            <DeleteOutline @click="removeItem(key)" />
+        </el-col>
+    </el-row>
+    <Add @add="addItem()" v-if="values.at(-1)" />
 </template>
 
 <script setup>
-    import Plus from "vue-material-design-icons/Plus.vue";
-    import Minus from "vue-material-design-icons/Minus.vue";
+    import {DeleteOutline} from "../../code/utils/icons";
+
+    import Add from "../../code/components/Add.vue";
 </script>
 
 <script>
@@ -85,9 +91,7 @@
         },
     };
 </script>
-<style lang="scss" scoped>
-    .task-array {
-        margin-bottom: 2px;
-    }
 
+<style scoped lang="scss">
+@import "../../code/styles/code.scss";
 </style>

ui/src/components/flows/tasks/TaskDict.vue

@@ -59,7 +59,7 @@
             this.currentValue = Object.entries(toRaw(this.values));
         },
         computed: {
-            disabledAdding(){
+            disabledAdding() {
                 return !this.currentValue.at(-1)[0] || !this.currentValue.at(-1)[1];
             },
             values() {
@@ -122,3 +122,7 @@
         },
     };
 </script>
+
+<style scoped lang="scss">
+@import "../../code/styles/code.scss";
+</style>