Custom fields in data use declaration form

CHANGELOG.md

@@ -36,6 +36,8 @@ The types of changes are:
 - Access and erasure support for Unbounce [#2697](https://github.com/ethyca/fides/pull/2697)
 - Support pseudonymous consent requests with `fides_user_device_id` [#3158](https://github.com/ethyca/fides/pull/3158)
 - Update `fides_consent` cookie format [#3158](https://github.com/ethyca/fides/pull/3158)
+- Add custom fields to the data use declaration form [#3197](https://github.com/ethyca/fides/pull/3197)
+
 
 ### Changed
 

clients/admin-ui/cypress/e2e/systems.cy.ts

@@ -1,4 +1,8 @@
-import { stubSystemCrud, stubTaxonomyEntities } from "cypress/support/stubs";
+import {
+  stubPlus,
+  stubSystemCrud,
+  stubTaxonomyEntities,
+} from "cypress/support/stubs";
 
 import {
   ADD_SYSTEMS_MANUAL_ROUTE,
@@ -12,6 +16,7 @@ describe("System management page", () => {
     cy.intercept("GET", "/api/v1/system", {
       fixture: "systems/systems.json",
     }).as("getSystems");
+    stubPlus(false);
   });
 
   it("Can navigate to the system management page", () => {
@@ -171,9 +176,6 @@ describe("System management page", () => {
               dataset_references: ["demo_users_dataset_2"],
             });
           });
-          cy.getByTestId("new-declaration-form").within(() => {
-            cy.getByTestId("header").contains("System");
-          });
         });
       });
 
@@ -332,16 +334,18 @@ describe("System management page", () => {
       });
 
       // edit the existing declaration
-      const newDataUse = "collect";
       cy.getByTestId("accordion-header-improve.system").click();
       cy.getByTestId("improve.system-form").within(() => {
-        cy.getByTestId("input-data_use").type(`${newDataUse}{enter}`);
+        cy.getByTestId("input-data_subjects").type(`anonymous{enter}`);
         cy.getByTestId("save-btn").click();
       });
       cy.wait("@putSystem").then((interception) => {
         const { body } = interception.request;
         expect(body.privacy_declarations.length).to.eql(1);
-        expect(body.privacy_declarations[0].data_use).to.eql(newDataUse);
+        expect(body.privacy_declarations[0].data_subjects).to.eql([
+          "customer",
+          "anonymous_user",
+        ]);
       });
       cy.getByTestId("saved-indicator");
     });
@@ -470,7 +474,8 @@ describe("System management page", () => {
       cy.getByTestId("toast-success-msg");
     });
 
