feat: Auto-focus on entity profile action modals

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>

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

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

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

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>

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

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>

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

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.