fix(portal): make all side drawer closable by clicking outside

mycloudnexus · Nov 25, 2024 · c20eb3b · c20eb3b
1 parent 975f12e
commit c20eb3b
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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/...aken-app-portal/src/pages/EnvironmentActivityLog/components/ActivityDetailModal/index.tsx b/...aken-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/...app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/DetailDrawer.tsx b/...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
@@ -44,6 +44,7 @@ const UserModal = ({ open, onClose }: Props) => {
     <Drawer
       width="40vw"
       open={open}
+      maskClosable
       onClose={onClose}
       title={
         <Flex justify="space-between" align="center">