Allow banner to show notice information #5125

gilluminate · 2024-07-23T22:48:06Z

Closes PROD-2427 and PROD-2386

Description Of Changes

Update experience form with option for including notices in the banner & update banner to accommodate.

Code Changes

Added support for new experience config props show_layer1_notices and layer1_button_options
Added notices toggle in UI of Privacy Experience form and dropdown to select Acknowledge button.
Added list of notices in FidesJS if toggle is on, as well as display/save correct button if Acknowledge button is selected.
Update rules for calling notices served API
--
Fixed unrelated UI issue where the delete button for Notices wasn't able to be clicked because of layout issues
Fixed unrelated failing FF Cypress test due to realClick being unavailable for that browser

Steps to Confirm

Visit Privacy Experiences in Admin UI
Click an experience that has banners
Add Notices if there aren't any on the experience
toggle the new switch "Allow banner to show notice information"
Notice the Preview window shows the notices in a list on the banner
Click to open Banner Options menu
Select Acknowledge option
Notice the Preview window shows the acknowledge button in place of Opt In/Opt Out buttons

NOTE: saving will not work until related BE is done.

Pre-Merge Checklist

All CI Pipelines Succeeded
Documentation:
- documentation complete, PR opened in fidesdocs
- documentation issue created in fidesdocs
- if there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
Issue Requirements are Met
Relevant Follow-Up Issues Created
Update CHANGELOG.md

vercel · 2024-07-23T22:48:11Z

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		Jul 30, 2024 10:20pm

cypress · 2024-07-23T23:00:24Z

Test summary

4 • 0 • 0 • 0

Run details


Project	fides
Status	Passed
Commit	559a87a2a0 ℹ️
Started	Jul 30, 2024 10:32 PM
Ended	Jul 30, 2024 10:33 PM
Duration	00:37 💡
OS	Linux Ubuntu -
Browser	Electron 106

View run in Cypress Cloud ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Cloud

eastandwestwind

First pass code-only review- just some small things.

The most risky thing I want to make sure of is the CSS changes- let's just eval that what we change with existing classes / DOM elements won't break current customers, or is at least low-risk

clients/fides-js/src/lib/hooks/useMediaQuery.ts

clients/fides-js/src/components/notices/NoticeOverlay.tsx

clients/fides-js/src/lib/hooks/useConsentServed.ts

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

codecov · 2024-07-30T21:39:20Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.54%. Comparing base (a318829) to head (d90d820).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5125   +/-   ##
=======================================
  Coverage   86.54%   86.54%           
=======================================
  Files         357      357           
  Lines       22330    22331    +1     
  Branches     2955     2955           
=======================================
+ Hits        19326    19327    +1     
  Misses       2480     2480           
  Partials      524      524

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

eastandwestwind · 2024-07-30T22:21:59Z

clients/fides-js/src/lib/hooks/useMediaQuery.ts

+ * This React hook listens for matches to a CSS media query. It allows the rendering of components based on whether the query matches or not. The media query string can be any valid CSS media query, for example '(prefers-color-scheme: dark)'.
+ * @param query - The CSS media query string to match against the viewport.
+ * @example const isMobile = useMediaQuery('(max-width: 768px)');
+ * @returns A boolean value indicating whether the media query matches the current viewport.


eastandwestwind

Ran through manual testing matrix via screenshare, everything is working as expected!

cypress · 2024-07-30T23:15:25Z

Test summary

4 • 0 • 0 • 0

Run details


Project	fides
Status	Passed
Commit	`59de170`
Started	Jul 30, 2024 11:14 PM
Ended	Jul 30, 2024 11:15 PM
Duration	00:35 💡
OS	Linux Ubuntu -
Browser	Electron 106

View run in Cypress Cloud ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Cloud

gilluminate force-pushed the gill/PROD-2427_fe-update-experience-form branch 3 times, most recently from 997bf2d to c64eb94 Compare July 25, 2024 18:30

vercel bot deployed to Preview July 25, 2024 21:13 View deployment

vercel bot deployed to Preview July 26, 2024 17:37 View deployment

gilluminate force-pushed the gill/PROD-2427_fe-update-experience-form branch from b7a8f8c to 77f2e5a Compare July 26, 2024 20:40

vercel bot deployed to Preview July 26, 2024 20:46 View deployment

vercel bot deployed to Preview July 26, 2024 23:00 View deployment

