Show 'allow dismissal' toggle when editing TCF experience (#4755)

ethyca · Apr 2, 2024 · 9c5dd34 · 9c5dd34
1 parent 3ff188b
commit 9c5dd34
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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"