feat(query-builder): migrate QueryBuilderWidgetV1 from antd to core-components

[chirag-madlani]

Summary

• Replaces all @react-awesome-query-builder/antd imports with @react-awesome-query-builder/ui (API-identical, same version) across 14 production files and 8 test files
• Builds a custom OMConfig from BasicConfig with new widget factories backed by openmetadata-ui-core-components, eliminating Ant Design widget rendering inside query builder rules
• Migrates QueryBuilderWidgetV1 outer shell (Card, Alert, Skeleton, Divider, Typography) from antd to core-components
• Migrates button renderers in AdvancedSearchUtils and QueryBuilderUtils from antd Button + @ant-design/icons to core Button + @untitledui/icons
• All query logic, config structure, elasticsearch format utilities, operator definitions, and async autocomplete behavior are preserved unchanged

New widgets (src/utils/queryBuilderWidgets/)

Widget	Core component
OMTextWidget	Input
OMNumberWidget	Input (numeric)
OMSelectWidget	Select with async adapter
OMMultiSelectWidget	MultiSelect + useListData from react-stately
OMBooleanWidget	Toggle
OMDateWidget	Native <input type="date/datetime-local/time"> (core DateInput is not publicly exported and requires @internationalized/date objects incompatible with RAQB string values)
OMFieldSelect	Select (field/operator picker)
OMConjs	ButtonGroup (AND/OR conjunction)

All assembled into src/utils/QueryBuilderOMConfig.tsx which exports OMConfig.

Test plan

• All 27 QueryBuilderWidgetV1 tests pass
• All 12 widget unit tests pass (src/utils/queryBuilderWidgets/)
• Advanced Search modal opens and fields render correctly (no antd widget flash)
• Adding/removing rules and groups works with the new button renderers
• Async field autocomplete (owner, tags, tier) resolves correctly
• JSON logic query builder (data contract) shows OM-styled widgets
• TypeScript compiles with no new errors

🤖 Generated with Claude Code

Greptile Summary

This PR migrates the query-builder UI from Ant Design to core components. The main changes are:

• Replaces React Awesome Query Builder Ant Design imports with UI package imports.
• Adds OpenMetadata-styled query-builder widgets for fields, operators, values, booleans, dates, and conjunctions.
• Updates async select and multiselect behavior for the new core component wrappers.
• Migrates query-builder shell, buttons, and related tests to core-component selectors.

Confidence Score: 4/5

This is close, but the async multiselect paging path should be fixed before merging.

• Saved async multiselect chips now reconcile when options arrive.
• Async single-select results now use a live item collection.
• Multiselect async fetching still drops paging metadata, so later values remain unreachable.

Files Needing Attention: openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMMultiSelectWidget.tsx

Important Files Changed

Filename	Overview
openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMMultiSelectWidget.tsx	Saved-chip reconciliation now reruns after async options load, but async paging still only loads the first result page.
openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMNumberWidget.tsx	The widget keeps transient number input text local and avoids committing invalid intermediate values during normal editing.
openmetadata-ui-core-components/src/main/resources/ui/src/components/base/select/combobox.tsx	ComboBox now receives live controlled items so async result updates can reach the dropdown.
openmetadata-ui/src/main/resources/ui/src/utils/QueryBuilderOMConfig.tsx	The query-builder config routes field, operator, conjunction, and value rendering through the new core-component widget factories.

_{Reviews (32): Last reviewed commit: "fix unit test" | Re-trigger Greptile}

Greptile also left 1 inline comment on this PR.

Context used (3)

• Context used - openmetadata-ui-core-components/CLAUDE.md (source)
• Context used - CLAUDE.md (source)
• Context used - AGENTS.md (source)

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[github-actions]

❌ PR checklist incomplete

This PR cannot be merged until the following are addressed on its linked issue:

