feat(ui): Add "Export" action allowing to download the flow source code.

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')"
+                    >
+                        {{ $t("export_to_file") }}
+                    </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: {

ui/src/components/inputs/EditorView.vue

@@ -88,6 +88,13 @@
                 :infos="flowInfos"
             />
 
+            <el-button
+                v-if="!isNamespace"
+                :icon="Download"
+                @click="exportYaml"
+                class="ms-2 me-0"
+            />
+
             <EditorButtons
                 v-if="isCreating || openedTabs.length"
                 :is-creating="props.isCreating"
@@ -111,6 +118,7 @@
                 @open-new-error="isNewErrorOpen = true"
                 @open-new-trigger="isNewTriggerOpen = true"
                 @open-edit-metadata="isEditMetadataOpen = true"
+                @export-yaml="exportYaml"
                 :is-namespace="isNamespace"
             />
         </div>
@@ -316,6 +324,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"
 
@@ -338,6 +347,8 @@
     import Drawer from "../Drawer.vue";
     import {ElMessageBox} from "element-plus";
 
+    import localUtils from "../../utils/utils";
+
     import NoCode from "../code/NoCode.vue";
 
     const store = useStore();
@@ -1315,6 +1326,11 @@
     const closeTabsToRight = (index) => {
         closeTabs(openedTabs.value.slice(index + 1).filter(tab => tab !== FLOW_TAB.value), openedTabs.value[index]);
     };
+
+    const exportYaml = () => {
+        const blob = new Blob([flowYaml.value], {type: "text/yaml"});
+        localUtils.downloadUrl(blob, "flow.yaml");
+    };
 </script>
 
 <style lang="scss" scoped>

ui/src/translations/en.json

@@ -501,6 +501,7 @@
     "add global error handler": "Add global error handler",
     "add error handler": "Add an error handler",
     "add trigger": "Add trigger",
+    "export_to_file": "Export to file",
     "edit metadata": "Edit Metadata",
     "taskDefaults": "Task Defaults",
     "disabled": "Disabled",