Fides JS Code Snippet - Include wrapper script; add text field to set Privacy Center host URL #7081

jjdaurora · 2025-12-05T14:58:21Z

Ticket ENG-1944

Description Of Changes

Code Changes

Updated the Fides JS code snippet -- accessible from the Experiences and Property tabs -- with the full Fides JS wrapper script, defined here: https://github.com/ethyca/fde/blob/main/scripts/javascript/wrapper-script.js
Add a text field that allows the user to enter their Privacy Center Host URL, which populates dynamically into the template.
Extracted the Fides JS code snippet into a separate file called fidesJsScriptTemplate.js, which removes the need to update the code snippet in two separate places (originally in both the NewJavascriptTag.tsx and JavascriptTag.tsx.

Steps to Confirm

Pre-Merge Checklist

vercel · 2025-12-05T14:58:26Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
fides-plus-nightly	Error			Dec 12, 2025 7:01pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
fides-privacy-center	Ignored			Dec 12, 2025 7:01pm

greptile-apps · 2025-12-05T15:00:48Z

Greptile Overview

Greptile Summary

This PR enhances the JavaScript tag generation UI by adding a manual input field for the Privacy Center hostname and introducing a more comprehensive Fides JS script template with geolocation query parameter handling.

Refactored JavaScriptTag.tsx and NewJavaScriptTag.tsx to use a shared script template from the new fidesJsScriptTemplate.ts file
Added text input fields for users to manually enter their Privacy Center hostname, with NewJavaScriptTag preserving the Fides Cloud config as a fallback
Removed the optional GTM script tag section from both components
Added a large gvl.json vendor data file (10,767 lines) to the privacy center public assets
Added run_migrations.py development utility script for running database migrations locally

Issues found:

The script template has a URL construction bug that malforms query parameters when geolocation params are present

Confidence Score: 3/5

This PR has a logical bug in the script template that would cause malformed URLs when geolocation parameters are used.
The core refactoring is sound, but the new script template contains a URL construction bug that would produce malformed URLs when fidesSearchParams is non-empty. This could break the consent management functionality for users who utilize geolocation query parameters.
fidesJsScriptTemplate.ts requires attention for the URL concatenation bug on line 37.

Important Files Changed

File Analysis

Filename	Score	Overview
clients/admin-ui/src/features/privacy-experience/fidesJsScriptTemplate.ts	2/5	New shared template for Fides JS script with geolocation query param handling. Contains a bug in URL construction that malforms query parameters, and an unused variable declaration.
clients/admin-ui/src/features/privacy-experience/JavaScriptTag.tsx	4/5	Refactored to use shared template and added manual hostname input field. Removed Fides Cloud auto-population and GTM script section.
clients/admin-ui/src/features/privacy-experience/NewJavaScriptTag.tsx	4/5	Added manual hostname input field while preserving Fides Cloud fallback. Refactored to use shared template and removed GTM script section.
clients/privacy-center/public/gvl.json	4/5	Large vendor data file (10,767 lines) containing GVL and GACP vendor information with linked_system status.
run_migrations.py	3/5	Development utility script for running database migrations against localhost. Contains hardcoded credentials for local development.

greptile-apps

_{5 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

clients/admin-ui/src/features/privacy-experience/fidesJsScriptTemplate.ts

tvandort

Great start! Left a few feedback items. Could also use some tests.

tvandort · 2025-12-05T19:41:02Z

clients/admin-ui/src/features/privacy-experience/fidesJsScriptTemplate.ts

+export const removePropertyIdFromScript = (script: string, hasPropertyId: boolean) => {
+    if (!hasPropertyId) {
+        script = script.replaceAll('+ "?property_id=" + fidesPropertyId + "&"', "");
+    }
+    return script;
+};


Can we have this be inserted instead of removed?

@tvandort I changed the logic to insert the property ID now.

fides/clients/admin-ui/src/features/privacy-experience/fidesJsScriptTemplate.ts

Lines 6 to 11 in 1e1cedb

*/

const PROPERTY_UNIQUE_ID_TEMPLATE = (propertyId?: string | null): string => {

if (propertyId) {

return propertyId;

}

return "{property-unique-id}";

tvandort · 2025-12-05T19:41:20Z

clients/admin-ui/src/features/privacy-experience/fidesJsScriptTemplate.ts

+        });
+
+        addEventListener("FidesInitialized", function () {
+            // support custom css hackery


We probably don't want to use the word hackery here.

Might be worth including an example of how to use it.

Removed and updated comments

tvandort · 2025-12-05T19:42:30Z

clients/admin-ui/src/features/privacy-experience/fidesJsScriptTemplate.ts

+            if (key.startsWith(fidesPrefix)) {
+                fidesSearchParams.set(
+                    key.replace(fidesPrefix, ""),
+                    key === fidesPrefix + "cache_bust" ? Date.now().toString() : value


We should consider making the cache bust parameter also just pass refresh to the privacy center to make everyone's life easier.

Included refresh=true anytime the cache bust parameter is set:

fides/clients/admin-ui/src/features/privacy-experience/fidesJsScriptTemplate.ts

Line 54 in 1e1cedb

fidesSearchParams.set(

tvandort · 2025-12-05T19:43:22Z

clients/admin-ui/src/features/privacy-experience/JavaScriptTag.tsx

+  FIDES_JS_SCRIPT_TEMPLATE,
+  PRIVACY_CENTER_HOSTNAME_TEMPLATE,
+  removePropertyIdFromScript
+} from "./fidesJsScriptTemplate";


I have no idea when we want to use relative vs absolute imports as a "general rule". Personally I prefer all absolute but I don't know if that's our general practice.

Switched the paths to absolute.

tvandort · 2025-12-05T19:44:06Z

clients/admin-ui/src/features/privacy-experience/JavaScriptTag.tsx

+    () => {
+      let script = FIDES_JS_SCRIPT_TEMPLATE;
+
+      script = removePropertyIdFromScript(script, false);


I'd like to see this more as something like:
getScript({propertyId: "example"}) or getScript()

Let me know what you think of the new implementation. Now, pretty much all of the logic is contained in the script template, and the script tags just handle the rendering of the template with some logic to recompute the dynamic values when those are changed.

fides/clients/admin-ui/src/features/privacy-experience/JavaScriptTag.tsx

Lines 30 to 35 in 1e1cedb

const fidesJsScriptTag = useMemo(

() => {

return FIDES_JS_SCRIPT_TEMPLATE(privacyCenterHostname);

},

[privacyCenterHostname],

);

tvandort · 2025-12-05T19:45:32Z

clients/admin-ui/src/features/privacy-experience/NewJavaScriptTag.tsx

+    let script = FIDES_JS_SCRIPT_TEMPLATE.replaceAll(
      PROPERTY_UNIQUE_ID_TEMPLATE,
      property.id!.toString(),
    );
-    if (isFidesCloud && isSuccess && fidesCloudConfig?.privacy_center_url) {
-      script.replace(
-        PRIVACY_CENTER_HOSTNAME_TEMPLATE,
-        fidesCloudConfig.privacy_center_url,
-      );
+    // Use user input if provided, otherwise fall back to Fides Cloud config
+    const hostname =
+      privacyCenterHostname ||
+      (isFidesCloud && isSuccess && fidesCloudConfig?.privacy_center_url
+        ? fidesCloudConfig.privacy_center_url
+        : "");
+    if (hostname) {
+      script = script.replaceAll(PRIVACY_CENTER_HOSTNAME_TEMPLATE, hostname);


Same feedback here, I'd love to see the templating inside of the function that returns the script.

See update here:

fides/clients/admin-ui/src/features/privacy-experience/NewJavaScriptTag.tsx

Lines 33 to 37 in 1e1cedb

const fidesJsScriptTag = useMemo(

() => FIDES_JS_SCRIPT_TEMPLATE(privacyCenterHostname, property),

[privacyCenterHostname, property],

);

tvandort · 2025-12-11T21:49:00Z

clients/admin-ui/src/features/privacy-experience/fidesJsScriptTemplate.ts

+/**
+ * Generates the property ID query parameter string for the Fides.js script URL
+ */
+const PROPERTY_UNIQUE_ID_TEMPLATE = (propertyId?: string | null): string => {


Function naming pattern should be camelcase

tvandort · 2025-12-11T21:49:09Z

clients/admin-ui/src/features/privacy-experience/fidesJsScriptTemplate.ts

+/**
+ * Generates the complete Fides.js script tag with privacy center hostname and property ID
+ */
+export const FIDES_JS_SCRIPT_TEMPLATE = (privacyCenterHostname?: string, property?: Property): string => {


Function naming pattern should be camelcase

tvandort · 2025-12-12T16:07:23Z

clients/admin-ui/src/features/privacy-experience/fidesJsScriptTemplate.ts

+    if (propertyId) {
+        return propertyId;
+    }
+    return "{property-unique-id}";


Is this return value ever used?

Yes, it will return "{property-unique-id}" when there isn't a property in scope, which means this version will be rendered when accessing the script from the Experiences screen. I can add a comment that explains this.

tvandort · 2025-12-12T16:09:11Z

clients/admin-ui/src/features/privacy-experience/fidesJsScriptTemplate.ts

+    if (privacyCenterHostname) {
+        script = script.replaceAll(PRIVACY_CENTER_HOSTNAME_TEMPLATE, privacyCenterHostname);
+    }


The template is updated in 2 ways, both replacement and by string interpolation in the string itself. Do we need both?

jjdaurora added 2 commits December 5, 2025 09:57

add text field for privacy center URL entry;

aace664

update comments;

a119a94

jjdaurora requested a review from a team as a code owner December 5, 2025 14:58

jjdaurora requested review from gilluminate and removed request for a team December 5, 2025 14:58

greptile-apps bot reviewed Dec 5, 2025

View reviewed changes

clients/admin-ui/src/features/privacy-experience/fidesJsScriptTemplate.ts Outdated Show resolved Hide resolved

clients/admin-ui/src/features/privacy-experience/fidesJsScriptTemplate.ts Outdated Show resolved Hide resolved

vercel bot had a problem deploying to Preview – fides-plus-nightly December 5, 2025 15:01 Failure

fidesJsScriptTemplate; add property ID removal function;

098443d

vercel bot had a problem deploying to Preview – fides-plus-nightly December 5, 2025 17:36 Failure

jjdaurora added 2 commits December 5, 2025 12:44

Remove gvl.json and run_migrations.py from version control

d01e51f

Merge branch 'main' into jjdaurora/ENG-1944-v2

452c3d0

jjdaurora requested review from eladethyca, tvandort and wadesdev December 5, 2025 17:54

jjdaurora changed the title ~~Jjdaurora/eng 1944 v2~~ Fides JS Code Snippet - Include wrapper script; add text field to set Privacy Center host URL Dec 5, 2025

vercel bot had a problem deploying to Preview – fides-plus-nightly December 5, 2025 17:57 Failure

tvandort requested changes Dec 5, 2025

View reviewed changes

fidesJsScriptTemplate; refactor logic;

5331233

vercel bot had a problem deploying to Preview – fides-plus-nightly December 11, 2025 21:05 Failure

fidesJsScriptTemplate; comment updates;

1e1cedb

vercel bot had a problem deploying to Preview – fides-plus-nightly December 11, 2025 21:42 Failure

jjdaurora requested a review from tvandort December 11, 2025 21:45

tvandort reviewed Dec 12, 2025

View reviewed changes

update template variable syntax;

9128e57

jjdaurora requested a review from tvandort December 12, 2025 18:58

vercel bot had a problem deploying to Preview – fides-plus-nightly December 12, 2025 19:01 Failure

	*/
	const PROPERTY_UNIQUE_ID_TEMPLATE = (propertyId?: string \| null): string => {
	if (propertyId) {
	return propertyId;
	}
	return "{property-unique-id}";

	const fidesJsScriptTag = useMemo(
	() => {
	return FIDES_JS_SCRIPT_TEMPLATE(privacyCenterHostname);
	},
	[privacyCenterHostname],
	);

	const fidesJsScriptTag = useMemo(
	() => FIDES_JS_SCRIPT_TEMPLATE(privacyCenterHostname, property),
	[privacyCenterHostname, property],
	);

Fides JS Code Snippet - Include wrapper script; add text field to set Privacy Center host URL #7081

Are you sure you want to change the base?

Fides JS Code Snippet - Include wrapper script; add text field to set Privacy Center host URL #7081

Uh oh!

Conversation

jjdaurora commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description Of Changes

Code Changes

Steps to Confirm

Pre-Merge Checklist

Uh oh!

vercel bot commented Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot commented Dec 5, 2025

Greptile Overview

Greptile Summary

Confidence Score: 3/5

Important Files Changed

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

tvandort left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tvandort Dec 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jjdaurora commented Dec 5, 2025 •

edited

Loading

vercel bot commented Dec 5, 2025 •

edited

Loading

tvandort Dec 5, 2025 •

edited

Loading