yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-24 08:28:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): policy outside modal click issue update (#4909)

Browse Source
This commit is contained in:
Shubham Thakre 2022-05-20 18:11:41 +02:00 committed by GitHub
parent f4305e9671
commit c99b1670c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 83 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
datahub-web-react/src/app/policy/PolicyBuilderModal.tsx
View File

@ -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>
);
}

32
datahub-web-react/src/app/shared/ClickOutside.tsx Normal file
View File

@ -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>;
}