-    it("warns when a data use is being edited to one that is already used", () => {
+    // Cannot currently edit the data use or name fields—they have been disabled
+    it.skip("warns when a data use is being edited to one that is already used", () => {
       cy.fixture("systems/systems_with_data_uses.json").then((systems) => {
         cy.intercept("GET", "/api/v1/system/*", {
           body: systems[0],
@@ -589,12 +594,12 @@ describe("System management page", () => {
     });
 
     it("Can open both accordion items", () => {
-      cy.getByTestId("data-flow-accordion").within(()=>{
+      cy.getByTestId("data-flow-accordion").within(() => {
         cy.getByTestId("data-flow-button-Source").click();
         cy.getByTestId("data-flow-panel-Source").should("exist");
         cy.getByTestId("data-flow-button-Destination").click();
         cy.getByTestId("data-flow-panel-Destination").should("exist");
-      })
+      });
     });
   });
 });

clients/admin-ui/src/features/common/custom-fields/hooks.ts

@@ -136,7 +136,11 @@ export const useCustomFields = ({
 
       // When creating an resource, the fides key may have initially been blank. But by the time the
       // form is submitted it must not be blank (not undefined, not an empty string).
-      const fidesKey = formValues.fides_key || resourceFidesKey;
+      const fidesKey =
+        "fides_key" in formValues && formValues.fides_key !== ""
+          ? formValues.fides_key
+          : resourceFidesKey;
+
       if (!fidesKey) {
         return;
       }

clients/admin-ui/src/features/custom-fields/CustomFieldForm.tsx

@@ -26,6 +26,7 @@ type Props = FormikProps<FormValues> & {
   isLoading: boolean;
   onClose: () => void;
   handleDropdownChange: (value: FieldTypes) => void;
+  isEditing: boolean;
 };
 
 export const CustomFieldForm = ({
@@ -38,6 +39,7 @@ export const CustomFieldForm = ({
   isLoading,
   onClose,
   handleDropdownChange,
+  isEditing,
 }: Props) => {
   const { validateForm } = useFormikContext<FormValues>();
   useEffect(() => {
@@ -71,6 +73,7 @@ export const CustomFieldForm = ({
             name="resource_type"
             options={RESOURCE_TYPE_OPTIONS}
             labelProps={CustomFieldLabelStyles}
+            isDisabled={isEditing}
           />
         </FormSection>
       </Box>

clients/admin-ui/src/features/custom-fields/CustomFieldModal.tsx

@@ -146,6 +146,7 @@ export const CustomFieldModal = ({
   }
 
   const transformedCustomField = transformCustomField(customField, allowList);
+  const isEditing = !!transformedCustomField;
   const initialValues = transformedCustomField || initialValuesTemplate;
 
   const handleDropdownChange = (value: FieldTypes) => {
@@ -276,6 +277,7 @@ export const CustomFieldModal = ({
           >
             {(props) => (
               <CustomFieldForm
+                isEditing={isEditing}
                 validationSchema={validationSchema}
                 isLoading={isLoading}
                 onClose={onClose}

clients/admin-ui/src/features/datamap/privacy-declarations/PrivacyDeclarationAccordion.tsx

@@ -77,6 +77,7 @@ const PrivacyDeclarationAccordionItem = ({
               <AccordionPanel backgroundColor="gray.50" pt={0}>
                 <Stack spacing={4}>
                   <PrivacyDeclarationFormComponents
+                    isEditing
                     onDelete={onDelete}
                     {...dataProps}
                   />

clients/admin-ui/src/features/datamap/privacy-declarations/PrivacyDeclarationForm.tsx

@@ -79,13 +79,15 @@ export interface DataProps {
   allDataCategories: DataCategory[];
   allDataUses: DataUse[];
   allDataSubjects: DataSubject[];
+  isEditing?: boolean;
 }
 
 export const PrivacyDeclarationFormComponents = ({
   allDataUses,
   allDataCategories,
   allDataSubjects,
   onDelete,
+  isEditing,
 }: DataProps & Pick<Props, "onDelete">) => {
   const { dirty, isSubmitting, isValid, initialValues } =
     useFormikContext<PrivacyDeclarationFormValues>();
@@ -110,12 +112,14 @@ export const PrivacyDeclarationFormComponents = ({
         tooltip="What is the system using the data for. For example, is it for third party advertising or perhaps simply providing system operations."
         variant="stacked"
         singleValueBlock
+        isDisabled={isEditing}
       />
       <CustomTextInput
         id="name"
         label="Processing Activity"
         name="name"
         variant="stacked"
+        disabled={isEditing}
         tooltip="The personal data processing activity or activities associated with this data use."
       />
       <CustomSelect

clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationAccordion.tsx

@@ -21,8 +21,10 @@ interface AccordionProps extends DataProps {
   onEdit: (
     oldDeclaration: PrivacyDeclarationWithId,
     newDeclaration: PrivacyDeclarationWithId
-  ) => Promise<boolean>;
-  onDelete: (declaration: PrivacyDeclarationWithId) => Promise<boolean>;
+  ) => Promise<PrivacyDeclarationWithId[] | undefined>;
+  onDelete: (
+    declaration: PrivacyDeclarationWithId
+  ) => Promise<PrivacyDeclarationWithId[] | undefined>;
 }
 
 const PrivacyDeclarationAccordionItem = ({
@@ -34,13 +36,14 @@ const PrivacyDeclarationAccordionItem = ({
   AccordionProps,
   "privacyDeclarations"
 >) => {
-  const handleEdit = (newValues: PrivacyDeclarationWithId) =>
-    onEdit(privacyDeclaration, newValues);
+  const handleEdit = (values: PrivacyDeclarationWithId) =>
+    onEdit(privacyDeclaration, values);
 
   const { initialValues, renderHeader, handleSubmit } =
     usePrivacyDeclarationForm({
       initialValues: privacyDeclaration,
       onSubmit: handleEdit,
+      privacyDeclarationId: privacyDeclaration.id,
       ...dataProps,
     });
 
@@ -71,6 +74,7 @@ const PrivacyDeclarationAccordionItem = ({
               <AccordionPanel backgroundColor="gray.50" pt={0}>
                 <Stack spacing={4}>
                   <PrivacyDeclarationFormComponents
+                    privacyDeclarationId={privacyDeclaration.id}
                     onDelete={onDelete}
                     {...dataProps}
                   />