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
kestra-io · Aug 28, 2023 · 1cdfdc2 · 1cdfdc2
1 parent c224abd
commit 1cdfdc2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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"