Merge privacy declaration components

CHANGELOG.md

@@ -30,6 +30,7 @@ The types of changes are:
 - Update custom field definition uniqueness to be case insensitive name per resource type [#3215](https://github.com/ethyca/fides/pull/3215)
 - Restrict where privacy notices of certain consent mechanisms must be displayed [#3195](https://github.com/ethyca/fides/pull/3195)
 - Merged the `lib` submodule into the `api.ops` submodule [#3134](https://github.com/ethyca/fides/pull/3134)
+- Merged duplicate privacy declaration components [#3254](https://github.com/ethyca/fides/pull/3254)
 
 ### Fixed
 - Prevent ability to unintentionally show "default" Privacy Center configuration, styles, etc. [#3242](https://github.com/ethyca/fides/pull/3242)

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

@@ -530,6 +530,12 @@ describe("System management page", () => {
         });
         cy.visit(`${SYSTEM_ROUTE}/configure/fidesctl_system`);
         cy.wait("@getFidesctlSystemWithDataUses");
+        cy.fixture("systems/system.json").then((system) => {
+          const newSystem = { ...system, fides_key: "fidesctl_system" };
+          cy.intercept("PUT", "/api/v1/system*", { body: newSystem }).as(
+            "putFidesctlSystem"
+          );
+        });
 
         cy.getByTestId("tab-Data uses").click();
       });
@@ -545,13 +551,13 @@ describe("System management page", () => {
           cy.getByTestId("input-data_subjects").type(`anonymous{enter}`);
           cy.getByTestId("delete-btn").should("be.disabled");
           cy.getByTestId("save-btn").click();
-          cy.wait("@putSystem");
+          cy.wait("@putFidesctlSystem");
           cy.getByTestId("delete-btn").should("be.enabled");
           // now go through delete flow
           cy.getByTestId("delete-btn").click();
         });
         cy.getByTestId("continue-btn").click();
-        cy.wait("@putSystem");
+        cy.wait("@putFidesctlSystem");
         cy.getByTestId("toast-success-msg").contains("Data use deleted");
       });
 
@@ -561,7 +567,7 @@ describe("System management page", () => {
           cy.getByTestId("delete-btn").click();
         });
         cy.getByTestId("continue-btn").click();
-        cy.wait("@putSystem").then((interception) => {
+        cy.wait("@putFidesctlSystem").then((interception) => {
           const { body } = interception.request;
           expect(body.privacy_declarations.length).to.eql(1);
           expect(body.privacy_declarations[0].data_use !== "improve.system");

clients/admin-ui/src/features/datamap/datamap-drawer/DatamapDrawer.tsx

@@ -6,23 +6,13 @@ import {
   Slide,
   Spacer,
   Text,
-  useToast,
 } from "@fidesui/react";
-import { SerializedError } from "@reduxjs/toolkit";
-import { FetchBaseQueryError } from "@reduxjs/toolkit/dist/query/fetchBaseQuery";
 import { DataFlowAccordion } from "common/system-data-flow/DataFlowAccordion";
 import React, { useMemo } from "react";
 
-import { getErrorMessage, isErrorResult } from "~/features/common/helpers";
-import { errorToastParams, successToastParams } from "~/features/common/toast";
-import { useTaxonomyData } from "~/features/datamap/privacy-declarations/PrivacyDeclarationForm";
-import PrivacyDeclarationManager from "~/features/datamap/privacy-declarations/PrivacyDeclarationManager";
-import {
-  useGetSystemByFidesKeyQuery,
-  useUpdateSystemMutation,
-} from "~/features/system/system.slice";
-import { PrivacyDeclaration } from "~/types/api/models/PrivacyDeclaration";
-import { System } from "~/types/api/models/System";
+import { usePrivacyDeclarationData } from "~/features/system/privacy-declarations/hooks";
+import PrivacyDeclarationManager from "~/features/system/privacy-declarations/PrivacyDeclarationManager";
+import { useGetSystemByFidesKeyQuery } from "~/features/system/system.slice";
 
 import SystemInfo from "./SystemInfo";
 
@@ -36,58 +26,14 @@ const DatamapDrawer = ({
   resetSelectedSystemId,
 }: DatamapDrawerProps) => {
   const isOpen = useMemo(() => Boolean(selectedSystemId), [selectedSystemId]);
-  const { isLoading, ...dataProps } = useTaxonomyData();
-  const toast = useToast();
+  const { isLoading, ...dataProps } = usePrivacyDeclarationData({
+    includeDatasets: false,
+  });
 
-  const [updateSystemMutationTrigger] = useUpdateSystemMutation();
   const { data: system } = useGetSystemByFidesKeyQuery(selectedSystemId!, {
     skip: !selectedSystemId,
   });
 
-  const handleSave = async (
-    updatedDeclarations: PrivacyDeclaration[],
-    isDelete?: boolean
-  ) => {
-    const systemBodyWithDeclaration = {
-      ...system!,
-      privacy_declarations: updatedDeclarations,
-    };
-
-    const handleResult = (
-      result:
-        | { data: System }
-        | { error: FetchBaseQueryError | SerializedError }
-    ) => {
-      if (isErrorResult(result)) {
-        const errorMsg = getErrorMessage(
-          result.error,
-          "An unexpected error occurred while updating the system. Please try again."
-        );
-
-        toast(errorToastParams(errorMsg));
-        return false;
-      }
-      toast.closeAll();
-      toast(
-        successToastParams(isDelete ? "Data use deleted" : "Data use saved")
-      );
-      return true;
-    };
-
-    const updateSystemResult = await updateSystemMutationTrigger(
-      systemBodyWithDeclaration
-    );
-
-    return handleResult(updateSystemResult);
-  };
-  const collisionWarning = () => {
-    toast(
-      errorToastParams(
-        "A declaration already exists with that data use in this system. Please supply a different data use."
-      )
-    );
-  };
-
   return (
     <Box
       position="absolute"
@@ -183,12 +129,13 @@ const DatamapDrawer = ({
                   Data uses
                 </Text>
                 <Box borderTop="1px solid" borderColor="gray.200">
-                  <PrivacyDeclarationManager
-                    system={system!}
-                    onCollision={collisionWarning}
-                    onSave={handleSave}
-                    {...dataProps}
-                  />
+                  <Box pb={3}>
+                    <PrivacyDeclarationManager
+                      system={system}
+                      addButtonProps={{ ml: 4 }}
+                      {...dataProps}
+                    />
+                  </Box>
                 </Box>
                 <Text
                   size="md"