Fix overlay rendering issue by finding/creating a dedicated parent el…

…ement for Preact (#3397)

CHANGELOG.md

@@ -17,19 +17,20 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.14.0...main)
 
-## Added
+### Added
 
 - Add Google Tag Manager and Privacy Center ENV vars to sample app [#2949](https://github.com/ethyca/fides/pull/2949)
 
-## Fixed
+### Fixed
 
 - Fix sample app `DATABASE_*` ENV vars for backwards compatibility [#3406](https://github.com/ethyca/fides/pull/3406)
+- Fix overlay rendering issue by finding/creating a dedicated parent element for Preact [#3397](https://github.com/ethyca/fides/pull/3397)
 
 ### Changed
 
 - Enabled Privacy Experience beta flag [#3364](https://github.com/ethyca/fides/pull/3364)
 
-## Developer Experience
+### Developer Experience
 
 - Add ability to pass ENV vars to both privacy center and sample app during `fides deploy` via `.env` [#2949](https://github.com/ethyca/fides/pull/2949)
 

clients/fides-js/src/fides.ts

@@ -27,6 +27,7 @@
  *           isDisabled: false,
  *           isGeolocationEnabled: false,
  *           geolocationApiUrl: "",
+ *           overlayParentId: null,
  *           privacyCenterUrl: "http://localhost:3000"
  *         }
  *   });
@@ -238,6 +239,7 @@ _Fides = {
     isOverlayDisabled: true,
     isGeolocationEnabled: false,
     geolocationApiUrl: "",
+    overlayParentId: null,
     privacyCenterUrl: "",
   },
   fides_meta: {},
@@ -265,4 +267,5 @@ export * from "./lib/consent-utils";
 export * from "./lib/consent-value";
 export * from "./lib/cookie";
 
+// DEFER: this default export isn't very useful, it's just the Fides type
 export default Fides;

clients/fides-js/src/lib/consent-types.ts

@@ -19,14 +19,17 @@ export type FidesOptions = {
   // Whether or not debug log statements should be enabled
   debug: boolean;
 
+  // API URL for getting user geolocation
+  geolocationApiUrl: string;
+
   // Whether or not the banner should be globally disabled
   isOverlayDisabled: boolean;
 
   // Whether user geolocation should be enabled. Requires geolocationApiUrl
   isGeolocationEnabled: boolean;
 
-  // API URL for getting user geolocation
-  geolocationApiUrl: string;
+  // ID of the parent DOM element where the overlay should be inserted (default: "fides-overlay")
+  overlayParentId: string | null;
 
   // URL for the Privacy Center, used to customize consent preferences. Required.
   privacyCenterUrl: string;

clients/fides-js/src/lib/consent.tsx

@@ -9,7 +9,7 @@ import { showModalLinkAndSetOnClick } from "./consent-links";
 /**
  * Initialize the Fides Consent overlay components.
  *
- * (see the type definition of ConsentBannerOptions for what options are available)
+ * (see the type definition of FidesOptions for what options are available)
  */
 export const initOverlay = async ({
   consentDefaults,
@@ -31,6 +31,20 @@ export const initOverlay = async ({
         "Rendering Fides overlay CSS & HTML into the DOM..."
       );
 
+      // Find or create the parent element where we should insert the overlay
+      const overlayParentId = options.overlayParentId || "fides-overlay";
+      let parentElem = document.getElementById(overlayParentId);
+      if (!parentElem) {
+        debugLog(
+          options.debug,
+          `Parent element not found (#${overlayParentId}), creating and appending to body...`
+        );
+        // Create our own parent element and append to body
+        parentElem = document.createElement("div");
+        parentElem.id = overlayParentId;
+        document.body.appendChild(parentElem);
+      }
+
       if (experience.component === ComponentType.OVERLAY) {
         if (experience.delivery_mechanism === DeliveryMechanism.BANNER) {
           // Render the Overlay to the DOM!
@@ -41,7 +55,7 @@ export const initOverlay = async ({
               experience={experience}
               geolocation={geolocation}
             />,
-            document.body
+            parentElem
           );
           debugLog(options.debug, "Fides overlay is now showing!");
         } else if (experience.delivery_mechanism === DeliveryMechanism.LINK) {
@@ -58,9 +72,11 @@ export const initOverlay = async ({
   // Ensure we only render the overlay to the DOM once it's loaded
   if (document?.readyState !== "complete") {
     debugLog(options.debug, "DOM not loaded, adding event listener");
-    document.addEventListener("DOMContentLoaded", async () => {
-      debugLog(options.debug, "DOM fully loaded and parsed");
-      await renderFidesOverlay();
+    document.addEventListener("readystatechange", async () => {
+      if (document.readyState === "complete") {
+        debugLog(options.debug, "DOM fully loaded and parsed");
+        await renderFidesOverlay();
+      }
     });
   } else {
     await renderFidesOverlay();

clients/privacy-center/app/server-environment.ts

@@ -32,13 +32,17 @@ import {
  * FIDES_PRIVACY_CENTER__FIDES_API_URL=https://fides.example.com/api/v1
  */
 export interface PrivacyCenterSettings {
+  // Privacy center settings
   FIDES_API_URL: string; // e.g. http://localhost:8080/api/v1
-  CONFIG_JSON_URL: string; // e.g. file:///app/config/config.json
   CONFIG_CSS_URL: string; // e.g. file:///app/config/config.css
+  CONFIG_JSON_URL: string; // e.g. file:///app/config/config.json
+
+  // Fides.js options
   DEBUG: boolean; // whether console logs are enabled for consent components
-  IS_OVERLAY_DISABLED: boolean; // whether we should render privacy-experience-driven components
-  IS_GEOLOCATION_ENABLED: boolean; // whether we should use geolocation to drive privacy experience
   GEOLOCATION_API_URL: string; // e.g. http://location-cdn.com
+  IS_GEOLOCATION_ENABLED: boolean; // whether we should use geolocation to drive privacy experience
+  IS_OVERLAY_DISABLED: boolean; // whether we should render privacy-experience-driven components
+  OVERLAY_PARENT_ID: string | null; // (optional) ID of the parent DOM element where the overlay should be inserted
   PRIVACY_CENTER_URL: string; // e.g. http://localhost:3000
 }
 
@@ -51,9 +55,10 @@ export type PrivacyCenterClientSettings = Pick<
   PrivacyCenterSettings,
   | "FIDES_API_URL"
   | "DEBUG"
-  | "IS_OVERLAY_DISABLED"
-  | "IS_GEOLOCATION_ENABLED"
   | "GEOLOCATION_API_URL"
+  | "IS_GEOLOCATION_ENABLED"
+  | "IS_OVERLAY_DISABLED"
+  | "OVERLAY_PARENT_ID"
   | "PRIVACY_CENTER_URL"
 >;
 
@@ -243,6 +248,8 @@ export const loadPrivacyCenterEnvironment =
       CONFIG_CSS_URL:
         process.env.FIDES_PRIVACY_CENTER__CONFIG_CSS_URL ||
         "file:///app/config/config.css",
+
+      // Overlay options
       DEBUG: process.env.FIDES_PRIVACY_CENTER__DEBUG === "true" || false,
       IS_OVERLAY_DISABLED:
         process.env.FIDES_PRIVACY_CENTER__IS_OVERLAY_DISABLED === "false" ||
@@ -252,6 +259,8 @@ export const loadPrivacyCenterEnvironment =
         false,
       GEOLOCATION_API_URL:
         process.env.FIDES_PRIVACY_CENTER__GEOLOCATION_API_URL || "",
+      OVERLAY_PARENT_ID:
+        process.env.FIDES_PRIVACY_CENTER__OVERLAY_PARENT_ID || null,
       PRIVACY_CENTER_URL:
         process.env.FIDES_PRIVACY_CENTER__PRIVACY_CENTER_URL ||
         "http://localhost:3000",
@@ -270,6 +279,7 @@ export const loadPrivacyCenterEnvironment =
       IS_OVERLAY_DISABLED: settings.IS_OVERLAY_DISABLED,
       IS_GEOLOCATION_ENABLED: settings.IS_GEOLOCATION_ENABLED,
       GEOLOCATION_API_URL: settings.GEOLOCATION_API_URL,
+      OVERLAY_PARENT_ID: settings.OVERLAY_PARENT_ID,
       PRIVACY_CENTER_URL: settings.PRIVACY_CENTER_URL,
     };
 

clients/privacy-center/pages/api/fides-js.ts

@@ -74,9 +74,10 @@ export default async function handler(
     },
     options: {
       debug: environment.settings.DEBUG,
-      isOverlayDisabled: environment.settings.IS_OVERLAY_DISABLED,
-      isGeolocationEnabled: environment.settings.IS_GEOLOCATION_ENABLED,
       geolocationApiUrl: environment.settings.GEOLOCATION_API_URL,
+      isGeolocationEnabled: environment.settings.IS_GEOLOCATION_ENABLED,
+      isOverlayDisabled: environment.settings.IS_OVERLAY_DISABLED,
+      overlayParentId: environment.settings.OVERLAY_PARENT_ID,
       privacyCenterUrl: environment.settings.PRIVACY_CENTER_URL,
     },
     geolocation,

clients/privacy-center/public/fides-js-components-demo.html

@@ -113,6 +113,7 @@
           isOverlayDisabled: false,
           isGeolocationEnabled: false,
           geolocationApiUrl: "",
+          overlayParentId: null,
           privacyCenterUrl: "http://localhost:3000",
         },
       };