From 8cfe4abfad282d55be3dbdc868ab7af243463aee Mon Sep 17 00:00:00 2001
From: salman <salman.sayyad@apptware.com>
Date: Tue, 12 Dec 2023 14:52:18 +0530
Subject: [PATCH] feat: Auto-focus on entity profile action modals

---
 .../shared/EntityDropdown/MoveGlossaryEntityModal.tsx       | 3 +++
 .../app/entity/shared/EntityDropdown/NodeParentSelect.tsx   | 2 ++
 .../app/entity/shared/components/styled/AddLinkModal.tsx    | 2 ++
 .../profile/sidebar/DataProduct/SetDataProductModal.tsx     | 2 ++
 .../containers/profile/sidebar/Domain/SetDomainModal.tsx    | 2 ++
 .../profile/sidebar/Ownership/EditOwnersModal.tsx           | 2 ++
 .../src/app/entity/view/builder/ViewBuilderModal.tsx        | 2 ++
 datahub-web-react/src/app/shared/tags/AddTagsTermsModal.tsx | 2 ++
 datahub-web-react/src/utils/focus/index.ts                  | 6 ++++++
 9 files changed, 23 insertions(+)
 create mode 100644 datahub-web-react/src/utils/focus/index.ts

diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/MoveGlossaryEntityModal.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/MoveGlossaryEntityModal.tsx
index 37a625f58100b..51b39be4e20ea 100644
--- a/datahub-web-react/src/app/entity/shared/EntityDropdown/MoveGlossaryEntityModal.tsx
+++ b/datahub-web-react/src/app/entity/shared/EntityDropdown/MoveGlossaryEntityModal.tsx
@@ -7,6 +7,7 @@ import { useUpdateParentNodeMutation } from '../../../../graphql/glossary.genera
 import NodeParentSelect from './NodeParentSelect';
 import { useGlossaryEntityData } from '../GlossaryEntityContext';
 import { getGlossaryRootToUpdate, getParentNodeToUpdate, updateGlossarySidebar } from '../../../glossary/utils';
+import { getModalDomContainer } from '../../../../utils/focus';
 
 const StyledItem = styled(Form.Item)`
     margin-bottom: 0;
@@ -78,6 +79,7 @@ function MoveGlossaryEntityModal(props: Props) {
                     </Button>
                 </>
             }
+            getContainer={getModalDomContainer}
         >
             <Form form={form} initialValues={{}} layout="vertical">
                 <Form.Item
@@ -92,6 +94,7 @@ function MoveGlossaryEntityModal(props: Props) {
                             selectedParentUrn={selectedParentUrn}
                             setSelectedParentUrn={setSelectedParentUrn}
                             isMoving
+                            autofocus
                         />
                     </StyledItem>
                 </Form.Item>
diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/NodeParentSelect.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/NodeParentSelect.tsx
index c3bfac35c2ca6..e7f5827e33dcc 100644
--- a/datahub-web-react/src/app/entity/shared/EntityDropdown/NodeParentSelect.tsx
+++ b/datahub-web-react/src/app/entity/shared/EntityDropdown/NodeParentSelect.tsx
@@ -21,6 +21,7 @@ interface Props {
     selectedParentUrn: string;
     setSelectedParentUrn: (parent: string) => void;
     isMoving?: boolean;
+    autofocus?: boolean;
 }
 
 function NodeParentSelect(props: Props) {
@@ -65,6 +66,7 @@ function NodeParentSelect(props: Props) {
                 onClear={clearSelectedParent}
                 onFocus={() => setIsFocusedOnInput(true)}
                 dropdownStyle={isShowingGlossaryBrowser || !searchQuery ? { display: 'none' } : {}}
+                autoFocus={props.autofocus}
             >
                 {nodeSearchResults?.map((result) => (
                     <Select.Option key={result?.entity?.urn} value={result.entity.urn}>
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
index 68a8cf4094362..9e18de3b294bf 100644
--- a/datahub-web-react/src/app/entity/shared/components/styled/AddLinkModal.tsx
+++ b/datahub-web-react/src/app/entity/shared/components/styled/AddLinkModal.tsx
@@ -5,6 +5,7 @@ import { useEntityData, useMutationUrn } from '../../EntityContext';
 import { useAddLinkMutation } from '../../../../../graphql/mutations.generated';
 import analytics, { EventType, EntityActionType } from '../../../../analytics';
 import { useUserContext } from '../../../../context/useUserContext';
+import { getModalDomContainer } from '../../../../../utils/focus';
 
 type AddLinkProps = {
     buttonProps?: Record<string, unknown>;
@@ -73,6 +74,7 @@ export const AddLinkModal = ({ buttonProps, refetch }: AddLinkProps) => {
                         Add
                     </Button>,
                 ]}
+                getContainer={getModalDomContainer}
             >
                 <Form form={form} name="addLinkForm" onFinish={handleAdd} layout="vertical">
                     <Form.Item
diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/DataProduct/SetDataProductModal.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/DataProduct/SetDataProductModal.tsx
index 5cea10f5a11a5..904b4c064f001 100644
--- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/DataProduct/SetDataProductModal.tsx
+++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/DataProduct/SetDataProductModal.tsx
@@ -10,6 +10,7 @@ import { IconStyleType } from '../../../../../Entity';
 import { tagRender } from '../tagRenderer';
 import { useBatchSetDataProductMutation } from '../../../../../../../graphql/dataProduct.generated';
 import { handleBatchError } from '../../../../utils';
+import { getModalDomContainer } from '../../../../../../../utils/focus';
 
 const OptionWrapper = styled.div`
     padding: 2px 0;
