PROD-1653 Disable editing of type of data use and name after it has b… (

#4731) Co-authored-by: Lucano Vera <[email protected]>
ethyca · Mar 20, 2024 · ccd14a7 · ccd14a7
1 parent dd1f329
commit ccd14a7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,8 @@ The types of changes are:
 
 ### Fixed
 - Fixed responsive issues with the buttons on the integration screen [#4729](https://github.com/ethyca/fides/pull/4729)
+- Disable editing of data use declaration name and type after creation [#4731](https://github.com/ethyca/fides/pull/4731)
+
 
 ## [2.32.0](https://github.com/ethyca/fides/compare/2.31.1...2.32.0)
 

diff --git a/clients/admin-ui/cypress/e2e/systems-plus.cy.ts b/clients/admin-ui/cypress/e2e/systems-plus.cy.ts
@@ -176,7 +176,27 @@ describe("System management with Plus features", () => {
       cy.getByTestId("add-btn");
       cy.getByTestId("delete-btn");
       cy.getByTestId("row-functional.service.improve").click();
-      cy.getByTestId("input-name").should("not.be.disabled");
+      cy.getByTestId("input-data_categories")
+        .find("input")
+        .should("not.be.disabled");
+    });
+
+    it("don't allow editing declaration name after creation", () => {
+      cy.getSelectValueContainer("input-name").type("L{enter}");
+      cy.getByTestId("save-btn").click();
+      cy.wait(["@postSystem", "@getSystem", "@getSystems"]);
+      cy.getByTestId("tab-Data uses").click();
+      cy.getByTestId("row-functional.service.improve").click();
+      cy.getByTestId("input-name").should("be.disabled");
+    });
+
+    it("don't allow editing data uses after creation", () => {
+      cy.getSelectValueContainer("input-name").type("L{enter}");
+      cy.getByTestId("save-btn").click();
+      cy.wait(["@postSystem", "@getSystem", "@getSystems"]);
+      cy.getByTestId("tab-Data uses").click();
+      cy.getByTestId("row-functional.service.improve").click();
+      cy.getByTestId("input-data_use").find("input").should("be.disabled");
     });
   });
 

diff --git a/clients/admin-ui/src/features/system/system-form-declaration-tab/PrivacyDeclarationForm.tsx b/clients/admin-ui/src/features/system/system-form-declaration-tab/PrivacyDeclarationForm.tsx
@@ -116,6 +116,8 @@ export const PrivacyDeclarationFormComponents = ({
   privacyDeclarationId?: string;
   lockedForGVL?: boolean;
 }) => {
+  const isEditing = !!privacyDeclarationId;
+
   const legalBasisForProcessingOptions = useMemo(
     () =>
       (
@@ -161,7 +163,7 @@ export const PrivacyDeclarationFormComponents = ({
           label="Declaration name (optional)"
           name="name"
           tooltip="Would you like to append anything to the system name?"
-          disabled={lockedForGVL}
+          disabled={isEditing || lockedForGVL}
           variant="stacked"
         />
         <CustomSelect
@@ -175,7 +177,7 @@ export const PrivacyDeclarationFormComponents = ({
           tooltip="For which business purposes is this data processed?"
           variant="stacked"
           isRequired
-          isDisabled={!!privacyDeclarationId || lockedForGVL}
+          isDisabled={isEditing || lockedForGVL}
         />
         <CustomSelect
           name="data_categories"
@@ -453,12 +455,14 @@ export const PrivacyDeclarationForm = ({
   initialValues: passedInInitialValues,
   ...dataProps
 }: Props & DataProps) => {
+  const privacyDeclarationId = passedInInitialValues?.id;
+
   const { handleSubmit, initialValues } = usePrivacyDeclarationForm({
     onSubmit,
     onCancel,
     initialValues: passedInInitialValues,
     allDataUses: dataProps.allDataUses,
-    privacyDeclarationId: passedInInitialValues?.id,
+    privacyDeclarationId,
   });
 
   const lockedForGVL = useAppSelector(selectLockedForGVL);
@@ -477,6 +481,7 @@ export const PrivacyDeclarationForm = ({
             <PrivacyDeclarationFormComponents
               values={values}
               lockedForGVL={lockedForGVL}
+              privacyDeclarationId={privacyDeclarationId}
               {...dataProps}
             />
             <Flex w="100%">