• No GitHub issue is linked. Link an issue in the Development section of the PR (or add Fixes #12345 to the description). For a same-org cross-repo issue, add Fixes open-metadata/<repo>#123 to the description.

The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically.

Maintainers can bypass this check by adding the skip-pr-checks label.

[greptile-apps]

Async Pagination Is Dropped

The multi-select adapter always calls asyncFetch(search) and discards the returned hasMore state. Fetchers such as enum/custom-property autocomplete accept an offset and can return more pages, so values after the first page can never be loaded or selected in the query builder.

[greptile-apps]

Saved Async Values Disappear

When a saved async multiselect filter is rendered, allItems is initially empty, so the sync effect cannot append chips for the current valueArray. After the async options arrive, the effect does not rerun for the same value, leaving persisted owner, tag, tier, or custom-property filters visually unselected even though the tree still contains their values.

[greptile-apps]

Intermediate Numbers Store NaN

Number(v) is stored for every non-empty number-input string. Browser number inputs can emit intermediate values like 1e, -, or ., which convert to NaN; that value then enters the query tree and can produce an invalid or non-matching generated filter.

Suggested change

	value={value !== null && value !== undefined ? String(value) : ''}
	onChange={(v: string) => setValue(v === '' ? null : Number(v))}
	value={value !== null && value !== undefined ? String(value) : ''}
	onChange={(v: string) => {
	if (v === '') {
	setValue(null);
	return;
	}
	const nextValue = Number(v);
	if (Number.isFinite(nextValue)) {
	setValue(nextValue);
	}
	}}

[github-actions]

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	66.22% (78350/118314)	50.23% (47329/94220)	51.43% (14266/27737)

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review is ineligible. To be eligible to request a review, you need a paid Copilot license, or your organization must enable Copilot code review.

[gitar-bot]

Code Review ⚠️ Changes requested 4 resolved / 6 findings

Migrates QueryBuilderWidgetV1 and its widgets from Ant Design to core-components with custom widget factories. Changes requested due to missing debounce on async select network fetches and dropped group labels in OMFieldSelect.

⚠️ Performance: Async select fires a network fetch on every keystroke (no debounce)

📄 openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMSelectWidget.tsx:74-88 📄 openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMSelectWidget.tsx:52-66

In OMSelectWidget.tsx the new async Select.ComboBox branch wires onInputChange={(v) => { loadAsync(v); }}, and loadAsync calls asyncFetch(search) which performs the /api/v1/search/aggregate request (owner/tag/tier autocomplete). There is no debounce/throttle, so every character typed issues a fresh backend request. The previous Ant Design RAQB widget debounced these lookups. This can produce a burst of aggregate queries per search, wasted work, and out-of-order responses where a slower earlier request overwrites items set by a later one (the last setItems to resolve wins, not the last request issued).

Suggested fix: debounce the input handler and/or guard against stale responses (e.g. track the latest request and ignore results from superseded searches).

Track the latest request and drop superseded responses; debounce onInputChange.

// debounce input + ignore stale responses
const latestReq = useRef(0);
const loadAsync = useCallback(async (search: string) => {
  if (!asyncFetch) return;
  const reqId = ++latestReq.current;
  const result = await asyncFetch(search);
  if (reqId !== latestReq.current) return; // stale
  setItems((result.values as ListItem[]).map((item) => ({
    id: String(item.value),
    label: String(item.title ?? item.value),
  })));
}, [asyncFetch]);
// then wrap the onInputChange call site in a debounce (e.g. lodash debounce, 300ms)

💡 Quality: OMFieldSelect drops group label (supportingText) from field picker

📄 openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMFieldSelect.tsx:24-27

In OMFieldSelect.tsx the mapping previously set supportingText: item.grouplabel, which surfaced the field's group/entity context in the field picker dropdown. This commit removes it, so the field/operator selector no longer shows the group label. If this is an intentional simplification it can be ignored, but it is a user-facing regression from the prior behavior where grouped fields displayed their group as supporting text. Confirm whether losing the group label is intended; if not, restore supportingText: item.grouplabel.

✅ 4 resolved

✅ Edge Case: OMDateWidget can't render ISO/Date values in native inputs

📄 openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMDateWidget.tsx:32-45
OMDateWidget binds value={String(value ?? '')} directly to a native <input type="date|datetime-local|time">. These native inputs only accept strictly-formatted strings (yyyy-MM-dd, yyyy-MM-ddTHH:mm, HH:mm). If RAQB provides a full ISO timestamp (e.g. 2024-01-01T00:00:00.000Z) or a Date object for a preexisting value, String(value) will not match the required format and the input will silently render empty, dropping the previously-saved date when a rule is edited. Consider normalizing value to the format expected by each type before passing it to the input.

✅ Bug: Async multiselect won't show preselected values as chips

📄 openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMMultiSelectWidget.tsx:58-72 📄 openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMMultiSelectWidget.tsx:77-91
In OMMultiSelectWidget, the effect that syncs selectedItems (from useListData) with the incoming valueArray only appends items it can find in allItems:

const item = allItems.find((i) => i.id === id);
if (item) {
  selectedItems.append(item);
}

and it is keyed only on [valueArray.join(',')].

For async fields (owner, tags, tier), listValues is empty at mount, so staticItems and the initial allItems are empty. When editing an existing filter that already has selected values, the sync effect runs once, fails to find the ids in the empty allItems, and appends nothing. loadAsync('') later populates allItems, but since allItems is not in the effect's dependency array the sync effect does not re-run — so the preselected values are never rendered as selected chips. This regresses the edit experience for async multiselect fields (a common case: editing a saved advanced-search / data-contract rule).

Suggested fix: include allItems in the effect dependencies, and/or fall back to a placeholder { id, label: id } when the item is not yet loaded so the selection is preserved.

✅ Edge Case: Async single-select may not display label for preselected value

📄 openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMSelectWidget.tsx:49-63
In OMSelectWidget, selectedKey is set to String(value) and the visible label is looked up from items. For async fields, items starts empty (listValues is empty) and is only populated after loadAsync('') resolves. If the resolved page does not include the currently-selected value, or before it resolves, the Select has a selectedKey with no matching item and will render without the human-readable label. Consider seeding items with the current value (e.g. { id: String(value), label: String(value) }) when it is not present in the loaded list, mirroring the fix needed for the multiselect widget.

✅ Edge Case: Selecting an async option re-triggers a fetch via onInputChange

📄 openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMSelectWidget.tsx:86-91
In the async Select.ComboBox branch of OMSelectWidget.tsx, onInputChange unconditionally calls loadAsync(v). When a user selects an option, react-aria ComboBox typically updates the input text to the selected item's label, which fires onInputChange again and triggers an extra asyncFetch call with the selected label as the search term. This is an unnecessary request and can also cause the items list to be replaced right after selection. Consider ignoring input changes that are not user-driven typing (react-aria provides trigger context via onInputChange's second argument in some versions) or comparing against the current selection before re-fetching.

