Merge branch 'main' into aking/3258/css-variables

ethyca · May 22, 2023 · a8fcf67 · a8fcf67
2 parents 0b13272 + 00caa4c
commit a8fcf67
Show file tree

Hide file tree

Showing 23 changed files with 1,052 additions and 382 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,6 +36,8 @@ The types of changes are:
 - Maintain casing differences within Snowflake datasets for proper DSR execution [#3245](https://github.com/ethyca/fides/pull/3245)
 - Support pseudonymous consent requests with `fides_user_device_id` for the new consent workflow [#3203](https://github.com/ethyca/fides/pull/3203)
 - Fides user device id filter to GET Privacy Experience List endpoint to stash user preferences on embedded notices [#3302](https://github.com/ethyca/fides/pull/3302)
+- Support for data categories on manual webhook fields [#3330](https://github.com/ethyca/fides/pull/3330)
+- Added config-driven rendering to consent components [#3316](https://github.com/ethyca/fides/pull/3316)
 
 ### Changed
 

diff --git a/clients/admin-ui/src/features/common/form/inputs.tsx b/clients/admin-ui/src/features/common/form/inputs.tsx
@@ -130,7 +130,7 @@ export interface Option {
   label: string;
 }
 interface SelectProps {
-  label: string;
+  label?: string;
   labelProps?: FormLabelProps;
   tooltip?: string;
   options: Option[];
@@ -429,10 +429,12 @@ export const CustomSelect = ({
   if (variant === "inline") {
     return (
       <FormControl isInvalid={isInvalid} isRequired={isRequired}>
-        <Grid templateColumns="1fr 3fr">
-          <Label htmlFor={props.id || props.name} {...labelProps}>
-            {label}
-          </Label>
+        <Grid templateColumns={label ? "1fr 3fr" : "1fr"}>
+          {label ? (
+            <Label htmlFor={props.id || props.name} {...labelProps}>
+              {label}
+            </Label>
+          ) : null}
           <Flex alignItems="center" data-testid={`input-${field.name}`}>
             <Flex flexDir="column" flexGrow={1} mr={2}>
               <SelectInput
@@ -465,15 +467,17 @@ export const CustomSelect = ({
     <FormControl isInvalid={isInvalid} isRequired={isRequired}>
       <VStack alignItems="start">
         <Flex alignItems="center">
-          <Label
-            htmlFor={props.id || props.name}
-            fontSize="sm"
-            my={0}
-            mr={1}
-            {...labelProps}
-          >
-            {label}
-          </Label>
+          {label ? (
+            <Label
+              htmlFor={props.id || props.name}
+              fontSize="sm"
+              my={0}
+              mr={1}
+              {...labelProps}
+            >
+              {label}
+            </Label>
+          ) : null}
           {tooltip ? <QuestionTooltip label={tooltip} /> : null}
         </Flex>
         <Box width="100%" data-testid={`input-${field.name}`}>

diff --git a/...dmin-ui/src/features/datastore-connections/add-connection/manual/DSRCustomizationForm.tsx b/...dmin-ui/src/features/datastore-connections/add-connection/manual/DSRCustomizationForm.tsx
@@ -5,7 +5,11 @@ import { useRouter } from "next/router";
 import React from "react";
 import * as Yup from "yup";
 
+import { useAppSelector } from "~/app/hooks";
+import { CustomSelect } from "~/features/common/form/inputs";
 import { DATASTORE_CONNECTION_ROUTE } from "~/features/common/nav/v2/routes";
+import { useGetAllDataCategoriesQuery } from "~/features/taxonomy";
+import { selectDataCategories } from "~/features/taxonomy/taxonomy.slice";
 
 import CustomInput from "../forms/CustomInput";
 import { ButtonGroup as ManualButtonGroup } from "./ButtonGroup";
@@ -22,6 +26,9 @@ const DSRCustomizationForm: React.FC<DSRCustomizationFormProps> = ({
   isSubmitting = false,
   onSaveClick,
 }) => {
+  const { isLoading: isLoadingDataCategories } = useGetAllDataCategoriesQuery();
+  const allDataCategories = useAppSelector(selectDataCategories);
+
   const router = useRouter();
   const { errorAlert } = useAlert();
 
@@ -38,6 +45,10 @@ const DSRCustomizationForm: React.FC<DSRCustomizationFormProps> = ({
     onSaveClick(values, actions);
   };
 
+  if (isLoadingDataCategories) {
+    return null;
+  }
+
   return (
     <Formik
       enableReinitialize
@@ -49,6 +60,7 @@ const DSRCustomizationForm: React.FC<DSRCustomizationFormProps> = ({
                 {
                   pii_field: "",
                   dsr_package_label: "",
+                  data_categories: [],
                 },
               ] as Field[]),
       }}
@@ -68,6 +80,7 @@ const DSRCustomizationForm: React.FC<DSRCustomizationFormProps> = ({
               .min(1, "DSR Package Label must have at least one character")
               .max(200, "DSR Package Label has a maximum of 200 characters")
               .label("DSR Package Label"),
+            data_categories: Yup.array(Yup.string()).label("Data Categories"),
           })
         ),
       })}
@@ -93,36 +106,49 @@ const DSRCustomizationForm: React.FC<DSRCustomizationFormProps> = ({
                     >
                       <Box w="416px">PII Field</Box>
                       <Box w="416px">DSR Package Label</Box>
-                      <Box />
+                      <Box w="416px">Data Categories</Box>
+                      <Box visibility="hidden">
+                        <TrashCanSolidIcon />
+                      </Box>
                     </HStack>
-                    <Box
-                      maxH="calc(100vh - 484px)"
-                      paddingRight="13px"
-                      overflow="auto"
-                    >
+                    <Box>
                       {fields && fields.length > 0
                         ? fields.map((_field: Field, index: number) => (
                             <HStack
                               // eslint-disable-next-line react/no-array-index-key
                               key={index}
                               mt={index > 0 ? "12px" : undefined}
                               spacing="24px"
+                              align="flex-start"
                             >
-                              <Box h="57px" w="416px">
+                              <Box minH="57px" w="416px">
                                 <CustomInput
                                   autoFocus={index === 0}
                                   displayHelpIcon={false}
                                   isRequired
                                   name={`fields.${index}.pii_field`}
                                 />
                               </Box>
-                              <Box h="57px" w="416px">
+                              <Box minH="57px" w="416px">
                                 <CustomInput
                                   displayHelpIcon={false}
                                   isRequired
                                   name={`fields.${index}.dsr_package_label`}
                                 />
                               </Box>
+                              <Box minH="57px" w="416px">
+                                <CustomSelect
+                                  name={`fields.${index}.data_categories`}
+                                  options={allDataCategories.map(
+                                    (data_category) => ({
+                                      value: data_category.fides_key,
+                                      label: data_category.fides_key,
+                                    })
+                                  )}
+                                  isRequired
+                                  isMulti
+                                />
+                              </Box>
                               <Box
                                 h="57px"
                                 visibility={index > 0 ? "visible" : "hidden"}
@@ -146,6 +172,7 @@ const DSRCustomizationForm: React.FC<DSRCustomizationFormProps> = ({
                         fieldArrayProps.push({
                           pii_field: "",
                           dsr_package_label: "",
+                          data_categories: [],
                         });
                       }}
                       _hover={{ cursor: "pointer" }}

diff --git a/clients/admin-ui/src/features/datastore-connections/add-connection/manual/types.ts b/clients/admin-ui/src/features/datastore-connections/add-connection/manual/types.ts
@@ -1,4 +1,5 @@
 export type Field = {
   pii_field: string;
   dsr_package_label: string;
+  data_categories?: string[];
 };
diff --git a/clients/admin-ui/src/types/api/models/ManualWebhookField.ts b/clients/admin-ui/src/types/api/models/ManualWebhookField.ts
@@ -8,4 +8,5 @@
 export type ManualWebhookField = {
   pii_field: string;
   dsr_package_label?: string;
+  data_categories?: string[];
 };
diff --git a/clients/fides-js/src/components/NoticeToggles.tsx b/clients/fides-js/src/components/NoticeToggles.tsx
@@ -48,7 +48,7 @@ const NoticeToggle = ({
           {notice.name}
         </span>
         <Toggle
-          name={notice.name}
+          name={notice.name || ""}
           id={notice.id}
           checked={checked}
           onChange={onToggle}

diff --git a/clients/fides-js/src/components/Overlay.tsx b/clients/fides-js/src/components/Overlay.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent, h } from "preact";
 import { useState } from "preact/hooks";
 import {
-  ExperienceConfig,
+  PrivacyExperience,
   FidesOptions,
   PrivacyNotice,
   UserGeolocation,
@@ -15,16 +15,17 @@ import { updateConsentPreferences } from "../lib/preferences";
 export interface OverlayProps {
   consentDefaults: CookieKeyConsent;
   options: FidesOptions;
-  experience?: ExperienceConfig;
+  experience: PrivacyExperience;
   geolocation?: UserGeolocation;
 }
 
 const Overlay: FunctionComponent<OverlayProps> = ({ experience }) => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
 
-  if (!experience) {
+  if (!experience.experience_config) {
     return null;
   }
+
   const privacyNotices = experience.privacy_notices ?? [];
 
   const onAcceptAll = () => {
@@ -51,15 +52,15 @@ const Overlay: FunctionComponent<OverlayProps> = ({ experience }) => {
   return (
     <div id="fides-js-root">
       <ConsentBanner
-        experience={experience}
+        experience={experience.experience_config}
         onAcceptAll={onAcceptAll}
         onRejectAll={onRejectAll}
         waitBeforeShow={100}
         onOpenModal={() => setModalIsOpen(true)}
       />
       {modalIsOpen ? (
         <ConsentModal
-          experience={experience}
+          experience={experience.experience_config}
           notices={privacyNotices}
           onClose={() => setModalIsOpen(false)}
           onAcceptAll={onAcceptAll}