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

Merged
Rohit0301 merged 9 commits into from
Jul 8, 2026
Merged

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
9 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
d421376
fixed playwright tests
Rohit0301 Jul 7, 2026
82d3572
lint fix
Rohit0301 Jul 7, 2026
6f73c31
addressed gitar comment
Rohit0301 Jul 7, 2026
2092cc5
unit test fix
Rohit0301 Jul 7, 2026
8b822b5
Merge branch 'main' into migrate-tagsform-to-hookform
Rohit0301 Jul 8, 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
25 changes: 14 additions & 11 deletions openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Tags.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,11 +262,14 @@ test('Classification Page', async ({ page }) => {

await validateForm(page);

await page.fill('[data-testid="name"]', NEW_CLASSIFICATION.name);
await page.fill(
'[data-testid="displayName"]',
NEW_CLASSIFICATION.displayName
);
await page
.getByTestId('name')
.getByRole('textbox')
.fill(NEW_CLASSIFICATION.name);
await page
.getByTestId('displayName')
.getByRole('textbox')
.fill(NEW_CLASSIFICATION.displayName);
await page.locator(descriptionBox).fill(NEW_CLASSIFICATION.description);
await page.click('[data-testid="mutually-exclusive-button"]');

Expand Down Expand Up @@ -296,14 +299,14 @@ test('Classification Page', async ({ page }) => {
await expect(page.getByTestId('tags-form')).toBeVisible();

await validateForm(page);

await page.fill('[data-testid="name"]', NEW_TAG.name);
await page.fill('[data-testid="displayName"]', NEW_TAG.displayName);
await page.getByTestId('name').getByRole('textbox').fill(NEW_TAG.name);
await page
.getByTestId('displayName')
.getByRole('textbox')
.fill(NEW_TAG.displayName);
await page.locator(descriptionBox).fill(NEW_TAG.description);
await page.getByTestId('icon-picker-btn').click();
await page
.getByRole('button', { name: `Select icon ${NEW_TAG.icon}` })
.click();
await page.getByRole('button', { name: NEW_TAG.icon }).click();
await page
.getByRole('button', { name: `Select color ${NEW_TAG.color}` })
.click();
Expand Down
46 changes: 26 additions & 20 deletions openmetadata-ui/src/main/resources/ui/playwright/utils/tag.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,41 +247,44 @@ export async function validateForm(page: Page) {
await submitForm(page);

// error messages
await expect(page.locator('#tags_name_help')).toBeVisible();
await expect(page.locator('#tags_name_help')).toContainText(
'Name is required'
);
await expect(page.getByText('Name is required')).toBeVisible();

await expect(page.locator('#tags_description_help')).toBeVisible();
await expect(page.locator('#tags_description_help')).toContainText(
'Description is required'
);
await expect(page.getByText('Description is required')).toBeVisible();

// validation should work for invalid names

// min length validation
await page.locator('[data-testid="name"]').scrollIntoViewIfNeeded();
await page.locator('[data-testid="name"]').clear();
await page.locator('[data-testid="name"]').fill(TAG_INVALID_NAMES.MIN_LENGTH);
await page.getByTestId('name').getByRole('textbox').clear();
await page
.getByTestId('name')
.getByRole('textbox')
.fill(TAG_INVALID_NAMES.MIN_LENGTH);

await page.waitForLoadState('domcontentloaded');

await expect(
page.getByText(NAME_MIN_MAX_LENGTH_VALIDATION_ERROR)
).toBeVisible();

// max length validation
await page.locator('[data-testid="name"]').clear();
await page.locator('[data-testid="name"]').fill(TAG_INVALID_NAMES.MAX_LENGTH);
await page.getByTestId('name').getByRole('textbox').clear();
await page
.getByTestId('name')
.getByRole('textbox')
.fill(TAG_INVALID_NAMES.MAX_LENGTH);

await page.waitForLoadState('domcontentloaded');

await expect(
page.getByText(NAME_MIN_MAX_LENGTH_VALIDATION_ERROR)
).toBeVisible();

// with special char validation
await page.locator('[data-testid="name"]').clear();
await page.getByTestId('name').getByRole('textbox').clear();
await page
.locator('[data-testid="name"]')
.getByTestId('name')
.getByRole('textbox')
.fill(TAG_INVALID_NAMES.WITH_SPECIAL_CHARS);
await page.waitForLoadState('domcontentloaded');

Expand Down Expand Up @@ -500,18 +503,21 @@ export const LIMITED_USER_RULES: PolicyRulesType[] = [
];

export const fillTagForm = async (adminPage: Page, domain: Domain) => {
await adminPage.fill('[data-testid="name"]', NEW_TAG.name);
await adminPage.fill('[data-testid="displayName"]', NEW_TAG.displayName);
await adminPage.getByTestId('name').getByRole('textbox').fill(NEW_TAG.name);
await adminPage
.getByTestId('displayName')
.getByRole('textbox')
.fill(NEW_TAG.displayName);
await adminPage.locator(descriptionBox).fill(NEW_TAG.description);
await adminPage.getByTestId('icon-picker-btn').click();
await adminPage
.getByRole('button', { name: `Select icon ${NEW_TAG.icon}` })
.click();
await adminPage.getByRole('button', { name: NEW_TAG.icon }).click();
await adminPage
.getByRole('button', { name: `Select color ${NEW_TAG.color}` })
.click();

const domainInput = adminPage.getByTestId('domain-select');
const domainInput = adminPage
.getByTestId('domain-select')
.getByRole('combobox');
await domainInput.scrollIntoViewIfNeeded();
await domainInput.waitFor({ state: 'visible' });
await domainInput.click();
Expand Down
Loading
Loading