🤖 Prompt for agents

Code Review: Migrates QueryBuilderWidgetV1 and its widgets from Ant Design to core-components with custom widget factories. Changes requested due to missing debounce on async select network fetches and dropped group labels in OMFieldSelect.

1. ⚠️ Performance: Async select fires a network fetch on every keystroke (no debounce)
   Files: openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMSelectWidget.tsx:74-88, openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMSelectWidget.tsx:52-66

   In `OMSelectWidget.tsx` the new async `Select.ComboBox` branch wires `onInputChange={(v) => { loadAsync(v); }}`, and `loadAsync` calls `asyncFetch(search)` which performs the `/api/v1/search/aggregate` request (owner/tag/tier autocomplete). There is no debounce/throttle, so every character typed issues a fresh backend request. The previous Ant Design RAQB widget debounced these lookups. This can produce a burst of aggregate queries per search, wasted work, and out-of-order responses where a slower earlier request overwrites `items` set by a later one (the last `setItems` to resolve wins, not the last request issued).
   
   Suggested fix: debounce the input handler and/or guard against stale responses (e.g. track the latest request and ignore results from superseded searches).

   Fix (Track the latest request and drop superseded responses; debounce onInputChange.):
   // debounce input + ignore stale responses
   const latestReq = useRef(0);
   const loadAsync = useCallback(async (search: string) => {
     if (!asyncFetch) return;
     const reqId = ++latestReq.current;
     const result = await asyncFetch(search);
     if (reqId !== latestReq.current) return; // stale
     setItems((result.values as ListItem[]).map((item) => ({
       id: String(item.value),
       label: String(item.title ?? item.value),
     })));
   }, [asyncFetch]);
   // then wrap the onInputChange call site in a debounce (e.g. lodash debounce, 300ms)

2. 💡 Quality: OMFieldSelect drops group label (supportingText) from field picker
   Files: openmetadata-ui/src/main/resources/ui/src/utils/queryBuilderWidgets/OMFieldSelect.tsx:24-27

   In `OMFieldSelect.tsx` the mapping previously set `supportingText: item.grouplabel`, which surfaced the field's group/entity context in the field picker dropdown. This commit removes it, so the field/operator selector no longer shows the group label. If this is an intentional simplification it can be ignored, but it is a user-facing regression from the prior behavior where grouped fields displayed their group as supporting text. Confirm whether losing the group label is intended; if not, restore `supportingText: item.grouplabel`.

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 👍 / 👎 | Powered by Gitar — free for open source}

[sonarqubecloud]

Quality Gate passed for 'open-metadata-ui'

Issues
7 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
3.3% Duplication on New Code

See analysis details on SonarQube Cloud