From c99b1670c3ea6fa9ce4197f8945a653929291f4c Mon Sep 17 00:00:00 2001
From: Shubham Thakre <shhubhamthackeray@gmail.com>
Date: Fri, 20 May 2022 18:11:41 +0200
Subject: [PATCH] fix(ui): policy outside modal click issue update (#4909)

---
 .../src/app/policy/PolicyBuilderModal.tsx     | 83 ++++++++++++-------
 .../src/app/shared/ClickOutside.tsx           | 32 +++++++
 2 files changed, 83 insertions(+), 32 deletions(-)
 create mode 100644 datahub-web-react/src/app/shared/ClickOutside.tsx

diff --git a/datahub-web-react/src/app/policy/PolicyBuilderModal.tsx b/datahub-web-react/src/app/policy/PolicyBuilderModal.tsx
index 6ef9ace66c..ddb5420819 100644
--- a/datahub-web-react/src/app/policy/PolicyBuilderModal.tsx
+++ b/datahub-web-react/src/app/policy/PolicyBuilderModal.tsx
@@ -7,6 +7,7 @@ import PolicyActorForm from './PolicyActorForm';
 import { ActorFilter, Policy, PolicyType, ResourceFilter } from '../../types.generated';
 import { EMPTY_POLICY } from './policyUtils';
 import { useEnterKeyListener } from '../shared/useEnterKeyListener';
+import ClickOutside from '../shared/ClickOutside';
 
 type Props = {
     policy: Omit<Policy, 'urn'>;
@@ -138,38 +139,56 @@ export default function PolicyBuilderModal({ policy, setPolicy, visible, onClose
         querySelectorToExecuteClick: '#saveButton',
     });
 
+    // modalClosePopup for outside policy modal click
+    const modalClosePopup = () => {
+        Modal.confirm({
+            title: 'Exit Policy Editor',
+            content: `Are you sure you want to exit policy editor? All changes will be lost`,
+            onOk() {
+                onClose();
+            },
+            onCancel() {},
+            okText: 'Yes',
+            maskClosable: true,
+            closable: true,
+        });
+    };
+
     return (
-        <Modal
-            title={isEditing ? 'Edit a Policy' : 'Create a new Policy'}
-            visible={visible}
-            onCancel={onClose}
-            closable
-            width={750}
-            footer={null}
-        >
-            <Steps current={activeStepIndex}>
-                {policySteps.map((item) => (
-                    <Steps.Step key={item.title} title={item.title} />
-                ))}
-            </Steps>
-            <div className="steps-content">{activeStep.content}</div>
-            <StepsContainer>
-                <PrevButtonContainer>
-                    {activeStepIndex > 0 && <Button onClick={() => prev()}>Previous</Button>}
-                </PrevButtonContainer>
-                <NextButtonContainer>
-                    {activeStepIndex < policySteps.length - 1 && activeStep.complete && (
-                        <Button id="nextButton" type="primary" onClick={() => next()}>
-                            Next
-                        </Button>
-                    )}
-                    {activeStepIndex === policySteps.length - 1 && activeStep.complete && (
-                        <Button id="saveButton" type="primary" onClick={onSavePolicy}>
-                            Save
-                        </Button>
-                    )}
-                </NextButtonContainer>
-            </StepsContainer>
-        </Modal>
+        <ClickOutside onClickOutside={modalClosePopup} wrapperClassName="PolicyBuilderModal">
+            <Modal
+                wrapClassName="PolicyBuilderModal"
+                title={isEditing ? 'Edit a Policy' : 'Create a new Policy'}
+                visible={visible}
+                onCancel={onClose}
+                closable
+                width={750}
+                footer={null}
+            >
+                <Steps current={activeStepIndex}>
+                    {policySteps.map((item) => (
+                        <Steps.Step key={item.title} title={item.title} />
+                    ))}
+                </Steps>
+                <div className="steps-content">{activeStep.content}</div>
+                <StepsContainer>
+                    <PrevButtonContainer>
+                        {activeStepIndex > 0 && <Button onClick={() => prev()}>Previous</Button>}
+                    </PrevButtonContainer>
+                    <NextButtonContainer>
+                        {activeStepIndex < policySteps.length - 1 && activeStep.complete && (
+                            <Button id="nextButton" type="primary" onClick={() => next()}>
+                                Next
+                            </Button>
+                        )}
+                        {activeStepIndex === policySteps.length - 1 && activeStep.complete && (
+                            <Button id="saveButton" type="primary" onClick={onSavePolicy}>
+                                Save
+                            </Button>
+                        )}
+                    </NextButtonContainer>
+                </StepsContainer>
+            </Modal>
+        </ClickOutside>
     );
 }
diff --git a/datahub-web-react/src/app/shared/ClickOutside.tsx b/datahub-web-react/src/app/shared/ClickOutside.tsx
new file mode 100644
index 0000000000..0f0b40abca
--- /dev/null
+++ b/datahub-web-react/src/app/shared/ClickOutside.tsx
@@ -0,0 +1,32 @@
+import React, { useEffect, useRef } from 'react';
+
+interface OutsideAlerterType {
+    children: React.ReactNode;
+    onClickOutside: () => void;
+    wrapperClassName?: string;
+}
+
+export default function ClickOutside({ children, onClickOutside, wrapperClassName }: OutsideAlerterType) {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+
+    function handleClickOutside(event) {
+        if (wrapperClassName) {
+            if (event.target && event.target.classList.contains(wrapperClassName)) {
+                onClickOutside();
+            }
+        } else if (!(wrapperRef.current as HTMLDivElement).contains((event.target as Node) || null)) {
+            onClickOutside();
+        }
+    }
+
+    useEffect(() => {
+        if (wrapperRef && wrapperRef.current) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    });
+
+    return <div ref={wrapperRef}>{children}</div>;
+}