Privacy Center Additional Customizations

[SteveDMurphy]

This makes the Logo it's own component and allows it to be treated as a link if a logo_url is supplied

Closes #3399
Closes #4091

Description Of Changes

This addresses some functionality changes for clients to be able to:

• Have the logo also link back to their site
• Link the privacy policy from the main privacy center (instead of just hidden in consent modal)
• favicon option already done!

Code Changes

• Move the image to a new component, Logo
• Optionally link back to the site from the privacy center if a url is provided (for backwards compatability)
• Between all of the text on the main privacy center page and the tiles, add a link to the privacy policy if config options supplied (this could be done much differently, and even repurpose the provided URL if needed from the modal. Thought separate might be better for this use case however.)

Steps to Confirm

• cd clients/privacy-center/
• include the following config options in ~/config/config.json

  {...
  "privacy_policy_url": "https://privacy.ethyca.com/",
  "privacy_policy_url_text": "Privacy Policy",
  "privacy_policy_visible": true,
  "logo_path": "https://cdn.ethyca.com/fides-cloud/ethyca/logo.svg",
  "logo_url": "https://www.ethyca.com/",
  ...}

• turbo run dev
• Validate the logo navigates away from the privacy center
• Validate the privacy policy link exists and opens in a new tab

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

[cypress]

Passing run #4175 ↗︎

0	4	0	0	0
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

Details:

Merge c8b65a4 into 6c8ba3a...
Project: fides	Commit: 7d9253d098 ℹ️
Status: Passed	Duration: 01:01 💡
Started: Sep 14, 2023 9:36 PM	Ended: Sep 14, 2023 9:38 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[allisonking]

works great, nice job Steve! left a few suggestions but they're not blocking, and are probably more on the opinion side :)

[NevilleS]

I did some quick local testing of this:

1. Edited the sample project (Cookie House) privacy center config.json as:

{
  "title": "Take control of your data",
  "description": "When you use our services, you’re trusting us with your information. We understand this is a big responsibility and work hard to protect your information and put you in control.",
  "description_subtext": [],
  "addendum": [],
  "logo_path": "https://ethyca-cdn-harpocrates.s3.amazonaws.com/assets/cookiehouse_assets/logo.svg",
  "logo_url": "https://ethyca.com",
  "privacy_policy_url": "https://privacy.ethyca.com/",
  "privacy_policy_url_text": "Privacy Policy",
  "privacy_policy_visible": true,
  "actions": [
    {
      "policy_key": "default_access_policy",
...

2. Ran nox -s "fides_env(test)"
3. Opened up the Cookie House Privacy Center on http://localhost:3001/ and confirmed both the logo URL link and the Privacy Policy link:
   

So in other words: this works as advertised! However, the styling of the "Privacy Policy" link feels a bit out of place, I think we should try to polish that a bit.

[NevilleS]

Thanks @SteveDMurphy! I pushed some minor styling improvements to the privacy policy link and tidied my own nit, I'm happy enough with this one now 👍

[NevilleS]

Pushed a few minor updates, this is the look & feel now:

[codecov]

Codecov Report

Patch and project coverage have no change.

Comparison is base (b9acaa7) 87.40% compared to head (c8b65a4) 87.40%.
Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #4090   +/-   ##
=======================================
  Coverage   87.40%   87.40%           
=======================================
  Files         320      320           
  Lines       19702    19702           
  Branches     2530     2530           
=======================================
  Hits        17220    17220           
  Misses       2041     2041           
  Partials      441      441           

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

[SteveDMurphy]

Thanks @SteveDMurphy! I pushed some minor styling improvements to the privacy policy link and tidied my own nit, I'm happy enough with this one now 👍

Thank you a ton @NevilleS 🙌🏽