Experience Preview Enhancements

[gilluminate]

Closes LJ-681 & LJ-637

Description Of Changes

This PR introduces several UI/UX improvements to the Privacy Experience configuration interface, particularly around TCF (Transparency & Consent Framework) configuration and component editing. Key changes include improved component type handling, better UI interactions, and code organization improvements.

Code Changes

1. Performance
   • Extracted TCF configuration selection into a new separate component (TCFConfigSelect) so that it doesn't call the configs endpoint unless it's needed
   • Updated useEffect that renders the preview so it only watches for relevant form values (doesn't re-render when changing experience name, for example)
2. Usability/UX improvements
   • Added edit functionality to ScrollableList component with new edit icon and handler and Changed translation row click to use onEditItem instead of onRowClick
   • Replaced Chakra DeleteIcon with Carbon Icons.TrashCan component
3. FidesJS script issues resolved
   • New fides-preview.js endpoint which will hot-swap fides.js and fides-tcf as need. Also clears itself when leaving the Preview page.
   • This allowed us to revert direct window.location changes to use Next.js router again
4. Create new TCF Experiences
   • Added TCF overlay as a new Experience Type option
   • Updated Experience Type change handling with proper field resets when switching between types

Steps to Confirm

1. Navigate to Privacy Experiences table in Admin UI (/consent/privacy-experience)
2. View the TCF Experience and then click the Back arrow button to return to the table
3. Now view the Banner + Modal Experience and ensure the correct banner and modal are in the preview (not TCF)
4. Verify that navigation between pages works smoothly without page reload
5. Go back again and view the TCF Experience again and ensure the correct banner and modal are in the preview (not banner+modal)
6. Verify that Language options now show an edit icon button on hover
7. Check that translations can be edited by clicking the edit icon button
8. Return to the Privacy Experiences table
9. Create a new Experience by clicking the [Create new experience] button
10. Test switching between different component types (especially to/from TCF overlay) and verify fields reset correctly

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
• Followup issues:
  • Followup issues created (include link)
  • 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 Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fides-plus-nightly	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 21, 2025 3:12pm
fides-privacy-center	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 21, 2025 3:12pm

[cypress]

fides    Run #12839

Run Properties:   Passed #12839  •  0e014506d0: Experience Preview Enhancements (#6055)

Project	fides
Branch Review	main
Run status	Passed #12839
Run duration	00m 50s
Commit	0e014506d0: Experience Preview Enhancements (#6055)
Committer	Jason Gill
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	5
View all changes introduced in this branch ↗︎