ENG-3435: Clean up antd v6 deprecated prop warnings#7936
Conversation
Mechanical rename of deprecated antd v6 props and a few small structural changes so the browser console is quiet on page load. - Wrappers: CustomDrawer width→size, CustomStatistic valueStyle→styles.content, CustomTableHeaderCell overlayClassName→classNames.root - Button iconPosition→iconPlacement - Modal/Drawer destroyOnClose→destroyOnHidden - Space/Steps direction→orientation - Alert message→title - AutoComplete popupClassName→classNames.popup.root - Dropdown overlayClassName→classNames.root - Statistic valueStyle→styles.content at call sites - InputNumber/Input addonAfter/addonBefore→suffix/prefix for simple labels - Steps items.description→items.content (Step type + hook implementations) - Dropdown.Button rewritten as Space.Compact + Button + Dropdown Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. 2 Skipped Deployments
|
|
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review: ENG-3435 — Ant Design v6 deprecated prop cleanup
This is a broad mechanical cleanup across ~100 files. The bulk of the changes (iconPosition → iconPlacement, destroyOnClose → destroyOnHidden, valueStyle → styles.content, Alert.message → Alert.title, popupClassName → classNames.popup) are correct, well-scoped migrations. A few specific changes need attention before merging.
Issues
1. addonBefore/addonAfter → prefix/suffix — visual regression
These are not equivalent props. addonBefore/addonAfter render a bordered box outside the input (the standard "input group" pattern for unit labels and fixed namespace prefixes). prefix/suffix render content inside the input's padding area, overlapping the text zone.
Affected locations:
PrivacyRequestFieldPicker.tsx:addonBefore="privacy_request.identity."→prefix— the static namespace now looks like typed text inside the fieldTestDatastoreMonitor.tsxandTestWebsiteMonitor.tsx(4 instances):addonAfter="%"→suffix— the "%" unit label now floats inside the number input
If antd v6 still emits the deprecation warning for these specific usages, the correct fix is Space.Compact + a separate bordered element, not prefix/suffix. See inline comments for details.
2. Space direction → orientation — unverified prop name
orientation is not documented as a Space prop in antd v6. The Space component uses direction in both v5 and v6; orientation is a Divider/Steps prop. If this is wrong, ~40 vertical stack layouts will silently revert to horizontal with no TypeScript error (since Space accepts arbitrary extra props that flow to the DOM). Please verify against the antd v6.3.x SpaceProps type before merging.
3. overlayClassName → classNames.root — Cypress test impact unverified
Several Cypress tests in datamap-report.cy.ts rely on CSS class selectors (.more-menu-list, .group-by-menu-list, .<column>-header-menu-list) that were set via overlayClassName. classNames.root may attach the class to a different DOM node in antd v6's RC-trigger implementation. Please verify these selectors still resolve to the correct overlay element in a browser run.
4. data-testid moved to non-interactive Space.Compact wrapper
In SubmitPrivacyRequest.tsx, data-testid="submit-request-btn" moved from the Dropdown.Button element to the Space.Compact <div> wrapper. Any test clicking [data-testid="submit-request-btn"] directly will now click a non-interactive container. See inline comment.
Positive notes
iconPosition→iconPlacementacross all Button usages: correct and complete.destroyOnClose→destroyOnHiddenon Modal: correct, and test mocks updated to match.valueStyle→styles.contenton Statistic: correct antd v6 migration.Alert message→title: correct per antd v6 API.CustomDrawersize/width simplification is cleaner and behaviorally equivalent.- The
aria-labeladded to the chevron button inSubmitPrivacyRequest.tsxis a good accessibility improvement. Steps direction→orientation: correct forStepsin antd v6.
🔬 Codegraph: connected (46727 nodes)
💡 Write /code-review in a comment to re-run this review.
| {showManualKeyInput && ( | ||
| <Input | ||
| addonBefore="privacy_request.identity." | ||
| prefix="privacy_request.identity." |
There was a problem hiding this comment.
clients/admin-ui/src/features/integrations/configure-tasks/components/PrivacyRequestFieldPicker.tsx:231
addonBefore and prefix are not visually equivalent for Input:
addonBeforerenders a bordered box attached outside the input (.ant-input-group-wrapper), visually separated by a border. It's clear the static label is structural, not typed text.prefixrenders the text inside the input's padding area, overlapping the text zone — it looks like typed content, not a fixed label.
For this use case ("privacy_request.identity." as a read-only namespace prefix), addonBefore is the correct semantic treatment. The regression is subtle but real: users may have difficulty distinguishing the static namespace from their typed value.
If antd v6 still fires a deprecation warning for addonBefore on Input, the correct fix is to replicate the behavior with Space.Compact + a disabled Input span, not to substitute prefix.
| step={5} | ||
| addonAfter="%" | ||
| suffix="%" | ||
| className="w-full" |
There was a problem hiding this comment.
clients/admin-ui/src/features/test-monitors/TestDatastoreMonitor.tsx:187
addonAfter and suffix are visually different for InputNumber:
addonAfter="%"places "%" in a separate bordered box to the right of the number field — a standard pattern for unit labels.suffix="%"places "%" as an inline overlay inside the input's right padding — the character floats inside the field and can overlap typed digits at certain widths.
This is a visible regression for percentage inputs. Same concern applies to the three equivalent changes in TestWebsiteMonitor.tsx. If antd v6 fires the deprecation warning for addonAfter on InputNumber, the correct fix is Space.Compact with a separate <span> or Input addon, not suffix.
| @@ -43,7 +43,7 @@ const EmptyTableNotice = () => { | |||
| return ( | |||
There was a problem hiding this comment.
clients/admin-ui/src/features/chat-provider/ChatConfigurations.tsx:43
orientation is not a prop on antd v6's Space component. The Space component uses direction in antd v5 and v6 — orientation is a prop on Divider and Steps, not Space.
If Space does not accept orientation, the layout will silently revert to horizontal (the default), breaking all vertical stacked layouts. This affects ~40 files in this PR.
Please verify against the antd v6.x SpaceProps type definition before merging. If direction is still valid on Space in v6 (with or without a deprecation warning), these changes are incorrect and should be reverted.
| ], | ||
| }} | ||
| overlayClassName="group-by-menu-list" | ||
| classNames={{ root: "group-by-menu-list" }} |
There was a problem hiding this comment.
clients/admin-ui/src/features/datamap/reporting/DatamapReportTable.tsx:297
overlayClassName applied the class directly to the dropdown popup container div. classNames.root in antd v6 targets the "root" semantic element, which in some RC-trigger-based components is the wrapper element rather than the popup itself.
The Cypress helper getAntDropdownOverlay (and several tests in datamap-report.cy.ts) query .more-menu-list, .group-by-menu-list, and .<columnKey>-header-menu-list by CSS class. If antd v6's classNames.root attaches the class to a different DOM node than overlayClassName did, these selectors will resolve the wrong element and the tests may pass incorrect assertions or fail.
Please verify in a running browser instance that:
cy.get(".more-menu-list")still resolves to the dropdown overlaycy.get(".group-by-menu-list")still resolves to the dropdown overlay- The
header-menu-listpattern inCustomTableHeaderCell.tsxstill works for the column header tests
The same applies to the classNames={{ popup: { root: ... } }} change on AutoComplete in NavSearch.tsx.
| > | ||
| Create request | ||
| </Dropdown.Button> | ||
| <Space.Compact data-testid="submit-request-btn"> |
There was a problem hiding this comment.
clients/admin-ui/src/features/privacy-requests/SubmitPrivacyRequest.tsx:143
data-testid="submit-request-btn" moved from the Dropdown.Button (a <button> element) to the Space.Compact wrapper (a <div>). This is a non-interactive element.
Any test that does:
cy.get('[data-testid="submit-request-btn"]').click()will now click the container div rather than the "Create request" primary button, which may not trigger the expected handler. Tests that do .find('button').click() or .find('[type="primary"]') within the testid will still work.
Please verify that no Cypress or unit test relies on clicking [data-testid="submit-request-btn"] directly, or update those tests to use a more specific selector like [aria-label="More privacy request options"] for the chevron and a new testid on the primary button.
2 participants
Ticket ENG-3435
Description Of Changes
After the Admin UI migration to Ant Design v6, the browser console was spewing deprecation warnings on page load. This PR is a mechanical cleanup of those warnings so the console is quiet again -- easier to spot real errors in development and less noise in QA.
Scope was agreed with the reporter to be antd-only. The non-antd console warnings called out in the ticket (
includeCountryOnlyOptionsleaking to DOM,<button>nesting,Form.Itemlayout-only usage, React 19element.refaccess) need live browser inspection to trace and are deferred to a follow-up ticket.Most of the work is absorbed by three shared wrappers in
fidesui, so call-sites ofDrawer,Statistic, andCustomTableHeaderCelldidn't all need hand-editing.Code Changes
Wrappers (
clients/fidesui/src/hoc/)CustomDrawer.tsx: forward the deprecatedwidthprop intosize(which accepts numeric/string pixel widths in v6).CustomStatistic.tsx: migrate fromvalueStyletostyles.content, merging user-provided overrides.CustomTableHeaderCell.tsx: useclassNames.rootinstead ofoverlayClassNameon the inner Dropdown.Prop renames across ~90 admin-ui files
ButtoniconPositiontoiconPlacement(29 files)Modal/DrawerdestroyOnClosetodestroyOnHidden(21 prod + 2 test mocks)Space/StepsdirectiontoorientationAlertmessagetotitleAutoCompletepopupClassNametoclassNames.popup.rootDropdownoverlayClassNametoclassNames.rootStatisticvalueStyletostyles.contentat 5 call sitesInputNumber/InputaddonAfter/addonBeforetosuffix/prefixfor simple unit/prefix labelsStructural
Stepinterfacedescriptionfield tocontent(infeatures/integrations/setup-steps/hooks/types.ts) plus update of all six hooks that populate it.Dropdown.Buttonrewritten asSpace.Compact + Button + Dropdowninfeatures/privacy-requests/SubmitPrivacyRequest.tsx.data-testid="submit-request-btn"preserved on the wrapper.Steps to Confirm
cd clients/admin-ui && npm run dev, log in (root_user/Testpassword1!).<Steps>with items + vertical orientation)includeCountryOnlyOptions, that's deferred)[antd: Input] addonBefore,[antd: List] List is deprecated, and the 4 non-antd warnings called out in the ticket.Pre-Merge Checklist
CHANGELOG.mdupdatedelement.ref,includeCountryOnlyOptionsDOM leak, Form.Item layout-only) deferred to a new ticket.maindowngrade()migration is correct and works