mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-08-30 20:06:19 +00:00
Minor: Ingestion list table improvements (#17256)
* Ingestion list table improvements * Add functionality to auto-focus the delete text input on modal visibility * remove unnecessary autoFocus prop
This commit is contained in:
parent
e52c4af9ee
commit
81e467a225
@ -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(<EntityDeleteModal {...mockProp} visible />, {
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
@ -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<InputRef>(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}
|
||||
|
@ -282,6 +282,7 @@ function IngestionListTable({
|
||||
title: t('label.schedule'),
|
||||
dataIndex: 'schedule',
|
||||
key: 'schedule',
|
||||
width: 240,
|
||||
render: renderScheduleField,
|
||||
},
|
||||
{
|
||||
|
@ -15,6 +15,7 @@
|
||||
|
||||
.pipeline-actions-container {
|
||||
.ant-btn {
|
||||
height: 30px;
|
||||
padding: 4px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -74,9 +74,9 @@ export const renderScheduleField = (_: string, record: IngestionPipeline) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<Row align="middle" gutter={[8, 8]} wrap={false}>
|
||||
<Col className="flex-center">
|
||||
<TimeDateIcon height={20} width={20} />
|
||||
<Row gutter={[8, 8]} wrap={false}>
|
||||
<Col>
|
||||
<TimeDateIcon className="m-t-xss" height={20} width={20} />
|
||||
</Col>
|
||||
<Col>
|
||||
<Row className="line-height-16">
|
||||
|
Loading…
x
Reference in New Issue
Block a user