Support Accept/Reject All with minimal TCF

[gilluminate]

Closes PROD-2777

Description Of Changes

Today, the “minimal” TCF banner can display the banner but the “Accept All” and “Reject All” actions are not enabled until the “full” experience is loaded. This can take several seconds to do on a low-speed connection, which creates a window where users can see a banner but are unable to opt-in.

These changes are set up for handling a new scenario in which a minimal version of experience.gvl is provided as part of the minimal TCF experience response.

If no GVL is included, we'll at least show some spinners during the loading of the full experience to not appear "broken" during that time.

Code Changes

• New Spinner component (very small, css only)
• Show spinner on the Modal button (Manage Preferences) while the full experience finishes loading
• Show spinner on Accept/Reject buttons if the gvl object is not included with the minimal experience (for backwards compatibility mostly)
• Update/create several of the utilites that support "Accept All" from the full experience to also support it from the minimal experience, which only supplies IDs
• Remove any blockers from letting users Accept/Reject all from the minimal experience

Steps to Confirm

1. visit the Fides.JS demo site with TCF enabled (eg. http://localhost:3001/fides-js-demo.html?geolocation=eea)
2. In browser's dev tools, enable throttling in the Network tab to mimic a slow network
3. Clear any existing cookie and reload the page

• If the response is slow enough with the throttling, you should see a spinner on the Manage Preferences button until the full experience has loaded
• If the backend task for including a minimal gvl isn't finished yet, you should see a spinner on all 3 buttons while the full experience loads
• If you attempt to click Accept All or Reject all before the full experience has loaded (the spinner is still spinning), it should work as expected and close the banner. This behavior should be exactly the same as clicking the respective buttons after the full experience loads. (Cookie set with same fides_string, payload for saving the preference api should be the same, CMP Validator should report the same)

Pre-Merge Checklist

• All CI Pipelines Succeeded
• Issue Requirements are Met
• Relevant Follow-Up Issues Created
• Update CHANGELOG.md

[vercel]

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

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
fides-plus-nightly	⬜️ Ignored (Inspect)	Visit Preview		Sep 19, 2024 7:10pm

[cypress]

fides    Run #10003

Run Properties:   Passed #10003  •  342d3ef672 ℹ️: Merge 7dc504fba4725286b886b294b35a3f2285056459 into 59978cb33e2d6ba234914936f237...

Project	fides
Branch Review	refs/pull/5298/merge
Run status	Passed #10003
Run duration	00m 39s
Commit	342d3ef672 ℹ️: Merge 7dc504fba4725286b886b294b35a3f2285056459 into 59978cb33e2d6ba234914936f237...
Committer	Jason Gill
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	4
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.
View all changes introduced in this branch ↗︎

[Kelsey-Ethyca]

If the response is slow enough with the throttling, you should see a spinner on the Manage Preferences button until the full experience has loaded

This is working, I see the spinner. We don't want to draw attention to the Manage Preferences button though since we want them opting in. I suggest we only show the spinner if the button is clicked before layer two is loaded.

If the backend task for including a minimal gvl isn't finished yet, you should see a spinner on all 3 buttons while the full experience loads

I was never able to see a spinner on all three?

If you attempt to click Accept All or Reject all before the full experience has loaded (the spinner is still spinning), it should work as expected and close the banner. This behavior should be exactly the same as clicking the respective buttons after the full experience loads.

The spinner was not showing but I could see the network calls had not completed when I clicked accept all, the banner closed, and the ticket was created!

[gilluminate]

@Kelsey-Ethyca

I was never able to see a spinner on all three?

Are you using the backend with Dawn's latest changes or not yet?

[Kelsey-Ethyca]

@Kelsey-Ethyca

I was never able to see a spinner on all three?

Are you using the backend with Dawn's latest changes or not yet?

I am!

[gilluminate]

@Kelsey-Ethyca

I was never able to see a spinner on all three?

Are you using the backend with Dawn's latest changes or not yet?

I am!

Cool. Then you shouldn't see all 3 spinners. That was for backwards compatibility :)

[Kelsey-Ethyca]

Beautiful!

[cypress]

fides    Run #10007

Run Properties:   Passed #10007  •  a19d30ba57: Support Accept/Reject All with minimal TCF (#5298)

Project	fides
Branch Review	main
Run status	Passed #10007
Run duration	00m 38s
Commit	a19d30ba57: Support Accept/Reject All with minimal TCF (#5298)
Committer	Jason Gill
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	4
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.
View all changes introduced in this branch ↗︎