Update fides.js API options and improve automated tests

CHANGELOG.md

@@ -25,7 +25,7 @@ The types of changes are:
 - Cleans up CSS for fidesEmbed mode [#4306](https://github.com/ethyca/fides/pull/4306)
 
 ### Added
-- Added a `FidesPreferenceToggled` event to Fides.js to track when user preferences change without being saved [#4253](https://github.com/ethyca/fides/pull/4253)
+- Added a `FidesUIChanged` event to Fides.js to track when user preferences change without being saved [#4314](https://github.com/ethyca/fides/pull/4314) and [#4253](https://github.com/ethyca/fides/pull/4253)
 - Add AC Systems to the TCF Overlay under Vendor Consents section [#4266](https://github.com/ethyca/fides/pull/4266/)
 
 ### Changed

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

@@ -142,11 +142,7 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
               enabledNoticeKeys={draftEnabledNoticeKeys}
               onChange={(updatedKeys) => {
                 setDraftEnabledNoticeKeys(updatedKeys);
-                dispatchFidesEvent(
-                  "FidesPreferenceToggled",
-                  cookie,
-                  options.debug
-                );
+                dispatchFidesEvent("FidesUIChanged", cookie, options.debug);
               }}
             />
           </div>

clients/fides-js/src/components/tcf/TcfOverlay.tsx

@@ -320,11 +320,7 @@ const TcfOverlay: FunctionComponent<OverlayProps> = ({
               enabledIds={draftIds}
               onChange={(updatedIds) => {
                 setDraftIds(updatedIds);
-                dispatchFidesEvent(
-                  "FidesPreferenceToggled",
-                  cookie,
-                  options.debug
-                );
+                dispatchFidesEvent("FidesUIChanged", cookie, options.debug);
               }}
               activeTabIndex={activeTabIndex}
               onTabChange={setActiveTabIndex}

clients/fides-js/src/fides-tcf.ts

@@ -101,7 +101,8 @@ declare global {
       parameter?: number | string
     ) => void;
     config: {
-      fides: OverrideOptions;
+      // DEFER (PROD-1243): support a configurable "custom options" path
+      tc_info: OverrideOptions;
     };
   }
 }

clients/fides-js/src/fides.ts

@@ -77,7 +77,8 @@ declare global {
   interface Window {
     Fides: Fides;
     config: {
-      fides: OverrideOptions;
+      // DEFER (PROD-1243): support a configurable "custom options" path
+      tc_info: OverrideOptions;
     };
   }
 }

clients/fides-js/src/lib/events.ts

@@ -6,24 +6,24 @@ import { debugLog } from "./consent-utils";
  * - FidesInitialized: dispatched when initialization is complete, from Fides.init()
  * - FidesUpdated: dispatched when preferences are updated, from updateConsentPreferences() or Fides.init()
  * - FidesUIShown: dispatched when either the banner or modal is shown to the user
+ * - FidesUIChanged: dispatched when preferences are changed but not saved, i.e. "dirty".
  * - FidesModalClosed: dispatched when the modal is closed
- * - FidesPreferenceToggled: dispatched when preferences are toggled but not saved, i.e. "dirty".
  */
 export type FidesEventType =
   | "FidesInitialized"
   | "FidesUpdated"
   | "FidesUIShown"
-  | "FidesModalClosed"
-  | "FidesPreferenceToggled";
+  | "FidesUIChanged"
+  | "FidesModalClosed";
 
 // Bonus points: update the WindowEventMap interface with our custom event types
 declare global {
   interface WindowEventMap {
     FidesInitialized: FidesEvent;
     FidesUpdated: FidesEvent;
     FidesUIShown: FidesEvent;
+    FidesUIChanged: FidesEvent;
     FidesModalClosed: FidesEvent;
-    FidesPreferenceToggled: FidesEvent;
   }
 }
 

clients/fides-js/src/lib/initialize.ts

@@ -148,21 +148,33 @@ const automaticallyApplyGPCPreferences = ({
 
 /**
  * Gets and validates Fides override options provided through URL query params, cookie or window obj.
+ *
+ * If the same override option is provided in multiple ways, load the value in this order:
+ * 1) query param  (top priority)
+ * 2) window obj   (second priority)
+ * 3) cookie value (last priority)
  */
 export const getOverrideFidesOptions = (): Partial<FidesOptionOverrides> => {
   const overrideOptions: Partial<FidesOptionOverrides> = {};
   if (typeof window !== "undefined") {
-    const params = new URLSearchParams(document.location.search);
+    // Grab query params if provided in the URL (e.g. "?fides_string=123...")
+    const queryParams = new URLSearchParams(window.location.search);
+    // Grab global window object if provided (e.g. window.config.tc_info = { fides_string: "123..." })
+    // DEFER (PROD-1243): support a configurable "custom options" path
+    const windowObj = window.config?.tc_info;
+
+    // Look for each of the override options in all three locations: query params, window object, cookie
     FIDES_OVERRIDE_OPTIONS_VALIDATOR_MAP.forEach(
       ({ fidesOption, fidesOptionType, fidesOverrideKey, validationRegex }) => {
-        // look for override options on URL query params, window obj, and cookie
-        const queryParamOverride: string | null = params.get(fidesOverrideKey);
-        const windowObjOverride: string | boolean | undefined = window.config
-          ?.fides
-          ? window.config?.fides[fidesOverrideKey]
+        const queryParamOverride: string | null =
+          queryParams.get(fidesOverrideKey);
+        const windowObjOverride: string | boolean | undefined = windowObj
+          ? windowObj[fidesOverrideKey]
           : undefined;
         const cookieOverride: string | undefined =
           getCookieByName(fidesOverrideKey);
+
+        // Load the override option value, respecting the order of precedence (query params > window object > cookie)
         const value = queryParamOverride || windowObjOverride || cookieOverride;
         if (value && validationRegex.test(value.toString())) {
           // coerce to expected type in FidesOptions