refactor(ui): antd Modal visible property to open (#11232)

datahub-project · Aug 28, 2024 · f97f20a · f97f20a
1 parent b463440
commit f97f20a
Show file tree

Hide file tree

Showing 86 changed files with 140 additions and 154 deletions.
diff --git a/datahub-web-react/src/app/businessAttribute/BusinessAttributes.tsx b/datahub-web-react/src/app/businessAttribute/BusinessAttributes.tsx
@@ -246,7 +246,7 @@ export const BusinessAttributes = () => {
                 />
             </PaginationContainer>
             <CreateBusinessAttributeModal
-                visible={isCreatingBusinessAttribute}
+                open={isCreatingBusinessAttribute}
                 onClose={() => setIsCreatingBusinessAttribute(false)}
                 onCreateBusinessAttribute={() => {
                     businessAttributeRefetch?.();

diff --git a/datahub-web-react/src/app/businessAttribute/CreateBusinessAttributeModal.tsx b/datahub-web-react/src/app/businessAttribute/CreateBusinessAttributeModal.tsx
@@ -13,7 +13,7 @@ import { SchemaFieldDataType } from './businessAttributeUtils';
 import { validateCustomUrnId } from '../shared/textUtil';
 
 type Props = {
-    visible: boolean;
+    open: boolean;
     onClose: () => void;
     onCreateBusinessAttribute: () => void;
 };
@@ -51,7 +51,7 @@ const StyledButton = styled(Button)`
 // Ensures that any newly added datatype is automatically included in the user dropdown.
 const DATA_TYPES = Object.values(SchemaFieldDataType);
 
-export default function CreateBusinessAttributeModal({ visible, onClose, onCreateBusinessAttribute }: Props) {
+export default function CreateBusinessAttributeModal({ open, onClose, onCreateBusinessAttribute }: Props) {
     const [createButtonEnabled, setCreateButtonEnabled] = useState(true);
 
     const [createBusinessAttribute] = useCreateBusinessAttributeMutation();
@@ -120,7 +120,7 @@ export default function CreateBusinessAttributeModal({ visible, onClose, onCreat
         <>
             <Modal
                 title="Create Business Attribute"
-                visible={visible}
+                open={open}
                 onCancel={onModalClose}
                 footer={
                     <>

diff --git a/datahub-web-react/src/app/domain/CreateDomainModal.tsx b/datahub-web-react/src/app/domain/CreateDomainModal.tsx
@@ -115,7 +115,7 @@ export default function CreateDomainModal({ onClose, onCreate }: Props) {
     return (
         <Modal
             title="Create New Domain"
-            visible
+            open
             onCancel={onClose}
             footer={
                 <>

diff --git a/...b-web-react/src/app/entity/dataset/profile/stats/historical/charts/ProfilingRunsChart.tsx b/...b-web-react/src/app/entity/dataset/profile/stats/historical/charts/ProfilingRunsChart.tsx
@@ -71,7 +71,7 @@ export default function ProfilingRunsChart({ profiles }: Props) {
     return (
         <>
             {selectedProfile && (
-                <Modal width="100%" footer={null} title={profileModalTitle} visible={showModal} onCancel={onClose}>
+                <Modal width="100%" footer={null} title={profileModalTitle} open={showModal} onCancel={onClose}>
                     <DataProfileView profile={selectedProfile} />
                 </Modal>
             )}

diff --git a/datahub-web-react/src/app/entity/glossaryTerm/profile/AddRelatedTermsModal.tsx b/datahub-web-react/src/app/entity/glossaryTerm/profile/AddRelatedTermsModal.tsx
@@ -167,7 +167,7 @@ function AddRelatedTermsModal(props: Props) {
     return (
         <Modal
             title="Add Related Terms"
-            visible
+            open
             onCancel={onClose}
             footer={
                 <>

diff --git a/datahub-web-react/src/app/entity/group/AddGroupMembersModal.tsx b/datahub-web-react/src/app/entity/group/AddGroupMembersModal.tsx
@@ -10,7 +10,7 @@ import { OwnerLabel } from '../../shared/OwnerLabel';
 
 type Props = {
     urn: string;
-    visible: boolean;
+    open: boolean;
     onCloseModal: () => void;
     onSubmit: () => void;
 };
@@ -29,7 +29,7 @@ const StyleTag = styled(Tag)`
     align-items: center;
 `;
 
-export const AddGroupMembersModal = ({ urn, visible, onCloseModal, onSubmit }: Props) => {
+export const AddGroupMembersModal = ({ urn, open, onCloseModal, onSubmit }: Props) => {
     const entityRegistry = useEntityRegistry();
     const [selectedMembers, setSelectedMembers] = useState<any[]>([]);
     const [inputValue, setInputValue] = useState('');
@@ -134,7 +134,7 @@ export const AddGroupMembersModal = ({ urn, visible, onCloseModal, onSubmit }: P
     return (
         <Modal
             title="Add group members"
-            visible={visible}
+            open={open}
             onCancel={onModalClose}
             footer={
                 <>

diff --git a/datahub-web-react/src/app/entity/group/EditGroupDescriptionModal.tsx b/datahub-web-react/src/app/entity/group/EditGroupDescriptionModal.tsx
@@ -38,7 +38,7 @@ export default function EditGroupDescriptionModal({
         <Modal
             width={700}
             title="Edit Description"
-            visible
+            open
             onCancel={onClose}
             footer={
                 <>

diff --git a/datahub-web-react/src/app/entity/group/GroupEditModal.tsx b/datahub-web-react/src/app/entity/group/GroupEditModal.tsx
@@ -11,15 +11,15 @@ type PropsData = {
 };
 
 type Props = {
-    visible: boolean;
+    open: boolean;
     onClose: () => void;
     onSave: () => void;
     editModalData: PropsData;
 };
 /** Regex Validations */
 export const USER_NAME_REGEX = new RegExp('^[a-zA-Z ]*$');
 
-export default function GroupEditModal({ visible, onClose, onSave, editModalData }: Props) {
+export default function GroupEditModal({ open, onClose, onSave, editModalData }: Props) {
     const [updateCorpGroupPropertiesMutation] = useUpdateCorpGroupPropertiesMutation();
     const [form] = Form.useForm();
 
@@ -76,7 +76,7 @@ export default function GroupEditModal({ visible, onClose, onSave, editModalData
     return (
         <Modal
             title="Edit Profile"
-            visible={visible}
+            open={open}
             onCancel={onClose}
             footer={
                 <>

diff --git a/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx b/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx
@@ -368,7 +368,7 @@ export default function GroupInfoSidebar({ sideBarData, refetch }: Props) {
             </SideBar>
             {/* Modal */}
             <GroupEditModal
-                visible={editGroupModal}
+                open={editGroupModal}
                 onClose={() => showEditGroupModal(false)}
                 onSave={() => {
                     refetch();

diff --git a/datahub-web-react/src/app/entity/group/GroupMembers.tsx b/datahub-web-react/src/app/entity/group/GroupMembers.tsx
@@ -232,7 +232,7 @@ export default function GroupMembers({ urn, pageSize, isExternalGroup, onChangeM
             {isEditingMembers && (
                 <AddGroupMembersModal
                     urn={urn}
-                    visible={isEditingMembers}
+                    open={isEditingMembers}
                     onSubmit={onAddMembers}
                     onCloseModal={() => setIsEditingMembers(false)}
                 />

diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/CreateGlossaryEntityModal.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/CreateGlossaryEntityModal.tsx
@@ -131,7 +131,7 @@ function CreateGlossaryEntityModal(props: Props) {
     return (
         <Modal
             title={`Create ${entityRegistry.getEntityName(entityType)}`}
-            visible
+            open
             onCancel={onClose}
             footer={
                 <>

diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/EntityDropdown.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/EntityDropdown.tsx
@@ -337,7 +337,7 @@ function EntityDropdown(props: Props) {
             {hasBeenDeleted && !onDelete && deleteRedirectPath && <Redirect to={deleteRedirectPath} />}
             {isRaiseIncidentModalVisible && (
                 <AddIncidentModal
-                    visible={isRaiseIncidentModalVisible}
+                    open={isRaiseIncidentModalVisible}
                     onClose={() => setIsRaiseIncidentModalVisible(false)}
                     refetch={
                         (() => {

diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/MoveDomainModal.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/MoveDomainModal.tsx
@@ -68,7 +68,7 @@ function MoveDomainModal(props: Props) {
         <Modal
             title="Move"
             data-testid="move-domain-modal"
-            visible
+            open
             onCancel={onClose}
             footer={
                 <>

diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/MoveGlossaryEntityModal.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/MoveGlossaryEntityModal.tsx
@@ -67,7 +67,7 @@ function MoveGlossaryEntityModal(props: Props) {
         <Modal
             data-testid="move-glossary-entity-modal"
             title="Move"
-            visible
+            open
             onCancel={onClose}
             footer={
                 <>

diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/UpdateDeprecationModal.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/UpdateDeprecationModal.tsx
@@ -58,7 +58,7 @@ export const UpdateDeprecationModal = ({ urns, onClose, refetch }: Props) => {
     return (
         <Modal
             title="Add Deprecation Details"
-            visible
+            open
             onCancel={handleClose}
             keyboard
             footer={

diff --git a/datahub-web-react/src/app/entity/shared/components/legacy/DescriptionModal.tsx b/datahub-web-react/src/app/entity/shared/components/legacy/DescriptionModal.tsx
@@ -58,7 +58,7 @@ export default function UpdateDescriptionModal({
     return (
         <Modal
             title={title}
-            visible
+            open
             width={900}
             onCancel={onClose}
             okText={isAddDesc ? 'Submit' : 'Update'}

diff --git a/datahub-web-react/src/app/entity/shared/components/styled/AddLinkModal.tsx b/datahub-web-react/src/app/entity/shared/components/styled/AddLinkModal.tsx
@@ -63,7 +63,7 @@ export const AddLinkModal = ({ buttonProps, refetch }: AddLinkProps) => {
             </Button>
             <Modal
                 title="Add Link"
-                visible={isModalVisible}
+                open={isModalVisible}
                 destroyOnClose
                 onCancel={handleClose}
                 footer={[

diff --git a/...rc/app/entity/shared/components/styled/ERModelRelationship/CreateERModelRelationModal.tsx b/...rc/app/entity/shared/components/styled/ERModelRelationship/CreateERModelRelationModal.tsx
@@ -26,7 +26,7 @@ type Props = {
     table1Schema?: any;
     table2?: any;
     table2Schema?: any;
-    visible: boolean;
+    open: boolean;
     setModalVisible?: any;
     onCancel: () => void;
     editERModelRelation?: ErModelRelationship;
@@ -42,7 +42,7 @@ export const CreateERModelRelationModal = ({
     table1Schema,
     table2,
     table2Schema,
-    visible,
+    open,
     setModalVisible,
     onCancel,
     editERModelRelation,
@@ -349,7 +349,7 @@ export const CreateERModelRelationModal = ({
                     </div>
                 </div>
             }
-            visible={visible}
+            open={open}
             closable={false}
             className="CreateERModelRelationModal"
             okButtonProps={{ hidden: true }}

diff --git a/...ct/src/app/entity/shared/components/styled/ERModelRelationship/ERModelRelationPreview.tsx b/...ct/src/app/entity/shared/components/styled/ERModelRelationship/ERModelRelationPreview.tsx
@@ -132,7 +132,7 @@ export const ERModelRelationPreview = ({ ermodelrelationData, baseEntityUrn, pre
         <div className="ERModelRelationPreview">
             {ermodelrelationData?.properties?.relationshipFieldMappings !== undefined && (
                 <CreateERModelRelationModal
-                    visible={modalVisible}
+                    open={modalVisible}
                     setModalVisible={setModalVisible}
                     onCancel={() => {
                         setModalVisible(false);

diff --git a/datahub-web-react/src/app/entity/shared/components/styled/search/DownloadAsCsvModal.tsx b/datahub-web-react/src/app/entity/shared/components/styled/search/DownloadAsCsvModal.tsx
@@ -123,7 +123,7 @@ export default function DownloadAsCsvModal({
             centered
             onCancel={() => setShowDownloadAsCsvModal(false)}
             title="Download as..."
-            visible={showDownloadAsCsvModal}
+            open={showDownloadAsCsvModal}
             footer={
                 <>
                     <Button onClick={() => setShowDownloadAsCsvModal(false)} type="text">

diff --git a/datahub-web-react/src/app/entity/shared/components/styled/search/EmbeddedListSearchModal.tsx b/datahub-web-react/src/app/entity/shared/components/styled/search/EmbeddedListSearchModal.tsx
@@ -72,7 +72,7 @@ export const EmbeddedListSearchModal = ({
             style={modalStyle}
             bodyStyle={modalBodyStyle}
             title={title}
-            visible
+            open
             onCancel={onClose}
             footer={<Button onClick={onClose}>Close</Button>}
         >

diff --git a/datahub-web-react/src/app/entity/shared/components/styled/search/SearchSelectModal.tsx b/datahub-web-react/src/app/entity/shared/components/styled/search/SearchSelectModal.tsx
@@ -68,7 +68,7 @@ export const SearchSelectModal = ({
                 bodyStyle={MODAL_BODY_STYLE}
                 title={titleText || 'Select entities'}
                 width={MODAL_WIDTH_PX}
-                visible
+                open
                 onCancel={onCancelSelect}
                 footer={
                     <>

diff --git a/...web-react/src/app/entity/shared/components/styled/search/action/GlossaryTermsDropdown.tsx b/...web-react/src/app/entity/shared/components/styled/search/action/GlossaryTermsDropdown.tsx
@@ -39,7 +39,7 @@ export default function GlossaryTermsDropdown({ urns, disabled = false, refetch
             {isEditModalVisible && (
                 <EditTagTermsModal
                     type={EntityType.GlossaryTerm}
-                    visible
+                    open
                     onCloseModal={() => {
                         setIsEditModalVisible(false);
                         refetch?.();

diff --git a/datahub-web-react/src/app/entity/shared/components/styled/search/action/TagsDropdown.tsx b/datahub-web-react/src/app/entity/shared/components/styled/search/action/TagsDropdown.tsx
@@ -39,7 +39,7 @@ export default function TagsDropdown({ urns, disabled = false, refetch }: Props)
             {isEditModalVisible && (
                 <EditTagTermsModal
                     type={EntityType.Tag}
-                    visible
+                    open
                     onCloseModal={() => {
                         setIsEditModalVisible(false);
                         refetch?.();

diff --git a/...react/src/app/entity/shared/containers/profile/sidebar/Container/ContainerSelectModal.tsx b/...react/src/app/entity/shared/containers/profile/sidebar/Container/ContainerSelectModal.tsx
@@ -140,7 +140,7 @@ export const ContainerSelectModal = ({ onCloseModal, defaultValues, onOkOverride
     return (
         <Modal
             title={titleOverride || 'Select Container'}
-            visible
+            open
             onCancel={onModalClose}
             footer={
                 <>

diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Domain/SetDomainModal.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Domain/SetDomainModal.tsx
@@ -195,7 +195,7 @@ export const SetDomainModal = ({ urns, onCloseModal, refetch, defaultValue, onOk
     return (
         <Modal
             title={titleOverride || 'Set Domain'}
-            visible
+            open
             onCancel={onModalClose}
             footer={
                 <>

diff --git a/...-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/EditOwnersModal.tsx b/...-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/EditOwnersModal.tsx
@@ -336,7 +336,7 @@ export const EditOwnersModal = ({
     return (
         <Modal
             title={title || `${operationType === OperationType.ADD ? 'Add' : 'Remove'} Owners`}
-            visible
+            open
             onCancel={onModalClose}
             keyboard
             footer={

diff --git a/...b-react/src/app/entity/shared/containers/profile/sidebar/Platform/SelectPlatformModal.tsx b/...b-react/src/app/entity/shared/containers/profile/sidebar/Platform/SelectPlatformModal.tsx
@@ -137,7 +137,7 @@ export const SelectPlatformModal = ({ onCloseModal, defaultValues, onOk, titleOv
     return (
         <Modal
             title={titleOverride || 'Select Platform'}
-            visible
+            open
             onCancel={onModalClose}
             footer={
                 <>

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryBuilderModal.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryBuilderModal.tsx
@@ -147,7 +147,7 @@ export default function QueryBuilderModal({ initialState, datasetUrn, onClose, o
                 bodyStyle={MODAL_BODY_STYLE}
                 title={<Typography.Text>{isUpdating ? 'Edit' : 'New'} Query</Typography.Text>}
                 className="query-builder-modal"
-                visible
+                open
                 onCancel={confirmClose}
                 footer={
                     <>

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryModal.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Queries/QueryModal.tsx
@@ -72,7 +72,7 @@ type Props = {
 export default function QueryModal({ query, title, description, showDetails = true, onClose }: Props) {
     return (
         <StyledModal
-            visible
+            open
             width={MODAL_WIDTH}
             title={null}
             closable={false}

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Relationship/RelationshipsTab.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Relationship/RelationshipsTab.tsx
@@ -219,7 +219,7 @@ export const RelationshipsTab = () => {
                     table1Schema={entityWithSchema}
                     table2={table2LazyDataset}
                     table2Schema={table2LazySchema}
-                    visible={modalVisible}
+                    open={modalVisible}
                     setModalVisible={setModalVisible}
                     onCancel={() => {
                         setModalVisible(false);

diff --git a/...b-react/src/app/entity/shared/tabs/Dataset/Stats/historical/charts/ProfilingRunsChart.tsx b/...b-react/src/app/entity/shared/tabs/Dataset/Stats/historical/charts/ProfilingRunsChart.tsx
@@ -84,7 +84,7 @@ export default function ProfilingRunsChart({ profiles }: Props) {
     return (
         <>
             {selectedProfile && (
-                <Modal width="100%" footer={null} title={profileModalTitle} visible={showModal} onCancel={onClose}>
+                <Modal width="100%" footer={null} title={profileModalTitle} open={showModal} onCancel={onClose}>
                     <TableStats
                         rowCount={selectedProfile.rowCount || -1}
                         columnCount={selectedProfile.columnCount || -1}

diff --git a/...-web-react/src/app/entity/shared/tabs/Dataset/Validations/DatasetAssertionDescription.tsx b/...-web-react/src/app/entity/shared/tabs/Dataset/Validations/DatasetAssertionDescription.tsx
@@ -362,7 +362,7 @@ export const DatasetAssertionDescription = ({ description, assertionInfo }: Prop
             )}
             <DatasetAssertionLogicModal
                 logic={logic || 'N/A'}
-                visible={isLogicVisible}
+                open={isLogicVisible}
                 onClose={() => setIsLogicVisible(false)}
             />
         </Popover>

diff --git a/...b-web-react/src/app/entity/shared/tabs/Dataset/Validations/DatasetAssertionLogicModal.tsx b/...b-web-react/src/app/entity/shared/tabs/Dataset/Validations/DatasetAssertionLogicModal.tsx
@@ -11,13 +11,13 @@ export type AssertionsSummary = {
 
 type Props = {
     logic: string;
-    visible: boolean;
+    open: boolean;
     onClose: () => void;
 };
 
-export const DatasetAssertionLogicModal = ({ logic, visible, onClose }: Props) => {
+export const DatasetAssertionLogicModal = ({ logic, open, onClose }: Props) => {
     return (
-        <Modal visible={visible} onCancel={onClose} footer={<Button onClick={onClose}>Close</Button>}>
+        <Modal open={open} onCancel={onClose} footer={<Button onClick={onClose}>Close</Button>}>
             <Query query={logic} />
         </Modal>
     );

diff --git a/.../app/entity/shared/tabs/Dataset/Validations/contract/builder/DataContractBuilderModal.tsx b/.../app/entity/shared/tabs/Dataset/Validations/contract/builder/DataContractBuilderModal.tsx
@@ -52,7 +52,7 @@ export const DataContractBuilderModal = ({ entityUrn, initialState, onSubmit, on
                 title={<Typography.Text>{titleText}</Typography.Text>}
                 style={modalStyle}
                 bodyStyle={modalBodyStyle}
-                visible
+                open
                 onCancel={onCancel}
             >
                 <DataContractBuilder