Skip to content

ENG-177: Migrate remaining Chakra toasts to Ant Design useMessage#7705

Closed
gilluminate wants to merge 6 commits intomainfrom
gill/ENG-177/migrate-chakra-toasts-to-use-message
Closed

ENG-177: Migrate remaining Chakra toasts to Ant Design useMessage#7705
gilluminate wants to merge 6 commits intomainfrom
gill/ENG-177/migrate-chakra-toasts-to-use-message

Conversation

@gilluminate
Copy link
Contributor

@gilluminate gilluminate commented Mar 19, 2026

Ticket ENG-177

Description Of Changes

Migrate all remaining useChakraToast / successToastParams / errorToastParams consumers in admin-ui to Ant Design useMessage, completing the toast unification effort (PR 4 of 4).

After this change, zero Chakra toast patterns remain in admin-ui. The privacy-center still uses useChakraToast, so the fidesui export is preserved for now.

Dependency: Stacked on #7702 (PR 3). Should be merged after #7702.

Code Changes

  • 68 source files - Replace useChakraToast as useToast with useMessage, replace toast(successToastParams(...)) / toast(errorToastParams(...)) with message.success(...) / message.error(...), remove ~/features/common/toast imports
  • clients/admin-ui/src/features/common/toast.tsx - Deleted (old toast helpers: successToastParams, errorToastParams, DEFAULT_TOAST_PARAMS, SuccessMessage, ErrorMessage)
  • clients/admin-ui/src/features/datastore-connections/system_portal_config/TestConnectionMessage.tsx - Deleted (was only used as JSX inside Chakra toast descriptions)
  • 11 Cypress test files - Replace cy.getByTestId("toast-success-msg") / cy.getByTestId("toast-error-msg") with cy.shouldShowMessage("success") / cy.shouldShowMessage("error")
  • clients/admin-ui/__tests__/.../useAssetReportingDownload.test.ts - Update mock from useChakraToast to useMessage

Edge cases handled:

  • cells.tsx - Renamed const message = useMessage() to const messageApi = useMessage() to avoid collision with existing message prop
  • SystemInformationForm.tsx - toast.closeAll()message.destroy(), warning toasts → message.warning()
  • ConnectorParameters.tsx - Kept useAPIHelper, only migrated useChakraToast usage
  • AddVendor.tsx - Preserved tooltip quoting

Steps to Confirm

  1. Run cd clients/admin-ui && npx tsc --noEmit - should pass with no errors
  2. Run cd clients/admin-ui && npm run build - should succeed
  3. Run cd clients/admin-ui && npm run dev, trigger success/error actions across the app - messages should appear top-center with consistent Ant Design styling
  4. Verify no remaining useChakraToast, successToastParams, or errorToastParams references in clients/admin-ui/src/

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:
    • No migrations
  • Documentation:
    • No documentation updates required

gilluminate and others added 6 commits March 19, 2026 10:43
…useMessage

Replace Chakra useToast with Ant Design useNotification for toasts with
action links (View, navigate) and useMessage for simple success/error
feedback. Delete unused SuccessToastContent helper. Fix deprecated `btn`
prop to `actions` across all notification calls. Inline useAPIHelper
logic for conflict-resolved files. Add shouldShowNotification Cypress helper.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…files

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace all Chakra toast patterns with Ant Design useMessage across ~68
admin-ui source files, completing the toast unification effort. Delete
the now-unused toast.tsx helpers and TestConnectionMessage component.
Update 11 Cypress test files to use shouldShowMessage helper and 1 unit
test to mock useMessage instead of useChakraToast.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Contributor

vercel bot commented Mar 19, 2026

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

2 Skipped Deployments
Project Deployment Actions Updated (UTC)
fides-plus-nightly Ignored Ignored Preview Mar 19, 2026 8:49pm
fides-privacy-center Ignored Ignored Mar 19, 2026 8:49pm

Request Review

@gilluminate gilluminate deleted the gill/ENG-177/migrate-chakra-toasts-to-use-message branch March 19, 2026 19:59
gilluminate added a commit that referenced this pull request Mar 19, 2026
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant