Repository navigation
Finish the antd Form, Select, Input and DatePicker migration and fix the navbar search bar - #35509
Conversation
…ly types getField/generateFormFields, FilterPattern, SanitizedInput, UserTeamSelectableListSearchInput, AsyncSelect and SchedularUtils had no callers left in OSS. Also replace antd Rule/RuleObject/DefaultOptionType/Gutter types with local ones or drop the dead code that used them.
Audit log export, table queries, pipeline executions, lineage time filter and the KPI form now use the core DateRangePicker/DatePicker (range filters through the existing DqDateRangeFilter adapter), with a core clear button where antd offered allowClear. Deletes the antd generatePicker wrapper and its luxon-only helpers, and drives the pickers through their roles in Playwright.
Enum, tier and entity-type cells use a core Select that opens with the cell; custom-property enums and metric related-metrics/data-products use core Autocomplete (the latter in free-text mode, replacing antd mode="tags"). Drops the antd select styles and the grid's .ant-select key-handling checks.
…-form AddNotificationPage was the last antd Form. It now reuses the observability alert form (useAlertFormData picks the notification fetch, save, breadcrumb and details path by alert type) and hides the trigger section notifications do not have. Removes the antd-only NAME_FIELD_RULES and VALIDATION_MESSAGES.
…page Rather than a second page importing another page's form, the notification add/edit routes render AddObservabilityPage with alertType=Notification, which hides triggers and keeps the system-alert guard. Deletes AddNotificationPage.
No antd popup is left inside the drawers or the memory modal, so DrawerPopupContainerProvider and CreateMemoryModal's ConfigProvider no longer do anything. AntDConfigProvider stays: it still feeds the custom theme into antd's CSS variables, which the LESS and Collate's last antd form read.
All four reached zero, so they join MIGRATED_ANTD_COMPONENTS. Prunes the suppression baselines (antd symbols 148 -> 113, positional locators 560 -> 559) and swaps a test's stale antd Option mock for the core items the helper returns.
Moving the global search off antd (#35280) swapped its borderless antd Input and Select for core ones that draw their own surface and outline, so the bar showed three boxes inside its container. Core Input and Select gain a borderless option (Select keeps its keyboard focus outline) and the search bar uses it.
shah-harshit
added
UI
❌ 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 |
🔄 Playwright impact map auto-refreshedThis PR touched specs or UI source that changed the source→spec routing map. I regenerated What is this file? It is the auto-generated half of Playwright's PR planner. It routes "if source X changes, run specs Y" by walking spec imports and cross-referencing What if I want to regenerate locally instead? Run this before pushing your next change to skip the bot commit: python3 .github/scripts/generate_playwright_impact_map.py
git add .github/playwright/impact-map.generated.json
git commit --amend --no-edit # or a separate commit |
Jest test CoverageUI tests summary
|
The provider's only live job was writing the custom theme into the --ant-* CSS variables our LESS reads. useThemeCssVariables now writes the configured primary and status colours (only when set, as ConfigProvider.config did) next to the existing palette, so OSS has no antd import left. ConfigProvider joins MIGRATED_ANTD_COMPONENTS; antd symbol suppressions 113 -> 112, all @ant-design/icons. RetentionPeriod's alert drops its antd-tint overrides for the core brand style.
…o shah-harshit/6884-antd-tail
Logout opens a confirmation dialog rather than navigating, so it should be announced as a button, not a link.
Captured from visual-regression run 38743999049 on d44af08: the classic sidebar's restored lg/solid look and the single-field navbar search.
The OSS dark sign-in panel used bg-primary (#0c0e12) while Collate's uses #202a3c; use the same colour so both products' dark login pages match.
…d-tail # Conflicts: # openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs
…d-tail # Conflicts: # openmetadata-ui/src/main/resources/ui/playwright/e2e/VisualRegression/__snapshots__/entityDetails.spec.ts-snapshots/table-details-schema.png # openmetadata-ui/src/main/resources/ui/playwright/e2e/VisualRegression/__snapshots__/staticPages.spec.ts-snapshots/landing-page-sidebar-collapsed.png
Core Button passes onFocus/onBlur through to react-aria's Button/Link; lock that in so a regression to silently dropping them is caught.
- Select: value/onChange instead of the deprecated selectedKey/onSelectionChange. - Drop fragments left with a single child after removing the popup providers. - Set over lodash uniq; lodash toString for unknown grid cell values. - Mark the fire-and-forget query refetch with void; return Promise.resolve from sync onUpdate handlers instead of async without await. - Number.NaN; merge the duplicate react import. - DateRangeFilter: hoist the range builder so the force-close effect lists its real dependencies. - Dark login panel uses the gray-modern-800 palette token, not a hex.
…d-tail # Conflicts: # openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs
🚦 Removed from the merge queue —
|
…d-tail # Conflicts: # openmetadata-ui/src/main/resources/ui/eslint-rules/openmetadata-antd.test.mjs # openmetadata-ui/src/main/resources/ui/eslint-suppressions.json # openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueries.tsx # openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx
…le enums - KPI and audit-export date pickers staged nothing: every pick went straight to the form, so Cancel kept it. useStagedPickerValue holds picks until Apply and drops them on Cancel or close. - A borderless Input dropped its focus outline outright; like a borderless Select it now keeps it for keyboard focus. - Single-value custom-property enums used a chip Autocomplete, which refuses a second pick; a Select replaces the value.
![gitar-bot[bot]](https://avatars.githubusercontent.com/in/827041?s=60&v=4){kind=small}
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
…single enum clear The editor cancels on any mousedown outside it or the bulk-edit-custom-property-select-dropdown class; the core Select and Autocomplete popovers portal to the body without that class, so a press in them could close the editor. A single-value enum also lost its own clear when it moved to Select; a clear button restores it.
🚦 Removed from the merge queue —
|
…d-tail # Conflicts: # openmetadata-ui/src/main/resources/ui/playwright/eslint-rules/tests/corpus.test.mjs
🔄 Playwright impact map auto-refreshedThis PR touched specs or UI source that changed the source→spec routing map. I regenerated What is this file? It is the auto-generated half of Playwright's PR planner. It routes "if source X changes, run specs Y" by walking spec imports and cross-referencing What if I want to regenerate locally instead? Run this before pushing your next change to skip the bot commit: python3 .github/scripts/generate_playwright_impact_map.py
git add .github/playwright/impact-map.generated.json
git commit --amend --no-edit # or a separate commit |
Code Review ✅ Approved 4 closed / 4 findings🟡 Medium risk · Migrating alert forms, date filters, and CSV selectors to core controls could alter alert saves, date boundaries, or bulk edits. Finishes the antd Form, Select, Input and DatePicker migration and fixes the navbar search bar, with dead antd helpers removed and the classic sidebar restyled. Resolved this session: theme colours now clear their inline CSS variable, expanded-sidebar Logout is exposed as a link, enum popovers stay inside the custom-property editor, and a single enum can be cleared with its own clear button. No open findings. ✅ 4 closed✅ Edge Case: Cleared theme colours keep their old inline CSS variable
✅ Quality: Expanded-sidebar Logout is now exposed as a link, not a button
✅ Bug: Single-enum Select popover is missing the outside-click exemption class
✅ Edge Case: Single-value enum can no longer be cleared on its own
VerificationRules No rules evaluated Functional validation Not enabledAuto-approval Not enabledFor more verification details, comment OptionsDisplay: compact → Showing compact verification results. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Powered by Gitar — free for open source |
|
| Count | Rule |
|---|---|
| 23 | react-hooks/exhaustive-deps |
| 7 | openmetadata-ui-patterns/no-non-adaptive-palette |
| 7 | openmetadata-imports/no-lower-layer-page-imports |
| 3 | openmetadata-imports/no-impure-pure-utils |
| 1 | openmetadata-imports/review-sequential-api-calls |
| 1 | openmetadata-imports/no-circular-imports |
All findings
| Location | Rule | Message | |
|---|---|---|---|
| 🟡 | src/AppRoot.tsx:70:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has missing dependencies: 'fetchApplicationConfig' and 'initializeAuthState'. Either include them or remove the dependency array. |
| 🟡 | src/components/DataInsight/PageViewsByEntitiesChart.tsx:115:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'fetchPageViewsByEntities'. Either include it or remove the dependency array. |
| 🟡 | src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx:636: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:755: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:814: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:825: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:875: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/TableQueries/TableQueries.tsx:180:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'fetchResourcePermission'. Either include it or remove the dependency array. |
| 🟡 | src/components/Database/TableQueries/TableQueries.tsx:205:24 |
openmetadata-imports/review-sequential-api-calls |
Review these sequential API requests. If they are independent, start them together with Promise.all/Promise.allSettled; keep sequencing only when data-dependent |
| 🟡 | src/components/Database/TableQueries/TableQueries.tsx:475:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has missing dependencies: 'fetchFilteredQueries', 'isTableDeleted', and 'searchParams.queryFrom'. Either include them or remove the depende |
| 🟡 | src/components/Entity/EntityLineage/LineageTimeFilter.component.tsx:231:44 |
openmetadata-ui-patterns/no-non-adaptive-palette |
Raw palette class "tw:text-brand-600" is static — it does not flip in dark mode. Use the theme-adapting "utility-" variant (tw:text-utility-brand-600) or a sema |
| 🟡 | src/components/GlobalSearchBar/GlobalSearchBar.tsx:127:5 |
react-hooks/exhaustive-deps |
React Hook useMemo has an unnecessary dependency: 'i18n.language'. Either exclude it or remove the dependency array. |
| 🟡 | src/components/GlobalSearchBar/GlobalSearchBar.tsx:139:6 |
react-hooks/exhaustive-deps |
React Hook useCallback has a missing dependency: 'navigate'. Either include it or remove the dependency array. |
| 🟡 | src/components/GlobalSearchBar/GlobalSearchBar.tsx:148:28 |
react-hooks/exhaustive-deps |
React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead. |
| 🟡 | src/components/GlobalSearchBar/GlobalSearchBar.tsx:209:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'initNLP'. Either include it or remove the dependency array. |
| 🟡 | src/components/Pipeline/Execution/Execution.component.tsx:101:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'fetchPipelineStatus'. Either include it or remove the dependency array. |
| 🟡 | src/components/observability/Alerts/AlertAiFormFieldsPureUtils.ts:26:1 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not depend on React, UI, state, hooks, pages, or REST clients. Move orchestration/rendering out or move shared types to a lower layer. |
| 🟡 | src/components/observability/Alerts/AlertAiFormFieldsPureUtils.ts:26: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/observability/Alerts/AlertAiFormFieldsPureUtils.ts:32:1 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not depend on React, UI, state, hooks, pages, or REST clients. Move orchestration/rendering out or move shared types to a lower layer. |
| 🟡 | src/components/observability/Alerts/AlertAiFormFieldsPureUtils.ts:33:1 |
openmetadata-imports/no-impure-pure-utils |
Pure utilities must not depend on React, UI, state, hooks, pages, or REST clients. Move orchestration/rendering out or move shared types to a lower layer. |
| 🟡 | src/components/observability/Alerts/AlertAiFormFieldsValidationUtils.test.ts:16: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/observability/Alerts/AlertAiFormFieldsValidationUtils.ts:22: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/hooks/useGridEditController.ts:156:6 |
react-hooks/exhaustive-deps |
React Hook useCallback has an unnecessary dependency: 'selectedRange'. Either exclude it or remove the dependency array. |
| 🟡 | src/hooks/useGridEditController.ts:194:6 |
react-hooks/exhaustive-deps |
React Hook useCallback has an unnecessary dependency: 'selectedRange'. Either exclude it or remove the dependency array. |
| 🟡 | src/hooks/useGridEditController.ts:635:6 |
react-hooks/exhaustive-deps |
React Hook useCallback has a missing dependency: 'gridContainer'. Either include it or remove the dependency array. |
| 🟡 | src/hooks/useGridEditController.ts:669:6 |
react-hooks/exhaustive-deps |
React Hook useCallback has missing dependencies: 'getCellsInRange' and 'gridContainer'. Either include them or remove the dependency array. |
| 🟡 | src/hooks/useGridEditController.ts:688:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'gridContainer'. Either include it or remove the dependency array. |
| 🟡 | src/hooks/useGridEditController.ts:796:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has missing dependencies: 'focusCell', 'getCellIndices', and 'setSelectedRange'. Either include them or remove the dependency array. |
| 🟡 | src/hooks/useGridEditController.ts:892:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has missing dependencies: 'getCellIndices', 'handleCopy', 'handlePaste', and 'setSelectedRange'. Either include them or remove the dependen |
| 🟡 | src/hooks/useGridEditController.ts:955:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has a missing dependency: 'setSelectedRange'. Either include it or remove the dependency array. |
| 🟡 | src/hooks/useGridEditController.ts:968:5 |
react-hooks/exhaustive-deps |
React Hook useCallback has a missing dependency: 'setSelectedRange'. Either include it or remove the dependency array. |
| 🟡 | src/hooks/useGridEditController.ts:1031:6 |
react-hooks/exhaustive-deps |
React Hook useCallback has a missing dependency: 'setSelectedRange'. Either include it or remove the dependency array. |
| 🟡 | src/hooks/useGridEditController.ts:1058:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'dataSource'. Either include it or remove the dependency array. |
| 🟡 | src/hooks/useGridEditController.ts:1058:7 |
react-hooks/exhaustive-deps |
React Hook useEffect has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked. |
| 🟡 | src/pages/AuditLogsPage/AuditLogsPage.tsx:549:39 |
openmetadata-ui-patterns/no-non-adaptive-palette |
Raw palette class "tw:text-brand-600" is static — it does not flip in dark mode. Use the theme-adapting "utility-" variant (tw:text-utility-brand-600) or a sema |
| 🟡 | src/pages/AuditLogsPage/AuditLogsPage.tsx:633:25 |
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/pages/TeamsPage/AddTeamForm.tsx:144:6 |
react-hooks/exhaustive-deps |
React Hook useEffect has a missing dependency: 'fetchAllTeams'. Either include it or remove the dependency array. |
| 🟡 | src/utils/Alerts/AlertsUtil.test.tsx:39: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/utils/Alerts/AlertsUtilPure.ts:41: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/utils/CSV/CSVUtilsClassBase.tsx:95: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/utils/CSV/CSVUtilsClassBase.tsx:113: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/utils/SearchSettingsUtils.ts:27: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. |
Fix locally (fast - only checks files changed in this branch):
make ui-checkstyle-changed
|
🚦 Removed from the merge queue —
|
This branch was successfully deployed
3 participants
Describe your changes:
Part of open-metadata/openmetadata-collate#6884 (open-metadata/openmetadata-collate#6892 Form, open-metadata/openmetadata-collate#6893 Select, open-metadata/openmetadata-collate#6894 Input, open-metadata/openmetadata-collate#7304 residual imports).
Fixes open-metadata/openmetadata-collate#7509 (classic sidebar, folded in from #35522).
Fixes #30811 (core
ButtononFocus/onBlur, regression tests only).Merge after open-metadata/openmetadata-collate#7502, which moves
NotificationTemplateFormoff antd. That form is the last caller of thegenerateFormFieldsfactory and legacyFieldProptypes this PR deletes, so Collate breaks if this lands first.This clears the OSS antd tail: Form, Select, Input and DatePicker reach zero, and every
antd/*subpath import is gone. WithAntDConfigProviderreplaced as well, OSS has noantdimport left (source and tests). With #35205 (icons, merged) onmain, OSS has no antd suppressions left.It also fixes the navbar search bar, which has drawn its input, index select and search button as separate boxes since #35280.
getField/generateFormFieldsand the components only they used (FilterPattern,SanitizedInput,UserTeamSelectableListSearchInput),AsyncSelect,SchedularUtils, the legacy antdFieldProp/FieldTypestypes,filterSelectOptions,getFilterOptions,listLengthValidator,NAME_FIELD_RULESandVALIDATION_MESSAGEShad no callers left in OSS.Rule,RuleObject,DefaultOptionTypeandGuttergive way to local types (EntityNameValidationRule,EnumColumnOption) or go with the dead code that used them.DateRangePicker/DatePicker. Range filters reuse the existingDqDateRangeFilteradapter. Where antd offeredallowClear, a core clear button appears once a range is set. The antdgeneratePickerwrapper is deleted.Selectthat opens with the cell. Picking a value commits it, and closing the list ends the edit (re-picking the current value fires no selection change). The entity-type cell drops its Save/Cancel buttons to match the other enum cells: the full-width coreSelectpushed Save past the cell edge, under the next column. Custom-property enums and the metric related-metrics / data-products cells use coreAutocomplete; the latter in free-text mode, replacing antdmode="tags".AddObservabilityPagewithalertType=Notification. That page already runs on react-hook-form;useAlertFormDatanow picks the notification fetch, save, breadcrumb and details path by alert type, and the trigger section stays hidden as before.AddNotificationPageis deleted.AntDConfigProvider→useThemeCssVariables. The provider's only live job was writing the custom theme into the--ant-*CSS variables our LESS reads (@primary-color: var(--ant-primary-color),@success-color, …). The hook writes the configured primary and status colours, only when set, asConfigProvider.configdid, next to the palette the provider already wrote, so colours are unchanged.RetentionPeriod's alert drops its overrides of antd's info tints for the core brand style.ConfigProviders.DrawerPopupContainerProviderand the one inCreateMemoryModalare removed: no antd popup is left in those drawers or that modal.InputandSelectgain aborderlessoption that drops the field's surface and border (Selectkeeps its keyboard-focus outline). The search bar uses it, so it reads as one field again.Buttonfocus (ui-core-components: Button silently drops a bare onFocus prop #30811).onFocus/onBluralready reach react-aria'sButton/Link, and have since the library landed, so nothing was dropped onmainand no source change is needed. New tests inbutton.test.tsxlock that in.MIGRATED_ANTD_COMPONENTS. Suppressed antd symbols drop to 0 (mainhad 33 after refactor(ui): render SVG assets directly instead of antd's Icon wrapper #35205 removed the icons); one positional locator is removed.Classic sidebar (from #35522). #35253 moved the classic left sidebar onto core
NavItemBase. Its defaultmdsize and light current-item style made it look different from the pre-migration sidebar: 16px semibold labels, "Data Marketplace" wrapping, tightly packed rows, and no solid brand treatment on the current item or open groups. The sidebar now matches it again, using only core component APIs. AI mode uses a separate sidebar and is untouched.Core (
NavItemBase), additive. Existingsmandmdoutput is unchanged:size="lg"for roomy primary navigation: 56px rows (p-3.5), 28px icons, 14px/500 labels (600 when current),rounded-xl. Atlg, collapsible children keep their icon and sit flush (px-4 py-2.5, 48px rows) inside the open group.variant="solid":bg-primary);fg-tertiary/text-tertiary,#535862), as the old sidebar did, instead of the default's lighter gray-400 icons and darker gray-700 labels;bg-brand-solidand uses on-brand text and icon;bg-brand-solid_hover, with square bottom corners when open;collapsible-childindent is now per size (sm→pl-9,md→pl-10), so children line up with the parent label.Classic
LeftSidebar:tw:bg-surfacethat Migrate display, navigation, selection and numeric components to core #35253 added to the classic<aside>, so the rail shows the#f8f9fcpage background as before.size="lg" variant="solid", with the old layout:border-brand-subtlepanel with no top border.NavItemBase(a link-lessrole="link"), so it matches Settings. react-aria activates it on Enter. In the collapsed rail it stays an iconButton.Dark login panel. In dark mode the sign-in video panel was
bg-primary(#0c0e12), while Collate's is#202a3c(open-metadata/openmetadata-collate#7475). OSS now uses thegray-modern-800palette token (#202939, within 3 RGB units of Collate's) through--login-panel-bginapp.less, so both products' dark login pages match. Light mode and the form side are unchanged.Still to do for open-metadata/openmetadata-collate#7304: the
antdpackage and its stylesheet (antd-master.less, which also carries antd's global base styles and the--ant-*defaults), and the dead.ant-*rules left in LESS, TSX and Playwright.Type of change:
High-level design:
Each group is its own commit, so the PR reads commit by commit. The notification page reuses the observability form rather than porting its own antd form, because the two pages differed only in their API calls, breadcrumb and the trigger section.
The search bar fix adds a prop to core rather than overriding core styles from the caller. A borderless field is the only way to put a core input and select inside a container that already draws the border.
Tests:
Use cases covered
Unit tests
CSVUtilsClassBase.test.tsx: the entity-type cell commits the picked value, and closing the list without a new pick ends the edit.nav-item.test.tsx(core): child indent per size, child icon only atlg,solidcurrent and resting item styles.button.test.tsx(core):onFocus/onBlurfire on keyboard focus in/out, andonFocusfires on the link variant. Both cases fail whenbutton.tsxis mutated to drop the handlers; file passes 36/36.LeftSidebar.test.tsx: Logout asks for confirmation on click and on Enter.AuditLogsPage,AddKPIPage,EditKPIPage,CSVUtilsClassBase,AddObservabilityPage(new notification-page cases: breadcrumb, no trigger section),AuthMechanismForm,SettingsRouter,AddTeamForm,AlertsUtil.InputandSelectborderless option.--changedSince=origin/main): 1394 suites, 17,411 tests, all passing. Core Vitest for input/select: 33 passing.Backend integration tests
Playwright (UI) tests
Updated
AuditLogs.spec.tsplus theauditLogs,dataInsightandimportUtilshelpers to drive the core pickers and options by role.fillEntityTypeDetailsno longer clicks Save, because picking a value now commits the cell.Local run on
a011e859e69, with this branch's UI (Vite) against an OSS server built from this branch (MySQL + Elasticsearch),--retries=0:Features/BulkImport.spec.ts(full spec)Features/DataQuality/FailureThreshold.spec.ts› Enum parameters (--repeat-each=3)CI: Playwright E2E run 38746348836 on
d44af08: 4888 tests, 1 failed, 1 skipped.FailureThreshold.spec.ts› Enum parameters render as sentencesmainand is not caused by this PRmain); passes 6/6 locally on this branchVisual regression run 38752219375 on
cb2144e6150: passed.Three visual baselines were refreshed from CI renders:
landing-page-sidebar-collapsedandmetric-list-desktopin47db1d21eab, andtable-details-schemaincb2144e6150.Manual testing performed
Branch UI on a local dev server against a local backend, compared with
main: the navbar search, the audit-log export modal, the KPI date fields, and the notification alert form. Screenshots below.UI screen recording:
Not applicable: component migration and a styling fix with no new feature flow. Before/after screenshots:
Branch on a local dev server against a local backend, compared with
mainatb79a00b0029(light theme; the change doesn't touch theming).Navbar search bar (classic mode)
mainNavbar search bar with natural-language search on (as in Collate)
On
main, the input and the "All" select each draw their own bordered box inside the search pill. This PR makes them borderless, so the bar matches sandbox: one bordered pill, with dividers around the ✦ toggle and the search icon.mainSign-in page, dark mode (AI mode)
The video panel now uses the
gray-modern-800token, matching Collate's#202a3c, instead ofbg-primary(#0c0e12). The form side is unchanged.Audit logs export: date range
mainKPI form: start date open
mainSettings → Notifications → Add alert
mainClassic sidebar
Measured (228px rail, Govern open)
#535862/#535862#a4a7ae/#414651#535862/#535862#f8f9fcpage bg / transparent#f8f9fcpage bg / transparent#1570efsolid#1570efsolidAI mode renders the separate
ai-shellsidebar and is unchanged: hashing every sidebar element gives the same result onmainand on this branch, in both OSS and Collate. Collate's classic mode renders this same OSSLeftSidebar, so it is fixed with no Collate change.Checklist:
The PR appears safe to merge once the documented Collate prerequisite has landed.Summary
This PR finishes replacing antd controls, shares the notification alert form, and restores the navbar search and classic sidebar styles.
Reviews (4) · Last reviewed commit: "chore(playwright): auto-refresh impact-m..." · Reviewed by Greptile