diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.test.tsx index 4fa73117a40..a37d8961118 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.test.tsx @@ -110,4 +110,25 @@ describe('Test EntityDelete Modal Component', () => { expect(await screen.findByText('label.soft-delete')).toBeInTheDocument(); }); + + it('should focus the input box on open', async () => { + // since the focus is set using setTimeout, we need to use fake timers + jest.useFakeTimers(); + await act(async () => { + render(, { + wrapper: MemoryRouter, + }); + }); + + await act(async () => { + jest.runAllTimers(); + }); + + const inputBox = await screen.findByTestId('confirmation-text-input'); + + // Check if element is focused + expect(inputBox).toHaveFocus(); + + jest.useRealTimers(); + }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx index d4585f461a9..9b8e97bfdd7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx @@ -11,9 +11,15 @@ * limitations under the License. */ -import { Button, Input, Modal, Typography } from 'antd'; +import { Button, Input, InputRef, Modal, Typography } from 'antd'; import { t } from 'i18next'; -import React, { ChangeEvent, useEffect, useMemo, useState } from 'react'; +import React, { + ChangeEvent, + useEffect, + useMemo, + useRef, + useState, +} from 'react'; import { Trans } from 'react-i18next'; import { Transi18next } from '../../../utils/CommonUtils'; import { EntityDeleteModalProp } from './EntityDeleteModal.interface'; @@ -27,6 +33,7 @@ const EntityDeleteModal = ({ visible, bodyText, }: EntityDeleteModalProp) => { + const deleteTextInputRef = useRef(null); const [name, setName] = useState(''); const [saving, setSaving] = useState(false); @@ -45,6 +52,20 @@ const EntityDeleteModal = ({ // To remove the entered text in the modal input after modal closed useEffect(() => { setName(''); + + // Using this method to autoFocus Input element since directly calling focus() doesn't work + // for the inputs inside modal. Ref - https://github.com/ant-design/ant-design/issues/8668 + let timeout: number; + + if (visible) { + timeout = window.setTimeout(() => { + deleteTextInputRef.current?.focus(); + }, 1); + } + + return () => { + clearTimeout(timeout); + }; }, [visible]); return ( @@ -117,6 +138,7 @@ const EntityDeleteModal = ({ disabled={saving} name="entityName" placeholder={t('label.delete-uppercase')} + ref={deleteTextInputRef} type="text" value={name} onChange={handleOnChange} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.tsx index 4bb5a1be043..86f9d426e58 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/IngestionListTable.tsx @@ -282,6 +282,7 @@ function IngestionListTable({ title: t('label.schedule'), dataIndex: 'schedule', key: 'schedule', + width: 240, render: renderScheduleField, }, { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/PipelineActions/pipeline-actions.less b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/PipelineActions/pipeline-actions.less index 36c513f6234..0d1b4b2b055 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/PipelineActions/pipeline-actions.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Settings/Services/Ingestion/IngestionListTable/PipelineActions/pipeline-actions.less @@ -15,6 +15,7 @@ .pipeline-actions-container { .ant-btn { + height: 30px; padding: 4px 8px; display: flex; align-items: center; diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/IngestionListTableUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/IngestionListTableUtils.tsx index 30713a5f9e0..b1fbb367840 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/IngestionListTableUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/IngestionListTableUtils.tsx @@ -74,9 +74,9 @@ export const renderScheduleField = (_: string, record: IngestionPipeline) => { ); return ( - - - + + +