chore: add close on esc key to other modals

Signed-off-by: Frank Flitton <[email protected]>
flyteorg · May 19, 2023 · 7a86551 · 7a86551
1 parent 9bb8de1
commit 7a86551
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 13 deletions.
diff --git a/packages/console/src/components/Entities/EntityDetailsHeader.tsx b/packages/console/src/components/Entities/EntityDetailsHeader.tsx
@@ -9,6 +9,7 @@ import { getProjectDomain } from 'models/Project/utils';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { LaunchForm } from 'components/Launch/LaunchForm/LaunchForm';
+import { useEscapeKey } from 'components/hooks/useKeyListener';
 import { backUrlGenerator, backToDetailUrlGenerator } from './generators';
 import { entityStrings } from './constants';
 import t, { patternKey } from './strings';
@@ -64,7 +65,12 @@ export const EntityDetailsHeader: React.FC<EntityDetailsHeaderProps> = ({
   const commonStyles = useCommonStyles();
 
   const [showLaunchForm, setShowLaunchForm] = React.useState(false);
-  const onCancelLaunch = () => setShowLaunchForm(false);
+  const onCancelLaunch = (_?: KeyboardEvent) => {
+    setShowLaunchForm(false);
+  };
+
+  // Close modal on escape key press
+  useEscapeKey(onCancelLaunch);
 
   const domain = getProjectDomain(project, id.domain);
   const headerText = `${domain.name} / ${id.name}`;

diff --git a/packages/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx b/packages/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx
@@ -16,6 +16,7 @@ import { extractCompiledNodes } from 'components/hooks/utils';
 import Close from '@material-ui/icons/Close';
 import classnames from 'classnames';
 import { Fullscreen, FullscreenExit } from '@material-ui/icons';
+import { useEscapeKey } from 'components/hooks/useKeyListener';
 import { NodeExecutionDetails } from '../types';
 import t from './strings';
 import { ExecutionNodeDeck } from './ExecutionNodeDeck';
@@ -136,16 +137,8 @@ export const ExecutionDetailsActions = ({
   const [showDeck, setShowDeck] = React.useState(false);
   const onCloseDeck = () => setShowDeck(false);
 
-  // Close deck modal on escape
-  useEffect(() => {
-    const close = e => {
-      if (e.key === 'Escape') {
-        setShowDeck(false);
-      }
-    };
-    document.addEventListener('keydown', close);
-    return () => document.removeEventListener('keydown', close);
-  }, []);
+  // Close deck modal on escape key press
+  useEscapeKey(onCloseDeck);
 
   const [fullScreen, setSetFullScreen] = React.useState(false);
   const toggleFullScreen = () => {

diff --git a/...ages/console/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx b/...ages/console/src/components/Executions/ExecutionDetails/ExecutionDetailsAppBarContent.tsx
@@ -13,6 +13,7 @@ import { history } from 'routes/history';
 import { Routes } from 'routes/routes';
 import { WorkflowExecutionPhase } from 'models/Execution/enums';
 import { SubNavBarContent } from 'components/Navigation/SubNavBarContent';
+import { useEscapeKey } from 'components/hooks/useKeyListener';
 import { ExecutionInputsOutputsModal } from '../ExecutionInputsOutputsModal';
 import { ExecutionStatusBadge } from '../ExecutionStatusBadge';
 import { TerminateExecutionButton } from '../TerminateExecution/TerminateExecutionButton';
@@ -90,7 +91,11 @@ export const ExecutionDetailsAppBarContentInner: React.FC<{}> = () => {
   const isTerminal = executionIsTerminal(execution);
   const onClickShowInputsOutputs = () => setShowInputsOutputs(true);
   const onClickRelaunch = () => setShowRelaunchForm(true);
-  const onCloseRelaunch = () => setShowRelaunchForm(false);
+  const onCloseRelaunch = (_?: any) => setShowRelaunchForm(false);
+
+  // Close modal on escape key press
+  useEscapeKey(onCloseRelaunch);
+
   const fromExecutionNav = new URLSearchParams(history.location.search).get(
     'fromExecutionNav',
   );

diff --git a/packages/console/src/components/Executions/ExecutionInputsOutputsModal.tsx b/packages/console/src/components/Executions/ExecutionInputsOutputsModal.tsx
@@ -6,6 +6,7 @@ import { LiteralMapViewer } from 'components/Literals/LiteralMapViewer';
 import { emptyLiteralMapBlob } from 'models/Common/constants';
 import { Execution } from 'models/Execution/types';
 import * as React from 'react';
+import { useEscapeKey } from 'components/hooks/useKeyListener';
 import { useWorkflowExecutionData } from './useWorkflowExecution';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -126,6 +127,7 @@ export const ExecutionInputsOutputsModal: React.FC<
   ExecutionInputsOutputsModalProps
 > = ({ execution, onClose }) => {
   const styles = useStyles();
+  useEscapeKey(onClose);
   return (
     <Dialog
       PaperProps={{ className: styles.dialog }}

diff --git a/packages/console/src/components/Launch/LaunchForm/LaunchFormDialog.tsx b/packages/console/src/components/Launch/LaunchForm/LaunchFormDialog.tsx
@@ -8,6 +8,7 @@ import {
 } from 'components/Launch/LaunchForm/types';
 import { CompiledNode } from 'models/Node/types';
 import { NodeExecutionIdentifier } from 'models/Execution/types';
+import { useEscapeKey } from 'components/hooks/useKeyListener';
 import { ResumeForm } from './ResumeForm';
 
 interface LaunchFormDialogProps {
@@ -38,7 +39,10 @@ export const LaunchFormDialog = ({
   compiledNode,
   nodeExecutionId,
 }: LaunchFormDialogProps): JSX.Element => {
-  const onCancelLaunch = () => setShowLaunchForm(false);
+  const onCancelLaunch = (_?: any) => setShowLaunchForm(false);
+
+  // Close modal on escape key press
+  useEscapeKey(onCancelLaunch);
 
   // prevent child onclick event in the dialog triggers parent onclick event
   const dialogOnClick = (e: React.MouseEvent<HTMLElement>) => {

diff --git a/packages/console/src/components/common/ClosableDialogTitle.tsx b/packages/console/src/components/common/ClosableDialogTitle.tsx
@@ -1,6 +1,7 @@
 import { DialogTitle, IconButton, Typography } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import Close from '@material-ui/icons/Close';
+import { useEscapeKey } from 'components/hooks/useKeyListener';
 import * as React from 'react';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -27,6 +28,10 @@ export const ClosableDialogTitle: React.FC<ClosableDialogTitleProps> = ({
   onClose,
 }) => {
   const styles = useStyles();
+
+  // Close modal on escape key press
+  useEscapeKey(onClose);
+
   return (
     <DialogTitle disableTypography={true} className={styles.root}>
       <Typography variant="h6">{children}</Typography>