feat(data-quality): migrate test case & bundle suite forms to react-hook-form

[ShaileshParmar11]

What

Migrates the Data Quality Add Test Case and Add Bundle Suite forms from Ant Design to the react-hook-form + react-aria core-components stack (getField / FieldProp / HookForm).

• Classic flow — right-side drawer, matching the legacy visual design (widths, field spacing, doc-panel behavior, helper text).
• The migration preserves every legacy behavior: mount-time table fetch, on-change validation, doc-panel scroll-to-focused-field, reliable first-click dropdown open, tag/glossary data sources, custom-SQL layout, parameter-field rhythm, and the On-Demand scheduler card.

core-components is net-unchanged

Two intermediate commits (onLoadMore, an isDisabled field prop) touch the shared library, but they are fully reverted by the end of the branch — openmetadata-ui-core-components is byte-identical to main (0 diff). The form meets all its needs through existing primitives:

• Table search is a single paged fetch (search-to-narrow) instead of infinite scroll.
• Fields disable by passing react-aria's isDisabled through the existing {...rest} spread — no new public prop.
• Test-type dropdown options are selected by role/display-name instead of a per-option test id.

Testing

• Jest — form-body and field suites green.
• Playwright — DQ specs migrated to the RHF drawer selectors (react-aria roles, inner-input fills); test-type options picked via getByRole('option').filter({ hasText }). Validated live: AddTestCaseNewFlow (table + column + pipeline + permission), TableLevelTests custom-SQL.

Notes

• Draft; branch is currently a few commits behind main and can be rebased before marking ready.
• Paired with the Collate PR that renders these same forms as centered modals in AskCollate AI mode.

🤖 Generated with Claude Code

[ShaileshParmar11]

Paired Collate PR: open-metadata/openmetadata-collate#4874

[gitar-bot]

💡 Bug: TagSuggestion re-inserts already-selected tag as duplicate

In handleItemInserted, when the inserted key already exists in value, existingTag is found but the handler still calls onChange?.([...value, newTag]), appending the existing tag again. If react-aria's Autocomplete ever fires onItemInserted for an already-selected item (e.g. rapid re-selection), the tag array will contain duplicates, which then flow into normalizeTagLabels and the created test case payload. Consider guarding: if (existingTag) { return; } before appending, or dedupe by tagFQN before calling onChange.

Skip insertion when the tag is already selected.:

const handleItemInserted = useCallback(
  (key: string | number) => {
    if (String(key) === NO_DATA_OPTION_ID) {
      return;
    }
    if (value.some((tag) => tag.tagFQN === String(key))) {
      return; // already selected; avoid duplicate entry
    }
    const tagData = tagDataMap.current.get(String(key));
    const newTag: EntityTags = {
      tagFQN: String(key),
      source: tagType,
      name: tagData?.name,
      displayName: tagData?.displayName,
      description: tagData?.description,
      style: tagData?.style,
    };
    onChange?.([...value, newTag]);
    searchDebounced.cancel();
    fetchOptions('');
  },
  [value, onChange, searchDebounced, tagType]
);

• Apply fix

_{Check the box to apply the fix or reply for a change | Was this helpful? React with 👍 / 👎}

[gitar-bot]

💡 Quality: tagDataMap is an unbounded Map cache without a size cap

The repo caching guideline requires caches to have explicit size caps (use lru-cache in TS, not a bare Map). tagDataMap in TagSuggestion is a useRef<Map<string, TagLabel>> that accumulates an entry for every option returned by every search/glossary fetch for the lifetime of the component and is never pruned. On a long-lived form with many searches this grows unbounded. Note TestCaseFormBody's tablesCache correctly caps at TABLES_CACHE_MAX_SIZE; apply the same bounded pattern (or an lru-cache) to tagDataMap.

_{Was this helpful? React with 👍 / 👎}

[gitar-bot]

💡 Quality: Bundle suite re-seed effect omits deps and relies on JSON.stringify signature

