Add Cookies and Surface with Privacy Notices (#3572)

- Backend: Add a Cookies table with FK's to PrivacyDeclaration and System. Surface cookies on privacy notices, calculated at runtime - Frontend: Add cookie input field on system data use tab - Frontend: Have `fides-js` and privacy center delete cookies associated with notices that were opted out of Co-authored-by: Thomas <thomas.lapiana+github@pm.me> Co-authored-by: Thomas <ThomasLaPiana@users.noreply.github.com> Co-authored-by: Allison King <allison@ethyca.com>
ethyca · Jun 21, 2023 · f9c8200 · f9c8200
1 parent 358b324
commit f9c8200
Show file tree

Hide file tree

Showing 73 changed files with 1,391 additions and 255 deletions.
diff --git a/.fides/db_dataset.yml b/.fides/db_dataset.yml
@@ -2240,4 +2240,41 @@ dataset:
       description: 'The name of the organization this Fides deployment belongs to'
       data_categories:
       - user.workplace
+      data_qualifier: aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified
+  - name: cookies
+    description: 'Fides Generated Description for Table: cookies'
+    data_categories: []
+    data_qualifier: aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified
+    fields:
+    - name: created_at
+      data_categories:
+      - system.operations
+      data_qualifier: aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified
+    - name: domain
+      data_categories:
+      - system.operations
+      data_qualifier: aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified
+    - name: id
+      data_categories:
+      - system.operations
+      data_qualifier: aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified
+    - name: name
+      data_categories:
+      - system.operations
+      data_qualifier: aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified
+    - name: path
+      data_categories:
+      - system.operations
+      data_qualifier: aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified
+    - name: privacy_declaration_id
+      data_categories:
+      - system.operations
+      data_qualifier: aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified
+    - name: system_id
+      data_categories:
+      - system.operations
+      data_qualifier: aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified
+    - name: updated_at
+      data_categories:
+      - system.operations
       data_qualifier: aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -44,6 +44,9 @@ The types of changes are:
 - HTML format for privacy request storage destinations [#3427](https://github.com/ethyca/fides/pull/3427)
 - Persistent message showing result and timestamp of last integration test to "Integrations" tab in system view [#3628](https://github.com/ethyca/fides/pull/3628)
 - Access and erasure support for SurveyMonkey [#3590](https://github.com/ethyca/fides/pull/3590)
+- New Cookies Table for storing cookies associated with systems and privacy declarations [#3572](https://github.com/ethyca/fides/pull/3572)
+- `fides-js` and privacy center now delete cookies associated with notices that were opted out of [#3569](https://github.com/ethyca/fides/pull/3569)
+- Cookie input field on system data use tab [#3571](https://github.com/ethyca/fides/pull/3571)
 
 ### Fixed
 
@@ -198,7 +201,7 @@ The types of changes are:
 
 ### Developer Experience
 
-- Use prettier to format *all* source files in client packages [#3240](https://github.com/ethyca/fides/pull/3240)
+- Use prettier to format _all_ source files in client packages [#3240](https://github.com/ethyca/fides/pull/3240)
 
 ### Deprecated
 

diff --git a/clients/admin-ui/cypress/e2e/systems.cy.ts b/clients/admin-ui/cypress/e2e/systems.cy.ts
@@ -172,6 +172,8 @@ describe("System management page", () => {
               data_categories: declaration.data_categories,
               data_subjects: declaration.data_subjects,
               dataset_references: ["demo_users_dataset_2"],
+              cookies: [],
+              id: "",
             });
           });
         });

diff --git a/clients/admin-ui/cypress/fixtures/systems/system.json b/clients/admin-ui/cypress/fixtures/systems/system.json
@@ -16,7 +16,9 @@
       "data_use": "improve.system",
       "data_qualifier": "aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified",
       "data_subjects": ["customer"],
-      "dataset_references": ["demo_users_dataset"]
+      "dataset_references": ["demo_users_dataset"],
+      "cookies": [],
+      "id": "pri_ac9d4dfb-d033-4b06-bc7f-968df8d125ff"
     }
   ],
   "joint_controller": { "name": "Sally Controller" },

diff --git a/clients/admin-ui/cypress/fixtures/systems/systems.json b/clients/admin-ui/cypress/fixtures/systems/systems.json
@@ -17,7 +17,9 @@
         "data_use": "improve.system",
         "data_qualifier": "aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified",
         "data_subjects": ["anonymous_user"],
-        "dataset_references": ["public"]
+        "dataset_references": ["public"],
+        "cookies": [],
+        "id": "pri_ac9d4dfb-d033-4b06-bc7f-968df8d125ff"
       }
     ],
     "joint_controller": null,
@@ -59,7 +61,9 @@
         "data_subjects": ["customer"],
         "dataset_references": ["demo_users_dataset"],
         "egress": null,
-        "ingress": null
+        "ingress": null,
+        "cookies": [],
+        "id": "pri_ac9d4dfb-d033-4b06-bc7f-968df8d125ff"
       }
     ],
     "joint_controller": null,
@@ -99,7 +103,9 @@
         "data_subjects": ["customer"],
         "dataset_references": null,
         "egress": null,
-        "ingress": null
+        "ingress": null,
+        "cookies": [],
+        "id": "pri_06430a1c-1365-422e-90a7-d444ddb32181"
       }
     ],
     "joint_controller": null,

