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:
Aniket Katkar 2024-08-10 09:22:50 +05:30 committed by GitHub
parent e52c4af9ee
commit 81e467a225
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 50 additions and 5 deletions

View File

@ -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();
});
});

View File

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

View File

@ -282,6 +282,7 @@ function IngestionListTable({
title: t('label.schedule'),
dataIndex: 'schedule',
key: 'schedule',
width: 240,
render: renderScheduleField,
},
{

View File

@ -15,6 +15,7 @@
.pipeline-actions-container {
.ant-btn {
height: 30px;
padding: 4px 8px;
display: flex;
align-items: center;

View File

@ -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">