Skip to content

ENG-3435: Clean up antd v6 deprecated prop warnings #7936

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gilluminate merged 2 commits into from
Apr 15, 2026
Merged

ENG-3435: Clean up antd v6 deprecated prop warnings #7936

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e976109
ENG-3435: Clean up antd v6 deprecated prop warnings
gilluminate Apr 15, 2026
8251f12
add changelog for PR #7936
gilluminate Apr 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions changelog/7936-eng-3435-antd-deprecated-props.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
type: Fixed
description: Cleaned up Ant Design v6 deprecated prop warnings in the browser console across the Admin UI
pr: 7936
labels: []
4 changes: 2 additions & 2 deletions clients/admin-ui/__tests__/features/common/nav/NavSearch.collapsed.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ jest.mock("fidesui", () => {
const { prefix, suffix, allowClear, autoFocus, ...rest } = props;
return MockReact.createElement("input", { ...rest, ref });
}),
Modal: ({ open: modalOpen, children, onCancel, destroyOnClose }: any) => {
Modal: ({ open: modalOpen, children, onCancel, destroyOnHidden }: any) => {
if (!modalOpen) {
if (destroyOnClose) {
if (destroyOnHidden) {
return null;
}
return MockReact.createElement(
Expand Down
4 changes: 2 additions & 2 deletions clients/admin-ui/__tests__/features/common/nav/NavSearch.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ jest.mock("fidesui", () => {
const { prefix, suffix, allowClear, autoFocus, ...rest } = props;
return MockReact.createElement("input", { ...rest, ref });
}),
Modal: ({ open: modalOpen, children, onCancel, destroyOnClose }: any) => {
Modal: ({ open: modalOpen, children, onCancel, destroyOnHidden }: any) => {
if (!modalOpen) {
if (destroyOnClose) {
if (destroyOnHidden) {
return null;
}
return MockReact.createElement(
Expand Down
8 changes: 5 additions & 3 deletions clients/admin-ui/src/features/access-control/ViolationRateCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,11 @@ export const ViolationRateCard = () => {
precision={1}
prefix={getTrendPrefix(trend)}
suffix="% vs last mo"
valueStyle={{
color: getTrendColor(trend, token),
fontSize: token.fontSizeSM,
styles={{
content: {
color: getTrendColor(trend, token),
fontSize: token.fontSizeSM,
},
}}
/>
</Flex>
Expand Down
8 changes: 5 additions & 3 deletions clients/admin-ui/src/features/access-control/ViolationsChartCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,11 @@ export const ViolationsChartCard = () => {
precision={1}
prefix={getTrendPrefix(trend)}
suffix="% vs last mo"
valueStyle={{
color: getTrendColor(trend, token),
fontSize: token.fontSizeSM,
styles={{
content: {
color: getTrendColor(trend, token),
fontSize: token.fontSizeSM,
},
}}
/>
</Flex>
Expand Down
6 changes: 3 additions & 3 deletions clients/admin-ui/src/features/chat-provider/ChatConfigurations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const EmptyTableNotice = () => {
return (
Copy link
Copy Markdown

@claude claude bot Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<Empty
description={
<Space direction="vertical" size="small">
<Space orientation="vertical" size="small">
<Text strong>No chat providers found.</Text>
<Text type="secondary">
Click &quot;Add a chat provider&quot; to configure Slack or other
Expand Down Expand Up @@ -296,7 +296,7 @@ export const ChatConfigurations = () => {
</Button>,
]}
>
<Space direction="vertical">
<Space orientation="vertical">
<Text>
Are you sure you want to delete the Slack provider for{" "}
<strong>
Expand Down Expand Up @@ -329,7 +329,7 @@ export const ChatConfigurations = () => {
role="link"
type="primary"
icon={<Icons.Add />}
iconPosition="end"
iconPlacement="end"
data-testid="add-chat-provider-btn"
>
Add a chat provider
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/common/ScrollableList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ const ScrollableListAdd = ({
data-testid={`add-${baseTestId}`}
block
icon={<Icons.Add size={16} />}
iconPosition="end"
iconPlacement="end"
>
{label}
</Button>
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/common/custom-reports/CustomReportTemplates.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -363,7 +363,7 @@ export const CustomReportTemplates = ({
<Button
className="max-w-40"
icon={<Icons.ChevronDown size={14} />}
iconPosition="end"
iconPlacement="end"
data-testid="custom-reports-trigger"
>
<Text ellipsis>{buttonLabel}</Text>
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/common/nav/NavSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ const NavSearchExpanded = ({ groups }: { groups: NavGroup[] }) => {
onOpenChange={handleOpenChange}
defaultActiveFirstOption
className={styles.expandedAutoComplete}
popupClassName={styles.searchDropdown}
classNames={{ popup: { root: styles.searchDropdown } }}
value={searchValue}
onSearch={setSearchValue}
>
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/common/nav/NavSearchModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ const NavSearchModal = ({ groups }: NavSearchModalProps) => {
width={480}
style={{ top: "calc(33vh - 24px)" }}
className={styles.searchModal}
destroyOnClose
destroyOnHidden
afterOpenChange={(isOpen) => {
if (isOpen) {
modalInputRef.current?.focus();
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/common/system-data-flow/DataFlowAccordionForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ export const DataFlowAccordionForm = ({
type="primary"
size="small"
icon={<Icons.Settings />}
iconPosition="end"
iconPlacement="end"
className="mb-4"
data-testid="assign-systems-btn"
>
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/configure-consent/AddVendor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ const AddVendor = ({
open={isOpen}
onCancel={handleCloseModal}
centered
destroyOnClose
destroyOnHidden
title="Add a vendor"
footer={null}
>
Expand Down
4 changes: 2 additions & 2 deletions clients/admin-ui/src/features/consent-settings/tcf/CreateTCFConfigModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const CreateTCFConfigModal = ({
open={isOpen}
onCancel={onClose}
centered
destroyOnClose
destroyOnHidden
footer={null}
>
<Formik
Expand All @@ -53,7 +53,7 @@ export const CreateTCFConfigModal = ({
>
{({ isValid, dirty }) => (
<Form>
<Space direction="vertical" size="small" className="w-full">
<Space orientation="vertical" size="small" className="w-full">
<Text>
TCF configurations allow you to define unique sets of publisher
restrictions. These configurations can be added to privacy
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/consent-settings/tcf/PublisherRestrictionsConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const PublisherRestrictionsConfig = ({

return (
<SettingsBox title="Publisher restrictions" fontSize="sm">
<Space direction="vertical" size="small" style={{ width: "100%" }}>
<Space orientation="vertical" size="small" style={{ width: "100%" }}>
<TCFOverrideToggle
defaultChecked={showTcfOverrideConfig}
onChange={(checked) => setShowTcfOverrideConfig(checked)}
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/consent-settings/tcf/PurposeRestrictionFormModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ export const PurposeRestrictionFormModal = ({
}}
getIsDirty={() => formik.dirty}
centered
destroyOnClose
destroyOnHidden
title="Edit restriction"
footer={null}
>
Expand Down
4 changes: 2 additions & 2 deletions clients/admin-ui/src/features/consent-settings/tcf/TCFConfigurationDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ interface DropdownContentProps {
}

const LoadingContent = () => (
<Space direction="vertical" size="small">
<Space orientation="vertical" size="small">
<Skeleton width="100%" className="h-4" />
<Skeleton width="100%" className="h-4" />
<Skeleton width="100%" className="h-4" />
Expand Down Expand Up @@ -323,7 +323,7 @@ export const TCFConfigurationDropdown = ({
>
<Button
icon={<Icons.ChevronDown />}
iconPosition="end"
iconPlacement="end"
data-testid="tcf-config-dropdown-trigger"
>
{buttonLabel}
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/consent-settings/tcf/TCFOverrideToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export const TCFOverrideToggle = ({

return (
<>
<Space direction="vertical" size="small">
<Space orientation="vertical" size="small">
<Text>Configure overrides for TCF related purposes.</Text>
<Space size="small">
<Switch
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/data-catalog/systems/EditMinimalDataUseModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const EditMinimalDataUseModal = ({
onClose={onClose}
getIsDirty={() => formik.dirty}
centered
destroyOnClose
destroyOnHidden
footer={null}
>
<Form>
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/data-discovery-and-detection/ActionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const ActionButton = ({ title, icon, type, ...props }: ActionButtonProps) => (
type={type}
data-testid={`action-${title}`}
icon={icon}
iconPosition="start"
iconPlacement="start"
{...props}
>
{title}
Expand Down
2 changes: 1 addition & 1 deletion ...nts/admin-ui/src/features/data-discovery-and-detection/action-center/AddDataUsesModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const AddDataUsesModal = ({
open={isOpen}
onCancel={handleReset}
centered
destroyOnClose
destroyOnHidden
footer={null}
>
<Flex vertical gap={20} className="pb-6 pt-4">
Expand Down
2 changes: 1 addition & 1 deletion ...ts/admin-ui/src/features/data-discovery-and-detection/action-center/AssignSystemModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const AssignSystemModal = ({
open={isOpen}
onCancel={handleClose}
centered
destroyOnClose
destroyOnHidden
footer={null}
data-testid="add-modal-content"
>
Expand Down
2 changes: 1 addition & 1 deletion ...dmin-ui/src/features/data-discovery-and-detection/action-center/ConsentBreakdownModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export const ConsentBreakdownModal = ({
{isError ? (
<Alert
type="error"
message="Error fetching data"
title="Error fetching data"
description="Please try again later."
showIcon
/>
Expand Down
2 changes: 1 addition & 1 deletion ...tures/data-discovery-and-detection/action-center/components/InProgressMonitorTaskItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export const InProgressMonitorTaskItem = ({
<div {...props} className="w-full">
<Row gutter={12} className="w-full">
<Col span={14} className="align-middle">
<Space direction="vertical" size={4}>
<Space orientation="vertical" size={4}>
<Space align="center" size={8} wrap>
{logoSource && <ConnectionTypeLogo data={logoSource} size={24} />}
<Title level={5} className="m-0">
Expand Down
2 changes: 1 addition & 1 deletion ...ures/data-discovery-and-detection/action-center/components/InProgressMonitorTasksList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ export const InProgressMonitorTasksList = ({
open={filterPopoverOpen}
onOpenChange={setFilterPopoverOpen}
>
<Button icon={<Icons.ChevronDown />} iconPosition="end">
<Button icon={<Icons.ChevronDown />} iconPlacement="end">
Filter
</Button>
</Popover>
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/data-discovery-and-detection/action-center/fields/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -405,7 +405,7 @@ const ActionCenterFields = ({
<Button
type="primary"
icon={<Icons.ChevronDown />}
iconPosition="end"
iconPlacement="end"
loading={isFetchingAllowedActions}
>
Actions
Expand Down
4 changes: 2 additions & 2 deletions .../src/features/data-discovery-and-detection/action-center/tables/DiscoveredAssetsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ export const DiscoveredAssetsTable = ({
>
<Button
icon={<Icons.ChevronDown />}
iconPosition="end"
iconPlacement="end"
loading={anyBulkActionIsLoading}
data-testid="bulk-actions-menu"
disabled={
Expand All @@ -234,7 +234,7 @@ export const DiscoveredAssetsTable = ({
loading={isAddingAllResults}
type="primary"
icon={<Icons.Checkmark />}
iconPosition="end"
iconPlacement="end"
data-testid="add-all"
>
Add all
Expand Down
4 changes: 2 additions & 2 deletions ...ata-discovery-and-detection/action-center/tables/DiscoveredInfrastructureSystemsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export const DiscoveredInfrastructureSystemsTable = ({
<Flex vertical gap="medium" className="h-full overflow-hidden">
<Alert
showIcon
message="Fides detected the following systems"
title="Fides detected the following systems"
description="Some may not yet be in your inventory. Review each system's detected data use — approve to add it to your inventory, or ignore if it's not relevant."
closable
/>
Expand All @@ -172,7 +172,7 @@ export const DiscoveredInfrastructureSystemsTable = ({
<Button
type="primary"
icon={<Icons.ChevronDown />}
iconPosition="end"
iconPlacement="end"
disabled={!hasSelectedRows || isBulkActionInProgress}
loading={isBulkActionInProgress}
>
Expand Down
2 changes: 1 addition & 1 deletion ...ures/data-discovery-and-detection/action-center/tables/DiscoveredSystemAggregateTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export const DiscoveredSystemAggregateTable = ({
<Button
type="primary"
icon={<Icons.ChevronDown />}
iconPosition="end"
iconPlacement="end"
loading={anyBulkActionIsLoading}
disabled={!hasSelectedRows}
data-testid="bulk-actions-menu"
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/datamap/modals/ReportExportModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const ReportExportModal = ({
open={isOpen}
onCancel={onClose}
centered
destroyOnClose
destroyOnHidden
data-testid="export-modal"
footer={
<Flex gap="small" justify="flex-end">
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/datamap/reporting/DatamapReportFilterModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export const DatamapReportFilterModal = ({
open={isOpen}
onCancel={onClose}
centered
destroyOnClose
destroyOnHidden
data-testid="datamap-report-filter-modal"
footer={
<Flex gap={3} sx={{ "& button": { width: "100%" } }}>
Expand Down
6 changes: 3 additions & 3 deletions clients/admin-ui/src/features/datamap/reporting/DatamapReportTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,11 +294,11 @@ export const DatamapReportTable = ({
},
],
}}
overlayClassName="group-by-menu-list"
classNames={{ root: "group-by-menu-list" }}
Copy link
Copy Markdown

@claude claude bot Apr 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

  1. cy.get(".more-menu-list") still resolves to the dropdown overlay
  2. cy.get(".group-by-menu-list") still resolves to the dropdown overlay
  3. The header-menu-list pattern in CustomTableHeaderCell.tsx still works for the column header tests

The same applies to the classNames={{ popup: { root: ... } }} change on AutoComplete in NavSearch.tsx.

>
<Button
icon={<Icons.ChevronDown size={14} />}
iconPosition="end"
iconPlacement="end"
loading={groupChangeStarted}
data-testid="group-by-menu"
>
Expand Down Expand Up @@ -335,7 +335,7 @@ export const DatamapReportTable = ({
],
}}
placement="bottomRight"
overlayClassName="more-menu-list"
classNames={{ root: "more-menu-list" }}
>
<Button
icon={<Icons.OverflowMenuVertical />}
Expand Down
2 changes: 1 addition & 1 deletion ...min-ui/src/features/datastore-connections/system_portal_config/ConnectionListDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ const ConnectionListDropdown = ({
aria-label={selectedText ?? label}
disabled={disabled}
icon={<Icons.ChevronDown />}
iconPosition="end"
iconPlacement="end"
data-testid="select-dropdown-btn"
className="w-[272px]"
>
Expand Down
2 changes: 1 addition & 1 deletion ...tore-connections/system_portal_config/forms/fields/DatasetConfigField/YamlEditorModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const YamlEditorModal = ({
open={isOpen}
onCancel={onClose}
centered
destroyOnClose
destroyOnHidden
width={MODAL_SIZE.lg}
title={title ?? "Edit Dataset"}
footer={null}
Expand Down
2 changes: 1 addition & 1 deletion clients/admin-ui/src/features/digests/components/DigestConfigList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ const DigestConfigList = () => {
<List.Item.Meta
title={config.name}
description={
<Space direction="vertical" size={4}>
<Space orientation="vertical" size={4}>
<Space size={4}>
<Tag>{DIGEST_TYPE_LABELS[config.digest_type]}</Tag>
{config.messaging_service_type && (
Expand Down
Loading
Loading