Support the “minimal” TCF experience API and dynamically fetch “full” API response after banner is shown #5230

gilluminate · 2024-08-23T21:10:58Z

Closes PROD-2608 and PROD-2611

Description Of Changes

fetch “minimal” TCF experience API in privacy center when bundling FidesJS
modify TCF banner to render only using the minimal API response fields
remove display of “stacks” entirely, and render purposes & special features from the minimal API
New method for stubbing TCF in Cypress tests to mimic the "minimal" behavior.

Steps to Confirm

Full regression test on FidesJS is recommended.
Initial TCF banner UI should match new designs
- Note: banner no longer has accordions for the right column list and the heading is entirely different
Otherwise, no real change to functionality other than the speed in which the banner appears. Modal should look/behave the same. Non-TCF banner should look/behave the same.
Be sure to check TCF banner UI in both desktop and mobile views.

Pre-Merge Checklist

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

vercel · 2024-08-23T21:11:01Z

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		Aug 28, 2024 5:20pm

cypress · 2024-08-23T22:37:38Z

fides Run #9716

Run Properties: Passed #9716 • ffb8d1d00a ℹ️: Merge 4cb5277ef6358adc95c5811a5a7119fcaa7e237f into edb36c77d0585185863d565ec7f6...

Project	`fides`
Branch Review	`refs/pull/5230/merge`
Run status	`Passed #9716`
Run duration	`00m 38s`
Commit	`ffb8d1d00a ℹ️: Merge 4cb5277ef6358adc95c5811a5a7119fcaa7e237f into edb36c77d0585185863d565ec7f6...`
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 ↗︎

eastandwestwind

Nice work so far @gilluminate - I've added some suggestions / questions but mostly looking for a test that checks:

banner renders minimal response fields initially
follow-up API call is made after banner renders for full experience
banner updates to render full experience response

In addition, I'd like clarification around whether or not this is scoped to just TCF. It seems to me that this minimal API call is made across the board, not just for TCF experiences, right?

clients/fides-js/src/services/api.ts

eastandwestwind · 2024-08-27T14:38:26Z

clients/privacy-center/pages/api/fides-js.ts

+      // the user's preferred language, otherwise use the "accept-language" header
+      // provided by the browser. If all else fails, use the default.
+      const fidesLocale =
+        (req.query.fides_locale as string) || req.cookies?.fides_locale;


do we set fides_locale anywhere across our ecosystem? Who uses this that we know of?

I believe MV is using it on a few of their sites that are language specific. Is there a specific concern you are considering here?

nope, just curious about the wider implications across the ecosystem ✔️

clients/privacy-center/pages/api/fides-js.ts

eastandwestwind · 2024-08-27T14:40:15Z

clients/privacy-center/pages/api/fides-js.ts

+      const fidesLocale =
+        (req.query.fides_locale as string) || req.cookies?.fides_locale;
+      const userLanguageString =
+        fidesLocale || req.headers["accept-language"] || DEFAULT_LOCALE;


what is the default locale set to?

default is "en"

eastandwestwind · 2024-08-27T14:42:57Z

clients/fides-js/src/components/fides.css

@@ -1118,8 +1100,6 @@ button.fides-banner-button.fides-menu-item:not([aria-pressed="true"]):hover {
  }

  div#fides-banner-inner-container {
-    display: flex;
-    flex-direction: column;


Can you explain why these CSS changes were needed or generally what these changes do?

We're also making some CSS changes here that we need to eval to see if there are any conflicts- clients/fides-js-extensions/nytimes/src/ext.css

all CSS changes are being made as part of this layout update ticket https://ethyca.atlassian.net/browse/PROD-2611 which is pretty heavily tied to the other TCF updates so I'm including them in this PR. All of these affect TCF only, and they affect the banner only. No style updates for modal at all and no updates for non-TCF banner.

gilluminate · 2024-08-24T02:41:13Z

clients/fides-js/src/components/ExperienceDescription.tsx