diff --git a/clients/admin-ui/cypress/fixtures/systems/systems_with_data_uses.json b/clients/admin-ui/cypress/fixtures/systems/systems_with_data_uses.json
@@ -17,7 +17,9 @@
         "data_use": "improve.system",
         "data_qualifier": "aggregated.anonymized.unlinked_pseudonymized.pseudonymized.identified",
         "data_subjects": ["anonymous_user"],
-        "dataset_references": ["public"]
+        "dataset_references": ["public"],
+        "cookies": [],
+        "id": "pri_ac9d4dfb-d033-4b06-bc7f-968df8d125ff"
       },
       {
         "name": "Collect data for marketing",
@@ -27,7 +29,9 @@
         "data_subjects": ["customer"],
         "dataset_references": null,
         "egress": null,
-        "ingress": null
+        "ingress": null,
+        "cookies": [],
+        "id": "pri_bc6e6efe-f122-3e33-ac9a-732ae8b437bb"
       }
     ],
     "joint_controller": null,

diff --git a/clients/admin-ui/src/features/common/form/inputs.tsx b/clients/admin-ui/src/features/common/form/inputs.tsx
@@ -316,21 +316,26 @@ const CreatableSelectInput = ({
       size={size}
       classNamePrefix="custom-creatable-select"
       chakraStyles={{
-        container: (provided) => ({ ...provided, flexGrow: 1 }),
+        container: (provided) => ({
+          ...provided,
+          flexGrow: 1,
+          backgroundColor: "white",
+        }),
         dropdownIndicator: (provided) => ({
           ...provided,
-          background: "white",
+          bg: "transparent",
+          px: 2,
+          cursor: "inherit",
+        }),
+        indicatorSeparator: (provided) => ({
+          ...provided,
+          display: "none",
         }),
         multiValue: (provided) => ({
           ...provided,
           background: "primary.400",
           color: "white",
         }),
-        multiValueRemove: (provided) => ({
-          ...provided,
-          display: "none",
-          visibility: "hidden",
-        }),
       }}
       components={components}
       isSearchable={isSearchable}

diff --git a/clients/admin-ui/src/features/system/SystemFormTabs.tsx b/clients/admin-ui/src/features/system/SystemFormTabs.tsx
@@ -185,7 +185,7 @@ const SystemFormTabs = ({
       label: "Data uses",
       content: activeSystem ? (
         <Box px={6} width={{ base: "100%", lg: "70%" }}>
-          <PrivacyDeclarationStep system={activeSystem as System} />
+          <PrivacyDeclarationStep system={activeSystem} />
         </Box>
       ) : null,
       isDisabled: !activeSystem,

diff --git a/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationAccordion.tsx b/clients/admin-ui/src/features/system/privacy-declarations/PrivacyDeclarationAccordion.tsx
@@ -9,38 +9,40 @@ import {
 import { Form, Formik } from "formik";
 
 import { FormGuard } from "~/features/common/hooks/useIsAnyFormDirty";
+import { PrivacyDeclarationResponse } from "~/types/api";
 
 import {
   DataProps,
   PrivacyDeclarationFormComponents,
   usePrivacyDeclarationForm,
   ValidationSchema,
 } from "./PrivacyDeclarationForm";
-import { PrivacyDeclarationWithId } from "./types";
 
 interface AccordionProps extends DataProps {
-  privacyDeclarations: PrivacyDeclarationWithId[];
+  privacyDeclarations: PrivacyDeclarationResponse[];
   onEdit: (
-    oldDeclaration: PrivacyDeclarationWithId,
-    newDeclaration: PrivacyDeclarationWithId
-  ) => Promise<PrivacyDeclarationWithId[] | undefined>;
+    oldDeclaration: PrivacyDeclarationResponse,
+    newDeclaration: PrivacyDeclarationResponse
+  ) => Promise<PrivacyDeclarationResponse[] | undefined>;
   onDelete: (
-    declaration: PrivacyDeclarationWithId
-  ) => Promise<PrivacyDeclarationWithId[] | undefined>;
+    declaration: PrivacyDeclarationResponse
+  ) => Promise<PrivacyDeclarationResponse[] | undefined>;
   includeCustomFields?: boolean;
+  includeCookies?: boolean;
 }
 
 const PrivacyDeclarationAccordionItem = ({
   privacyDeclaration,
   onEdit,
   onDelete,
   includeCustomFields,
+  includeCookies,
   ...dataProps
-}: { privacyDeclaration: PrivacyDeclarationWithId } & Omit<
+}: { privacyDeclaration: PrivacyDeclarationResponse } & Omit<
   AccordionProps,
   "privacyDeclarations"
 >) => {
-  const handleEdit = (values: PrivacyDeclarationWithId) =>
+  const handleEdit = (values: PrivacyDeclarationResponse) =>
     onEdit(privacyDeclaration, values);
 
   const { initialValues, renderHeader, handleSubmit } =
@@ -85,6 +87,7 @@ const PrivacyDeclarationAccordionItem = ({
                     privacyDeclarationId={privacyDeclaration.id}
                     onDelete={onDelete}
                     includeCustomFields={includeCustomFields}
+                    includeCookies={includeCookies}
                     {...dataProps}
                   />
                 </Stack>