Double vendor toggles #4189

allisonking · 2023-09-29T00:28:14Z

Closes #4175

Description Of Changes

Screen.Recording.2023-09-28.at.8.57.58.PM.mov

Code Changes

Add double toggles to the vendor view
Separate out vendor consent and vendor legints from just vendor_preferences
Read these values from the TC string on initialization
Update cypress tests

Steps to Confirm

See video!

Pre-Merge Checklist

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

allisonking · 2023-09-29T00:29:44Z

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

@@ -17,6 +17,7 @@ const DataUseToggle = ({
  disabled,
  isHeader,
  includeToggle = true,
+  secondToggle,


this is not a good pattern! it's weird that there'd be a toggle defined in the component, and a separate one passed in. but it works quite well, and time is short 🥲

eventually, I think we should totally rework TcfVendors to be a table, and maybe not even use DataUseToggle which was never really meant to be a table.

follow up ticket: #4190

allisonking · 2023-09-29T00:43:49Z

clients/fides-js/src/components/tcf/TcfVendors.tsx

-  const vendors = [...(allVendors || []), ...(allSystems || [])];
-  const enabledIds = [...enabledVendorIds, ...enabledSystemIds];
-
-  if (vendors.length === 0) {


I snuck in a refactor here because it was getting unwieldy to pass in enabledVendorConsentIds, enabledVendorLegintIds, enabledSystemLegintIds, enabledSystemConsentIds. instead, the parent component combines vendors and systems (this component used to do that). the parent component is also responsible for separating back out into vendors and systems to save to the backend.

cypress · 2023-09-29T00:46:49Z

Passing run #4439 ↗︎

0	4	0	0	0

Details:

Merge `be5a127` into `e4571e9`...
Project: fides	Commit: `21f10b5393 ℹ️`
Status: Passed	Duration: 00:52 💡
Started: Oct 2, 2023 2:52 PM	Ended: Oct 2, 2023 2:53 PM

Review all test suite changes for PR #4189 ↗︎

allisonking · 2023-09-29T00:48:58Z

clients/fides-js/src/components/tcf/TcfVendors.tsx

            badge={gvlVendor ? "IAB TCF" : undefined}
+            secondToggle={
+              <div
+                style={{ width: "50px", display: "flex", marginLeft: ".2em" }}


because we aren't using a table, we force positioning this way 😬 follow up ticket to refactor to make things into proper tables: #4190

allisonking · 2023-09-29T00:53:10Z

clients/fides-js/src/fides-tcf.ts

-      preference: getInitialPreference(system),
-    })),
-  };
+  // const tcStringPreferences: TcfSavePreferences = {


looking for a second opinion on the commented out code in this file! the purpose of this logic was for the use case of we have an experience that has user preferences filled in, and now we are populating the cookie/tc string based on those values.

however, with our recent prefetch work, and the decision that TCF needs prefetch (where the cookie determines user preference rather than the backend) I don't think this makes sense anymore. In particular, it is difficult to work with in this PR because the info we get from the backend doesn't have vendorConsents/vendorLegints yet.

I'd like to just get rid of it to simplify code paths, but that feels like a big decision!

yes you're right! Since TCF requires prefetch, this code path isn't necessary. Let's go ahead and remove this code and leave a code comment describing something like: for TCF we don't need to update the cookie on init, because we populate the pre-fetched experience with consent from a pre-existing cookie

allisonking · 2023-09-29T00:54:17Z

clients/fides-js/src/lib/tcf.ts