The re-seed effect in BundleSuiteFormDrawer intentionally depends only on [open, seedSignature] and excludes form/computeDefaultValues, and seedSignature is a JSON.stringify of name/description/testCase ids recomputed on every render. This works but is fragile: (1) it will trip react-hooks/exhaustive-deps and any future edit to computeDefaultValues closure that isn't reflected in seedSignature will silently use stale seed data; (2) JSON.stringify on every render is wasted work. Consider memoizing seedSignature with useMemo and adding an eslint-disable with an explanatory comment (already partially present) so the intent is enforced rather than incidental.

_{Was this helpful? React with 👍 / 👎}

[gitar-bot]

Code Review 👍 Approved with suggestions 0 resolved / 3 findings

Migrates Data Quality forms to react-hook-form while maintaining parity with legacy behaviors and selectors. Address the duplicate TagSuggestion insertion, implement an LRU cache for tagDataMap, and refine the Bundle suite re-seed effect dependencies.

💡 Bug: TagSuggestion re-inserts already-selected tag as duplicate

📄 openmetadata-ui/src/main/resources/ui/src/components/common/TagSuggestion/TagSuggestion.tsx:145-159

In handleItemInserted, when the inserted key already exists in value, existingTag is found but the handler still calls onChange?.([...value, newTag]), appending the existing tag again. If react-aria's Autocomplete ever fires onItemInserted for an already-selected item (e.g. rapid re-selection), the tag array will contain duplicates, which then flow into normalizeTagLabels and the created test case payload. Consider guarding: if (existingTag) { return; } before appending, or dedupe by tagFQN before calling onChange.

Skip insertion when the tag is already selected.

const handleItemInserted = useCallback(
  (key: string | number) => {
    if (String(key) === NO_DATA_OPTION_ID) {
      return;
    }
    if (value.some((tag) => tag.tagFQN === String(key))) {
      return; // already selected; avoid duplicate entry
    }
    const tagData = tagDataMap.current.get(String(key));
    const newTag: EntityTags = {
      tagFQN: String(key),
      source: tagType,
      name: tagData?.name,
      displayName: tagData?.displayName,
      description: tagData?.description,
      style: tagData?.style,
    };
    onChange?.([...value, newTag]);
    searchDebounced.cancel();
    fetchOptions('');
  },
  [value, onChange, searchDebounced, tagType]
);

💡 Quality: tagDataMap is an unbounded Map cache without a size cap

📄 openmetadata-ui/src/main/resources/ui/src/components/common/TagSuggestion/TagSuggestion.tsx:64 📄 openmetadata-ui/src/main/resources/ui/src/components/common/TagSuggestion/TagSuggestion.tsx:85-87 📄 openmetadata-ui/src/main/resources/ui/src/components/common/TagSuggestion/TagSuggestion.tsx:113-115

The repo caching guideline requires caches to have explicit size caps (use lru-cache in TS, not a bare Map). tagDataMap in TagSuggestion is a useRef<Map<string, TagLabel>> that accumulates an entry for every option returned by every search/glossary fetch for the lifetime of the component and is never pruned. On a long-lived form with many searches this grows unbounded. Note TestCaseFormBody's tablesCache correctly caps at TABLES_CACHE_MAX_SIZE; apply the same bounded pattern (or an lru-cache) to tagDataMap.

💡 Quality: Bundle suite re-seed effect omits deps and relies on JSON.stringify signature

📄 openmetadata-ui/src/main/resources/ui/src/components/DataQuality/BundleSuiteForm/BundleSuiteFormDrawer.tsx:104-114

The re-seed effect in BundleSuiteFormDrawer intentionally depends only on [open, seedSignature] and excludes form/computeDefaultValues, and seedSignature is a JSON.stringify of name/description/testCase ids recomputed on every render. This works but is fragile: (1) it will trip react-hooks/exhaustive-deps and any future edit to computeDefaultValues closure that isn't reflected in seedSignature will silently use stale seed data; (2) JSON.stringify on every render is wasted work. Consider memoizing seedSignature with useMemo and adding an eslint-disable with an explanatory comment (already partially present) so the intent is enforced rather than incidental.

