From 9c5dd343fc7a72550b364b61a66ab0e99232e3c3 Mon Sep 17 00:00:00 2001
From: jpople <jeremy@ethyca.com>
Date: Tue, 2 Apr 2024 11:56:30 -0400
Subject: [PATCH] Show 'allow dismissal' toggle when editing TCF experience
 (#4755)

---
 CHANGELOG.md                                  |  2 +
 .../cypress/e2e/privacy-experiences.cy.ts     |  3 ++
 .../PrivacyExperienceForm.tsx                 | 49 +++++++++----------
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 927cb480e8..6164006ff9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,7 +18,9 @@ The types of changes are:
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.33.0...main)
 
 ### Fixed
+
 - Fixed select dropdowns being cut off by edges of modal forms [#4757](https://github.com/ethyca/fides/pull/4757)
+- Changed "allow user to dismiss" toggle to show on config form for TCF experience [#4755](https://github.com/ethyca/fides/pull/4755)
 
 ## [2.33.0](https://github.com/ethyca/fides/compare/2.32.0...2.33.0)
 
diff --git a/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts b/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts
index 717f8d5b92..d38e5148ed 100644
--- a/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts
+++ b/clients/admin-ui/cypress/e2e/privacy-experiences.cy.ts
@@ -228,10 +228,12 @@ describe("Privacy experiences", () => {
       it("doesn't allow component type to be changed after selection", () => {
         cy.selectOption("input-component", "Banner and modal");
         cy.getByTestId("input-component").find("input").should("be.disabled");
+        cy.getByTestId("input-dismissable").should("be.visible");
       });
 
       it("doesn't show a preview for a privacy center", () => {
         cy.selectOption("input-component", "Privacy center");
+        cy.getByTestId("input-dismissable").should("not.be.visible");
         cy.getByTestId("no-preview-notice").contains(
           "Privacy center preview not available"
         );
@@ -297,6 +299,7 @@ describe("Privacy experiences", () => {
           }).as("getTCFExperience");
         });
         cy.wait("@getTCFExperience");
+        cy.getByTestId("input-dismissable").should("be.visible");
         cy.getByTestId("no-preview-notice").contains(
           "TCF preview not available"
         );
diff --git a/clients/admin-ui/src/features/privacy-experience/PrivacyExperienceForm.tsx b/clients/admin-ui/src/features/privacy-experience/PrivacyExperienceForm.tsx
index 33c01fd293..5c976c2d62 100644
--- a/clients/admin-ui/src/features/privacy-experience/PrivacyExperienceForm.tsx
+++ b/clients/admin-ui/src/features/privacy-experience/PrivacyExperienceForm.tsx
@@ -171,34 +171,31 @@ export const PrivacyExperienceForm = ({
         variant="stacked"
       />
       {values.component !== ComponentType.TCF_OVERLAY ? (
-        <>
-          <CustomSelect
-            name="component"
-            id="component"
-            options={componentTypeOptions}
-            label="Experience Type"
+        <CustomSelect
+          name="component"
+          id="component"
+          options={componentTypeOptions}
+          label="Experience Type"
+          variant="stacked"
+          isDisabled={!!values.component}
+          isRequired
+        />
+      ) : null}
+      <Collapse
+        in={
+          values.component && values.component !== ComponentType.PRIVACY_CENTER
+        }
+        animateOpacity
+      >
+        <Box p="1px">
+          <CustomSwitch
+            name="dismissable"
+            id="dismissable"
+            label="Allow user to dismiss"
             variant="stacked"
-            isDisabled={!!values.component}
-            isRequired
           />
-          <Collapse
-            in={
-              values.component &&
-              values.component !== ComponentType.PRIVACY_CENTER
-            }
-            animateOpacity
-          >
-            <Box p="1px">
-              <CustomSwitch
-                name="dismissable"
-                id="dismissable"
-                label="Modal is dismissable"
-                variant="stacked"
-              />
-            </Box>
-          </Collapse>
-        </>
-      ) : null}
+        </Box>
+      </Collapse>
       <ScrollableList
         label="Associated properties"
         addButtonLabel="Add property"