Update DSR notification UX

CHANGELOG.md

@@ -45,6 +45,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 - Extending read-only DB configuration [#7139](https://github.com/ethyca/fides/pull/7139)
 - Removed the ManualTaskLog table since it is un-used. This is a lossy migration, it can be `downgraded` but data will not be restored. [#7124](https://github.com/ethyca/fides/pull/7124) https://github.com/ethyca/fides/labels/db-migration
 - Renamed staged resource diff status from 'approved' to 'reviewed' in database migration [#7159](https://github.com/ethyca/fides/pull/7159) https://github.com/ethyca/fides/labels/db-migration
+ - Update the privacy request notification email template with new branding, improved copy, and enhanced UX in the notification configuration drawer. [#7192](https://github.com/ethyca/fides/pull/7124)
 
 ### Developer Experience
 - Deprecated Chakra UI exports with `Chakra` prefix, removed `Ant` prefix from Ant Design exports [#7173](https://github.com/ethyca/fides/pull/7173)

clients/admin-ui/src/features/privacy-requests/EmailChipList.tsx

@@ -1,34 +1,16 @@
-import {
-  ChakraFormControl as FormControl,
-  ChakraFormErrorMessage as FormErrorMessage,
-  ChakraFormLabel as FormLabel,
-  chakraForwardRef as forwardRef,
-  ChakraInput as Input,
-  ChakraTag as Tag,
-  ChakraTagCloseButton as TagCloseButton,
-  ChakraTagLabel as TagLabel,
-  ChakraVStack as VStack,
-  ChakraWrap as Wrap,
-} from "fidesui";
-import { FieldArrayRenderProps } from "formik";
-import React, { useState } from "react";
+import { Input, Tag } from "fidesui";
+import React, { forwardRef, useState } from "react";
 
 const EMAIL_REGEXP = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
 const isValidEmail = (email: string) => EMAIL_REGEXP.test(email);
 
 type EmailChipListProps = {
-  isRequired: boolean;
+  emails: string[];
+  onEmailsChange: (emails: string[]) => void;
 };
 
-const EmailChipList = forwardRef(
-  (
-    {
-      isRequired = false,
-      ...props
-    }: FieldArrayRenderProps & EmailChipListProps,
-    ref,
-  ) => {
-    const { emails }: { emails: string[] } = props.form.values;
+const EmailChipList = forwardRef<HTMLInputElement, EmailChipListProps>(
+  ({ emails, onEmailsChange }, ref) => {
     const [inputValue, setInputValue] = useState("");
 
     const emailChipExists = (email: string) => emails.includes(email);
@@ -37,8 +19,10 @@ const EmailChipList = forwardRef(
       const validatedEmails = emailsToAdd
         .map((e) => e.trim())
         .filter((email) => isValidEmail(email) && !emailChipExists(email));
-      validatedEmails.forEach((email) => props.push(email));
-      setInputValue("");
+      if (validatedEmails.length > 0) {
+        onEmailsChange([...emails, ...validatedEmails]);
+        setInputValue("");
+      }
     };
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -59,56 +43,41 @@ const EmailChipList = forwardRef(
       addEmails(pastedEmails);
     };
 
+    const removeEmail = (emailToRemove: string) => {
+      onEmailsChange(emails.filter((email) => email !== emailToRemove));
+    };
+
     return (
-      <FormControl
-        alignItems="baseline"
-        display="inline-flex"
-        isInvalid={!!props.form.errors[props.name]}
-        isRequired={isRequired}
-      >
-        <FormLabel fontSize="md" htmlFor="email">
-          Email
-        </FormLabel>
-        <VStack align="flex-start" w="inherit">
-          <Input
-            autoComplete="off"
-            placeholder="Type or paste email addresses separated by commas and press `Enter` or `Tab`..."
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            onPaste={handlePaste}
-            ref={ref}
-            size="sm"
-            type="email"
-            value={inputValue}
-          />
-          <FormErrorMessage>
-            {props.form.errors[props.name] as string}
-          </FormErrorMessage>
-          {emails.length > 0 && (
-            <Wrap spacing={1} mb={3} pt="8px">
-              {emails.map((email, index) => (
-                <Tag
-                  key={email}
-                  borderRadius="full"
-                  backgroundColor="primary.400"
-                  color="white"
-                  size="sm"
-                  variant="solid"
-                >
-                  <TagLabel>{email}</TagLabel>
-                  <TagCloseButton
-                    onClick={() => {
-                      props.remove(index);
-                    }}
-                  />
-                </Tag>
-              ))}
-            </Wrap>
-          )}
-        </VStack>
-      </FormControl>
+      <div className="w-full">
+        <Input
+          autoComplete="off"
+          placeholder="Enter one or more email addresses"
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          ref={ref}
+          type="email"
+          value={inputValue}
+        />
+        {emails.length > 0 && (
+          <div className="flex flex-wrap gap-2 mt-2">
+            {emails.map((email) => (
+              <Tag
+                key={email}
+                closable
+                onClose={() => removeEmail(email)}
+                color="default"
+              >
+                {email}
+              </Tag>
+            ))}
+          </div>
+        )}
+      </div>
     );
   },
 );
 
+EmailChipList.displayName = "EmailChipList";
+
 export default EmailChipList;