Upgrade to ant v6

[lucanovera]

Ticket ENG-2996

Description Of Changes

Upgrades Ant Design from v5 to v6 across the fidesui and admin-ui packages. This is primarily a technical upgrade — most component APIs remain compatible, but v6 has a few breaking changes and deprecated props that have been addressed.

Key changes:

• CSS variables are now always on by default in v6 (removed the now-invalid cssVar: true from our theme config)
• Tag default variant flipped — v6 defaults Tag to variant="filled" (no border) instead of the v5 bordered default. Fixed in CustomTag HOC to default to variant="outlined" to preserve existing appearance, while brand-color tags that intentionally had no border continue to use "filled"
• Modal overlay blur is now enabled by default — left intentionally as the new default

All deprecated prop usages have been migrated to their v6 equivalents (see Code Changes).

Code Changes

• clients/fidesui/package.json — bump antd to ^6
• clients/admin-ui/jest.setup.ts — Added imports for new stubs that are needed in ant v6
• clients/fidesui/src/ant-theme/default-theme.ts / dark-theme.ts — remove cssVar: true (now always-on in v6, boolean form removed from types)
• clients/fidesui/src/hoc/CustomTag.tsx — replace deprecated bordered prop with variant, defaulting to "outlined" to preserve v5 appearance
• clients/fidesui/src/hoc/CustomTable.tsx — bordered remains valid on Table in v6; no change needed
• clients/fidesui/src/components/feedback/Notification.stories.tsx — duration: null → false (null no longer accepted)
• clients/fidesui/src/components/data-display/Table.stories.tsx + Spin, PageSpinner, CustomAvatar, CustomSelect stories — SizeType now includes "medium" and "middle" variants; updated exhaustive Record maps
• clients/admin-ui/src/features/privacy-assessments/AssessmentSettingsModal.tsx — destroyOnClose → destroyOnHidden; onDropdownVisibleChange → onOpenChange
• clients/admin-ui/src/features/privacy-assessments/RequestInputModal.tsx — destroyOnClose → destroyOnHidden
• clients/admin-ui/src/features/policies/conditions/AddEditPolicyConditionModal.tsx — destroyOnClose → destroyOnHidden
• clients/admin-ui/src/features/digests/components/TestEmailModal.tsx — destroyOnClose → destroyOnHidden
• clients/admin-ui/src/features/integrations/add-integration/AddIntegrationModal.tsx — styles.content → styles.wrapper (content removed from ModalStylesType in v6)
• clients/admin-ui/src/features/privacy-requests/PrivacyRequestActionsDropdown.tsx, consent/reporting/index.tsx, ActionButtons.tsx, AccountDropdownMenu.tsx, TCFConfigurationDropdown.tsx — overlayStyle → styles={{ root: ... }}
• clients/admin-ui/src/features/data-discovery-and-detection/action-center/tables/DiscoveredAssetsTable.tsx — overlayClassName → classNames={{ root: ... }}
• clients/admin-ui/src/features/consent-settings/tcf/TCFConfigurationDropdown.tsx — dropdownRender → popupRender
• clients/admin-ui/src/features/privacy-requests/events-and-logs/ActivityTimeline.tsx — remove redundant bordered={false} on List (false is the default)
• clients/admin-ui/src/features/privacy-requests/dashboard/list-item/components/DaysLeft.tsx, MonitorFieldListItem.tsx — bordered={false} → variant="filled" on Tag
• clients/admin-ui/src/features/privacy-requests/SubmitPrivacyRequest.tsx — replace removed Dropdown.Button with Space.Compact + Button + Dropdown
• clients/admin-ui/src/features/common/nav/MainSideNav.tsx — popupClassName per-item prop is still valid on SubMenuType; no change needed
• clients/admin-ui/src/pages/poc/form-experiments/FormikAntFormItem.tsx, FormikControlled.tsx — DatePicker onChange now types date as nullable; add optional chaining

Steps to Confirm

Preview link: https://fides-plus-nightly-git-upgrade-to-ant-v6-ethyca.vercel.app/

