Repository navigation
Migrate display, navigation, selection and numeric components to core - #35253
Conversation
shah-harshit
added
UI
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
11dec04 to
7220b68
Compare
…eftovers Main added CustomizeAppModeSidebarPage importing the antd-tree LESS file this branch deletes; the page renders the core Tree, so the import is dead. The rebase also truncated alert-recent-events-tab.less into an unterminated comment; its antd Collapse styles are unused after the Accordion swap, so remove it. Strip empty className props and string-concat classNames left by the Collapse codemod, and lower the pinned no-positional-locator suppression count.
11cb9a1 to
c302948
Compare
…ize and row height Collapsed leaf links enlarged NavItemButton through className, so their icons rendered larger than the ButtonUtility group triggers. Use NavItemButton's own size and match the group row height with wrapper layout instead.
…n migrated profiler and contract tests
#35339 migrates every remaining Affix, Empty, Image, Result and Spin import. Drop this branch's copies of those swaps so the two PRs don't conflict, keeping the Tree, Accordion, Alert, Checkbox and ComboBox migrations in the same files. Restore the matching suppressions and keep the five components off the migrated list until #35339 lands.
shah-harshit
changed the title
Resolve conflicts with the Modal/Button freeze (#35226), the Data Contract (#35217), Add Assets (#35242) and Applications settings (#35179) migrations. Where main already migrated a file, keep main's version and drop this branch's duplicate (DataContract SLA/view switch, AssetSelectionContentBody, TableDataCardV2, AppLogsViewer, ReindexFailures). Elsewhere keep this branch's migration and port main's core Button changes onto it.
…ld panels antd Collapse never rendered an unopened panel; the core AccordionPanel keeps collapsed content mounted unless unmountOnCollapse is set. Set it on alert recent events and Kafka sample message cards, which each mount a CodeMirror editor, and use it for search field configurations instead of gating the body by hand.
getTagTooltip prefixed the description with markdown **fqn**. A description holding a list or table is treated as HTML, so markdown was skipped and the asterisks showed literally. Render the FQN as its own element instead.
Entity pages (table, topic, dashboard, ...) wrapped their widgets in a left-panel frame card, so the Description and schema cards rendered as cards inside a card. The governance pages already dropped that frame through GenericTab's flat variant; every GenericTab now renders flat, so the variant prop goes away. The customize page grid keeps its frame.
|
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! |
The search and quick filters were capped at max-w-4xl (800px usable) and centred in the space beside the title, so on large screens they looked small and off-centre. Drop the cap so the column grows with the row.
Retention Period, the service header row (domain, owner, tier), the Context Center article header (domain, owner) and the workflow title each hand-built their edit trigger from legacy SVG assets (edit-new.svg, action-icons/edit.svg) on ButtonUtility or a restyled Button, so their pencil glyph, box and border differed from the other header fields. They now render EditIconButton (newLook, small) like Domains, Owners, Tier and Certification, keeping their test ids.
Filling the whole header row made the search too wide on large screens. Centre it again with a fluid cap: at least 56rem (the previous 800px usable width) and 55% of the header row beyond that.
…y-link specs - Data Insight: the left panel entries are nav links since the core migration, so open App Analytics by link role, as the KPIs steps do. - Settings navigation: the persist-after-reload test still dropped on the middle of the target row, which the core tree treats as a drop onto it; drop on the bottom edge so the item is reordered after it. - Topic: the expand-icon locator matched the toolbar's Expand All icon first, so the nested row never opened and the copy button picked was a top-level row's. Scope the locator to table rows.
…d-hover The header Tier chip lost its description tooltip when #32557 swapped TagsV1 for ClassificationTag. Wrap it in the chip tooltip TagsViewer already uses, moved to its own TagChipTooltip module so both share it. That tooltip flickered: the chip sits near the top of the page, so the tooltip flips from top to bottom, and for one frame while it is being positioned it lands under the cursor. Taking the pointer fired pointerleave on the chip and react-aria closed the tooltip. Core Tooltip now has pointer-events: none; react-aria tooltips close once the cursor leaves the trigger, so they were never hoverable anyway.
Blocking pointer events on every tooltip broke tooltips that hold links or "view more" buttons: react-aria keeps a tooltip open while it is hovered, so its content is meant to be reachable. The flicker only needs the pointer ignored for the frames where the tooltip is still being positioned (it can flip under the cursor then), so scope pointer-events: none to the entering phase.
Export getDateRangePresets so callers can re-derive a preset's range from its key, and hand onApply the clicked preset's key so a caller can store the preset rather than its frozen bounds. Presets are also built from today on each mount instead of at module load. Part of open-metadata/openmetadata-collate#7439 Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…it on dismiss - Below the md breakpoint presets are picked through RangeCalendar's own buttons, whose setValue went through the picker's onChange and cleared the key, so Apply reported no preset. RangeCalendar now reports the picked preset through onPresetSelect, called after the value change. - The key outlived a dismissed picker (Escape, outside click), so a later Apply without edits could report a preset the range no longer matched. Clear it whenever the popover closes; Apply reads it before closing.
🚦 Removed from the merge queue —
|
…d-display-components
…roles The core NumberInput main now ships is a react-aria NumberField: its input is a textbox that commits on blur, not an antd spinbutton. The core TreeSelect search input is a combobox.
…ines After merging main, these pages render this PR's core sidebar next to main's updated navbar; take the CI renders as the new baselines.
The baseline still showed main's previous icon rail; it sat just under the diff threshold and tipped over when the sample record count shifted.
The core TreeSelect's search input is a combobox in this branch, not a plain textbox.
|
| Count | Rule |
|---|---|
| 80 | react-hooks/exhaustive-deps |
| 10 | openmetadata-imports/no-circular-imports |
| 9 | openmetadata-imports/no-lower-layer-page-imports |
| 7 | openmetadata-ui-patterns/no-non-adaptive-palette |
| 3 | openmetadata-imports/review-sequential-api-calls |
| 3 | openmetadata-imports/no-cross-page-imports |
| 2 | openmetadata-imports/no-api-calls-in-iteration |
All findings
| Location | Rule | Message | |
|---|---|---|---|
| 🟡 | src/components/AppContainer/AppContainer.tsx:80:6 |
react-hooks/exhaustive-deps |
React Hook useCallback has missing dependencies: 'appPreferences', 'setAppPreferences', 'setConfig', and 'setLineageConfig'. Either include them or remove the d |
| 🟡 | src/components/AppContainer/AppContainer.tsx:86:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'fetchAppConfigurations'. Either include it or remove the dependency array. |
| 🟡 | src/components/AppContainer/AppContainer.tsx:94:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'location'. Either include it or remove the dependency array. |
| 🟡 | src/components/Customization/GenericTab/GenericTab.tsx:23:1 |
openmetadata-imports/no-lower-layer-page-imports |
Pages are route-level composition modules. Move the shared implementation/type to a lower layer instead of importing a page from here. |
| 🟡 | src/components/Customization/GenericTab/GenericTab.tsx:24:1 |
openmetadata-imports/no-circular-imports |
This runtime import participates in a circular dependency. Extract the shared type/constant/utility or invert the dependency. |
| 🟡 | src/components/Customization/GenericTab/GenericTab.tsx:65:6 |
react-hooks/exhaustive-deps |
React Hook useMemo has a missing dependency: 'handleHeightChange'. Either include it or remove the dependency array. |
| 🟡 | src/components/DataAssetRules/DataAssetRules.component.tsx:80:6 |
react-hooks/exhaustive-deps |
React Hook useCallback has a missing dependency: 't'. Either include it or remove the dependency array. |
| 🟡 | src/components/DataAssetRules/DataAssetRules.component.tsx:84:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'fetchSemanticsRules'. Either include it or remove the dependency array. |
| 🟡 | src/components/DataAssetRules/DataAssetRules.component.tsx:119:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has missing dependencies: 'fetchSemanticsRules' and 't'. Either include them or remove the dependency array. |
| 🟡 | src/components/DataAssetRules/DataAssetRules.component.tsx:392:5 |
react-hooks/exhaustive-deps |
React Hook useMemo has an unnecessary dependency: 't'. Either exclude it or remove the dependency array. Outer scope values like 't' aren't valid dependencies b |
| 🟡 | src/components/DataAssetRules/DataAssetRules.component.tsx:412:6 |
react-hooks/exhaustive-deps |
React Hook useMemo has missing dependencies: 'addEditSemanticsRule' and 'deleteSemanticsRule'. Either include them or remove the dependency array. |
| 🟡 | src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx:632:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'activeColumn'. Either include it or remove the dependency array. |
| 🟡 | src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx:751:24 |
openmetadata-ui-patterns/no-non-adaptive-palette |
Raw palette class "tw:text-gray-400" is static — it does not flip in dark mode. Use the theme-adapting "utility-" variant (tw:text-utility-gray-400) or a semant |
| 🟡 | src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx:810:17 |
openmetadata-ui-patterns/no-non-adaptive-palette |
Raw palette class "tw:text-gray-400" is static — it does not flip in dark mode. Use the theme-adapting "utility-" variant (tw:text-utility-gray-400) or a semant |
| 🟡 | src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx:821:27 |
openmetadata-ui-patterns/no-non-adaptive-palette |
Raw palette class "tw:text-gray-400" is static — it does not flip in dark mode. Use the theme-adapting "utility-" variant (tw:text-utility-gray-400) or a semant |
| 🟡 | src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx:871:19 |
openmetadata-ui-patterns/no-non-adaptive-palette |
Raw palette class "tw:text-gray-400" is static — it does not flip in dark mode. Use the theme-adapting "utility-" variant (tw:text-utility-gray-400) or a semant |
| 🟡 | src/components/Database/SampleDataWithMessages/MessageCard.tsx:66:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has missing dependencies: 'message' and 't'. Either include them or remove the dependency array. If 'setHeader' needs the current value of |
| 🟡 | src/components/Explore/EntitySummaryPanel/APIEndpointSummary/APIEndpointSummary.tsx:89:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'fetchApiEndpointDetails'. Either include it or remove the dependency array. |
| 🟡 | src/components/Glossary/GlossaryDetails/GlossaryDetails.component.tsx:210:6 |
react-hooks/exhaustive-deps |
React Hook useMemo has missing dependencies: 'feedCount', 'getEntityFeedCount', 'glossary.childrenCount', 'glossary.id', 'glossary.owners', 'glossary.reviewers' |
| 🟡 | src/components/Glossary/GlossaryDetails/GlossaryDetails.component.tsx:221:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has missing dependencies: 'fetchActivityCount' and 'fetchTaskCounts'. Either include them or remove the dependency array. |
| 🟡 | src/components/Glossary/GlossaryDetails/GlossaryDetails.component.tsx:225:5 |
react-hooks/exhaustive-deps |
React Hook useMemo has a missing dependency: 'tabs'. Either include it or remove the dependency array. |
| 🟡 | src/components/Glossary/GlossaryDetails/GlossaryDetails.component.tsx:225:6 |
react-hooks/exhaustive-deps |
React Hook useMemo has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked. |
| 🟡 | src/components/MyData/Widgets/CuratedAssetsWidget/CuratedAssetsWidget.tsx:45:1 |
openmetadata-imports/no-lower-layer-page-imports |
Pages are route-level composition modules. Move the shared implementation/type to a lower layer instead of importing a page from here. |
| 🟡 | src/components/MyData/Widgets/CuratedAssetsWidget/CuratedAssetsWidget.tsx:216:6 |
react-hooks/exhaustive-deps |
React Hook useCallback has an unnecessary dependency: 'curatedAssetsConfig'. Either exclude it or remove the dependency array. |
| 🟡 | src/components/MyData/Widgets/CuratedAssetsWidget/CuratedAssetsWidget.tsx:461:5 |
react-hooks/exhaustive-deps |
React Hook useMemo has an unnecessary dependency: 'curatedAssetsWidth'. Either exclude it or remove the dependency array. |
| 🟡 | src/components/NavBar/NavBar.tsx:212:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has missing dependencies: 'activeTab' and 'hasMentionNotification'. Either include them or remove the dependency array. |
| 🟡 | src/components/NavBar/NavBar.tsx:367:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'location.pathname'. Either include it or remove the dependency array. |
| 🟡 | src/components/NavBar/NavBar.tsx:457:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'showBrowserNotification'. Either include it or remove the dependency array. |
| 🟡 | src/components/NavBar/NavBar.tsx:461:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'fetchOMVersion'. Either include it or remove the dependency array. |
| 🟡 | src/components/NavBar/NavBar.tsx:476:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has missing dependencies: 'navigate' and 'updateActiveDomain'. Either include them or remove the dependency array. |
| 🟡 | src/components/NavBar/NavBar.tsx:481:5 |
react-hooks/exhaustive-deps |
React Hook useMemo has an unnecessary dependency: 't'. Either exclude it or remove the dependency array. |
| 🟡 | src/components/NotificationBox/NotificationBox.component.tsx:231:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has missing dependencies: 'onMarkMentionsNotificationRead' and 'onMarkTaskNotificationRead'. Either include them or remove the dependency |
| 🟡 | src/components/NotificationBox/NotificationBox.component.tsx:243:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'getTaskNotificationData'. Either include it or remove the dependency array. |
| 🟡 | src/components/SearchSettings/EntitySeachSettings/EntitySearchSettings.tsx:56:1 |
openmetadata-imports/no-lower-layer-page-imports |
Pages are route-level composition modules. Move the shared implementation/type to a lower layer instead of importing a page from here. |
| 🟡 | src/components/SearchSettings/EntitySeachSettings/EntitySearchSettings.tsx:166:5 |
react-hooks/exhaustive-deps |
React Hook useMemo has a missing dependency: 'entityType'. Either include it or remove the dependency array. |
| 🟡 | src/components/SearchSettings/EntitySeachSettings/EntitySearchSettings.tsx:622:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'fetchSearchConfig'. Either include it or remove the dependency array. |
| 🟡 | src/components/SearchSettings/EntitySeachSettings/EntitySearchSettings.tsx:634:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'fetchCustomProperties'. Either include it or remove the dependency array. |
| 🟡 | src/components/Settings/Applications/MarketPlaceAppDetails/MarketPlaceAppDetails.component.tsx:129:6 |
react-hooks/exhaustive-deps |
React Hook useCallback has a missing dependency: 'navigate'. Either include it or remove the dependency array. |
| 🟡 | src/components/Settings/Applications/MarketPlaceAppDetails/MarketPlaceAppDetails.component.tsx:304:6 |
react-hooks/exhaustive-deps |
React Hook useMemo has missing dependencies: 'installApp', 'isAppDisabled', 'onBrowseAppsClick', and 't'. Either include them or remove the dependency array. |
| 🟡 | src/components/Settings/Applications/MarketPlaceAppDetails/MarketPlaceAppDetails.component.tsx:309:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has missing dependencies: 'fetchAppDetails' and 'fetchInstalledAppDetails'. Either include them or remove the dependency array. |
| 🟡 | src/components/Settings/Team/TeamDetails/TeamDetailsV1.tsx:72:1 |
openmetadata-imports/no-lower-layer-page-imports |
Pages are route-level composition modules. Move the shared implementation/type to a lower layer instead of importing a page from here. |
| 🟡 | src/components/Settings/Team/TeamDetails/TeamDetailsV1.tsx:73:1 |
openmetadata-imports/no-lower-layer-page-imports |
Pages are route-level composition modules. Move the shared implementation/type to a lower layer instead of importing a page from here. |
| 🟡 | src/components/Settings/Team/TeamDetails/TeamDetailsV1.tsx:234:5 |
react-hooks/exhaustive-deps |
React Hook useMemo has a missing dependency: 't'. Either include it or remove the dependency array. |
| 🟡 | src/components/Settings/Team/TeamDetails/TeamDetailsV1.tsx:334:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has a missing dependency: 't'. Either include it or remove the dependency array. |
| 🟡 | src/components/Settings/Team/TeamDetails/TeamDetailsV1.tsx:556:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'isOrganization'. Either include it or remove the dependency array. |
| 🟡 | src/components/Settings/Team/TeamDetails/TeamDetailsV1.tsx:583:6 |
react-hooks/exhaustive-deps |
React Hook useCallback has a missing dependency: 'showModal'. Either include it or remove the dependency array. |
| 🟡 | src/components/Settings/Team/TeamDetails/TeamDetailsV1.tsx:594:6 |
react-hooks/exhaustive-deps |
React Hook useCallback has missing dependencies: 'currentTeam.name' and 'navigate'. Either include them or remove the dependency array. |
| 🟡 | src/components/Settings/Team/TeamDetails/TeamDetailsV1.tsx:633:6 |
react-hooks/exhaustive-deps |
React Hook useMemo has a missing dependency: 't'. Either include it or remove the dependency array. |
| 🟡 | src/components/Settings/Team/TeamDetails/TeamDetailsV1.tsx:688:5 |
react-hooks/exhaustive-deps |
React Hook useMemo has missing dependencies: 'IMPORT_EXPORT_MENU_ITEM', 'handleOpenToJoinToggle', 'handleReactiveTeam', 'isGroupType', and 't'. Either include t |
| 🟡 | src/components/Settings/Team/TeamDetails/TeamDetailsV1.tsx:783:6 |
react-hooks/exhaustive-deps |
React Hook useMemo has missing dependencies: 't' and 'teamAssetCounts'. Either include them or remove the dependency array. |
… and 64 more. Run make ui-checkstyle-changed locally for the full list.
Fix locally (fast - only checks files changed in this branch):
make ui-checkstyle-changed
Code Review ✅ Approved 9 closed / 9 findings🟡 Medium risk · Migrating navigation, selection, upload, and numeric controls across many screens could disrupt submitted values or user workflows if core behavior differs. Migrates display, navigation, selection and numeric components (TreeSelect, Checkbox, Radio, Slider, AutoComplete, TimePicker, Upload, Tree, Table and others) to core components, and adds a preset key to DateRangePicker onApply. Resolved this session: the Four items were closed without a fix in this PR: call sites stripping core Accordion borders, a duplicate expand arrow on the agents status header, unlabeled policy/summary toggle buttons, and collapsed event panels mounting a CodeMirror editor per event. No open findings remain. ✅ 9 closed✅ Quality: New .refresh-alert rule hardcodes px offsets and width
✅ Edge Case: Failed teams request stays cached, so it never retries and toasts twice
✅ Quality:
|
| Compact |
|
Was this helpful? React with 👍 / 👎 | Powered by Gitar — free for open source
|
3 participants
Describe your changes:
Fixes open-metadata/openmetadata-collate#7300
Fixes open-metadata/openmetadata-collate#7301
Fixes open-metadata/openmetadata-collate#7302
Fixes open-metadata/openmetadata-collate#7303
Part of open-metadata/openmetadata-collate#6884.
Combines the former stacked pair (#35253 display/navigation + #35262 selection/numeric forms, now closed) into one PR.
Display, containers and navigation. Replace the remaining Ant Design display components, containers, navigation menus and trees with core components, including standalone selection indicators that share these screens. The overlapping sidebar, search settings, application logs and entity panel changes are grouped to avoid competing edits.
Selection, upload, numeric, autocomplete and time controls. Migrate them to core components (TreeSelect, Checkbox, Radio, Slider, AutoComplete, TimePicker, Upload). Remove the unused legacy ParameterForm and its test. The parent profiler, KPI, policy, lineage, login, user-creation and alert forms now come from
main(see below).Affix, Empty, Image, Result and Spin were migrated by #35339, now on
main; this PR doesn't touch them.Already migrated on
main. The merge withmainkeepsmain's versions where another PR already moved a file to core, and drops this branch's copy: the Data Contract SLA form and view switch (#35217), Add Assets selection andTableDataCardV2(#35242), and the Applications log viewer andReindexFailures(#35179). The SLA serializer helpers (ContractSLAFormTab.utils) andAppLogsViewer.utilswent with them; the numeric ADR now points atContractSLAFormTab.test.tsx, whose form keeps the same HH:mm and cleared-value contract. Elsewhere this branch keeps its migration and adoptsmain's coreButtonchanges.Merged with #35280 / #35190 / #35339 (latest
mainmerge,9aefa72f5ee). Those PRs moved many of the same forms to core and React Hook Form on their own, so wheremain's version is already antd-free this PR takes it whole, specs included: profiler settings slideout andCustomRangeWidget/SliderWithInput,QualityTab, lineage config modal and page, login configuration, KPI add/edit, add policy / add rule / edit rule (the sharedRuleFormis gone), profiler configuration page, create user, admin permission debugger, alert recent events andAlertsUtil. The coreNumberInputis nowmain's react-ariaNumberFieldversion, so this branch's nullable/decimalNumberInput, its ADR and the KPI date utils were dropped. Wheremainstill used antd for a component this PR migrates (search settings Collapse / Slider / InputNumber, Tree, Collapse in user permissions, Drawer in the learning-resource form, Checkbox, Alert, Table), this PR's core version is kept on top ofmain's form changes; search settings usemain'sFieldValueBoostDialogandTermBoostList.Type of change:
High-level design:
Use core components directly. Existing domain components retain pagination state, gallery autoplay, record-count formatting, routing and table behavior. Modal drawers use SlideoutMenu; the permanently embedded query panel stays inline. Accordion header actions remain separate from toggle buttons, and collapsed SSO fields stay mounted so validation continues to see them. Core progress components expose chart/status colors, and slideout headers expose accessible title and close-control options.
TreeSelect adds visible-chip limits, parent display condensation, loading and focus callbacks. Tree utilities preserve schema values and expand synthetic All selections; SLA serialization retains wall-clock HH:mm and distinguishes zero from a cleared duration. Nested forms receive their form instance explicitly. Profiler field arrays retain stable row IDs and unwrap partition rows to the API's string arrays. KPI date normalization clears an incompatible loaded end date instead of restoring it.
Migrated components adopt core styling (ADR:2026-10-11-migrated-antd-components-adopt-core-styling), including file drop zones and view-switch buttons.
Twenty-two components reach zero root, subpath and type imports and are frozen in ESLint: Alert, Avatar, Badge, Carousel, Collapse, Drawer, Layout, List, Menu, Pagination, Progress, Steps, Tree, Table, AutoComplete, Checkbox, InputNumber, Radio, Slider, TimePicker, TreeSelect and Upload. After the latest
mainmerge, the pinned antd suppression count is 148.The independent Modal/Button migrations remain separate. Provider/package removal in open-metadata/openmetadata-collate#7304 must wait for the remaining Modal, Button, Input, Select and Form consumers.
DateRangePickernow passes the clicked preset's key toonApplyand exportsgetDateRangePresets, so a caller can store the preset rather than its frozen bounds and re-derive the range from the key (open-metadata/openmetadata-collate#7457, Part of open-metadata/openmetadata-collate#7439). Presets are built from today on each mount instead of at module load.date-range-picker.test.tsxcovers the key on Apply and its reset on Cancel.Visual follow-ups also restore the name-column row header in learning resources, constrain KPI numeric fields so their sliders remain visible, and keep async permission-search options open while loading.
Tests:
Use cases covered
Unit tests
cc33564c31b: 1,924 suites / 22,212 tests; the one failing suite (EntityImport, upload input moved to core) is fixed and passes 45/45.main(eff55f09ca2): fullsrc+ Playwright ESLint 0 errors;test:eslint-rules191/191; changed-file checkstyle clean; Jest on tests related to every merged file: 1,593/1,601 suites pass. The 8 failures (7 Data Contract suites andApplicationsClassBase) come from a local core-components build that predatesmain's new Card colors and app icons; they don't exercise this branch's code.tscshows no new errors in PR files.srcESLint has 0 errors;test:eslint-rules191/191 pass.ContractViewSwitchTab(ButtonGroup selection),CustomRangeWidget/ProfilerSettings(NumberInput suffix, native rangemin),EntityImport(core file input).vitebuild pass. Full-apptscreports only pre-existing diagnostics (stale generated types and the existingonPress-on-ButtonUtilitypattern), none new in the migration code.ac143176e6c): Jest on the touched areas passes 20 suites / 97 tests plus TeamsSelectable/UserProfile/SearchSettings (7 suites, 34 tests). With a core-components build from this branch, the Data Contract andApplicationsClassBasesuites pass 22/22 (429 tests). UI checkstyle on changed files: 0 errors; core lint, i18n sync and bundle budget pass.Backend integration tests
Not applicable: no backend or API changes.
Ingestion integration tests
Not applicable: no ingestion changes.
Playwright (UI) tests
Not run locally: Playwright runs on CI for this PR, at the author's request. The
playwright-visual-regressionbaselines that include the classic sidebar (landing page, landing page with collapsed sidebar, glossary, applications, metric list desktop/narrow) are refreshed from CI's own run on3c7ba3bebf9(a9a21d894d1). The only change is this PR's core sidebar styling; every diff was reviewed.Manual testing performed
Setup. Local backend (Collate 2.0 server on :8585 with sample data), admin user.
main(77bcbfa8eee) on :3002 and this branch on :3000, each with its own core-components build. Pages were driven with a scripted browser (not the Playwright e2e suite) and captured at 1440×900.Modes. AI mode is checked in light and dark; classic mode in light only. Classic-shell scenarios (left sidebar, top navbar, notifications, user menu) apply to classic mode only, since AI mode has its own shell.
Visual regression. 61 page/component states compared side by side with
main: 61 in classic light, 56 in AI light and 56 in AI dark, 173 pairs in total. Every pair was reviewed. Findings:main)Layout.Header(80px,20px 24px, gray-blue bg) became a plain<header>c04d9b05b22)NavItemBasesm; groups used a hand-madeAccordionHeaderNavItemBaseand links its collapsible child, all at the default size (c04d9b05b22)c04d9b05b22)Form.Itemmargin gone; coreHookFormadds no spacing by designHookFormlaid out withtw:flex tw:flex-col tw:gap-4, the conventionmain's core forms use (ac143176e6c)fetchDataawaits the shared teams request; same for the Create-user teams picker (ac143176e6c)UserProfileTeamsgrew its popover by the tree list's height (leftover from antd's inline dropdown)ac143176e6c)z-10tw:z-50, matching the core Modal overlay (ac143176e6c)flex-1lands on the header button inside its headingtw:ms-auto(ac143176e6c)10( %(3-digit value clipped)Boxrow with a 160px input column; the slider column stays full width (3c7ba3bebf9,a9a21d894d1)placeholderdropped in the TreeSelect migration3c7ba3bebf9)NavItemButtonused a faint neutral active stateNavItemButtonuses the same current-page brand treatment asNavItemBase(3c7ba3bebf9)Accepted core styling (per ADR:2026-10-11-migrated-antd-components-adopt-core-styling, no caller overrides):
NavItemButton(40px buttons; current item in brand tint rather than antd's solid blue tile).smrow height (API endpoint schema, data asset rules).ButtonGroupview switches, slider thumbs and the core accordion chevron (down when collapsed).Seen on
maintoo, so not from this PR: white ranking-detail cards on the entity search settings page in dark mode; the disabled coreSelectlooks light in dark mode.On these pages
mainshows antd's static light surfaces in dark mode, and this branch fixes them: data asset rules and API schema table headers, the data insights menu selection, app install step labels.Manual test guide. 40 numbered checks, run on this branch at
3c7ba3bebf9(all 40 re-run after the review fixes); #9 and #39 re-checked ona9a21d894d1after the slider width fix. Nothing saved permanently: lineage settings were set and restored, the other forms were filled and cancelled./my-data/my-dataAny page, navbarAny page, navbarAny page/api/v1/system/versionreturn a newer revision than the UI build, reload/explore → dim_addressdim_address, open Schema in the summary panel/explore/api_endpoint → addPet/table/sample_data.ecommerce_db.shopify.dim_address/schema/table/sample_data.ecommerce_db.shopify.dim_address/profiler/table-profile50in the sample %, open Include columns, Cancel/table/sample_data.ecommerce_db.shopify.dim_address/lineage3, OK/topic/sample_kafka.customer_events/sample_data/pipeline/sample_airflow.dim_address_etl/executions/databaseSchema/sample_data.ecommerce_db.shopify/data-insights/data-assets/data-insights/kpi/add-kpi120in Metric Value, blur/settings/preferences/search-settings/settings/preferences/search-settings/tables/settings/preferences/profiler-configuration/settings/preferences/lineageConfig/settings/preferences/loginConfiguration/settings/preferences/learning-resources/settings/governance/task-forms/settings/access/permission-debuggeradminin Search User, pick the user/settings/access/policies/add-policyisOwnerin Condition; Cancel/settings/access/policies/DataConsumerPolicy/edit-rule/DataConsumerPolicy-EditRule/create-user/users/admin/users/admin/permissions/settings/members/users/customize-page/mt-persona-a/navigation/settings/sso → SAML/observability/alert/vv-observability-alert/recentEvents/marketplace/apps/CacheWarmupApplication/install/bulk/import/table/sample_data.ecommerce_db.shopify.dim_address/service/databaseServices/sample_data/add-ingestion/metadata/table/sample_data.ecommerce_db.shopify.dim_address/schema/settings/preferences/search-settings/settings/preferences/learning-resources/table/sample_data.ecommerce_db.shopify.dim_address/profiler/table-profile/users/adminScreenshots. Left:
main, right: this PR. Full-size images with an HTML index are in the archives: Classic · light (part 1) + part 2 · AI · light · AI · dark.Classic mode · light — 61 states
1. Home: left sidebar (expanded), navbar, version alert · 2. Left sidebar collapsed + hover menu · 3. Left sidebar group expanded (Govern)
4. Navbar notification box (List, Badge, Tabs) · 5. Navbar user profile menu (persona radio) · 6. Settings landing (SettingItemCard badges)
7. Settings → Preferences (SettingItemCard) · 8. Explore summary panel: table columns (SummaryList accordion) · 9. Explore summary panel: API endpoint (schema toggle + SummaryList)
10. Table schema: tabs labels, column filter · 11. Table schema: column filter dropdown (ColumnFilter Menu → Dropdown) · 12. Table schema: column detail panel (Drawer → SlideoutMenu)
13. Table queries: right panel · 14. Table profiler settings slideout (NumberInput, TreeSelect, SliderWithInput) · 15. Table data quality tab (QualityTab)
16. Activity thread panel (Drawer → SlideoutMenu) · 17. Lineage config modal (NumberInput in HookForm) · 18. Topic sample data: message cards
19. Pipeline executions: tree view (Tree, Empty) · 20. Database schema profiler settings (CustomRangeWidget) · 21. Explore summary: glossary term (SummaryList)
22. Service insights: agents status widget (Collapse → Accordion) · 23. Data insights: left panel (Menu), summary progress · 24. Data insights KPI list + latest results (Progress)
25. Add KPI (NumberInput + Slider) · 26. Search settings (Accordion, term/field-value boosts) · 27. Search settings: term boost panel open
28. Field value boost modal (Slider) · 29. Entity search settings: field accordion + config · 30. Entity search settings: field config expanded (Slider, Toggle, Select)
31. Profiler configuration page (Accordion, TreeSelect, Toggle) · 32. Lineage configuration page (NumberInput, ButtonGroup) · 33. Login configuration (NumberInput)
34. Data asset rules (Table) · 35. Learning resources list · 36. Learning resource drawer (SlideoutMenu)
37. Task form settings (core Alert) · 38. Audit logs (ProgressBar) · 39. Permission debugger (ComboBox, Spin)
40. Add policy + rule form (TreeSelect, ComboBox) · 41. Add rule to policy (RuleForm) · 42. Edit rule (RuleForm prefilled)
43. Create user (TeamsSelectable TreeSelect, RHF) · 44. Create bot (token expiry Select) · 45. User profile → permissions (Accordion, Spin)
46. User profile teams edit (TeamsSelectableNew) · 47. Team details (Avatar) · 48. Users list pagination (PaginationComponent)
49. Persona details · 50. Persona customize navigation (Tree) · 51. SSO configuration (grouped fields Accordion, FileUpload)
52. Alert details: recent events (Table, Accordion) · 53. Observability alert: recent events · 54. Applications list
55. Marketplace · 56. Marketplace app details (Carousel → AppScreenshots, Alert) · 57. App install stepper (Steps → ProgressSteps, Avatar, Accordion)
58. Bulk import (UploadFile drop zone, stepper) · 59. Add metadata ingestion (ObjectFieldTemplate, ManifestJsonWidget) · 60. Data quality page (PageHeader)
61. Services list (ColumnFilter, PageHeader)
AI mode · light — 56 states
1. Settings landing (SettingItemCard badges) · 2. Settings → Preferences (SettingItemCard) · 3. Explore summary panel: table columns (SummaryList accordion)
4. Explore summary panel: API endpoint (schema toggle + SummaryList) · 5. Table schema: tabs labels, column filter · 6. Table schema: column filter dropdown (ColumnFilter Menu → Dropdown)
7. Table schema: column detail panel (Drawer → SlideoutMenu) · 8. Table queries: right panel · 9. Table profiler settings slideout (NumberInput, TreeSelect, SliderWithInput)
10. Table data quality tab (QualityTab) · 11. Activity thread panel (Drawer → SlideoutMenu) · 12. Lineage config modal (NumberInput in HookForm)
13. Topic sample data: message cards · 14. Pipeline executions: tree view (Tree, Empty) · 15. Database schema profiler settings (CustomRangeWidget)
16. Explore summary: glossary term (SummaryList) · 17. Service insights: agents status widget (Collapse → Accordion) · 18. Data insights: left panel (Menu), summary progress
19. Data insights KPI list + latest results (Progress) · 20. Add KPI (NumberInput + Slider) · 21. Search settings (Accordion, term/field-value boosts)
22. Search settings: term boost panel open · 23. Field value boost modal (Slider) · 24. Entity search settings: field accordion + config
25. Entity search settings: field config expanded (Slider, Toggle, Select) · 26. Profiler configuration page (Accordion, TreeSelect, Toggle) · 27. Lineage configuration page (NumberInput, ButtonGroup)
28. Login configuration (NumberInput) · 29. Data asset rules (Table) · 30. Learning resources list
31. Learning resource drawer (SlideoutMenu) · 32. Task form settings (core Alert) · 33. Audit logs (ProgressBar)
34. Permission debugger (ComboBox, Spin) · 35. Add policy + rule form (TreeSelect, ComboBox) · 36. Add rule to policy (RuleForm)
37. Edit rule (RuleForm prefilled) · 38. Create user (TeamsSelectable TreeSelect, RHF) · 39. Create bot (token expiry Select)
40. User profile → permissions (Accordion, Spin) · 41. User profile teams edit (TeamsSelectableNew) · 42. Team details (Avatar)
43. Users list pagination (PaginationComponent) · 44. Persona details · 45. Persona customize navigation (Tree)
46. SSO configuration (grouped fields Accordion, FileUpload) · 47. Alert details: recent events (Table, Accordion) · 48. Observability alert: recent events
49. Applications list · 50. Marketplace · 51. Marketplace app details (Carousel → AppScreenshots, Alert)
52. App install stepper (Steps → ProgressSteps, Avatar, Accordion) · 53. Bulk import (UploadFile drop zone, stepper) · 54. Add metadata ingestion (ObjectFieldTemplate, ManifestJsonWidget)
55. Data quality page (PageHeader) · 56. Services list (ColumnFilter, PageHeader)
AI mode · dark — 56 states
1. Settings landing (SettingItemCard badges) · 2. Settings → Preferences (SettingItemCard) · 3. Explore summary panel: table columns (SummaryList accordion)
4. Explore summary panel: API endpoint (schema toggle + SummaryList) · 5. Table schema: tabs labels, column filter · 6. Table schema: column filter dropdown (ColumnFilter Menu → Dropdown)
7. Table schema: column detail panel (Drawer → SlideoutMenu) · 8. Table queries: right panel · 9. Table profiler settings slideout (NumberInput, TreeSelect, SliderWithInput)
10. Table data quality tab (QualityTab) · 11. Activity thread panel (Drawer → SlideoutMenu) · 12. Lineage config modal (NumberInput in HookForm)
13. Topic sample data: message cards · 14. Pipeline executions: tree view (Tree, Empty) · 15. Database schema profiler settings (CustomRangeWidget)
16. Explore summary: glossary term (SummaryList) · 17. Service insights: agents status widget (Collapse → Accordion) · 18. Data insights: left panel (Menu), summary progress
19. Data insights KPI list + latest results (Progress) · 20. Add KPI (NumberInput + Slider) · 21. Search settings (Accordion, term/field-value boosts)
22. Search settings: term boost panel open · 23. Field value boost modal (Slider) · 24. Entity search settings: field accordion + config
25. Entity search settings: field config expanded (Slider, Toggle, Select) · 26. Profiler configuration page (Accordion, TreeSelect, Toggle) · 27. Lineage configuration page (NumberInput, ButtonGroup)
28. Login configuration (NumberInput) · 29. Data asset rules (Table) · 30. Learning resources list
31. Learning resource drawer (SlideoutMenu) · 32. Task form settings (core Alert) · 33. Audit logs (ProgressBar)
34. Permission debugger (ComboBox, Spin) · 35. Add policy + rule form (TreeSelect, ComboBox) · 36. Add rule to policy (RuleForm)
37. Edit rule (RuleForm prefilled) · 38. Create user (TeamsSelectable TreeSelect, RHF) · 39. Create bot (token expiry Select)
40. User profile → permissions (Accordion, Spin) · 41. User profile teams edit (TeamsSelectableNew) · 42. Team details (Avatar)
43. Users list pagination (PaginationComponent) · 44. Persona details · 45. Persona customize navigation (Tree)
46. SSO configuration (grouped fields Accordion, FileUpload) · 47. Alert details: recent events (Table, Accordion) · 48. Observability alert: recent events
49. Applications list · 50. Marketplace · 51. Marketplace app details (Carousel → AppScreenshots, Alert)
52. App install stepper (Steps → ProgressSteps, Avatar, Accordion) · 53. Bulk import (UploadFile drop zone, stepper) · 54. Add metadata ingestion (ObjectFieldTemplate, ManifestJsonWidget)
55. Data quality page (PageHeader) · 56. Services list (ColumnFilter, PageHeader)
Separate fixes: visual verification
Fixes added on top of the migration after review. Same local stack as above (backend
:8585with sample data). Left:main(:3002), right: this PR (:3000), same viewport, unless marked after only.653f573693eEditIconButton: Retention Period, service header row (domain, owner, tier), Context Center article header, workflow titlefed798162497b97f28662c,5e8538801b7mainby #35226, re-checked heregetTagTooltipno longer prepends markdown**fqn**to the description)7c4fd445031PII.Sensitivegiven an HTML description with a list for the capture, then restoredmainshows**PII.Sensitive**literally; this PR shows it bold. On both builds the tooltip stays open while hovered (checked 1s and 5s after hover)pointerleave; core Tooltip now ignores the pointer only while it enters (pointer-events: noneduring the entering phase), so a settled tooltip stays hoverable and clickable (links, "view more")1b98e58d80d,6a82daffb21shopify.work(Tier1), Chrome tab in front so animations runmain: no tooltip. Branch without the core fix: opens, then closes under a still cursor. With it: still open at 6s; moving the cursor onto the settled tooltip keeps it open; unit tests cover the header wiring, the chip tooltip staying open, and a settled tooltip's button staying clickableS1: entity tab without the outer frame (classic light · AI light · AI dark)
S2: header edit icons (top: main, bottom: this PR)
Table header: Retention Period now matches the other fields.
Service header row (Connections → sample_data): domain, owner and tier.
S3: Explore search width, AI mode (~3024px, top: main, bottom: this PR)
At 1512px the column is unchanged from
main(896px). On wider screens it grows to 55% of the header row and stays centred.S6: tag tooltip with an HTML description (top: main, bottom: this PR; left 1s, right 5s after hover)
The tooltip closing in the original report was on the header Tier chip; see S7.
S7: header Tier tooltip (rows: main · branch without the core fix · this PR; left 1s, right 6s after hover)
S5: Data Contract Semantics step footer (after only)
UI screen recording:
Not applicable: component/form migration refactor. The before/after screenshots and full-size archives above cover classic (light) and AI (light and dark).
Checklist:
main: classic (light) and AI (light + dark) screenshots for every migrated page/component, with full-size archives.main(no conflicts).Playwright CI run
Postgresql PR Playwright E2E Tests, run 38495192267 (on
ff2c0356c09) failed 3 tests, one per shard. All three are fixed inde2ec226b7a(spec-only changes):Features/Topic.spec.ts› Copy nested field link should include full hierarchical pathexpand-iconlocator matched the toolbar's Expand All icon first, so the nested row never opened and the copy button picked belonged to a top-level rowFeatures/SettingsNavigationPage.spec.ts› should persist a reordered sub-item after reloadPages/DataInsight.spec.ts› Verifying App analytics tablinkrole🤖 Generated with Claude Code