Skip to content

Migrate tabs to Ant Design #6260

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

Jump to bottom
Merged
merged 37 commits into from
Jul 9, 2025
Merged

Migrate tabs to Ant Design #6260

merged 37 commits into from
Jul 9, 2025

Conversation

jpople
Copy link
Contributor

@jpople jpople commented Jun 23, 2025

Closes ENG-158

Description Of Changes

Migrates all Chakra tabs in the admin UI to Ant Design's Tabs component, and implements a reusable hook to handle hashing tab URLs.

Steps to Confirm

  1. General regression (especially around URL hashing)

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
  • 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 Vercel
Copy link

vercel bot commented Jun 23, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments
Name Status Preview Comments Updated (UTC)
fides-plus-nightly ⬜️ Ignored (Inspect) Visit Preview Jul 9, 2025 6:54pm
fides-privacy-center ⬜️ Ignored (Inspect) Jul 9, 2025 6:54pm

lucanovera
lucanovera requested changes Jul 1, 2025
View reviewed changes
Copy link
Contributor

@lucanovera lucanovera left a comment

Choose a reason for hiding this comment

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

Nice work on this migration! One detail: if you reload the page in the action center, it doesn't go back to the active tab even if it has the hash in the url.
Also, the tabs within the Privacy Request Details page don't have this functionality, but I happen to be working on that page so I can implement it to prevent conflicts.

jpople
jpople commented Jul 1, 2025
View reviewed changes
clients/admin-ui/cypress/support/ant-support.ts
@@ -52,10 +59,12 @@ Cypress.Commands.add("getAntSelectOption", (option: string | number) =>
typeof option === "string"
? cy.get(
`.ant-select-dropdown:not(.ant-select-dropdown-hidden) .ant-select-item-option[title="${option}"]`,
{ withinSubject: null },
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Another Ant select fix: {withinSubject: null} forces the query to search the whole document; without this, you can't use these commands inside a within block because Ant's select menu renders outside the normal document flow.

@jpople
Copy link
Contributor Author

jpople commented Jul 1, 2025

@lucanovera Thanks for catching that, I've updated to fix the action center tabs and fixed the remaining test failures.

lucanovera
lucanovera approved these changes Jul 2, 2025
View reviewed changes
Copy link
Contributor

@lucanovera lucanovera left a comment

Choose a reason for hiding this comment

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

Confirmed action center tabs were fixed, everything working as expected. Approved!

@jpople jpople merged commit 0b2a640 into main Jul 9, 2025
20 checks passed
@jpople jpople deleted the jpople/eng-158/tab-migration branch July 9, 2025 19:46
@cypress Cypress
Copy link

cypress bot commented Jul 9, 2025

fides    Run #13096

Run Properties:  status check failed Failed #13096  •  git commit 0b2a640adc: Migrate tabs to Ant Design (#6260)
Project fides
Branch Review main
Run status status check failed Failed #13096
Run duration 01m 50s
Commit git commit 0b2a640adc: Migrate tabs to Ant Design (#6260)
Committer jpople
View all properties for this run ↗︎
Test results
Tests that failed  Failures 2
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 0
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 3
View all changes introduced in this branch ↗︎

Tests for review

Failed  cypress/e2e/smoke_test.cy.ts • 2 failed tests

View Output Video

Test Artifacts
Smoke test > can access Mongo and Postgres connectors from the Admin UI > can access Postgres connectors from the Admin UI Screenshots Video
Smoke test > can access Mongo and Postgres connectors from the Admin UI > can access Mongo connectors from the Admin UI Screenshots Video

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@lucanovera lucanovera lucanovera approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@jpople @lucanovera