@@ -48,7 +48,7 @@ export const generateTcString = async ({
  experience,
  tcStringPreferences,
 }: {
-  tcStringPreferences?: TcfSavePreferences;
+  tcStringPreferences?: EnabledIds;


the logic in this func should be mostly the same as before—we just get a different input obj, so things are a little different (EnabledIds actually maps well to this use case, because, like TC strings, it only stores opt ins)

clients/fides-js/src/components/tcf/TcfOverlay.tsx

eastandwestwind

Looking good overall @allisonking ! Left a couple Qs for you

eastandwestwind · 2023-09-29T14:51:16Z

clients/fides-js/src/components/tcf/TcfOverlay.tsx

+   * because the backend has not implemented separate vendor legint/consents yet.
+   * Therefore, we need both entities right now, but eventually we should be able to
+   * only use one. In other words, `enabledIds` has a field for `vendorsConsent` and
+   * `vendorsLegint` but `tcf` only has `vendors`.


thanks for this code comment, it helps me understand approach here!

eastandwestwind · 2023-09-29T14:58:36Z

clients/fides-js/src/components/tcf/TcfOverlay.tsx

+
+    // Initialize vendor values from the TC string if it's available. The cookie only
+    // stores what the backend has, while the TC string has a little more right now.
+    // (fidesplus#1128)


could you explain this a bit more? From what I see, we initialize from the TC string, which comes from the cookie itself, right? You mean vendorConsents and vendorLegint cannot be obtained from other properties on cookie, rather we have to look in tc_string?

Yes—you have it right! Let me reword the comment to make that clearer.

eastandwestwind · 2023-09-29T18:23:59Z

clients/fides-js/src/fides-tcf.ts

-      preference: getInitialPreference(system),
-    })),
-  };
+  // const tcStringPreferences: TcfSavePreferences = {


yes you're right! Since TCF requires prefetch, this code path isn't necessary. Let's go ahead and remove this code and leave a code comment describing something like: for TCF we don't need to update the cookie on init, because we populate the pre-fetched experience with consent from a pre-existing cookie

eastandwestwind · 2023-09-29T18:27:17Z

Oh, and could you add a CHANGELOG entry?

eastandwestwind

Thanks for making these changes, looks great!

allisonking added 3 commits September 28, 2023 20:27

Change type of EnabledIds

e2277b6

Start supporting both consent and legint vendors

e6d2370

Store vendor consents in TC string and read from it

a73c13d

allisonking commented Sep 29, 2023

View reviewed changes

allisonking mentioned this pull request Sep 29, 2023

Refactor TCF vendor tab to use a table #4190

Closed

allisonking commented Sep 29, 2023

View reviewed changes

allisonking added 2 commits September 28, 2023 21:32

Small fixes

658620f

Fix if placement

46c8b4c

allisonking marked this pull request as ready for review September 29, 2023 12:59

eastandwestwind reviewed Sep 29, 2023

View reviewed changes

clients/fides-js/src/components/tcf/TcfOverlay.tsx Show resolved Hide resolved

eastandwestwind reviewed Sep 29, 2023

View reviewed changes

allisonking added 3 commits October 2, 2023 10:30

Merge branch 'main' into aking/4175/vendor-toggles

b661139

Update comments

076fe7e

Update changelog

be5a127

eastandwestwind approved these changes Oct 2, 2023

View reviewed changes

allisonking merged commit 360e71c into main Oct 2, 2023
11 checks passed

allisonking deleted the aking/4175/vendor-toggles branch October 2, 2023 15:29

allisonking mentioned this pull request Oct 2, 2023

Update fides-js to handle saving vendors with a legal basis dimension #4209

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Double vendor toggles #4189

Double vendor toggles #4189

allisonking commented Sep 29, 2023 •

edited

Loading

allisonking Sep 29, 2023

allisonking Sep 29, 2023

allisonking Sep 29, 2023

cypress bot commented Sep 29, 2023 •

edited

Loading

allisonking Sep 29, 2023

allisonking Sep 29, 2023

eastandwestwind Sep 29, 2023

allisonking Sep 29, 2023

eastandwestwind left a comment

eastandwestwind Sep 29, 2023

eastandwestwind Sep 29, 2023

allisonking Sep 29, 2023

eastandwestwind Sep 29, 2023

eastandwestwind commented Sep 29, 2023

eastandwestwind left a comment

Double vendor toggles #4189

Double vendor toggles #4189

Conversation

allisonking commented Sep 29, 2023 • edited Loading

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cypress bot commented Sep 29, 2023 • edited Loading

Passing run #4439 ↗︎

Review all test suite changes for PR #4189 ↗︎

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

eastandwestwind left a 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

eastandwestwind commented Sep 29, 2023

eastandwestwind left a comment

Choose a reason for hiding this comment

allisonking commented Sep 29, 2023 •

edited

Loading

cypress bot commented Sep 29, 2023 •

edited

Loading