Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embedded CMP Layer 2 example page #5564

Merged
merged 4 commits into from
Dec 5, 2024

Conversation

gilluminate
Copy link
Contributor

@gilluminate gilluminate commented Dec 5, 2024

Description Of Changes

Creating a new sample page that demonstrates how to embed the CMP onto a page. This is useful on its own, but will also be helpful for demonstrating how to load it into a Native mobile web view.

Code Changes

  • Updated the Readme with a note about port conflicts
  • Added the Embedded Consent page

Steps to Confirm

  1. Run Cookie House sample app
  2. visit /embedded-consent?geolocation=eea to see the new embedded page
  3. compare to the same modal on the existing cookie house page. They should be identical. /?geolocation=EEA

CleanShot 2024-12-05 at 13 47 18@2x

Pre-Merge Checklist

  • Issue requirements met
  • All CI pipelines succeeded
  • CHANGELOG.md updated
  • Followup issues:
    • Followup issues created (include link)
    • No followup issues
  • Database migrations:
    • Ensure that your downrev is up to date with the latest revision on main
    • Ensure that your downgrade() migration is correct and works
      • If a downgrade migration is not possible for this change, please call this out in the PR description!
    • No migrations
  • 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
    • No documentation updates required

Copy link

vercel bot commented Dec 5, 2024

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 Dec 5, 2024 8:55pm

Comment on lines +60 to +63
{/* Require FidesJS to "embed" it's UI onto the page, instead of as an overlay over the <body> itself. (see https://ethyca.com/docs/dev-docs/js/reference/interfaces/FidesOptions#fides_embed) */}
<script>{`window.fides_overrides = { fides_embed: true, fides_disable_banner: true }`}</script>
{/* Allow the embedded consent modal to fill the screen */}
<style>{`#fides-embed-container { --fides-overlay-width: 'auto' }`}</style>
Copy link
Contributor Author

@gilluminate gilluminate Dec 5, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These 4 lines are where this example varies from the original Cookie House homepage, in addition to the div below. Everything else is exactly the same.

`}
</Script>
) : null}
<div id="fides-embed-container" />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This div replaces Home component from the Cookie House homepage.

Copy link

cypress bot commented Dec 5, 2024

fides    Run #11302

Run Properties:  status check passed Passed #11302  •  git commit 08c33afbd0 ℹ️: Merge 339ff5963ad69e88db909ed7a568821bf44e9787 into 411c89559e0851f33369398d6628...
Project fides
Branch Review refs/pull/5564/merge
Run status status check passed Passed #11302
Run duration 00m 57s
Commit git commit 08c33afbd0 ℹ️: Merge 339ff5963ad69e88db909ed7a568821bf44e9787 into 411c89559e0851f33369398d6628...
Committer Jason Gill
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 0
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 4
View all changes introduced in this branch ↗︎

Copy link
Contributor

@jpople jpople left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Tested locally, embed renders with the same contents as the modal.

TCF:

Screenshot 2024-12-05 at 17 11 42
Screenshot 2024-12-05 at 17 12 14

US modal:

Screenshot 2024-12-05 at 17 13 13
Screenshot 2024-12-05 at 17 13 24

@gilluminate gilluminate merged commit ecf82c5 into main Dec 5, 2024
13 checks passed
@gilluminate gilluminate deleted the gill/HJ-286/fides-cmp-in-native-app-poc branch December 5, 2024 23:17
Copy link

cypress bot commented Dec 5, 2024

fides    Run #11308

Run Properties:  status check passed Passed #11308  •  git commit ecf82c5d70: Embedded CMP Layer 2 example page (#5564)
Project fides
Branch Review main
Run status status check passed Passed #11308
Run duration 00m 50s
Commit git commit ecf82c5d70: Embedded CMP Layer 2 example page (#5564)
Committer Jason Gill
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 0
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 4
View all changes introduced in this branch ↗︎

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants