Skip to content

refactor(ui): migrate TagsForm from antd Form to React Hook Form + Autocomplete #29776

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Rohit0301 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

refactor(ui): migrate TagsForm from antd Form to React Hook Form + Autocomplete #29776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
81fcec4
refactor(ui): migrate TagsForm from antd Form to React Hook Form + Au…
Rohit0301 Jul 6, 2026
a4f47a1
fixed the UI
Rohit0301 Jul 6, 2026
6b3479f
addressed gitar comment
Rohit0301 Jul 6, 2026
301328e
lint fix
Rohit0301 Jul 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
435 changes: 0 additions & 435 deletions ...ta-ui/src/main/resources/ui/src/components/common/MUIUserTeamSelect/MUIUserTeamSelect.tsx
View file
Open in desktop

This file was deleted.

16 changes: 8 additions & 8 deletions openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/ClassificationFormDrawer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@
*/

import { fireEvent, render, screen } from '@testing-library/react';
import { FormInstance } from 'antd';
import { UseFormReturn } from 'react-hook-form';
import ClassificationFormDrawer from './ClassificationFormDrawer';
import { TagFormValues } from './TagsPage.interface';

jest.mock('./TagsForm', () => {
return jest.fn(() => <div data-testid="tags-form">Tags Form</div>);
Expand Down Expand Up @@ -93,20 +94,19 @@ jest.mock('@openmetadata/ui-core-components', () => ({
}));

const mockForm = {
submit: jest.fn(),
resetFields: jest.fn(),
getFieldsValue: jest.fn(),
setFieldsValue: jest.fn(),
validateFields: jest.fn(),
} as unknown as FormInstance;
control: {},
handleSubmit: jest.fn(),
reset: jest.fn(),
formState: { isSubmitSuccessful: false },
} as unknown as UseFormReturn<TagFormValues>;

describe('ClassificationFormDrawer', () => {
const mockOnClose = jest.fn();
const mockOnSubmit = jest.fn();

const defaultProps = {
open: true,
formRef: mockForm,
form: mockForm,
classifications: [],
isTier: false,
isLoading: false,
Expand Down
10 changes: 6 additions & 4 deletions openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/ClassificationFormDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,22 @@ import {
SlideoutMenu,
Typography,
} from '@openmetadata/ui-core-components';
import { FC, useCallback } from 'react';
import { FC, useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import TagsForm from './TagsForm';
import { ClassificationFormDrawerProps } from './TagsPage.interface';

const ClassificationFormDrawer: FC<ClassificationFormDrawerProps> = ({
open,
formRef,
form,
classifications,
isTier,
isLoading,
onClose,
onSubmit,
}) => {
const { t } = useTranslation();
const submitRef = useRef<() => void>(() => void 0);

const handleOpenChange = useCallback(
(isOpen: boolean) => {
Expand Down Expand Up @@ -61,9 +62,10 @@ const ClassificationFormDrawer: FC<ClassificationFormDrawerProps> = ({
isClassification
showMutuallyExclusive
data={classifications}
formRef={formRef}
form={form}
isEditing={false}
isTier={isTier}
submitRef={submitRef}
onSubmit={onSubmit}
/>
</SlideoutMenu.Content>
Expand All @@ -81,7 +83,7 @@ const ClassificationFormDrawer: FC<ClassificationFormDrawerProps> = ({
data-testid="save-button"
isDisabled={isLoading}
isLoading={isLoading}
onClick={() => formRef.submit()}>
onClick={() => submitRef.current()}>
{t('label.save')}
</Button>
</div>
Expand Down
16 changes: 8 additions & 8 deletions openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagFormDrawer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@
*/

import { fireEvent, render, screen } from '@testing-library/react';
import { FormInstance } from 'antd';
import { UseFormReturn } from 'react-hook-form';
import TagFormDrawer from './TagFormDrawer';
import { TagFormValues } from './TagsPage.interface';

jest.mock('./TagsForm', () => {
return jest.fn(() => <div data-testid="tags-form">Tags Form</div>);
Expand Down Expand Up @@ -93,20 +94,19 @@ jest.mock('@openmetadata/ui-core-components', () => ({
}));

const mockForm = {
submit: jest.fn(),
resetFields: jest.fn(),
getFieldsValue: jest.fn(),
setFieldsValue: jest.fn(),
validateFields: jest.fn(),
} as unknown as FormInstance;
control: {},
handleSubmit: jest.fn(),
reset: jest.fn(),
formState: { isSubmitSuccessful: false },
} as unknown as UseFormReturn<TagFormValues>;

describe('TagFormDrawer', () => {
const mockOnClose = jest.fn();
const mockOnSubmit = jest.fn();

const defaultProps = {
open: true,
formRef: mockForm,
form: mockForm,
isTier: false,
isLoading: false,
permissions: {
Expand Down
10 changes: 6 additions & 4 deletions openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagFormDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
Typography,
} from '@openmetadata/ui-core-components';
import { isUndefined } from 'lodash';
import { FC, useCallback } from 'react';
import { FC, useCallback, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { ProviderType } from '../../generated/api/classification/createTag';
import TagsForm from './TagsForm';
Expand All @@ -26,7 +26,7 @@ import { TagFormDrawerProps } from './TagsPage.interface';
const TagFormDrawer: FC<TagFormDrawerProps> = ({
open,
editTag,
formRef,
form,
isTier,
isLoading,
permissions,
Expand All @@ -35,6 +35,7 @@ const TagFormDrawer: FC<TagFormDrawerProps> = ({
onSubmit,
}) => {
const { t } = useTranslation();
const submitRef = useRef<() => void>(() => void 0);

const handleOpenChange = useCallback(
(isOpen: boolean) => {
Expand Down Expand Up @@ -62,13 +63,14 @@ const TagFormDrawer: FC<TagFormDrawerProps> = ({

<SlideoutMenu.Content>
<TagsForm
formRef={formRef}
form={form}
initialValues={editTag}
isEditing={!isUndefined(editTag)}
isSystemTag={editTag?.provider === ProviderType.System}
isTier={isTier}
key={editTag?.id ?? 'new-tag'}
permissions={permissions}
submitRef={submitRef}
onSubmit={onSubmit}
/>
</SlideoutMenu.Content>
Expand All @@ -86,7 +88,7 @@ const TagFormDrawer: FC<TagFormDrawerProps> = ({
data-testid="save-button"
isDisabled={isLoading}
isLoading={isLoading}
onClick={() => formRef.submit()}>
onClick={() => submitRef.current()}>
{t('label.save')}
</Button>
</div>
Expand Down
154 changes: 113 additions & 41 deletions openmetadata-ui/src/main/resources/ui/src/pages/TagsPage/TagsForm.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,16 @@
*/

import { render, screen } from '@testing-library/react';
import { Form } from 'antd';
import { useForm } from 'react-hook-form';
import { DEFAULT_FORM_VALUE } from '../../constants/Tags.constant';
import { Classification } from '../../generated/entity/classification/classification';
import { Tag } from '../../generated/entity/classification/tag';
import TagsForm from './TagsForm';
import { TagFormValues } from './TagsPage.interface';

jest.mock('@openmetadata/ui-core-components', () => {
const { FieldTypes, HelperTextType } = jest.requireActual(
'@openmetadata/ui-core-components'
);

const GridItem = ({ children }: { children: React.ReactNode }) => (
<div>{children}</div>
);
Expand All @@ -27,10 +30,35 @@ jest.mock('@openmetadata/ui-core-components', () => {
);
GridComponent.Item = GridItem;

const Toggle = ({
isSelected,
onChange,
isDisabled,
className,
...rest
}: {
isSelected?: boolean;
onChange?: (val: boolean) => void;
isDisabled?: boolean;
className?: string;
} & Record<string, unknown>) => (
<button
aria-checked={isSelected}
className={className}
disabled={isDisabled}
role="switch"
onClick={() => onChange?.(!isSelected)}
{...rest}
/>
);

return {
FieldTypes,
HelperTextType,
Box: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
Label: ({ children }: { children: React.ReactNode }) => (
<label>{children}</label>
Avatar: () => <div data-testid="avatar" />,
FormItemLabel: ({ label }: { label: React.ReactNode }) => (
<label>{label}</label>
),
Tooltip: ({
children,
Expand All @@ -50,29 +78,74 @@ jest.mock('@openmetadata/ui-core-components', () => {
children: React.ReactNode;
className?: string;
}) => <button className={className}>{children}</button>,
Toggle: ({
id,
isSelected,
onChange,
isDisabled,
className,
}: {
id?: string;
isSelected?: boolean;
onChange?: (val: boolean) => void;
isDisabled?: boolean;
className?: string;
}) => (
<button
aria-checked={isSelected}
className={className}
disabled={isDisabled}
id={id}
role="switch"
onClick={() => onChange?.(!isSelected)}
/>
HintText: ({ children }: { children: React.ReactNode }) => (
<span>{children}</span>
),
Toggle,
Grid: GridComponent,
HookForm: ({
children,
onSubmit,
}: {
children: React.ReactNode;
onSubmit?: (e: React.FormEvent) => void;
} & Record<string, unknown>) => (
<form data-testid="tags-form" onSubmit={onSubmit}>
{children}
</form>
),
FormField: ({
name,
children,
}: {
name: string;
children: (controller: {
field: {
value: unknown;
onChange: (value: unknown) => void;
onBlur: () => void;
};
fieldState: { invalid: boolean; error?: { message?: string } };
}) => React.ReactNode;
}) =>
children({
field: {
value: name === 'mutuallyExclusive' ? false : '',
onChange: jest.fn(),
onBlur: jest.fn(),
},
fieldState: { invalid: false },
}),
getField: (fieldProp: {
id?: string;
name: string;
label: React.ReactNode;
type: string;
props?: Record<string, unknown>;
}) => {
const testId =
(fieldProp.props?.['data-testid'] as string) ?? fieldProp.name;

if (fieldProp.type === FieldTypes.SWITCH) {
return (
<div key={fieldProp.id}>
<label>{fieldProp.label}</label>
<Toggle
data-testid={testId}
isDisabled={fieldProp.props?.disabled as boolean}
isSelected={false}
/>
</div>
);
}

return (
<div key={fieldProp.id}>
<label>{fieldProp.label}</label>
<input readOnly data-testid={testId} value="" />
</div>
);
},
};
});

Expand Down Expand Up @@ -114,6 +187,13 @@ jest.mock('../../rest/domainAPI', () => ({

const mockSubmit = jest.fn();

const TEST_INITIAL_VALUES = {
...DEFAULT_FORM_VALUE,
autoClassificationConfig: {
enabled: false,
},
};

// Create a wrapper component to use the form hook
const TestWrapper = ({
showMutuallyExclusive = false,
Expand All @@ -122,18 +202,13 @@ const TestWrapper = ({
showMutuallyExclusive?: boolean;
isClassification?: boolean;
}) => {
const [formRef] = Form.useForm<Classification | Tag | undefined>();
const form = useForm<TagFormValues>();

return (
<TagsForm
isEditing
formRef={formRef}
initialValues={{
...DEFAULT_FORM_VALUE,
autoClassificationConfig: {
enabled: false,
},
}}
form={form}
initialValues={TEST_INITIAL_VALUES}
isClassification={isClassification}
isSystemTag={false}
isTier={false}
Expand Down Expand Up @@ -172,16 +247,13 @@ describe('TagForm component', () => {
});

it('Form component should render Mutually Exclusive field when showMutuallyExclusive is true', async () => {
const { container } = render(
<TestWrapper isClassification showMutuallyExclusive />
);
render(<TestWrapper isClassification showMutuallyExclusive />);

// Check for the Form.Item with id that contains mutuallyExclusive
const mutuallyExclusiveFormItem = container.querySelector(
'#tags_mutuallyExclusive'
const mutuallyExclusiveButton = await screen.findByTestId(
'mutually-exclusive-button'
);

expect(mutuallyExclusiveFormItem).toBeInTheDocument();
expect(mutuallyExclusiveButton).toBeInTheDocument();
});

it('Form component should not render Mutually Exclusive field when showMutuallyExclusive is false', async () => {
Expand Down
Loading
Loading