ENG-180: Migrate Chakra UI Menu components to Ant Design Dropdown/Popover by gilluminate · Pull Request #7681 · ethyca/fides

gilluminate · 2026-03-17T19:24:52Z

Description Of Changes

Migrate all Chakra UI Menu/MenuButton/MenuList/MenuItem usage in admin-ui to Ant Design Dropdown (for action menus) and Popover (for custom content dropdowns like search/filter panels). This is part of the ongoing Chakra-to-Ant migration effort.

Key changes:

Create CustomDropdown wrapper in fidesui that defaults trigger to ["click"] (Ant defaults to hover)
Simple action menus use Dropdown with menu={{ items }} pattern
Complex content dropdowns (searchable lists, checkbox trees) use Popover with controlled open/onOpenChange state
Dead code removed: VendorSelect.tsx (278 lines, superseded by VendorSelector.tsx), ToggleDictSuggestions.tsx (84 lines, unused)
Unused fidesui components removed: ColumnDropdown, DataCategoryDropdown (admin-ui has its own copies)
Cypress tests updated to use selectAntDropdownOption and simplified selectors (no more [role="menuitem"])

30 files changed, +450 / -1135 lines (net -685 lines)

Code Changes

clients/fidesui/src/hoc/CustomDropdown.tsx - New wrapper defaulting Ant Dropdown trigger to click
clients/fidesui/src/index.ts - Export CustomDropdown as Dropdown, remove unused component exports
clients/fidesui/src/components/chakra-base/column-dropdown/ - Deleted (unused)
clients/fidesui/src/components/chakra-base/data-category-dropdown/ - Deleted (unused)
clients/fidesui/src/components/chakra-base/systems-checkbox-table/SystemsCheckboxTable.tsx - Inline ColumnMetadata type
clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourceOverflowMenu.tsx - Menu to Dropdown
clients/admin-ui/src/features/data-catalog/systems/SystemActionCell.tsx - Menu to Dropdown
clients/admin-ui/src/features/data-catalog/datasets/useCatalogDatasetColumns.tsx - Menu to Dropdown
clients/admin-ui/src/features/system/VendorSelector.tsx - CompassButton Menu to Dropdown
clients/admin-ui/src/features/system/VendorSelect.tsx - Deleted (dead code)
clients/admin-ui/src/features/system/dictionary-form/ToggleDictSuggestions.tsx - Deleted (unused)
clients/admin-ui/src/features/common/custom-reports/CustomReportTemplates.tsx - Chakra icon to Carbon icon
clients/admin-ui/src/features/datamap/reporting/DatamapReportTable.tsx - Group-by menu and More menu to Dropdown
clients/admin-ui/src/features/datastore-connections/DeleteConnectionModal.tsx - Remove dead MenuItem code path
clients/admin-ui/src/features/datastore-connections/DisableConnectionModal.tsx - Remove dead MenuItem code path
clients/admin-ui/src/features/dataset/DataCategoryDropdown.tsx - Menu to Popover
clients/admin-ui/src/features/common/ColumnDropdown.tsx - Menu to Popover
clients/admin-ui/src/features/datastore-connections/system_portal_config/ConnectionListDropdown.tsx - Menu to Popover
clients/admin-ui/cypress/e2e/data-catalog.cy.ts - Update selectors for Dropdown
clients/admin-ui/cypress/e2e/datamap-report.cy.ts - Update selectors for Dropdown
clients/admin-ui/cypress/e2e/system-integrations.cy.ts - Update selectors for Popover
clients/admin-ui/cypress/e2e/system-integrations-plus.cy.ts - Update selectors for Popover
clients/admin-ui/cypress/support/ant-support.ts - Add getAntDropdownOverlay helper

Steps to Confirm

Navigate to Data Map > Report. Verify "Group by" dropdown opens on click, shows check icon next to selected option, and switches grouping. Verify "More" menu opens and "Edit columns"/"Rename columns" work.
Navigate to Data Inventory > Systems. Click a system row's overflow menu (three dots). Verify "View details" opens the detail drawer.
Navigate to a system's Integrations tab. Verify the connection type dropdown opens, search works, and selecting an integration populates the form.
Navigate to a system's Integrations tab with an existing integration. Verify the "Data categories" dropdown opens with checkbox tree, Clear/Done buttons work.
Navigate to Data Map > Report. Click "More" > "Edit columns". Verify the column dropdown opens with checkboxes, Clear/Done buttons work.

