Separate 'next' and 'add' logic in PrivacyDeclarationForm (#1086)

* Separate continue and add logic * Update tests * Update changelog
ethyca · Sep 20, 2022 · 7bd5be8 · 7bd5be8
1 parent bcf2a78
commit 7bd5be8
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 67 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -32,6 +32,7 @@ The types of changes are:
 ### Changed
 
 * Changed behavior of `load_default_taxonomy` to append instead of upsert [#1040](https://github.com/ethyca/fides/pull/1040)
+* Changed behavior of adding privacy declarations to decouple the actions of the "add" and "next" buttons [#1086](https://github.com/ethyca/fides/pull/1086)
 
 ### Fixed
 

diff --git a/clients/ctl/admin-ui/cypress/e2e/systems.cy.ts b/clients/ctl/admin-ui/cypress/e2e/systems.cy.ts
@@ -179,7 +179,8 @@ describe("System management page", () => {
           cy.getByTestId("input-data_qualifier").within(() => {
             cy.contains(declaration.data_qualifier).click();
           });
-          cy.getByTestId("confirm-btn").click();
+          cy.getByTestId("add-btn").click();
+          cy.getByTestId("next-btn").click();
           cy.wait("@putSystem").then((interception) => {
             const { body } = interception.request;
             // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -257,7 +258,7 @@ describe("System management page", () => {
       cy.getByTestId("toast-success-msg");
     });
 
-    it.only("Can render an error on delete", () => {
+    it("Can render an error on delete", () => {
       cy.intercept("DELETE", "/api/v1/system/*", {
         statusCode: 404,
         body: {

diff --git a/clients/ctl/admin-ui/src/features/config-wizard/PrivacyDeclarationForm.tsx b/clients/ctl/admin-ui/src/features/config-wizard/PrivacyDeclarationForm.tsx
@@ -1,7 +1,7 @@
 import { Box, Button, Divider, Heading, Stack, useToast } from "@fidesui/react";
 import { SerializedError } from "@reduxjs/toolkit";
 import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query/fetchBaseQuery";
-import { Form, Formik } from "formik";
+import { Form, Formik, FormikHelpers } from "formik";
 import React, { Fragment, useState } from "react";
 import * as Yup from "yup";
 
@@ -88,36 +88,10 @@ const PrivacyDeclarationForm = ({ system, onCancel, onSuccess }: Props) => {
     data_qualifier: "",
   };
 
-  const handleSubmit = async (values: FormValues) => {
-    let privacyDeclarations: PrivacyDeclaration[] = [];
-
-    const handlePrivacyDeclarations = () => {
-      // If the declaration already exists
-      if (
-        system.privacy_declarations.filter(
-          (declaration) => declaration.name === values.name
-        ).length > 0
-      ) {
-        privacyDeclarations = [
-          ...system.privacy_declarations,
-          ...formDeclarations,
-        ];
-      }
-      // If the declaration does not exist
-      else {
-        privacyDeclarations = [
-          ...system.privacy_declarations,
-          ...formDeclarations,
-          transformFormValuesToDeclaration(values),
-        ];
-      }
-    };
-
-    handlePrivacyDeclarations();
-
+  const handleSubmit = async () => {
     const systemBodyWithDeclaration = {
       ...system,
-      privacy_declarations: Array.from(new Set([...privacyDeclarations])),
+      privacy_declarations: formDeclarations,
     };
 
     const handleResult = (
@@ -149,13 +123,12 @@ const PrivacyDeclarationForm = ({ system, onCancel, onSuccess }: Props) => {
     setIsLoading(false);
   };
 
-  const addAnotherDeclaration = (values: PrivacyDeclaration) => {
-    if (
-      values.name === "" ||
-      formDeclarations.filter((d) => d.name === values.name).length > 0 ||
-      system.privacy_declarations.filter((d) => d.name === values.name).length >
-        0
-    ) {
+  const addDeclaration = (
+    values: PrivacyDeclaration,
+    formikHelpers: FormikHelpers<PrivacyDeclaration>
+  ) => {
+    const { resetForm } = formikHelpers;
+    if (formDeclarations.filter((d) => d.name === values.name).length > 0) {
       toast({
         status: "error",
         description:
@@ -167,17 +140,26 @@ const PrivacyDeclarationForm = ({ system, onCancel, onSuccess }: Props) => {
         ...formDeclarations,
         transformFormValuesToDeclaration(values),
       ]);
+      resetForm({
+        values: {
+          name: "",
+          data_subjects: [],
+          data_categories: [],
+          data_use: "",
+          data_qualifier: "",
+        },
+      });
     }
   };
 
   return (
     <Formik
       enableReinitialize
       initialValues={initialValues}
-      onSubmit={handleSubmit}
+      onSubmit={addDeclaration}
       validationSchema={ValidationSchema}
     >
-      {({ resetForm, values, dirty, isValid }) => (
+      {({ dirty }) => (
         <Form data-testid="privacy-declaration-form">
           <Stack spacing={10}>
             <Heading as="h3" size="lg">
@@ -242,29 +224,18 @@ const PrivacyDeclarationForm = ({ system, onCancel, onSuccess }: Props) => {
                 tooltip="How identifiable is the user in the data in this system? For instance, is it anonymized data where the user is truly unknown/unidentifiable, or it is partially identifiable data?"
               />
             </Stack>
-            <Button
-              colorScheme="purple"
-              display="flex"
-              justifyContent="flex-start"
-              variant="link"
-              disabled={!(isValid && dirty)}
-              isLoading={isLoading}
-              onClick={() => {
-                addAnotherDeclaration(values);
-                resetForm({
-                  values: {
-                    name: "",
-                    data_subjects: [],
-                    data_categories: [],
-                    data_use: "",
-                    data_qualifier: "",
-                  },
-                });
-              }}
-              width="40%"
-            >
-              Add another declaration <AddIcon boxSize={10} />{" "}
-            </Button>
+            <Box>
+              <Button
+                type="submit"
+                colorScheme="purple"
+                variant="link"
+                disabled={!dirty}
+                isLoading={isLoading}
+                data-testid="add-btn"
+              >
+                Add <AddIcon boxSize={10} />
+              </Button>
+            </Box>
             <Box>
               <Button
                 onClick={onCancel}
@@ -276,14 +247,14 @@ const PrivacyDeclarationForm = ({ system, onCancel, onSuccess }: Props) => {
                 Cancel
               </Button>
               <Button
-                type="submit"
                 colorScheme="primary"
                 size="sm"
-                disabled={!dirty}
+                disabled={formDeclarations.length === 0}
                 isLoading={isLoading}
-                data-testid="confirm-btn"
+                data-testid="next-btn"
+                onClick={handleSubmit}
               >
-                Confirm and Continue
+                Next
               </Button>
             </Box>
           </Stack>