From ccd14a7edb80bdb95e4358003773bed2aa218c5f Mon Sep 17 00:00:00 2001
From: Lucano Vera <lucanovera@live.com.ar>
Date: Wed, 20 Mar 2024 17:12:06 -0300
Subject: [PATCH] =?UTF-8?q?PROD-1653=20Disable=20editing=20of=20type=20of?=
 =?UTF-8?q?=20data=20use=20and=20name=20after=20it=20has=20b=E2=80=A6=20(#?=
 =?UTF-8?q?4731)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Lucano Vera <lucanovera@ethyca.com>
---
 CHANGELOG.md                                  |  2 ++
 .../admin-ui/cypress/e2e/systems-plus.cy.ts   | 22 ++++++++++++++++++-
 .../PrivacyDeclarationForm.tsx                | 11 +++++++---
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3e8c8b598f..0a9290ad2a 100644
--- 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
index 0ca5520245..432547200e 100644
--- 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
index f62008d8b5..b1b7280575 100644
--- 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%">