Pre-Merge Checklist

vercel · 2026-03-17T19:24:58Z

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

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	Mar 18, 2026 3:57pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		Mar 18, 2026 3:57pm

greptile-apps · 2026-03-17T20:38:51Z

Greptile Summary

This PR completes the migration of all Chakra UI Menu/MenuButton/MenuList/MenuItem usages in admin-ui to Ant Design Dropdown (for simple action menus) and Popover (for complex content dropdowns like search panels and checkbox trees). It also removes dead code — VendorSelect.tsx, ToggleDictSuggestions.tsx, and the fidesui ColumnDropdown/DataCategoryDropdown chakra-base components — resulting in a net removal of ~685 lines.

Note: This PR changes 32 files, which exceeds the project policy of a maximum of 15 files per PR (rule 32b2f192). The large footprint is understandable given the breadth of the Chakra-to-Ant migration, but it may warrant splitting in future migration PRs.

Key changes and issues found:

autoFocus regression in ConnectionListDropdown — Ant Design Popover lazy-renders content on first open and keeps it mounted afterward. The autoFocus attribute on the search Input will only trigger on the very first open; on subsequent reopens users must manually click the search field. Using afterOpenChange to programmatically focus the inputRef would restore the previous behavior.
Hardcoded hex color in ConnectionListDropdown — !text-[#2b2e35] bypasses the theme token system; a theme alias or existing color token should be used.
Box with display="flex" in ColumnDropdown and DataCategoryDropdown — These should use the Flex component per the project's semantic-HTML convention (rule ecc7d51f).
Unused data-testid span in DatamapReportTable — The <span data-testid="edit-columns-btn"> wrapper around the "Edit columns" label is leftover now that all tests use selectAntDropdownOption; it's inconsistent with the plain-string "Rename columns" label.
Dead code removal (VendorSelect.tsx, ToggleDictSuggestions.tsx) and simplification of DeleteConnectionModal/DisableConnectionModal props is clean and well-executed.
Cypress test updates correctly replace [role="menuitem"] selectors with selectAntDropdownOption and the new dropdown-item-{identifier} test IDs.

Confidence Score: 3/5

Mostly safe to merge, but the autoFocus regression in ConnectionListDropdown degrades UX on subsequent opens of the integration search dropdown.
The migration is logically consistent and the dead code removal is clean. The main concern is a genuine usability regression in ConnectionListDropdown where the search input won't auto-focus after the first open due to Ant Design Popover's keep-mounted behavior. There is also a hardcoded hex color and some minor semantic HTML inconsistencies. The PR exceeds the 15-file policy limit at 32 files changed.
clients/admin-ui/src/features/datastore-connections/system_portal_config/ConnectionListDropdown.tsx (autoFocus regression + hardcoded color)

Important Files Changed

Filename	Overview
clients/fidesui/src/hoc/CustomDropdown.tsx	New wrapper component that defaults Ant Design Dropdown trigger to `["click"]`; clean and straightforward.
clients/fidesui/src/index.ts	Replaces direct Ant `Dropdown` export with `CustomDropdown as Dropdown` and removes unused `ColumnDropdown`/`DataCategoryDropdown` exports.
clients/admin-ui/src/features/datastore-connections/system_portal_config/ConnectionListDropdown.tsx	Migrated from Chakra Menu to Ant Design Popover; has hardcoded hex color and an autoFocus regression where the search input won't auto-focus on subsequent reopens due to Popover not remounting content.
clients/admin-ui/src/features/common/ColumnDropdown.tsx	Migrated from Chakra Menu to Ant Design Popover with controlled open state; minor div-as-flex-container usage.
clients/admin-ui/src/features/dataset/DataCategoryDropdown.tsx	Migrated from Chakra Menu to Ant Design Popover with controlled open state; minor div-as-flex-container usage.
clients/admin-ui/src/features/datamap/reporting/DatamapReportTable.tsx	Group-by and More menus migrated to Dropdown with check icon pattern for selected state; edit-columns-btn data-testid is kept inside a span label wrapper which is now unused by tests.
clients/admin-ui/src/features/datastore-connections/DeleteConnectionModal.tsx	Removed `showMenu` prop and MenuItem rendering path; always renders the Delete button and always navigates on deletion, consistent with the only remaining call site in IntegrationBox.
clients/admin-ui/src/features/datastore-connections/DisableConnectionModal.tsx	Removed `isSwitch` prop and MenuItem code path; now always renders the Switch UI, consistent with the only remaining call site which previously passed `isSwitch={true}`.
clients/admin-ui/src/features/system/VendorSelector.tsx	CompassButton migrated from Chakra Menu/IconButton to Ant Design Dropdown/Button; clean migration.
clients/admin-ui/src/features/data-catalog/staged-resources/CatalogResourceOverflowMenu.tsx	Migrated from Chakra Menu to Ant Design Dropdown; items built conditionally with useMemo; clean.
clients/admin-ui/cypress/e2e/datamap-report.cy.ts	Test selectors updated from Chakra menu data-testids to selectAntDropdownOption helper; consistent updates throughout.
clients/admin-ui/cypress/support/stubs.ts	URL intercept for minimal datasets changed from exact match to glob pattern (`?*minimal=true`) to accommodate query-string parameter ordering differences.

Comments Outside Diff (1)

clients/admin-ui/src/features/datamap/reporting/DatamapReportTable.tsx, line 854-857 (link)

Unnecessary span wrapper in Dropdown label

The Cypress tests that referenced the edit-columns-btn test-ID have been updated to use selectAntDropdownOption, making the <span data-testid="edit-columns-btn"> wrapper dead markup. It also creates an inconsistency with the "Rename columns" item which uses a plain string label. Consider simplifying the label to a plain "Edit columns" string to match the other items in this Dropdown.

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

_{Last reviewed commit: 5232499}

.../admin-ui/src/features/datastore-connections/system_portal_config/ConnectionListDropdown.tsx

clients/admin-ui/src/features/common/ColumnDropdown.tsx

.../admin-ui/src/features/datastore-connections/system_portal_config/ConnectionListDropdown.tsx

kruulik · 2026-03-18T14:56:16Z

clients/fidesui/src/hoc/CustomDropdown.tsx

+import type { DropdownProps } from "antd/lib";
+import { Dropdown as AntDropdown } from "antd/lib";
+
+const CustomDropdownBase = ({


May want to add a generic story for a new HOC.

There's already a Dropdown.stories.tsx in components/navigation/ that imports Dropdown from the fidesui barrel export, which now points to CustomDropdown. So the existing story already covers this HOC.

Replace Chakra Menu usage with Ant Design Dropdown in catalog overflow menus (datasets, staged resources, systems) and VendorSelector compass button. Introduce CustomDropdown wrapper in fidesui that re-exports Ant Dropdown with custom content support. Remove unused VendorSelect.tsx and ToggleDictSuggestions.tsx. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Migrate group-by and more-options Chakra Menu components to Ant Dropdown in DatamapReportTable. Also update Phase 1 dropdown items and Cypress tests to use selectAntDropdownOption instead of data-testid spans. - Replace Chakra Menu imports with Dropdown, CheckOutlined, Icons - Group-by menu: items array with CheckOutlined visibility toggle - More menu: items array with bottomRight placement - Add getAntDropdownOverlay Cypress command for portal overlays - Update all Cypress tests to use selectAntDropdownOption - Remove unnecessary data-testid spans from dropdown item labels - Swap ChakraChevronDownIcon to Icons.ChevronDown in CustomReportTemplates Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

DeleteConnectionModal and DisableConnectionModal had unused MenuItem branches that no consumer exercised. Remove them along with the showMenu and isSwitch props. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace Chakra Menu with Ant Popover for DataCategoryDropdown, ColumnDropdown, and ConnectionListDropdown. Update Cypress tests to remove [role="menuitem"] selectors that no longer apply. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

These Chakra-based components in fidesui were superseded by the admin-ui versions migrated to Ant Design in the previous commit. Inline the ColumnMetadata type into SystemsCheckboxTable to fix the broken import from the deleted column-dropdown directory. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace autoFocus with afterOpenChange on the Popover to programmatically focus the search input on every open, not just the first (Ant Design keeps popover content mounted after first open, so autoFocus only fires once). Also remove unused className overrides on the trigger Button. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…tal_config/ConnectionListDropdown.tsx Co-authored-by: Karolis Krulis <karolis@ethyca.com>

kruulik

Looks good!

vercel bot deployed to Preview – fides-plus-nightly March 17, 2026 20:26 View deployment

gilluminate marked this pull request as ready for review March 17, 2026 20:33

gilluminate requested a review from a team as a code owner March 17, 2026 20:33

gilluminate requested review from jpople and removed request for a team March 17, 2026 20:33

greptile-apps bot reviewed Mar 17, 2026

View reviewed changes

vercel bot deployed to Preview – fides-plus-nightly March 17, 2026 21:18 View deployment

vercel bot deployed to Preview – fides-plus-nightly March 17, 2026 23:02 View deployment

vercel bot deployed to Preview – fides-plus-nightly March 17, 2026 23:31 View deployment

kruulik reviewed Mar 18, 2026

View reviewed changes

vercel bot deployed to Preview – fides-plus-nightly March 18, 2026 15:16 View deployment

gilluminate and others added 12 commits March 18, 2026 09:50

Fix CRLF line endings and prettier formatting

1705cc1

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Remove dead ChakraMenuItem code from connection modals (Phase 3)

f0b3983

DeleteConnectionModal and DisableConnectionModal had unused MenuItem branches that no consumer exercised. Remove them along with the showMenu and isSwitch props. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

PR review clean up

89d73ea

Add changelog entry for ENG-180

32632e8

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

fix cypress tests

9adb597

Update datamap-report.cy.ts

59395a8

Update clients/admin-ui/src/features/datastore-connections/system_por…

90aa6a1

…tal_config/ConnectionListDropdown.tsx Co-authored-by: Karolis Krulis <karolis@ethyca.com>

gilluminate force-pushed the gill/ENG-180/migrate-popup-menu-to-ant-dropdown branch from 546bda1 to 90aa6a1 Compare March 18, 2026 15:52

vercel bot deployed to Preview – fides-plus-nightly March 18, 2026 15:57 View deployment

kruulik approved these changes Mar 18, 2026

View reviewed changes

gilluminate added this pull request to the merge queue Mar 18, 2026

Merged via the queue into main with commit abc4d13 Mar 18, 2026
48 of 49 checks passed

gilluminate deleted the gill/ENG-180/migrate-popup-menu-to-ant-dropdown branch March 18, 2026 16:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ENG-180: Migrate Chakra UI Menu components to Ant Design Dropdown/Popover#7681

ENG-180: Migrate Chakra UI Menu components to Ant Design Dropdown/Popover#7681
gilluminate merged 12 commits intomainfrom
gill/ENG-180/migrate-popup-menu-to-ant-dropdown

gilluminate commented Mar 17, 2026 •

edited by atlassian bot

Loading

Uh oh!

vercel bot commented Mar 17, 2026 •

edited

Loading

Uh oh!

greptile-apps bot commented Mar 17, 2026 •

edited

Loading

Comments Outside Diff (1)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kruulik Mar 18, 2026

Uh oh!

gilluminate Mar 18, 2026

Uh oh!

kruulik left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

gilluminate commented Mar 17, 2026 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

Uh oh!

vercel bot commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 3/5

Important Files Changed

Comments Outside Diff (1)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kruulik Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

gilluminate Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

kruulik left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

gilluminate commented Mar 17, 2026 •

edited by atlassian bot

Loading

vercel bot commented Mar 17, 2026 •

edited

Loading

greptile-apps bot commented Mar 17, 2026 •

edited

Loading