feat(ui): allow task re-ordering from no code editor (#7120)

kestra-io · Jan 31, 2025 · 6a1d831 · 6a1d831
1 parent 95d2d1d
commit 6a1d831
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 13 deletions.
diff --git 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)"
+            @reorder="(yaml) => emits('reorder', yaml)"
             @update-documentation="(task) => emits('updateDocumentation', task)"
         />
     </div>
@@ -30,6 +31,7 @@
         "updateTask",
         "updateMetadata",
         "updateDocumentation",
+        "reorder",
     ]);
     const props = defineProps({
         flow: {type: String, required: true},

diff --git a/ui/src/components/code/components/collapse/Collapse.vue b/ui/src/components/code/components/collapse/Collapse.vue
@@ -11,15 +11,22 @@
                 <Creation :section="item.title" />
             </template>
 
-            <template v-if="creation">
-                <Element
-                    v-for="(element, elementIndex) in item.elements"
-                    :key="elementIndex"
-                    :section="item.title"
-                    :element
-                    @remove-element="removeElement(item.title, elementIndex)"
-                />
-            </template>
+            <Element
+                v-for="(element, elementIndex) in item.elements"
+                :key="elementIndex"
+                :section="item.title"
+                :element
+                @remove-element="removeElement(item.title, elementIndex)"
+                @move-element="
+                    (direction: 'up' | 'down') =>
+                        moveElement(
+                            item.elements,
+                            element.id,
+                            elementIndex,
+                            direction,
+                        )
+                "
+            />
         </el-collapse-item>
     </el-collapse>
 </template>
@@ -32,7 +39,7 @@
     import Creation from "./buttons/Creation.vue";
     import Element from "./Element.vue";
 
-    const emits = defineEmits(["remove"]);
+    const emits = defineEmits(["remove", "reorder"]);
 
     const props = defineProps({
         items: {
@@ -67,6 +74,27 @@
             }
         });
     };
+
+    import {YamlUtils as YAML_FROM_UI_LIBS} from "@kestra-io/ui-libs";
+    const moveElement = (
+        items: Record<string, any>[] | undefined,
+        elementID: string,
+        index: number,
+        direction: "up" | "down",
+    ) => {
+        if (!items || !props.flow) return;
+        if (
+            (direction === "up" && index === 0) ||
+            (direction === "down" && index === items.length - 1)
+        )
+            return;
+
+        const newIndex = direction === "up" ? index - 1 : index + 1;
+        emits(
+            "reorder",
+            YAML_FROM_UI_LIBS.swapTasks(props.flow, elementID, items[newIndex].id),
+        );
+    };
 </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
@@ -14,17 +14,21 @@
             size="small"
             class="border-0"
         />
+        <div class="d-flex flex-column">
+            <ChevronUp @click.prevent.stop="emits('moveElement', 'up')" />
+            <ChevronDown @click.prevent.stop="emits('moveElement', 'down')" />
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
     import {computed} from "vue";
 
-    import {DeleteOutline} from "../../utils/icons";
+    import {DeleteOutline, ChevronUp, ChevronDown} from "../../utils/icons";
 
     import TaskIcon from "@kestra-io/ui-libs/src/components/misc/TaskIcon.vue";
 
-    const emits = defineEmits(["removeElement"]);
+    const emits = defineEmits(["removeElement", "moveElement"]);
 
     const props = defineProps({
         section: {type: String, required: true},

diff --git a/ui/src/components/code/segments/Editor.vue b/ui/src/components/code/segments/Editor.vue
@@ -29,6 +29,7 @@
                     creation
                     :flow
                     @remove="(yaml) => emits('updateTask', yaml)"
+                    @reorder="(yaml) => emits('reorder', yaml)"
                 />
 
                 <hr class="my-4">
@@ -96,6 +97,7 @@
         "updateTask",
         "updateMetadata",
         "updateDocumentation",
+        "reorder",
     ]);
 
     const saveEvent = (e: KeyboardEvent) => {

diff --git a/ui/src/components/code/utils/icons.ts b/ui/src/components/code/utils/icons.ts
@@ -1,5 +1,7 @@
 import Plus from "vue-material-design-icons/Plus.vue";
 import ContentSave from "vue-material-design-icons/ContentSave.vue";
 import DeleteOutline from "vue-material-design-icons/DeleteOutline.vue";
+import ChevronUp from "vue-material-design-icons/ChevronUp.vue";
+import ChevronDown from "vue-material-design-icons/ChevronDown.vue";
 
-export {Plus, ContentSave, DeleteOutline};
+export {Plus, ContentSave, DeleteOutline, ChevronUp, ChevronDown};
diff --git 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)"
+                @reorder="(yaml) => handleReorder(yaml)"
                 @update-documentation="(task) => updatePluginDocumentation(undefined, task)"
             />
         </div>
@@ -959,6 +960,12 @@
         haveChange.value = true;
     };
 
+    const handleReorder = (yaml) => {
+        flowYaml.value = yaml;
+        haveChange.value = true;
+        save()
+    };
+
     const editorUpdate = (event) => {
         const currentIsFlow = isFlow();