Conversation
❌ PR checklist incompleteThis PR cannot be merged until the following are addressed on its linked issue:
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 |
|
Hi there 👋 Thanks for your contribution! The OpenMetadata team will review the PR shortly! Once it has been labeled as Let us know if you need any help! |
|
Hi there 👋 Thanks for your contribution! The OpenMetadata team will review the PR shortly! Once it has been labeled as Let us know if you need any help! |
|
Hi there 👋 Thanks for your contribution! The OpenMetadata team will review the PR shortly! Once it has been labeled as Let us know if you need any help! |
siddhant1
changed the title
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
The Domains / Data Products "Add Assets" drawer is an Untitled-UI SlideoutMenu (react-aria Modal/Dialog). Its quick-filter dropdowns used the Ant Design SearchDropdown, whose popup portals to document.body — outside the dialog subtree, where react-aria's `inert` attribute makes it non-interactive (clicks fall through and the popup closes). z-index cannot fix `inert`. Add a minimal QuickFilterDropdown built on the core `Dropdown` (react-aria) primitive, whose popover renders in the dialog's top layer and stays interactive without any AntD-over-drawer workaround. ExploreQuickFilters renders it behind an `untitledDropdown` flag that only the Add Assets drawer passes (variant === 'drawer'); the Modal variant, Explore page, Glossary tab and Lineage controls keep the AntD SearchDropdown unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Hi there 👋 Thanks for your contribution! The OpenMetadata team will review the PR shortly! Once it has been labeled as Let us know if you need any help! |
siddhant1
added
UI
❌ UI Checkstyle Failed❌ I18n SyncTranslation locale files are out of sync with Affected files
Fix locally (fast — only checks files changed in this branch): make ui-checkstyle-changed |
Code Review ✅ Approved 2 resolved / 2 findingsReplaces Ant Design dropdowns with Untitled-UI components in the Add Assets drawer to resolve react-aria interaction issues. Consider extending the selection logic to account for off-screen or unloaded options in the QuickFilterDropdown. ✅ 2 resolved✅ Quality: Debounced search is never cancelled on unmount
✅ Edge Case: Selection rebuilt only from currently loaded options
OptionsDisplay: compact → Showing less information. Comment with these commands to change:
Was this helpful? React with 👍 / 👎 | Gitar |
Jest test CoverageUI tests summary
|
|
🟡 Playwright Results — all passed (15 flaky)✅ 4296 passed · ❌ 0 failed · 🟡 15 flaky · ⏭️ 88 skipped
🟡 15 flaky test(s) (passed on retry)
How to debug locally# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip # view trace |
Describe your changes:
The Domains / Data Products → Add Assets drawer quick-filters (Entity Type, Owners, Tag, Tier, Service) are now interactive.
Why: The Add Assets drawer is an Untitled-UI
SlideoutMenu(react-ariaModal/Dialog). The quick filters used the Ant DesignSearchDropdown, whose popup portals todocument.body— outside the dialog subtree, where react-aria'sinertattribute makes it non-interactive (clicks fall through and the popup closes).z-indexcan't overrideinert.What: Add a small
QuickFilterDropdownbuilt on the coreDropdown(react-aria) primitive from@openmetadata/ui-core-components. Its popover renders in the dialog's own top layer, so it stays interactive — no AntD-over-drawer workaround (getPopupContainer/ConfigProvider).ExploreQuickFiltersrenders it behind anuntitledDropdownflag that only the Add Assets drawer passes (variant === 'drawer'); the Add Assets modal variant, the Explore page, the Glossary asset tab and Lineage controls keep the existing AntDSearchDropdown— zero change to those surfaces.The library primitive provides the popover, the checkable items (
showCheckbox), the counts (addon) and selection, so the component is ~30 lines. Per-filter in-popover search was intentionally left out to keep it minimal (a search box fights react-aria's menu typeahead, and the drawer already has its own asset searchbar); selection applies on click.Type of change:
High-level design:
Minimal, additive, drawer-scoped. One new consumer-app component composed from the core
Dropdownprimitive (no core-component changes).ExploreQuickFiltersgains an optionaluntitledDropdownprop (defaults tofalse), so the 4 other call sites are untouched. Rejected (per review): routing the AntD popup into the dialog viagetPopupContainer/ aConfigProviderdrawer provider — keeps an AntD overlay inside the Untitled drawer.Tests:
Use cases covered
Unit tests
ExploreQuickFilters.test.tsx/SearchDropdown.test.tsxJest suites pass unchanged (the kept AntD paths). No new unit test in this minimal pass — the component is a thin wrapper over the libraryDropdown.Backend / Ingestion integration tests
Playwright (UI) tests
InputOutputPorts.spec.ts"Port drawers show Entity Type quick filter" test still covers the drawer trigger. A follow-up can extend it to open the popover and select an option (interactivity guard) — happy to add if wanted.Manual testing performed
tsc --noEmiton the changed files — clean. UI checkstyle (organize-imports → eslint → prettier) — clean.UI screen recording / screenshots:
Checklist:
🤖 Generated with Claude Code
Greptile Summary
This PR fixes the non-interactive quick-filters in the Add Assets drawer by replacing the AntD
SearchDropdown(whose popup portals todocument.body, outside react-aria'sinert-protected dialog subtree) with a newQuickFilterDropdownbuilt on the core react-ariaDropdownprimitive whose popover stays in the top layer and remains interactive.QuickFilterDropdownis a ~80-line component wrappingDropdown.Root/Popover/Menu/Item; it follows the existingDropdown.Root + Buttontrigger pattern already used inOwnerReveal,OwnerTeamList, and others.untitledDropdownflag (defaultfalse) onExploreQuickFiltersgates the new path exclusively to the drawervariant; all four other call sites (Explore page, Glossary, Lineage, modal variant) keep the existing AntDSearchDropdownunchanged.Confidence Score: 5/5
Safe to merge — the change is purely additive and drawer-scoped; all existing call sites are untouched.
The new
QuickFilterDropdownfollows the establishedDropdown.Root + Buttontrigger pattern already proven across multiple components in the codebase. TheuntitledDropdownflag defaults tofalse, leaving every existing consumer (Explore, Glossary, Lineage, modal) on the unmodified AntDSearchDropdownpath. No shared state, prop contracts, or API calls are changed.No files require special attention.
Important Files Changed
keys === 'all'guard is correct.untitledDropdownflag (defaultfalse) gating the new component; existing AntD SearchDropdown path is fully unchanged;hasNullOptionfeature is omitted for the untitled path, consistent with the drawer call site not passingfieldsWithNullValues.untitledDropdown={variant === 'drawer'}toExploreQuickFilters; correctly scopes the new component to the drawer variant only.onChangecarries a redundantsearchKeysecond parameter (callers have it in closure), but this is a minor style point with no runtime impact.untitledDropdown?: booleanprop; clean additive change.Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A["ExploreQuickFilters\n(fields.map)"] --> B{untitledDropdown?} B -- "true\n(drawer variant)" --> C["QuickFilterDropdown\n(Dropdown.Root / react-aria)"] B -- "false\n(default)" --> D["SearchDropdown\n(Ant Design)"] C --> E["Dropdown.Popover\n→ react-aria top layer\n(stays interactive in SlideoutMenu)"] D --> F["AntD popup\n→ document.body\n(blocked by react-aria inert)"] G["useAssetSelectionContent\nvariant === 'drawer'"] -->|"untitledDropdown=true"| A H["ExplorePage / Glossary\n/ Lineage / Modal"] -->|"untitledDropdown=false (default)"| A%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%% flowchart TD A["ExploreQuickFilters\n(fields.map)"] --> B{untitledDropdown?} B -- "true\n(drawer variant)" --> C["QuickFilterDropdown\n(Dropdown.Root / react-aria)"] B -- "false\n(default)" --> D["SearchDropdown\n(Ant Design)"] C --> E["Dropdown.Popover\n→ react-aria top layer\n(stays interactive in SlideoutMenu)"] D --> F["AntD popup\n→ document.body\n(blocked by react-aria inert)"] G["useAssetSelectionContent\nvariant === 'drawer'"] -->|"untitledDropdown=true"| A H["ExplorePage / Glossary\n/ Lineage / Modal"] -->|"untitledDropdown=false (default)"| AReviews (4): Last reviewed commit: "fix(ui): use Untitled-UI dropdowns for A..." | Re-trigger Greptile