LJ-309: allow privacy notices to be assigned to TCF components

CHANGELOG.md

@@ -28,6 +28,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 - Added frequency field to DataHubSchema integration config [#5716](https://github.com/ethyca/fides/pull/5716)
 - Added glossary_node field to DataHubSchema integration config [#5734](https://github.com/ethyca/fides/pull/5734)
 - Added initial support for upcoming "headless" CMP experience type [#5731](https://github.com/ethyca/fides/pull/5731)
+- Exposes privacy notice picker for TCF components [#5730](https://github.com/ethyca/fides/pull/5730)
 
 ### Fixed
 - Fixed `fides annotate dataset` command enters incorrect value on the `direction` field. [#5727](https://github.com/ethyca/fides/pull/5727)

clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts

@@ -266,7 +266,7 @@ describe("Privacy experiences", () => {
       });
 
       it("shows option to display privacy notices in banner and updates preview when clicked", () => {
-        cy.getByTestId("input-show_layer1_notices").should("not.be.visible");
+        cy.getByTestId("input-show_layer1_notices").should("not.exist");
         cy.getByTestId("controlled-select-component").antSelect(
           "Banner and modal",
         );
@@ -279,6 +279,14 @@ describe("Privacy experiences", () => {
           .contains("Essential");
       });
 
+      it("does not show option to display privacy notices in modal preview when clicked", () => {
+        cy.getByTestId("input-show_layer1_notices").should("not.exist");
+        cy.getByTestId("controlled-select-component").antSelect("Modal");
+        cy.getByTestId("add-privacy-notice").click();
+        cy.getByTestId("select-privacy-notice").antSelect(0);
+        cy.getByTestId("input-show_layer1_notices").should("not.exist");
+      });
+
       it("allows editing experience text and shows updated text in the preview", () => {
         cy.getByTestId("controlled-select-component").antSelect(
           "Banner and modal",

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

@@ -229,22 +229,22 @@ export const PrivacyExperienceForm = ({
         baseTestId="property"
       />
       <Divider />
-      {values.component !== ComponentType.TCF_OVERLAY ? (
+      <Heading fontSize="md" fontWeight="semibold">
+        Privacy notices
+      </Heading>
+      <ScrollableList
+        addButtonLabel="Add privacy notice"
+        allItems={filterNoticesForOnlyParentNotices().map((n) => n.id)}
+        values={values.privacy_notice_ids ?? []}
+        setValues={(newValues) =>
+          setFieldValue("privacy_notice_ids", newValues)
+        }
+        getItemLabel={getPrivacyNoticeName}
+        draggable
+        baseTestId="privacy-notice"
+      />
+      {values.component === ComponentType.BANNER_AND_MODAL ? (
         <>
-          <Heading fontSize="md" fontWeight="semibold">
-            Privacy notices
-          </Heading>
-          <ScrollableList
-            addButtonLabel="Add privacy notice"
-            allItems={filterNoticesForOnlyParentNotices().map((n) => n.id)}
-            values={values.privacy_notice_ids ?? []}
-            setValues={(newValues) =>
-              setFieldValue("privacy_notice_ids", newValues)
-            }
-            getItemLabel={getPrivacyNoticeName}
-            draggable
-            baseTestId="privacy-notice"
-          />
           <Collapse in={!!values.privacy_notice_ids?.length} animateOpacity>
             <Box p="1px">
               <CustomSwitch