Update fides.js to support multiple descriptions (banner, overlay) and render HTML descriptions #4542

NevilleS · 2024-01-02T13:08:51Z

‼️ contains migration, check downrev before merging! ‼️

Closes PROD-1528
Closes PROD-1338
...and adds support for HTML descriptions (unticketed)

Description Of Changes

As more & more customers are using our consent overlay, we're needing some more flexible options for configuring the major text elements of the banner & modal. This PR adds two major features:

Support for separate titles/descriptions for the banner & modal, so you can configure these two UIs separately
Support for HTML descriptions in the banner & modal, so you can include inline links which is a common need for legal text (to link out to more detailed policies)

Code Changes

Steps to Confirm

Configure banner title & description fields and test their changes in the Cookie House
Set FIDES_PRIVACY_CENTER__ALLOW_HTML_DESCRIPTION=true, then configure banner & modal description fields with HTML and test their changes in the Cookie House

Pre-Merge Checklist

All CI Pipelines Succeeded
Documentation:
- documentation complete, PR opened in fidesdocs
- documentation issue created in fidesdocs
Issue Requirements are Met
Relevant Follow-Up Issues Created
Update CHANGELOG.md
For API changes, the Postman collection has been updated

…components

…HtmlStr for HTML text validation

vercel · 2024-01-02T13:08:57Z

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	Jan 2, 2024 10:51pm

cypress · 2024-01-02T13:20:35Z

Passing run #5827 ↗︎

0	4	0	0	0

Details:

Merge `c68e36f` into `54a6703`...
Project: fides	Commit: `b0ba12e8a7 ℹ️`
Status: Passed	Duration: 00:35 💡
Started: Jan 2, 2024 10:58 PM	Ended: Jan 2, 2024 10:59 PM

Review all test suite changes for PR #4542 ↗︎

NevilleS

Just some comments to help reviewers...

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

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

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

src/fides/api/alembic/migrations/versions/f396c1f84b0f_add_banner_description_to_experience_.py

src/fides/api/custom_types.py

adamsachs

BE looks solid to me! i think you've got all the fundamental pieces you need, i know there's at least one TODO so i'll hold off on approving. i like the HtmlStr custom type and validator.

i'm still not the most familiar with the use cases, but just want to make sure - should we populate these fields at all in the default "out of the box" experience configs we define in src/fides/data/privacy_notices/privacy_experience_config_defaults.yml?

allisonking

FE looks great! thanks for working on this!

NevilleS · 2024-01-02T15:01:53Z

@adamsachs

i'm still not the most familiar with the use cases, but just want to make sure - should we populate these fields at all in the default "out of the box" experience configs we define in src/fides/data/privacy_notices/privacy_experience_config_defaults.yml?

No, I don't think so. In general, the defaults that set the banner & modal descriptions/titles to be identical are reasonable, so I felt like we should leave our defaults unchanged and have these new fields as null.

pattisdr · 2024-01-02T15:11:50Z

i'm still not the most familiar with the use cases, but just want to make sure - should we populate these fields at all in the default "out of the box" experience configs we define in src/fides/data/privacy_notices/privacy_experience_config_defaults.yml?

In the UI, do we drop back to using the existing title/description if banner_title/banner_description don't exist? If not, then yes, we'll need to populate this template.

Further, current behavior of load_default_experience_configs_on_startup only adds new configs from the template if they don't exist, it doesn't update existing configs in the database. We can talk about how we want to handle these new fields here if needed.

EDIT: OK! looks like we're all good here then. We drop back to using title/description if banner title/description doesn't exist. No template updates needed.

pattisdr

looks good so far, backend is fairly straightforward since these new fields are allowed to be nullable - will look again when HtmlStr validation is in -

src/fides/api/alembic/migrations/versions/f396c1f84b0f_add_banner_description_to_experience_.py

codecov · 2024-01-02T15:43:23Z

Codecov Report

Attention: 2 lines in your changes are missing coverage. Please review.

Comparison is base (54a6703) 87.06% compared to head (c68e36f) 87.06%.