🤖 Prompt for agents

Code Review: Migrates Data Quality forms to react-hook-form while maintaining parity with legacy behaviors and selectors. Address the duplicate TagSuggestion insertion, implement an LRU cache for tagDataMap, and refine the Bundle suite re-seed effect dependencies.

1. 💡 Bug: TagSuggestion re-inserts already-selected tag as duplicate
   Files: openmetadata-ui/src/main/resources/ui/src/components/common/TagSuggestion/TagSuggestion.tsx:145-159

   In `handleItemInserted`, when the inserted key already exists in `value`, `existingTag` is found but the handler still calls `onChange?.([...value, newTag])`, appending the existing tag again. If react-aria's Autocomplete ever fires `onItemInserted` for an already-selected item (e.g. rapid re-selection), the tag array will contain duplicates, which then flow into `normalizeTagLabels` and the created test case payload. Consider guarding: `if (existingTag) { return; }` before appending, or dedupe by `tagFQN` before calling `onChange`.

   Fix (Skip insertion when the tag is already selected.):
   const handleItemInserted = useCallback(
     (key: string | number) => {
       if (String(key) === NO_DATA_OPTION_ID) {
         return;
       }
       if (value.some((tag) => tag.tagFQN === String(key))) {
         return; // already selected; avoid duplicate entry
       }
       const tagData = tagDataMap.current.get(String(key));
       const newTag: EntityTags = {
         tagFQN: String(key),
         source: tagType,
         name: tagData?.name,
         displayName: tagData?.displayName,
         description: tagData?.description,
         style: tagData?.style,
       };
       onChange?.([...value, newTag]);
       searchDebounced.cancel();
       fetchOptions('');
     },
     [value, onChange, searchDebounced, tagType]
   );

2. 💡 Quality: tagDataMap is an unbounded Map cache without a size cap
   Files: openmetadata-ui/src/main/resources/ui/src/components/common/TagSuggestion/TagSuggestion.tsx:64, openmetadata-ui/src/main/resources/ui/src/components/common/TagSuggestion/TagSuggestion.tsx:85-87, openmetadata-ui/src/main/resources/ui/src/components/common/TagSuggestion/TagSuggestion.tsx:113-115

   The repo caching guideline requires caches to have explicit size caps (use `lru-cache` in TS, not a bare `Map`). `tagDataMap` in TagSuggestion is a `useRef<Map<string, TagLabel>>` that accumulates an entry for every option returned by every search/glossary fetch for the lifetime of the component and is never pruned. On a long-lived form with many searches this grows unbounded. Note `TestCaseFormBody`'s `tablesCache` correctly caps at `TABLES_CACHE_MAX_SIZE`; apply the same bounded pattern (or an `lru-cache`) to `tagDataMap`.

3. 💡 Quality: Bundle suite re-seed effect omits deps and relies on JSON.stringify signature
   Files: openmetadata-ui/src/main/resources/ui/src/components/DataQuality/BundleSuiteForm/BundleSuiteFormDrawer.tsx:104-114

   The re-seed effect in BundleSuiteFormDrawer intentionally depends only on `[open, seedSignature]` and excludes `form`/`computeDefaultValues`, and `seedSignature` is a `JSON.stringify` of name/description/testCase ids recomputed on every render. This works but is fragile: (1) it will trip `react-hooks/exhaustive-deps` and any future edit to `computeDefaultValues` closure that isn't reflected in `seedSignature` will silently use stale seed data; (2) `JSON.stringify` on every render is wasted work. Consider memoizing `seedSignature` with `useMemo` and adding an eslint-disable with an explanatory comment (already partially present) so the intent is enforced rather than incidental.

Options

Display: compact → Showing less information.

Comment with these commands to change the behavior for this request:

Compact

gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}