From 1cdfdc2953d75c51226c4ab150f07a403fca4001 Mon Sep 17 00:00:00 2001
From: yuri <1969yuri1969@gmail.com>
Date: Mon, 28 Aug 2023 08:56:56 +0200
Subject: [PATCH] feat(ui): add a shortcut to execute flow (#1948)

* Ctrl+E works in the context of Monaco Editor.
* The Ctrl+S, Ctrl+E, Enter sequence was achieved.
* Triggering the execution via `onClick()` feels hacky :(

close #1814
---
 ui/src/components/flows/FlowRun.vue     |  4 ++--
 ui/src/components/inputs/Editor.vue     | 15 ++++++++++++++-
 ui/src/components/inputs/EditorView.vue | 10 ++++++++++
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/flows/FlowRun.vue b/ui/src/components/flows/FlowRun.vue
index fdc17f460c9..4ab793d556e 100644
--- a/ui/src/components/flows/FlowRun.vue
+++ b/ui/src/components/flows/FlowRun.vue
@@ -5,7 +5,7 @@
             {{ $t('disabled flow desc') }}
         </el-alert>
 
-        <el-form label-position="top" :model="inputs" ref="form" @submit.prevent>
+        <el-form label-position="top" :model="inputs" ref="form" @submit.prevent="onSubmit($refs.form)">
             <el-form-item
                 v-for="input in flow.inputs || []"
                 :key="input.id"
@@ -96,7 +96,7 @@
                 </div>
                 <div class="right-align">
                     <el-form-item class="submit">
-                        <el-button :icon="Flash" class="flow-run-trigger-button" @click="onSubmit($refs.form)" type="primary" :disabled="flow.disabled || haveBadLabels">
+                        <el-button :icon="Flash" class="flow-run-trigger-button" @click="onSubmit($refs.form)" type="primary" native-type="submit" :disabled="flow.disabled || haveBadLabels">
                             {{ $t('launch execution') }}
                         </el-button>
                         <el-text v-if="haveBadLabels" type="danger" size="small">
diff --git a/ui/src/components/inputs/Editor.vue b/ui/src/components/inputs/Editor.vue
index 2d35791851d..5e878445e65 100644
--- a/ui/src/components/inputs/Editor.vue
+++ b/ui/src/components/inputs/Editor.vue
@@ -85,7 +85,7 @@
         components: {
             MonacoEditor,
         },
-        emits: ["save", "focusout", "tab", "update:modelValue", "cursor", "restartGuidedTour"],
+        emits: ["save", "execute", "focusout", "tab", "update:modelValue", "cursor", "restartGuidedTour"],
         editor: undefined,
         data() {
             return {
@@ -230,6 +230,19 @@
                     }
                 });
 
+                this.editor.addAction({
+                    id: "kestra-execute",
+                    label: "Execute the flow",
+                    keybindings: [
+                        KeyMod.CtrlCmd | KeyCode.KeyE,
+                    ],
+                    contextMenuGroupId: "navigation",
+                    contextMenuOrder: 1.5,
+                    run: (ed) => {
+                        this.$emit("execute", ed.getValue())
+                    }
+                });
+
                 if (this.input) {
                     this.editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyF, () => {
                     })
diff --git a/ui/src/components/inputs/EditorView.vue b/ui/src/components/inputs/EditorView.vue
index a957b0451d6..f9d0b806806 100644
--- a/ui/src/components/inputs/EditorView.vue
+++ b/ui/src/components/inputs/EditorView.vue
@@ -121,6 +121,7 @@
     const isLoading = ref(false);
     const haveChange = ref(false)
     const flowYaml = ref("")
+    const triggerFlow = ref(null);
     const newTrigger = ref(null)
     const isNewTriggerOpen = ref(false)
     const newError = ref(null)
@@ -529,6 +530,13 @@
         })
     };
 
+    const execute = (_) => {
+        if (!triggerFlow.value) {
+            return;
+        }
+        triggerFlow.value.onClick();
+    };
+
     const canDelete = () => {
         return (
             user.isAllowed(
@@ -616,6 +624,7 @@
             :class="combinedEditor ? 'editor-combined' : ''"
             :style="combinedEditor ? {width: editorWidthPercentage} : {}"
             @save="save"
+            @execute="execute"
             v-model="flowYaml"
             schema-type="flow"
             lang="yaml"
@@ -801,6 +810,7 @@
             <li v-if="flow">
                 <trigger-flow
                     v-if="!props.isCreating"
+                    ref="triggerFlow"
                     type="default"
                     :disabled="flow.disabled"
                     :flow-id="flow.id"