From 6a717e32064757ed4e49a5d04cacc582be5de189 Mon Sep 17 00:00:00 2001
From: Piyush Bhaskar <102078527+Piyush-r-bhaskar@users.noreply.github.com>
Date: Tue, 31 Dec 2024 22:40:23 +0530
Subject: [PATCH 1/2] feat(ui): Add "Export" action allowing to download the
 flow source code.

---
 ui/src/components/inputs/EditorButtons.vue | 12 +++++++++++-
 ui/src/components/inputs/EditorView.vue    | 18 ++++++++++++++++++
 ui/src/translations/en.json                |  1 +
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/inputs/EditorButtons.vue b/ui/src/components/inputs/EditorButtons.vue
index 26f6ea06702..66eba1b83e2 100644
--- a/ui/src/components/inputs/EditorButtons.vue
+++ b/ui/src/components/inputs/EditorButtons.vue
@@ -7,6 +7,14 @@
             </el-button>
             <template #dropdown>
                 <el-dropdown-menu class="m-dropdown-menu">
+                    <el-dropdown-item
+                        v-if="isAllowedEdit"
+                        :icon="Download"
+                        size="large"
+                        @click="forwardEvent('export-yaml', null)"
+                    >
+                        {{ $t("export as yaml") }}
+                    </el-dropdown-item>
                     <el-dropdown-item
                         v-if="!isCreating && canDelete"
                         :icon="Delete"
@@ -75,6 +83,7 @@
     import LightningBolt from "vue-material-design-icons/LightningBolt.vue";
     import FileEdit from "vue-material-design-icons/FileEdit.vue";
     import ContentSave from "vue-material-design-icons/ContentSave.vue";
+    import Download from "vue-material-design-icons/Download.vue";
 </script>
 <script>
     import {defineComponent} from "vue";
@@ -86,7 +95,8 @@
             "open-new-error",
             "open-new-trigger",
             "open-edit-metadata",
-            "save"
+            "save",
+            "export-yaml"
         ],
         props: {
             isCreating: {
diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
index f6b8945969b..bb612038621 100644
--- a/ui/src/components/inputs/EditorView.vue
+++ b/ui/src/components/inputs/EditorView.vue
@@ -85,6 +85,13 @@
                 :infos="flowInfos"
             />
 
+            <el-button
+                v-if="!isNamespace"
+                :icon="Download"
+                @click="exportYaml"
+                class="mx-2"
+            />
+
             <EditorButtons
                 v-if="isCreating || openedTabs.length"
                 :is-creating="props.isCreating"
@@ -108,6 +115,7 @@
                 @open-new-error="isNewErrorOpen = true"
                 @open-new-trigger="isNewTriggerOpen = true"
                 @open-edit-metadata="isEditMetadataOpen = true"
+                @export-yaml="exportYaml"
                 :is-namespace="isNamespace"
             />
         </div>
@@ -304,6 +312,7 @@
     import MenuClose from "vue-material-design-icons/MenuClose.vue";
     import Close from "vue-material-design-icons/Close.vue";
     import CircleMedium from "vue-material-design-icons/CircleMedium.vue";
+    import Download from "vue-material-design-icons/Download.vue";
 
     import TypeIcon from "../utils/icons/Type.vue"
 
@@ -1264,6 +1273,15 @@
     const closeTabsToRight = (index) => {
         closeTabs(openedTabs.value.slice(index + 1).filter(tab => tab !== FLOW_TAB.value), openedTabs.value[index]);
     };
+
+    const exportYaml = () => {
+        const yamlContent = flowYaml.value;
+        const blob = new Blob([yamlContent], {type: "text/yaml"});
+        const link = document.createElement("a");
+        link.href = URL.createObjectURL(blob);
+        link.download = "flow.yaml";
+        link.click();
+    };
 </script>
 
 <style lang="scss" scoped>
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
index d9fedc42f38..b59f9398605 100644
--- a/ui/src/translations/en.json
+++ b/ui/src/translations/en.json
@@ -500,6 +500,7 @@
     "add global error handler": "Add global error handler",
     "add error handler": "Add an error handler",
     "add trigger": "Add trigger",
+    "export as yaml": "Download as YAML file",
     "edit metadata": "Edit Metadata",
     "taskDefaults": "Task Defaults",
     "disabled": "Disabled",

From fe283c877ff3e2d7f5d2cca2415557247baa4e1f Mon Sep 17 00:00:00 2001
From: MilosPaunovic <paun992@hotmail.com>
Date: Thu, 16 Jan 2025 11:16:17 +0100
Subject: [PATCH 2/2] chore(ui): minor tweaks

---
 ui/src/components/inputs/EditorButtons.vue |  4 ++--
 ui/src/components/inputs/EditorView.vue    | 12 +++++-------
 ui/src/translations/en.json                |  2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/inputs/EditorButtons.vue b/ui/src/components/inputs/EditorButtons.vue
index 66eba1b83e2..52b18324a61 100644
--- a/ui/src/components/inputs/EditorButtons.vue
+++ b/ui/src/components/inputs/EditorButtons.vue
@@ -11,9 +11,9 @@
                         v-if="isAllowedEdit"
                         :icon="Download"
                         size="large"
-                        @click="forwardEvent('export-yaml', null)"
+                        @click="forwardEvent('export-yaml')"
                     >
-                        {{ $t("export as yaml") }}
+                        {{ $t("export_to_file") }}
                     </el-dropdown-item>
                     <el-dropdown-item
                         v-if="!isCreating && canDelete"
diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
index bb612038621..9e942a8987a 100644
--- a/ui/src/components/inputs/EditorView.vue
+++ b/ui/src/components/inputs/EditorView.vue
@@ -89,7 +89,7 @@
                 v-if="!isNamespace"
                 :icon="Download"
                 @click="exportYaml"
-                class="mx-2"
+                class="ms-2 me-0"
             />
 
             <EditorButtons
@@ -335,6 +335,8 @@
     import Drawer from "../Drawer.vue";
     import {ElMessageBox} from "element-plus";
 
+    import localUtils from "../../utils/utils";
+
     const store = useStore();
     const router = useRouter();
     const emit = defineEmits(["follow", "expand-subflow"]);
@@ -1275,12 +1277,8 @@
     };
 
     const exportYaml = () => {
-        const yamlContent = flowYaml.value;
-        const blob = new Blob([yamlContent], {type: "text/yaml"});
-        const link = document.createElement("a");
-        link.href = URL.createObjectURL(blob);
-        link.download = "flow.yaml";
-        link.click();
+        const blob = new Blob([flowYaml.value], {type: "text/yaml"});
+        localUtils.downloadUrl(blob, "flow.yaml");
     };
 </script>
 
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
index b59f9398605..7d302fcd69a 100644
--- a/ui/src/translations/en.json
+++ b/ui/src/translations/en.json
@@ -500,7 +500,7 @@
     "add global error handler": "Add global error handler",
     "add error handler": "Add an error handler",
     "add trigger": "Add trigger",
-    "export as yaml": "Download as YAML file",
+    "export_to_file": "Export to file",
     "edit metadata": "Edit Metadata",
     "taskDefaults": "Task Defaults",
     "disabled": "Disabled",