TCF modal display data

[allisonking]

Closes #3809

Description Of Changes

https://www.loom.com/share/0c8b1c05f6be4f99aab109435d808a8a?sid=ebaa2503-68b3-43ff-aa07-b925982eddb5

Important caveats

• This work does not yet touch the fides_consent cookie. We likely want to initialize values in the cookie the same way we do for notices. We haven't talked too much about what the notice_keys for these will be yet though. Initialize TCF preferences in fides_consent cookie and window object #3886
• This also does not integrate with the new consent reporting flow. That should be done in Recording interactions with TCF notices #3877

Code Changes

• Display purposes, features, and vendors in tabs
• Hook up toggles

Steps to Confirm

• Run nox -s dev in fides to start the backend
• tcf_enabled needs to be set to True: make a PATCH to /consent-settings and set tcf_enabled: true in the request body
• Use a VPN to go to an EU location, i.e. France
• To add purposes, you need a system with at least one data use that belongs to a GVL purpose or special purpose. For example, data_use: "essential.fraud_detection" maps to Special Purpose #1
• You can do this through the admin-ui: run turbo dev in clients/admin-ui and then visit localhost:3000
• In clients/privacy-center, run turbo dev. If you have the admin-ui running, this will start the privacy center at localhost:3001
• Visit localhost:3001/fides-js-demo.html
• The banner should appear and you should be able to click “Manage preferences” to see the TCF modal
• To add vendors, attach an integration to a system that has a GVL data use (i.e. set up an amplitude integration with the system from step 5)

Pre-Merge Checklist

• All CI Pipelines Succeeded
• Issue Requirements are Met
• Relevant Follow-Up Issues Created
  • Add tests for fides-js TCF modal #3885
• Update CHANGELOG.md

[cypress]

Passing run #3460 ↗︎

0

4

0

0

0

Details:

Merge 09e17ac into 58ded79...
Project: fides	Commit: d6cd0d4b44 ℹ️
Status: Passed	Duration: 01:02 💡
Started: Aug 1, 2023 7:25 PM	Ended: Aug 1, 2023 7:26 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[allisonking]

moved this to its own file

[allisonking]

this is kind of a weird thing, but it turns out defaultChecked only provides the initial value. this started not to work when I added the "select all/deselect toggles" which wanted to control other toggles' state. This seems to work well, though I had to update the cypress tests now that the checked prop is a lil different

more info: https://stackoverflow.com/questions/33131413/react-defaultchecked-dont-render-check-attribute-on-second-load