Files	Patch %	Lines
src/fides/api/custom_types.py	77.77%	1 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4542      +/-   ##
==========================================
- Coverage   87.06%   87.06%   -0.01%     
==========================================
  Files         334      334              
  Lines       20539    20554      +15     
  Branches     2650     2651       +1     
==========================================
+ Hits        17883    17896      +13     
- Misses       2185     2186       +1     
- Partials      471      472       +1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

NevilleS

A few more comments for @allisonking

clients/admin-ui/src/types/api/models/ExperienceConfigCreate.ts

clients/admin-ui/src/features/privacy-experience/form/OverlayForm.tsx

clients/admin-ui/src/features/privacy-experience/form/helpers.tsx

clients/admin-ui/src/features/privacy-experience/form/OverlayForm.tsx

clients/admin-ui/src/features/privacy-experience/form/helpers.tsx

clients/admin-ui/src/types/api/models/ExperienceConfigCreate.ts

adamsachs

some minor nits on the validation that i wouldn't consider blockers, generally looks good and i think you've plugged the validation into the right places! i'm not an HTML sanitization expert but the library you're using looks like a good standard, and i trust your judgement there 👍

src/fides/api/custom_types.py

…anitized output

…ort-multiple-html-descriptions

…iption value

NevilleS · 2024-01-02T21:10:12Z

OK, I think I've got everything covered here. Switching to some final polish & UAT.

NevilleS · 2024-01-02T21:55:58Z

OK, @mfbrown and I did some UAT together on the Admin UI form. Here's the main before/after screenshots for that:

Before	After

Lots of copy edits in there that @mfbrown and I did together. It's still a bit clumsy and wordy, but we felt that it was best to be "clear" before trying to get clever with wording and didn't have great ideas 😄

UAT complete ✅

…ort-multiple-html-descriptions