+        {!onVendorPageClick && !!vendorCount && (
          <span className="fides-vendor-count">{vendorCount}</span>
        )}
-        {onVendorPageClick && vendorCount && (
+        {onVendorPageClick && !!vendorCount && (


this change ensures that 0 vendors causes this not to render

gilluminate · 2024-08-27T15:48:24Z

clients/fides-js/src/components/fides.css

@@ -1118,8 +1100,6 @@ button.fides-banner-button.fides-menu-item:not([aria-pressed="true"]):hover {
  }

  div#fides-banner-inner-container {
-    display: flex;
-    flex-direction: column;


all CSS changes are being made as part of this layout update ticket https://ethyca.atlassian.net/browse/PROD-2611 which is pretty heavily tied to the other TCF updates so I'm including them in this PR. All of these affect TCF only, and they affect the banner only. No style updates for modal at all and no updates for non-TCF banner.

gilluminate · 2024-08-27T15:53:50Z

clients/privacy-center/pages/api/fides-js.ts

+      // the user's preferred language, otherwise use the "accept-language" header
+      // provided by the browser. If all else fails, use the default.
+      const fidesLocale =
+        (req.query.fides_locale as string) || req.cookies?.fides_locale;


I believe MV is using it on a few of their sites that are language specific. Is there a specific concern you are considering here?

gilluminate · 2024-08-27T15:53:53Z

clients/privacy-center/pages/api/fides-js.ts

+      const fidesLocale =
+        (req.query.fides_locale as string) || req.cookies?.fides_locale;
+      const userLanguageString =
+        fidesLocale || req.headers["accept-language"] || DEFAULT_LOCALE;


default is "en"

gilluminate · 2024-08-27T16:03:52Z

In addition, I'd like clarification around whether or not this is scoped to just TCF. It seems to me that this minimal API call is made across the board, not just for TCF experiences, right?

@eastandwestwind Since we don't know what the experience will be when the initial call is made, so we do supply the minimal request to the api endpoint with the understanding that if TCF is being returned, we want the minimal version. It will be ignored otherwise. I'll add this as a comment in the code.

eastandwestwind

Awesome work on the tests! Just want to add a Changelog, and we're good to go here!

eastandwestwind · 2024-08-28T15:38:02Z

clients/privacy-center/cypress/e2e/consent-i18n.cy.ts

-      if (props.overrideExperience) {
-        experience = props.overrideExperience(experience);
+    if (props?.options?.tcfEnabled) {
+      stubTCFExperience({


nice work adding this stub to replicate minimal experience!

https://ethyca.atlassian.net/browse/PROD-2611

fix unit test

cypress · 2024-08-28T17:59:30Z

fides Run #9719

Run Properties: Passed #9719 • 4a2dc3a958: Support the “minimal” TCF experience API and dynamically fetch “full” API respon...

Project	`fides`
Branch Review	`main`
Run status	`Passed #9719`
Run duration	`00m 38s`
Commit	`4a2dc3a958: Support the “minimal” TCF experience API and dynamically fetch “full” API respon...`
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 ↗︎

gilluminate changed the title ~~Prod 2608 fides js support the minimal~~ Support the “minimal” TCF experience API and dynamically fetch “full” API response after banner is shown Aug 23, 2024

gilluminate force-pushed the PROD-2608-fides-js-support-the-minimal branch from 57ddce1 to a51633d Compare August 23, 2024 22:25

gilluminate force-pushed the PROD-2608-fides-js-support-the-minimal branch 2 times, most recently from 3e6ed7b to c6087d5 Compare August 23, 2024 23:05

vercel bot deployed to Preview August 23, 2024 23:08 View deployment

gilluminate force-pushed the PROD-2608-fides-js-support-the-minimal branch from c6087d5 to d68376a Compare August 24, 2024 02:34

eastandwestwind requested changes Aug 27, 2024

View reviewed changes

gilluminate commented Aug 27, 2024

View reviewed changes

gilluminate force-pushed the PROD-2608-fides-js-support-the-minimal branch 5 times, most recently from 0ed7a4d to cb7903e Compare August 28, 2024 01:37

gilluminate requested a review from eastandwestwind August 28, 2024 01:38

eastandwestwind requested changes Aug 28, 2024

View reviewed changes

gilluminate added 12 commits August 28, 2024 11:16

add PrivacyExperienceMinimal type to prep for new response

cd92b30

Modify the layout of the purposes

d069533

https://ethyca.atlassian.net/browse/PROD-2611

include meta.version_hash for cookie support

b93e849

Notices served working with minimal exp. Type fixes

93f7882

fix vendor count when value is zero

2d4d9c0

include purposes

6ab78d1

hydrate with the full experience when available

c256171

stricter Typing to help avoid errors

6960c67

i18n language support for minimal TCF experience

2b83732

disable buttons while full experience loads

b11aed3

consolidate all of i18n references under the context

4dbb2e5

Load GVL translations as needed and enable spinner

7c514e0

gilluminate added 12 commits August 28, 2024 11:16

ensure gzip is being requested

f5c7a2a

move utilities out of the component

6345c36

extract and re-render GVL Purpose list

193ea69

fix unit test

fix link in docs

bed1d36

1 note. 1 fix.

04871a7

fix bug where default translation wasn't loading as expected

c8448b3

fix lots of TCF specific tests with new stub

fa26e74

fix remaining tests

b44d65c

rename for clarity

c360a34

fix build

150d522

add docs to new stub

0ad0769

Update CHANGELOG.md

4cb5277

gilluminate force-pushed the PROD-2608-fides-js-support-the-minimal branch from a04be3e to 4cb5277 Compare August 28, 2024 17:20

eastandwestwind approved these changes Aug 28, 2024

View reviewed changes

gilluminate merged commit 4a2dc3a into main Aug 28, 2024
13 checks passed

gilluminate deleted the PROD-2608-fides-js-support-the-minimal branch August 28, 2024 17:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support the “minimal” TCF experience API and dynamically fetch “full” API response after banner is shown #5230

Support the “minimal” TCF experience API and dynamically fetch “full” API response after banner is shown #5230

gilluminate commented Aug 23, 2024 •

edited

Loading

vercel bot commented Aug 23, 2024 •

edited

Loading

cypress bot commented Aug 23, 2024 •

edited

Loading

eastandwestwind left a comment

eastandwestwind Aug 27, 2024

gilluminate Aug 27, 2024 •

edited

Loading

eastandwestwind Aug 28, 2024

eastandwestwind Aug 27, 2024

gilluminate Aug 27, 2024

eastandwestwind Aug 27, 2024

gilluminate Aug 27, 2024

gilluminate Aug 24, 2024

gilluminate Aug 27, 2024

gilluminate Aug 27, 2024 •

edited

Loading

gilluminate Aug 27, 2024

gilluminate commented Aug 27, 2024 •

edited

Loading

eastandwestwind left a comment

eastandwestwind Aug 28, 2024

cypress bot commented Aug 28, 2024

Support the “minimal” TCF experience API and dynamically fetch “full” API response after banner is shown #5230

Support the “minimal” TCF experience API and dynamically fetch “full” API response after banner is shown #5230

Conversation

gilluminate commented Aug 23, 2024 • edited Loading

Description Of Changes

Steps to Confirm

Pre-Merge Checklist

vercel bot commented Aug 23, 2024 • edited Loading

cypress bot commented Aug 23, 2024 • edited Loading

eastandwestwind left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gilluminate Aug 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gilluminate Aug 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gilluminate commented Aug 27, 2024 • edited Loading

eastandwestwind left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cypress bot commented Aug 28, 2024

gilluminate commented Aug 23, 2024 •

edited

Loading

vercel bot commented Aug 23, 2024 •

edited

Loading

cypress bot commented Aug 23, 2024 •

edited

Loading

gilluminate Aug 27, 2024 •

edited

Loading

gilluminate Aug 27, 2024 •

edited

Loading

gilluminate commented Aug 27, 2024 •

edited

Loading