gilluminate force-pushed the gill/PROD-2427_fe-update-experience-form branch from cc4459a to 662b6dd Compare July 29, 2024 15:55

vercel bot deployed to Preview July 29, 2024 15:59 View deployment

vercel bot deployed to Preview July 30, 2024 16:54 View deployment

gilluminate force-pushed the gill/PROD-2427_fe-update-experience-form branch from 58cbca2 to c14021a Compare July 30, 2024 16:54

vercel bot deployed to Preview July 30, 2024 16:57 View deployment

gilluminate force-pushed the gill/PROD-2427_fe-update-experience-form branch from c14021a to 55134f8 Compare July 30, 2024 18:35

gilluminate added 14 commits July 30, 2024 12:48

Fix: delete button positioning on Notices list

b84c21d

update Types, defaults, mocks, etc. to include new prop

68cc3a9

Add ability to toggle Notices in Banner

3224a08

fix Firefox test issues

9bdd3f2

Update notices served to indicate that notices were served in the banner

64948d4

include test for banner with notices calling notices served API

6e85dc1

fix prettier issues

bc13f3a

rename variable

f7aa9f1

add option for Acknowledge button in banner

ee4f7eb

fix mobile preview

25c5887

better rendering of Acknowledge button

2aaceb8

remove "&" from list

7ebec6c

Update privacy-experiences.cy.ts

1af753b

add "acknowledge" consent method

a3e6508

gilluminate added 2 commits July 30, 2024 12:48

add more TODO notes

fc25538

Update CHANGELOG.md

66c3ad3

gilluminate force-pushed the gill/PROD-2427_fe-update-experience-form branch from 55134f8 to 66c3ad3 Compare July 30, 2024 18:48

vercel bot had a problem deploying to Preview July 30, 2024 19:15 Failure

add/update enums to match BE work

8b44338

gilluminate force-pushed the gill/PROD-2427_fe-update-experience-form branch from df36be7 to 8b44338 Compare July 30, 2024 20:12

vercel bot had a problem deploying to Preview July 30, 2024 20:15 Failure

gilluminate marked this pull request as ready for review July 30, 2024 20:19

fix Circular Dependency issue

64ec2b6

vercel bot deployed to Preview July 30, 2024 20:32 View deployment

update prop to match BE

be3ec26

vercel bot deployed to Preview July 30, 2024 20:43 View deployment

gilluminate and others added 3 commits July 30, 2024 14:57

fix test Type issue

287657a

adds enum on BE

f577b93

update enums

fa705b3

vercel bot deployed to Preview July 30, 2024 21:14 View deployment

eastandwestwind reviewed Jul 30, 2024

View reviewed changes

Add docs for new useMediaQuery hook

d90d820

eastandwestwind reviewed Jul 30, 2024

View reviewed changes

eastandwestwind approved these changes Jul 30, 2024

View reviewed changes

gilluminate merged commit 59de170 into main Jul 30, 2024
51 checks passed

gilluminate deleted the gill/PROD-2427_fe-update-experience-form branch July 30, 2024 23:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow banner to show notice information #5125

Allow banner to show notice information #5125

gilluminate commented Jul 23, 2024 •

edited

Loading

vercel bot commented Jul 23, 2024 •

edited

Loading

cypress bot commented Jul 23, 2024 •

edited

Loading

eastandwestwind left a comment

codecov bot commented Jul 30, 2024 •

edited

Loading

eastandwestwind Jul 30, 2024

eastandwestwind left a comment

cypress bot commented Jul 30, 2024

Allow banner to show notice information #5125

Allow banner to show notice information #5125

Conversation

gilluminate commented Jul 23, 2024 • edited Loading

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

vercel bot commented Jul 23, 2024 • edited Loading

cypress bot commented Jul 23, 2024 • edited Loading

Test summary

Run details

eastandwestwind left a comment

Choose a reason for hiding this comment

codecov bot commented Jul 30, 2024 • edited Loading

Codecov Report

eastandwestwind Jul 30, 2024

Choose a reason for hiding this comment

eastandwestwind left a comment

Choose a reason for hiding this comment

cypress bot commented Jul 30, 2024

Test summary

Run details

gilluminate commented Jul 23, 2024 •

edited

Loading

vercel bot commented Jul 23, 2024 •

edited

Loading

cypress bot commented Jul 23, 2024 •

edited

Loading

codecov bot commented Jul 30, 2024 •

edited

Loading