From c20eb3bf001a83892cfd5eab94451347bdec16a6 Mon Sep 17 00:00:00 2001
From: james-tran-3005 <tnhuy@cmcglobal.vn>
Date: Mon, 25 Nov 2024 10:03:44 +0700
Subject: [PATCH] fix(portal): make all side drawer closable by clicking
 outside

---
 .../kraken-app-portal/src/components/APIServerDrawer/index.tsx  | 2 ++
 .../kraken-app-portal/src/components/APIServerModal/index.tsx   | 2 ++
 .../kraken-app-portal/src/components/APIViewerModal/index.tsx   | 2 ++
 .../kraken-app-portal/src/components/SpecDrawer/index.tsx       | 1 +
 .../pages/AuditLog/components/AuditLogDetailsModal/index.tsx    | 1 +
 .../components/ActivityDetailModal/index.tsx                    | 1 +
 .../MappingTemplate/components/VersionSelect/DetailDrawer.tsx   | 1 +
 .../src/pages/UserManagement/components/UserModal/index.tsx     | 1 +
 8 files changed, 11 insertions(+)

diff --git a/kraken-app/kraken-app-portal/src/components/APIServerDrawer/index.tsx b/kraken-app/kraken-app-portal/src/components/APIServerDrawer/index.tsx
index 3d04adf6..04b08544 100644
--- a/kraken-app/kraken-app-portal/src/components/APIServerDrawer/index.tsx
+++ b/kraken-app/kraken-app-portal/src/components/APIServerDrawer/index.tsx
@@ -94,7 +94,9 @@ const APIServerDrawer = ({ item, isOpen, onClose }: Props) => {
       zIndex={1100}
       width={"80vw"}
       closable={false}
+      maskClosable
       open={isOpen}
+      onClose={onClose}
       title={
         <Flex justify="space-between">
           <Text.NormalLarge>Check details</Text.NormalLarge>
diff --git a/kraken-app/kraken-app-portal/src/components/APIServerModal/index.tsx b/kraken-app/kraken-app-portal/src/components/APIServerModal/index.tsx
index d1cc2c86..2748a63a 100644
--- a/kraken-app/kraken-app-portal/src/components/APIServerModal/index.tsx
+++ b/kraken-app/kraken-app-portal/src/components/APIServerModal/index.tsx
@@ -32,7 +32,9 @@ const APIServerModal = ({ id, isOpen, refresh, onClose }: Props) => {
       className={styles.drawer}
       width={"80vw"}
       closable={false}
+      maskClosable
       open={isOpen}
+      onClose={onClose}
       footer={
         <Flex justifyContent="flex-end" gap={12}>
           <Button onClick={onClose}>Cancel</Button>
diff --git a/kraken-app/kraken-app-portal/src/components/APIViewerModal/index.tsx b/kraken-app/kraken-app-portal/src/components/APIViewerModal/index.tsx
index c3c5bd40..41e38cc5 100644
--- a/kraken-app/kraken-app-portal/src/components/APIViewerModal/index.tsx
+++ b/kraken-app/kraken-app-portal/src/components/APIViewerModal/index.tsx
@@ -17,6 +17,7 @@ const APIViewerModal = ({ selectedAPI, content, isOpen, onClose }: Props) => {
     <Drawer
       className={styles.modal}
       open={isOpen}
+      maskClosable
       title={
         <Flex justifyContent="space-between">
           <Text.BoldLarge>API details</Text.BoldLarge>
@@ -28,6 +29,7 @@ const APIViewerModal = ({ selectedAPI, content, isOpen, onClose }: Props) => {
         </Flex>
       }
       closable={false}
+      onClose={onClose}
       width="70vw"
       footer={
         <Flex justifyContent="flex-end">
diff --git a/kraken-app/kraken-app-portal/src/components/SpecDrawer/index.tsx b/kraken-app/kraken-app-portal/src/components/SpecDrawer/index.tsx
index a2e04d9c..750d1ad6 100644
--- a/kraken-app/kraken-app-portal/src/components/SpecDrawer/index.tsx
+++ b/kraken-app/kraken-app-portal/src/components/SpecDrawer/index.tsx
@@ -49,6 +49,7 @@ const SpecDrawer = ({ content, isOpen, onClose }: Props) => {
       className={styles.drawer}
       width="90vw"
       open={isOpen}
+      maskClosable
       onClose={onClose}
       footer={
         <Flex justify="flex-end">
diff --git a/kraken-app/kraken-app-portal/src/pages/AuditLog/components/AuditLogDetailsModal/index.tsx b/kraken-app/kraken-app-portal/src/pages/AuditLog/components/AuditLogDetailsModal/index.tsx
index dc5cbac7..18b0663b 100644
--- a/kraken-app/kraken-app-portal/src/pages/AuditLog/components/AuditLogDetailsModal/index.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/AuditLog/components/AuditLogDetailsModal/index.tsx
@@ -28,6 +28,7 @@ const AuditLogDetailsModal = ({ open, onClose, item }: Props) => {
     <Drawer
       className={styles.modal}
       open={open}
+      maskClosable
       onClose={onClose}
       footer={false}
       width="40vw"
diff --git a/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/components/ActivityDetailModal/index.tsx b/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/components/ActivityDetailModal/index.tsx
index c9b35494..ac219876 100644
--- a/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/components/ActivityDetailModal/index.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/EnvironmentActivityLog/components/ActivityDetailModal/index.tsx
@@ -62,6 +62,7 @@ const ActivityDetailModal = ({
       title="View Details"
       onClose={handleOk}
       open={open}
+      maskClosable
       width={"80%"}
       footer={
         <div style={{ textAlign: "right" }}>
diff --git a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/DetailDrawer.tsx b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/DetailDrawer.tsx
index be1f6d48..e2a4db9e 100644
--- a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/DetailDrawer.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/DetailDrawer.tsx
@@ -20,6 +20,7 @@ export function DetailDrawer({ deploymentId, ...props }: Readonly<DrawerProps &
       {...props}
       title="View details"
       width={760}
+      maskClosable
       className={styles.detailDrawer}
     >
       <Alert
diff --git a/kraken-app/kraken-app-portal/src/pages/UserManagement/components/UserModal/index.tsx b/kraken-app/kraken-app-portal/src/pages/UserManagement/components/UserModal/index.tsx
index 71e7e692..da2f21b5 100644
--- a/kraken-app/kraken-app-portal/src/pages/UserManagement/components/UserModal/index.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/UserManagement/components/UserModal/index.tsx
@@ -44,6 +44,7 @@ const UserModal = ({ open, onClose }: Props) => {
     <Drawer
       width="40vw"
       open={open}
+      maskClosable
       onClose={onClose}
       title={
         <Flex justify="space-between" align="center">