1. Verify the overall UI color palette looks correct (primary dark/minos color, success green, error red)
2. Check Tag borders across the app — status tags on /privacy-requests, monitor status tags on /integrations, data use tags in system declarations. All should have a visible border except intentionally filled ones (the "days left" countdown tag and diff-status tags in Action Center field rows)
3. Open the Add Integration modal (/integrations → Add integration) — verify it is ~700px tall, the list scrolls internally, and the footer stays pinned
4. Open and close these modals, partially fill fields, close, reopen — verify forms reset cleanly: Assessment Settings, Run Assessment, Add/Edit Policy Condition, Send Test Email
5. On /privacy-requests, verify the "Create request" split button: left button opens the modal, right chevron shows "Create request link", both buttons are visually joined and primary-styled
6. Check the 5 dropdowns for correct sizing: Account menu (200px), Consent Reporting menu (220px), Privacy request row actions (min 160px), Manual task overflow (min 120px), TCF Configuration dropdown
7. Open any Drawer (Evidence Drawer, Log Drawer, Data Catalog detail drawers, Datamap Drawer) and verify the close button is on the right side
8. Check that form labels are bold and read-only inputs have a gray background (visible in system detail forms)
9. Collapse the left nav sidebar, hover a nav group — verify the flyout submenu has correct dark styling

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • Ensure that your downrev is up to date with the latest revision on main
  • Ensure that your downgrade() migration is correct and works
    • If a downgrade migration is not possible for this change, please call this out in the PR description!
  • No migrations
• Documentation:
  • Documentation complete, PR opened in fidesdocs
  • Documentation issue created in fidesdocs
  • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
  • No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ignored	Preview	Mar 19, 2026 5:28pm
fides-privacy-center	Ignored		Mar 19, 2026 5:28pm

[greptile-apps]

Greptile Summary

This PR upgrades Ant Design from v5 to v6 across the fidesui and admin-ui packages. The migration is thorough and well-documented, addressing all known v6 breaking changes: CSS variable handling, Tag border defaults, deprecated prop renames (destroyOnClose → destroyOnHidden, overlayStyle → styles.root, dropdownRender → popupRender, bordered → variant), and the removal of Dropdown.Button. New jsdom polyfills for MessageChannel and ResizeObserver are correctly added for antd v6's test requirements.

• The replacement of Dropdown.Button with Space.Compact + Button + Dropdown in SubmitPrivacyRequest.tsx is missing trigger={["click"]} on the chevron Dropdown, causing it to default to hover-to-open instead of click-to-open — a subtle UX regression from the original behavior.
• This PR touches 38 files, exceeding the 15-file limit from the team's PR size policy. The bulk of the change is the auto-generated package-lock.json; the hand-authored code changes span ~37 files and are individually small (1–5 lines each), but the policy is still technically violated.

Confidence Score: 4/5

• Safe to merge with one minor UX concern in the split-button replacement.
• The v5→v6 migration is comprehensive and well-structured. All known breaking changes are addressed, the new jsdom stubs are correct, and the deprecated prop migrations are accurate. The only substantive concern is a missing trigger={["click"]} on the chevron Dropdown in SubmitPrivacyRequest.tsx, which changes the UX from click-to-open to hover-to-open. This is minor and easily fixable, but warrants review before merging.
• clients/admin-ui/src/features/privacy-requests/SubmitPrivacyRequest.tsx — verify dropdown trigger behavior manually.

Important Files Changed

Filename	Overview
clients/fidesui/src/hoc/CustomTag.tsx	Replaces deprecated bordered prop with variant, correctly applying "outlined" for normal/non-brand tags and "filled" for brand-colored tags that previously opted out of borders.
clients/fidesui/src/hoc/CustomCard.tsx	Guards against non-object styles prop before spreading it, preventing runtime errors if a function is passed.
clients/admin-ui/src/features/privacy-requests/SubmitPrivacyRequest.tsx	Replaces removed Dropdown.Button with Space.Compact + Button + Dropdown. The chevron Dropdown is missing an explicit trigger prop, causing it to default to hover instead of click behavior.
clients/admin-ui/src/features/integrations/add-integration/AddIntegrationModal.tsx	Migrates from removed styles.content to styles.body for the 700px height constraint and updates to destroyOnHidden. The layout flex chain remains intact.
clients/admin-ui/tests/utils/message-channel-mock.ts	New file providing a functional MessageChannel stub for jsdom. Correctly handles async message delivery and two-way port linking.
clients/admin-ui/tests/utils/resize-observer-mock.ts	New file providing a no-op ResizeObserver mock for jsdom, needed by antd v6 popup positioning and virtual scrolling internals.
clients/fidesui/src/index.ts	Updates DisplayValueType import from rc-select (removed) to @rc-component/select (the v6 replacement package).

_{Last reviewed commit: "update cy test"}

[gilluminate]

does this replace middle, or is there a middle and a medium now?

[lucanovera]

yes it's the replacement 🥳
found this in the docs: middle is deprecated and will be removed in v7, please use medium instead.

For typechecking purposes we'll still have middle option, but any use will trigger a console warning for deprecation.

[gilluminate]

Cool! We might as well just update those as possible in our code already and remove middle from stories.

[lucanovera]

Yes, might as well do it now. I've updated the types to remove the middle option from storybook and changed all the middle values to medium in our code :)

[gilluminate]

Ship it!