@@ -126,6 +127,7 @@ export default function SetDataProductModal({
                     </Button>
                 </>
             }
+            getContainer={getModalDomContainer}
         >
             <Select
                 autoFocus
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
index 3d9a7d7f08425..9b512d2d679e9 100644
--- 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
@@ -15,6 +15,7 @@ import { BrowserWrapper } from '../../../../../../shared/tags/AddTagsTermsModal'
 import DomainNavigator from '../../../../../../domain/nestedDomains/domainNavigator/DomainNavigator';
 import ClickOutside from '../../../../../../shared/ClickOutside';
 import { ANTD_GRAY } from '../../../../constants';
+import { getModalDomContainer } from '../../../../../../../utils/focus';
 
 type Props = {
     urns: string[];
@@ -195,6 +196,7 @@ export const SetDomainModal = ({ urns, onCloseModal, refetch, defaultValue, onOk
                     </Button>
                 </>
             }
+            getContainer={getModalDomContainer}
         >
             <Form component={false}>
                 <Form.Item>
diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/EditOwnersModal.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/EditOwnersModal.tsx
index bc3f76135bb1e..ff26b5d8aa4c5 100644
--- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/EditOwnersModal.tsx
+++ b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/Ownership/EditOwnersModal.tsx
@@ -20,6 +20,7 @@ import { useGetRecommendations } from '../../../../../../shared/recommendation';
 import { OwnerLabel } from '../../../../../../shared/OwnerLabel';
 import { handleBatchError } from '../../../../utils';
 import { useListOwnershipTypesQuery } from '../../../../../../../graphql/ownership.generated';
+import { getModalDomContainer } from '../../../../../../../utils/focus';
 
 const SelectInput = styled(Select)`
     width: 480px;
@@ -348,6 +349,7 @@ export const EditOwnersModal = ({
                     </Button>
                 </>
             }
+            getContainer={getModalDomContainer}
         >
             <Form layout="vertical" colon={false}>
                 <Form.Item key="owners" name="owners" label={<Typography.Text strong>Owner</Typography.Text>}>
diff --git a/datahub-web-react/src/app/entity/view/builder/ViewBuilderModal.tsx b/datahub-web-react/src/app/entity/view/builder/ViewBuilderModal.tsx
index 8491fdfea2675..a69e7e156ba9a 100644
--- a/datahub-web-react/src/app/entity/view/builder/ViewBuilderModal.tsx
+++ b/datahub-web-react/src/app/entity/view/builder/ViewBuilderModal.tsx
@@ -5,6 +5,7 @@ import { DEFAULT_BUILDER_STATE, ViewBuilderState } from '../types';
 import { ViewBuilderForm } from './ViewBuilderForm';
 import ClickOutside from '../../../shared/ClickOutside';
 import { ViewBuilderMode } from './types';
+import { getModalDomContainer } from '../../../../utils/focus';
 
 const modalWidth = 700;
 const modalStyle = { top: 40 };
@@ -80,6 +81,7 @@ export const ViewBuilderModal = ({ mode, urn, initialState, onSubmit, onCancel }
                 width={modalWidth}
                 onCancel={onCancel}
                 data-testid="view-modal"
+                getContainer={getModalDomContainer}
             >
                 <ViewBuilderForm urn={urn} mode={mode} state={viewBuilderState} updateState={setViewBuilderState} />
                 <SaveButtonContainer>
diff --git a/datahub-web-react/src/app/shared/tags/AddTagsTermsModal.tsx b/datahub-web-react/src/app/shared/tags/AddTagsTermsModal.tsx
index 80d239def391c..d486ee02dae3e 100644
--- a/datahub-web-react/src/app/shared/tags/AddTagsTermsModal.tsx
+++ b/datahub-web-react/src/app/shared/tags/AddTagsTermsModal.tsx
@@ -19,6 +19,7 @@ import { useGetRecommendations } from '../recommendation';
 import { FORBIDDEN_URN_CHARS_REGEX, handleBatchError } from '../../entity/shared/utils';
 import { TagTermLabel } from './TagTermLabel';
 import { ENTER_KEY_CODE } from '../constants';
+import { getModalDomContainer } from '../../../utils/focus';
 
 export enum OperationType {
     ADD,
@@ -448,6 +449,7 @@ export default function EditTagTermsModal({
                     </Button>
                 </>
             }
+            getContainer={getModalDomContainer}
         >
             <ClickOutside onClickOutside={() => setIsFocusedOnInput(false)}>
                 <TagSelect
diff --git a/datahub-web-react/src/utils/focus/index.ts b/datahub-web-react/src/utils/focus/index.ts
new file mode 100644
index 0000000000000..313c00f429018
--- /dev/null
+++ b/datahub-web-react/src/utils/focus/index.ts
@@ -0,0 +1,6 @@
+// To focus out from modal popup so autofocus works
+// getContainer prop value when rendering modals.
+// The getContainer prop allows you to specify the container in which the modal should be rendered.
+// By default, modals are appended to the end of the document body, but using getContainer, you can specify a different container.
+export const getModalDomContainer = () => document.getElementById('root') as HTMLElement;
+// this can we remove once we upgrade to new antd version i.e 5.11.2 because there we have autoFocus property for the modal.
\ No newline at end of file