From d65e25a10eba29a57d96d567d3a6a2a8b993af86 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Fri, 9 Dec 2022 19:57:28 +0800
Subject: [PATCH] refactor(console): support close modal on `esc` pressed
 (#2627)

---
 .../components/Sidebar/components/Contact/index.tsx   |  2 ++
 .../console/src/components/ConfirmModal/index.tsx     |  2 ++
 packages/console/src/pages/ApiResources/index.tsx     |  4 ++++
 .../Applications/components/CreateForm/index.tsx      |  7 ++++++-
 packages/console/src/pages/Applications/index.tsx     |  9 +++++++--
 .../pages/Connectors/components/CreateForm/index.tsx  | 11 ++++++++++-
 .../src/pages/Settings/components/ChangePassword.tsx  |  4 ++++
 .../components/Welcome/GuideModal.tsx                 |  7 ++++++-
 .../ManageLanguage/LanguageEditor/index.tsx           |  8 +++++++-
 .../pages/UserDetails/components/CreateSuccess.tsx    |  8 +++++++-
 packages/console/src/pages/UserDetails/index.tsx      |  4 ++++
 packages/console/src/pages/Users/index.tsx            |  4 ++++
 packages/ui/src/components/ConfirmModal/AcModal.tsx   |  2 ++
 .../ui/src/components/ConfirmModal/MobileModal.tsx    |  2 ++
 14 files changed, 67 insertions(+), 7 deletions(-)

diff --git a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx b/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
index 5904145c0..16a8b0328 100644
--- a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
+++ b/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
@@ -19,9 +19,11 @@ const Contact = ({ isOpen, onCancel }: Props) => {
 
   return (
     <ReactModal
+      shouldCloseOnEsc
       isOpen={isOpen}
       className={modalStyles.content}
       overlayClassName={modalStyles.overlay}
+      onRequestClose={onCancel}
     >
       <ModalLayout title="contact.title" subtitle="contact.description" onClose={onCancel}>
         <div className={styles.main}>
diff --git a/packages/console/src/components/ConfirmModal/index.tsx b/packages/console/src/components/ConfirmModal/index.tsx
index 495053b80..dd85c6e93 100644
--- a/packages/console/src/components/ConfirmModal/index.tsx
+++ b/packages/console/src/components/ConfirmModal/index.tsx
@@ -39,9 +39,11 @@ const ConfirmModal = ({
 }: ConfirmModalProps) => {
   return (
     <ReactModal
+      shouldCloseOnEsc
       isOpen={isOpen}
       className={modalStyles.content}
       overlayClassName={modalStyles.overlay}
+      onRequestClose={onCancel}
     >
       <ModalLayout
         title={title}
diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx
index e8f8f753f..c78bb1753 100644
--- a/packages/console/src/pages/ApiResources/index.tsx
+++ b/packages/console/src/pages/ApiResources/index.tsx
@@ -59,9 +59,13 @@ const ApiResources = () => {
           }}
         />
         <Modal
+          shouldCloseOnEsc
           isOpen={isCreateFormOpen}
           className={modalStyles.content}
           overlayClassName={modalStyles.overlay}
+          onRequestClose={() => {
+            setIsCreateFormOpen(false);
+          }}
         >
           <CreateForm
             onClose={(createdApiResource) => {
diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.tsx b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
index ccf8c2722..ba5eee512 100644
--- a/packages/console/src/pages/Applications/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
@@ -118,7 +118,12 @@ const CreateForm = ({ onClose }: Props) => {
         </FormField>
       </form>
       {createdApp && (
-        <Modal isOpen={isGetStartedModalOpen} className={modalStyles.fullScreen}>
+        <Modal
+          shouldCloseOnEsc
+          isOpen={isGetStartedModalOpen}
+          className={modalStyles.fullScreen}
+          onRequestClose={closeModal}
+        >
           <Guide app={createdApp} onClose={closeModal} />
         </Modal>
       )}
diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx
index 4442e7a9c..52f65dc06 100644
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@@ -54,18 +54,23 @@ const Applications = () => {
           }}
         />
         <Modal
+          shouldCloseOnEsc
           isOpen={isCreateNew}
           className={modalStyles.content}
           overlayClassName={modalStyles.overlay}
+          onRequestClose={() => {
+            navigate('/applications');
+          }}
         >
           <CreateForm
             onClose={(createdApp) => {
-              navigate('/applications');
-
               if (createdApp) {
                 toast.success(t('applications.application_created', { name: createdApp.name }));
                 navigate(`/applications/${createdApp.id}`);
+
+                return;
               }
+              navigate('/applications');
             }}
           />
         </Modal>
diff --git a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
index fa127654b..8cc3d233f 100644
--- a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
@@ -124,9 +124,13 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
 
   return (
     <Modal
+      shouldCloseOnEsc
       isOpen={isFormOpen}
       className={modalStyles.content}
       overlayClassName={modalStyles.overlay}
+      onRequestClose={() => {
+        onClose?.();
+      }}
     >
       <ModalLayout
         title={cardTitle}
@@ -179,7 +183,12 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
           />
         )}
         {activeFactory && (
-          <Modal isOpen={isGetStartedModalOpen} className={modalStyles.fullScreen}>
+          <Modal
+            shouldCloseOnEsc
+            isOpen={isGetStartedModalOpen}
+            className={modalStyles.fullScreen}
+            onRequestClose={closeModal}
+          >
             <Guide connector={activeFactory} onClose={closeModal} />
           </Modal>
         )}
diff --git a/packages/console/src/pages/Settings/components/ChangePassword.tsx b/packages/console/src/pages/Settings/components/ChangePassword.tsx
index f3903eecf..97e8372d2 100644
--- a/packages/console/src/pages/Settings/components/ChangePassword.tsx
+++ b/packages/console/src/pages/Settings/components/ChangePassword.tsx
@@ -60,9 +60,13 @@ const ChangePassword = () => {
         </div>
       </FormField>
       <ReactModal
+        shouldCloseOnEsc
         isOpen={isOpen}
         className={modalStyles.content}
         overlayClassName={modalStyles.overlay}
+        onRequestClose={() => {
+          setIsOpen(false);
+        }}
       >
         <ModalLayout
           title="settings.change_modal_title"
diff --git a/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx b/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx
index bbd0fe916..8570ff125 100644
--- a/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx
+++ b/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx
@@ -82,7 +82,12 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
   };
 
   return (
-    <Modal isOpen={isOpen} className={modalStyles.fullScreen}>
+    <Modal
+      shouldCloseOnEsc
+      isOpen={isOpen}
+      className={modalStyles.fullScreen}
+      onRequestClose={onSkip}
+    >
       <div className={styles.container}>
         <div className={styles.header}>
           <IconButton size="large" disabled={isLoading} onClick={onSkip}>
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/index.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/index.tsx
index a97263df4..15e24a1dc 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/index.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/index.tsx
@@ -71,7 +71,13 @@ const LanguageEditorModal = ({ isOpen, onClose }: Props) => {
   };
 
   return (
-    <Modal isOpen={isOpen} className={styles.modalContent} overlayClassName={styles.modalOverlay}>
+    <Modal
+      shouldCloseOnEsc
+      isOpen={isOpen}
+      className={styles.modalContent}
+      overlayClassName={styles.modalOverlay}
+      onRequestClose={onCloseModal}
+    >
       <Card className={styles.editor}>
         <div className={styles.header}>
           <CardTitle
diff --git a/packages/console/src/pages/UserDetails/components/CreateSuccess.tsx b/packages/console/src/pages/UserDetails/components/CreateSuccess.tsx
index a26fb1e89..c0c350479 100644
--- a/packages/console/src/pages/UserDetails/components/CreateSuccess.tsx
+++ b/packages/console/src/pages/UserDetails/components/CreateSuccess.tsx
@@ -41,7 +41,13 @@ const CreateSuccess = ({ username, password, title, onClose, passwordLabel }: Pr
   }
 
   return (
-    <ReactModal isOpen className={modalStyles.content} overlayClassName={modalStyles.overlay}>
+    <ReactModal
+      isOpen
+      shouldCloseOnEsc
+      className={modalStyles.content}
+      overlayClassName={modalStyles.overlay}
+      onRequestClose={onClose}
+    >
       <ModalLayout
         title={title}
         footer={
diff --git a/packages/console/src/pages/UserDetails/index.tsx b/packages/console/src/pages/UserDetails/index.tsx
index fe6e6797f..caa488945 100644
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/packages/console/src/pages/UserDetails/index.tsx
@@ -138,9 +138,13 @@ const UserDetails = () => {
                 </ActionMenuItem>
               </ActionMenu>
               <ReactModal
+                shouldCloseOnEsc
                 isOpen={isResetPasswordFormOpen}
                 className={modalStyles.content}
                 overlayClassName={modalStyles.overlay}
+                onRequestClose={() => {
+                  setIsResetPasswordFormOpen(false);
+                }}
               >
                 <ResetPasswordForm
                   userId={data.id}
diff --git a/packages/console/src/pages/Users/index.tsx b/packages/console/src/pages/Users/index.tsx
index 76fed1aea..9ae4cc5ed 100644
--- a/packages/console/src/pages/Users/index.tsx
+++ b/packages/console/src/pages/Users/index.tsx
@@ -61,9 +61,13 @@ const Users = () => {
           }}
         />
         <Modal
+          shouldCloseOnEsc
           isOpen={isCreateFormOpen}
           className={modalStyles.content}
           overlayClassName={modalStyles.overlay}
+          onRequestClose={() => {
+            setIsCreateFormOpen(false);
+          }}
         >
           <CreateForm
             onClose={(createdUser, password) => {
diff --git a/packages/ui/src/components/ConfirmModal/AcModal.tsx b/packages/ui/src/components/ConfirmModal/AcModal.tsx
index 0ed4b1645..a019afe90 100644
--- a/packages/ui/src/components/ConfirmModal/AcModal.tsx
+++ b/packages/ui/src/components/ConfirmModal/AcModal.tsx
@@ -27,6 +27,7 @@ const AcModal = ({
 
   return (
     <ReactModal
+      shouldCloseOnEsc
       role="dialog"
       isOpen={isOpen}
       className={classNames(styles.modal, className)}
@@ -34,6 +35,7 @@ const AcModal = ({
       onAfterOpen={() => {
         contentRef.current?.focus();
       }}
+      onRequestClose={onClose}
     >
       <div
         ref={contentRef}
diff --git a/packages/ui/src/components/ConfirmModal/MobileModal.tsx b/packages/ui/src/components/ConfirmModal/MobileModal.tsx
index 1acb3733c..4ab814311 100644
--- a/packages/ui/src/components/ConfirmModal/MobileModal.tsx
+++ b/packages/ui/src/components/ConfirmModal/MobileModal.tsx
@@ -18,10 +18,12 @@ const MobileModal = ({
 }: ModalProps) => {
   return (
     <ReactModal
+      shouldCloseOnEsc
       role="dialog"
       isOpen={isOpen}
       className={classNames(styles.modal, className)}
       overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
+      onRequestClose={onClose}
     >
       <div className={styles.container}>
         <div className={styles.content}>{children}</div>