…d render HTML descriptions (#4542)

NevilleS added 3 commits January 1, 2024 17:22

Add support for rendering HTML descriptions in fides-js banner/modal …

1d00fae

…components

Add support for optional banner_description in fides-js banner component

aee2999

Add banner_description to PrivacyExperienceConfig model and stub out …

33cea03

…HtmlStr for HTML text validation

NevilleS added 2 commits January 2, 2024 08:22

Add optional banner_title to PrivacyExperienceConfig as well

3a5f2b1

Add support for optional banner_title to fidesjs

295e67a

NevilleS commented Jan 2, 2024

View reviewed changes

NevilleS added 3 commits January 2, 2024 08:53

Fix formatting

f9862ce

Fix mypy

acd1fee

Update fides dataset

4a61282

adamsachs reviewed Jan 2, 2024

View reviewed changes

allisonking approved these changes Jan 2, 2024

View reviewed changes

Fix unit tests for banner_title

ee01f3b

pattisdr reviewed Jan 2, 2024

View reviewed changes

src/fides/api/alembic/migrations/versions/f396c1f84b0f_add_banner_description_to_experience_.py Show resolved Hide resolved

Add support for editing banner title & description to Admin UI

ed7358d

vercel bot deployed to Preview January 2, 2024 18:19 View deployment

NevilleS requested a review from allisonking January 2, 2024 18:32

NevilleS commented Jan 2, 2024

View reviewed changes

Use overlay form for TCF

8141f35

vercel bot deployed to Preview January 2, 2024 18:48 View deployment

allisonking reviewed Jan 2, 2024

View reviewed changes

Use nh3 to sanitize HTML descriptions

0e502c0

NevilleS requested a review from adamsachs January 2, 2024 19:28

NevilleS added 2 commits January 2, 2024 14:33

Fix pylint

af4f201

Update form labels

a815425

vercel bot deployed to Preview January 2, 2024 19:36 View deployment

adamsachs reviewed Jan 2, 2024

View reviewed changes

src/fides/api/custom_types.py Outdated Show resolved Hide resolved

NevilleS added 3 commits January 2, 2024 14:54

Update pytest and incorporate review comments

ae1b9c7

Update pytest

bf0e11e

Use nullable() instead of optional() for Yup schema

c08deaf

vercel bot deployed to Preview January 2, 2024 20:01 View deployment

Revert changes to autogenerated types; workaround in API slice instead

8370ac5

vercel bot deployed to Preview January 2, 2024 20:25 View deployment

NevilleS added 4 commits January 2, 2024 15:40

Remove duplicate tests, update assertion to new expected value with s…

6e68772

…anitized output

Format

4a42e05

Improve some form labels

f5cf0f5

Merge branch 'main' of github.com:ethyca/fides into PROD-1528-ns-supp…

5aa9a27

…ort-multiple-html-descriptions

vercel bot deployed to Preview January 2, 2024 20:57 View deployment

Add privacy center ENV variable to set fidesjs options.allowHTMLDescr…

787a540

…iption value

NevilleS changed the title ~~Support multiple descriptions (banner, modal) and allow HTML descriptions when desired~~ Update fides.js to support multiple descriptions (banner, overlay) and render HTML descriptions Jan 2, 2024

Update CHANGELOG

3bd983b

NevilleS marked this pull request as ready for review January 2, 2024 21:09

NevilleS added 2 commits January 2, 2024 16:12

Fix types

ebd1fba

Updated form layout & labels from UAT

f5f2379

vercel bot deployed to Preview January 2, 2024 21:46 View deployment

Fix formatting

35cafff

vercel bot deployed to Preview January 2, 2024 21:53 View deployment

NevilleS added 3 commits January 2, 2024 17:19

Update CHANGELOG with bugfix

d212892

Fix failing pytest

3e314de

Merge branch 'main' of github.com:ethyca/fides into PROD-1528-ns-supp…

c68e36f

…ort-multiple-html-descriptions

vercel bot deployed to Preview January 2, 2024 22:51 View deployment

NevilleS merged commit 3019120 into main Jan 2, 2024
47 of 48 checks passed

NevilleS deleted the PROD-1528-ns-support-multiple-html-descriptions branch January 2, 2024 23:25

NevilleS added a commit that referenced this pull request Jan 2, 2024

Update fides.js to support multiple descriptions (banner, overlay) an…

e20ad24

…d render HTML descriptions (#4542)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update fides.js to support multiple descriptions (banner, overlay) and render HTML descriptions #4542

Update fides.js to support multiple descriptions (banner, overlay) and render HTML descriptions #4542

NevilleS commented Jan 2, 2024 •

edited

Loading

vercel bot commented Jan 2, 2024 •

edited

Loading

cypress bot commented Jan 2, 2024 •

edited

Loading

NevilleS left a comment

adamsachs left a comment •

edited

Loading

allisonking left a comment

NevilleS commented Jan 2, 2024

pattisdr commented Jan 2, 2024 •

edited

Loading

pattisdr left a comment

codecov bot commented Jan 2, 2024 •

edited

Loading

NevilleS left a comment

adamsachs left a comment

NevilleS commented Jan 2, 2024

NevilleS commented Jan 2, 2024

Update fides.js to support multiple descriptions (banner, overlay) and render HTML descriptions #4542

Update fides.js to support multiple descriptions (banner, overlay) and render HTML descriptions #4542

Conversation

NevilleS commented Jan 2, 2024 • edited Loading

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

vercel bot commented Jan 2, 2024 • edited Loading

cypress bot commented Jan 2, 2024 • edited Loading

Passing run #5827 ↗︎

Review all test suite changes for PR #4542 ↗︎

NevilleS left a comment

Choose a reason for hiding this comment

adamsachs left a comment • edited Loading

Choose a reason for hiding this comment

allisonking left a comment

Choose a reason for hiding this comment

NevilleS commented Jan 2, 2024

pattisdr commented Jan 2, 2024 • edited Loading

pattisdr left a comment

Choose a reason for hiding this comment

codecov bot commented Jan 2, 2024 • edited Loading

Codecov Report

NevilleS left a comment

Choose a reason for hiding this comment

adamsachs left a comment

Choose a reason for hiding this comment

NevilleS commented Jan 2, 2024

NevilleS commented Jan 2, 2024

NevilleS commented Jan 2, 2024 •

edited

Loading

vercel bot commented Jan 2, 2024 •

edited

Loading

cypress bot commented Jan 2, 2024 •

edited

Loading

adamsachs left a comment •

edited

Loading

pattisdr commented Jan 2, 2024 •

edited

Loading

codecov bot commented Jan 2, 2024 •

edited

Loading