Merge pull request #1129 from OpenFn/1069-esc-keybinding

Close node panel via escape

CHANGELOG.md

@@ -10,6 +10,9 @@ and this project adheres to
 
 ### Added
 
+- Add "esc" key binding to close job inspector modal
+  [#1069](https://github.com/OpenFn/Lightning/issues/1069)
+
 ### Changed
 
 ### Fixed

assets/js/hooks/index.ts

@@ -42,57 +42,102 @@ export const AssocListChange = {
   },
 } as PhoenixHook<{}, {}, HTMLSelectElement>;
 
-
 export const collapsiblePanel = {
   mounted() {
     this.el.addEventListener('collapse', event => {
       const target = event.target;
-      const collection = document.getElementsByClassName("collapsed");
-      if(collection.length < 2){
-        target.classList.toggle("collapsed");
+      const collection = document.getElementsByClassName('collapsed');
+      if (collection.length < 2) {
+        target.classList.toggle('collapsed');
       }
       document.dispatchEvent(new Event('update-layout'));
     });
 
     this.el.addEventListener('expand-panel', event => {
       const target = event.target;
-      target.classList.toggle("collapsed");
+      target.classList.toggle('collapsed');
       document.dispatchEvent(new Event('update-layout'));
     });
   },
 } as PhoenixHook;
 
+/**
+ * Factory function to create a hook for listening to specific key combinations.
+ *
+ * @param keyCheck - Function to check if a keyboard event matches the desired key combination.
+ * @param action - Action function to be executed when the keyCheck condition is satisfied.
+ * @returns - A PhoenixHook with mounted and destroyed lifecycles.
+ */
 function createKeyCombinationHook(
-  keyCheck: (e: KeyboardEvent) => boolean
+  keyCheck: (e: KeyboardEvent) => boolean,
+  action: (e: KeyboardEvent, el: HTMLElement) => void
 ): PhoenixHook {
   return {
     mounted() {
-      this.callback = this.handleEvent.bind(this);
+      this.callback = (e: KeyboardEvent) => {
+        if (keyCheck(e)) {
+          e.preventDefault();
+          action(e, this.el);
+        }
+      };
       window.addEventListener('keydown', this.callback);
     },
-    handleEvent(e: KeyboardEvent) {
-      if (keyCheck(e)) {
-        e.preventDefault();
-        this.el.dispatchEvent(
-          new Event('submit', { bubbles: true, cancelable: true })
-        );
-      }
-    },
     destroyed() {
       window.removeEventListener('keydown', this.callback);
     },
   } as PhoenixHook<{
     callback: (e: KeyboardEvent) => void;
-    handleEvent: (e: KeyboardEvent) => void;
   }>;
 }
 
-export const SubmitViaCtrlS = createKeyCombinationHook(
-  e => (e.ctrlKey || e.metaKey) && e.key === 's'
+/**
+ * Function to dispatch a submit event on the provided element.
+ *
+ * @param e - The keyboard event triggering the action.
+ * @param el - The HTML element to which the action will be applied.
+ */
+function submitAction(e: KeyboardEvent, el: HTMLElement) {
+  el.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+}
+
+/**
+ * Function to simulate a click event on the provided element.
+ *
+ * @param e - The keyboard event triggering the action.
+ * @param el - The HTML element to which the action will be applied.
+ */
+function closeAction(e: KeyboardEvent, el: HTMLElement) {
+  el.click();
+}
+
+const isCtrlOrMetaS = (e: KeyboardEvent) =>
+  (e.ctrlKey || e.metaKey) && e.key === 's';
+const isCtrlOrMetaEnter = (e: KeyboardEvent) =>
+  (e.ctrlKey || e.metaKey) && e.key === 'Enter';
+const isEscape = (e: KeyboardEvent) => e.key === 'Escape';
+
+/**
+ * Hook to trigger a save action on the job panel when the Ctrl (or Cmd on Mac) + 's' key combination is pressed.
+ */
+export const SaveViaCtrlS = createKeyCombinationHook(
+  isCtrlOrMetaS,
+  submitAction
+);
+
+/**
+ * Hook to trigger a save and run action on the job panel when the Ctrl (or Cmd on Mac) + Enter key combination is pressed.
+ */
+export const SaveAndRunViaCtrlEnter = createKeyCombinationHook(
+  isCtrlOrMetaEnter,
+  submitAction
 );
 
-export const SubmitViaCtrlEnter = createKeyCombinationHook(
-  e => (e.ctrlKey || e.metaKey) && (e.key === 'Enter')
+/**
+ * Hook to trigger a close action on the job panel when the Escape key is pressed.
+ */
+export const ClosePanelViaEscape = createKeyCombinationHook(
+  isEscape,
+  closeAction
 );
 
 export const Copy = {

lib/lightning_web/live/workflow_live/components.ex

@@ -167,7 +167,11 @@ defmodule LightningWeb.WorkflowLive.Components do
             <%= @title %>
           </div>
           <div class="flex-none">
-            <.link patch={@cancel_url} class="justify-center hover:text-gray-500">
+            <.link
+              phx-hook="ClosePanelViaEscape"
+              patch={@cancel_url}
+              class="justify-center hover:text-gray-500"
+            >
               <Heroicons.x_mark solid class="h-4 w-4 inline-block" />
             </.link>
           </div>

lib/lightning_web/live/workflow_live/edit.ex

@@ -153,7 +153,7 @@ defmodule LightningWeb.WorkflowLive.Edit do
           id="workflow-form"
           for={@workflow_form}
           phx-submit="save"
-          phx-hook="SubmitViaCtrlS"
+          phx-hook="SaveViaCtrlS"
           phx-change="validate"
         >
           <.single_inputs_for

lib/lightning_web/live/workflow_live/job_view.ex

@@ -80,7 +80,7 @@ defmodule LightningWeb.WorkflowLive.JobView do
           </div>
           <div class="basis-1/3 flex justify-end">
             <div class="flex w-14 items-center justify-center">
-              <.link patch={@close_url}>
+              <.link patch={@close_url} phx-hook="ClosePanelViaEscape">
                 <Heroicons.x_mark class="w-6 h-6 text-gray-500 hover:text-gray-700 hover:cursor-pointer" />
               </.link>
             </div>

lib/lightning_web/live/workflow_live/manual_workorder.ex

@@ -26,7 +26,7 @@ defmodule LightningWeb.WorkflowLive.ManualWorkorder do
     <.form
       for={@form}
       id={@form.id}
-      phx-hook="SubmitViaCtrlEnter"
+      phx-hook="SaveAndRunViaCtrlEnter"
       phx-change="manual_run_change"
       phx-submit="manual_run_submit"
       class="h-full flex flex-col gap-4"