From 132d70dadd7a0591fa8b21bc9ab316d1377d99e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milo=C5=A1=20Paunovi=C4=87?= <paun992@hotmail.com>
Date: Thu, 23 Jan 2025 13:54:10 +0100
Subject: [PATCH] feat(ui): add the ability to remove tasks and other items
 (#6902)

---
 .../code/components/collapse/Collapse.vue     | 24 ++++++++++++++++++-
 .../code/components/collapse/Element.vue      | 11 +++++++++
 ui/src/components/code/segments/Editor.vue    |  7 +++++-
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/code/components/collapse/Collapse.vue b/ui/src/components/code/components/collapse/Collapse.vue
index e3ea22628f2..51cec9af467 100644
--- a/ui/src/components/code/components/collapse/Collapse.vue
+++ b/ui/src/components/code/components/collapse/Collapse.vue
@@ -17,6 +17,7 @@
                     :key="elementIndex"
                     :section="item.title"
                     :element
+                    @remove-element="removeElement(item.title, elementIndex)"
                 />
             </template>
 
@@ -26,18 +27,21 @@
 </template>
 
 <script setup lang="ts">
-    import {PropType, ref} from "vue";
+    import {nextTick, PropType, ref} from "vue";
 
     import {CollapseItem} from "../../utils/types";
 
     import Creation from "./buttons/Creation.vue";
     import Element from "./Element.vue";
 
+    const emits = defineEmits(["remove"]);
+
     const props = defineProps({
         items: {
             type: Array as PropType<CollapseItem[]>,
             required: true,
         },
+        flow: {type: String, default: undefined},
         creation: {type: Boolean, default: false},
     });
     const expanded = ref<CollapseItem["title"][]>([]);
@@ -47,6 +51,24 @@
             if (item.elements?.length) expanded.value.push(item.title);
         });
     }
+
+    import YamlUtils from "../../../../utils/yamlUtils";
+    const removeElement = (title: string, index: number) => {
+        props.items.forEach((item) => {
+            if (item.title === title) {
+                nextTick(() => {
+                    const ID = item.elements?.[index].id;
+
+                    item.elements?.splice(index, 1);
+                    emits(
+                        "remove",
+                        YamlUtils.deleteTask(props.flow, ID, title.toUpperCase()),
+                    );
+                    expanded.value = expanded.value.filter((v) => v !== title);
+                });
+            }
+        });
+    };
 </script>
 
 <style scoped lang="scss">
diff --git a/ui/src/components/code/components/collapse/Element.vue b/ui/src/components/code/components/collapse/Element.vue
index 68d96cedb83..da97e6ed0b9 100644
--- a/ui/src/components/code/components/collapse/Element.vue
+++ b/ui/src/components/code/components/collapse/Element.vue
@@ -7,14 +7,25 @@
         <div class="flex-grow-1 label">
             {{ props.element.id }}
         </div>
+
+        <el-button
+            @click.prevent.stop="emits('removeElement')"
+            :icon="DeleteOutline"
+            size="small"
+            class="border-0"
+        />
     </div>
 </template>
 
 <script setup lang="ts">
     import {computed} from "vue";
 
+    import {DeleteOutline} from "../../utils/icons";
+
     import TaskIcon from "@kestra-io/ui-libs/src/components/misc/TaskIcon.vue";
 
+    const emits = defineEmits(["removeElement"]);
+
     const props = defineProps({
         section: {type: String, required: true},
         element: {type: Object, required: true},
diff --git a/ui/src/components/code/segments/Editor.vue b/ui/src/components/code/segments/Editor.vue
index 004bf00e2bd..537fe7a35f3 100644
--- a/ui/src/components/code/segments/Editor.vue
+++ b/ui/src/components/code/segments/Editor.vue
@@ -12,7 +12,12 @@
 
             <hr class="m-0 mt-3">
 
-            <Collapse :items="sections" creation />
+            <Collapse
+                :items="sections"
+                creation
+                :flow
+                @remove="(yaml) => emits('updateTask', yaml)"
+            />
         </template>
 
         <Task