Added keybaord actions support for activity edit modal. (#1541)

src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx

@@ -260,7 +260,7 @@ export class ElsaWorkflowDesigner {
     this.activityDisplayContexts = displayContexts;
 
     // Rebuild D3 model if component completed its initial load.
-    if(!!this.svgD3Selected)
+    if (!!this.svgD3Selected)
       this.rerenderTree();
   }
 
@@ -763,7 +763,24 @@ export class ElsaWorkflowDesigner {
             }
           }
 
-          this.rerenderTree();
+          // Delay the rerender of the tree to permit the double click action to be captured
+          setTimeout(() => {
+            this.rerenderTree();
+          }, 90);
+        }
+      }).on('dblclick', async e => {
+        e.stopPropagation();
+        if (this.mode == WorkflowDesignerMode.Edit) {
+          await this.showActivityEditor(activity, true);
+          if (!this.selectedActivities[activityId]) {
+            for (const key in this.selectedActivities) {
+              this.activityDeselected.emit(this.selectedActivities[key]);
+            }
+            this.selectedActivities = {};
+            this.selectedActivities[activityId] = activity;
+            this.activitySelected.emit(activity);
+            this.rerenderTree();
+          }
         }
       });
 

src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-activity-editor-modal/elsa-activity-editor-modal.tsx

@@ -121,7 +121,7 @@ export class ElsaActivityEditorModal {
   async onCancelClick() {
     await this.dialog.hide(true);
   }
-  
+
   onSubmit = async (e: Event) => {
     e.preventDefault();
     const form: any = e.target;
@@ -137,7 +137,6 @@ export class ElsaActivityEditorModal {
   };
 
   onShowActivityEditor = async (activity: ActivityModel, animate: boolean) => {
-    const t = this.t;
     this.activityModel = JSON.parse(JSON.stringify(activity));
     this.activityDescriptor = state.activityDescriptors.find(x => x.type == activity.type);
     this.workflowStorageDescriptors = state.workflowStorageDescriptors;
@@ -147,6 +146,12 @@ export class ElsaActivityEditorModal {
     await this.dialog.show(animate);
   };
 
+  onKeyDown = async (event: KeyboardEvent) => {
+    if (event.ctrlKey && event.key === 'Enter') {
+      (this.dialog.querySelector('button[type="submit"]') as HTMLButtonElement).click();
+    }
+  }
+
   render() {
     const renderProps = this.renderProps;
     const activityDescriptor: ActivityDescriptor = renderProps.activityDescriptor;
@@ -160,7 +165,7 @@ export class ElsaActivityEditorModal {
       <Host class="elsa-block">
         <elsa-modal-dialog ref={el => this.dialog = el}>
           <div slot="content" class="elsa-py-8 elsa-pb-0">
-            <form onSubmit={e => this.onSubmit(e)} ref={el => this.form = el} key={this.timestamp.getTime().toString()}>
+            <form onSubmit={e => this.onSubmit(e)} ref={el => this.form = el} key={this.timestamp.getTime().toString()} onKeyDown={this.onKeyDown}>
               <div class="elsa-flex elsa-px-8">
                 <div class="elsa-space-y-8 elsa-divide-y elsa-divide-gray-200 elsa-w-full">
                   <div>

src/designer/elsa-workflows-studio/src/components/shared/elsa-modal-dialog/elsa-modal-dialog.tsx

@@ -1,5 +1,5 @@
-import {Component, Host, h, Prop, State, Listen, Method} from '@stencil/core';
-import {enter, leave, toggle} from 'el-transition'
+import {Component, Host, h, State, Listen, Method} from '@stencil/core';
+import {enter, leave} from 'el-transition'
 import {eventBus} from "../../../services";
 import {EventTypes} from "../../../models";
 
@@ -49,6 +49,13 @@ export class ElsaModalDialog {
     leave(this.modal).then(() => this.isVisible = false);
   }
 
+  @Listen('keydown', {target: 'window'})
+  async handleKeyDown(e: KeyboardEvent) {
+    if (this.isVisible && e.key === 'Escape') {
+      await this.hide(true);
+    }
+  }
+
   renderModal() {
     return (
       <Host class={{'hidden': !this.isVisible, 'elsa-block': true}}>