Dsr error handling configure alerts

CHANGELOG.md

@@ -17,6 +17,12 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.2.2...main)
 
+### Added
+* Send email alerts on privacy request failures once the specified threshold is reached. [#1793](https://github.com/ethyca/fides/pull/1793)
+* DSR Notifications (toast) [#1895](https://github.com/ethyca/fides/pull/1895)
+* DSR configure alerts btn [#1895](https://github.com/ethyca/fides/pull/1895)
+* DSR configure alters (FE) [#1895](https://github.com/ethyca/fides/pull/1895)
+
 ### Changed
 
 * Updated to use `loguru` logging library throughout codebase [#2031](https://github.com/ethyca/fides/pull/2031)
@@ -68,6 +74,7 @@ The types of changes are:
 * Enable the onboarding flow [#1836](https://github.com/ethyca/fides/pull/1836)
 * Access and erasure support for Fullstory API [#1821](https://github.com/ethyca/fides/pull/1821)
 * Add function to poll privacy request for completion [#1860](https://github.com/ethyca/fides/pull/1860)
+* Added rescan flow for the data flow scanner [#1844](https://github.com/ethyca/fides/pull/1844)
 * Add rescan flow for the data flow scanner [#1844](https://github.com/ethyca/fides/pull/1844)
 * Add Fides connector to support parent-child Fides deployments [#1861](https://github.com/ethyca/fides/pull/1861)
 * Classification UI now polls for updates to classifications [#1908](https://github.com/ethyca/fides/pull/1908)
@@ -96,7 +103,7 @@ The types of changes are:
 ### Added
 
 * Classification flow for system data flows
-  * Classification is now triggered as part of data flow scanning
+* Classification is now triggered as part of data flow scanning
 * Include `ingress` and `egress` fields on system export and `datamap/` endpoint [#1740](https://github.com/ethyca/fides/pull/1740)
 * Repeatable unique identifier for dataset fides_keys and metadata [#1786](https://github.com/ethyca/fides/pull/1786)
 * Adds SMS support for identity verification notifications [#1726](https://github.com/ethyca/fides/pull/1726)

clients/admin-ui/src/features/common/hooks/useAlert.tsx

@@ -8,6 +8,7 @@ import {
   useToast,
   UseToastOptions,
 } from "@fidesui/react";
+import { MouseEventHandler } from "react";
 
 /**
  * Custom hook for toast notifications
@@ -24,12 +25,16 @@ export const useAlert = () => {
   const errorAlert = (
     description: string | JSX.Element,
     title?: string,
-    options?: UseToastOptions
+    addedOptions?: UseToastOptions
   ) => {
-    toast({
-      ...options,
-      position: options?.position || DEFAULT_POSITION,
-      render: ({ onClose }) => (
+    const options = {
+      ...addedOptions,
+      position: addedOptions?.position || DEFAULT_POSITION,
+      render: ({
+        onClose,
+      }: {
+        onClose: MouseEventHandler<HTMLButtonElement> | undefined;
+      }) => (
         <Alert alignItems="normal" status="error">
           <AlertIcon />
           <Box>
@@ -45,7 +50,13 @@ export const useAlert = () => {
           />
         </Alert>
       ),
-    });
+    };
+
+    if (addedOptions?.id && toast.isActive(addedOptions.id)) {
+      toast.update(addedOptions.id, options);
+    } else {
+      toast(options);
+    }
   };
 
   /**
@@ -55,12 +66,16 @@ export const useAlert = () => {
   const successAlert = (
     description: string,
     title?: string,
-    options?: UseToastOptions
+    addedOptions?: UseToastOptions
   ) => {
-    toast({
-      ...options,
-      position: options?.position || DEFAULT_POSITION,
-      render: ({ onClose }) => (
+    const options = {
+      ...addedOptions,
+      position: addedOptions?.position || DEFAULT_POSITION,
+      render: ({
+        onClose,
+      }: {
+        onClose: MouseEventHandler<HTMLButtonElement> | undefined;
+      }) => (
         <Alert alignItems="normal" status="success" variant="subtle">
           <AlertIcon />
           <Box>
@@ -76,7 +91,12 @@ export const useAlert = () => {
           />
         </Alert>
       ),
-    });
+    };
+    if (addedOptions?.id && toast.isActive(addedOptions.id)) {
+      toast.update(addedOptions.id, options);
+    } else {
+      toast(options);
+    }
   };
 
   return { errorAlert, successAlert };

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

@@ -0,0 +1,113 @@
+import {
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+  forwardRef,
+  Input,
+  Tag,
+  TagCloseButton,
+  TagLabel,
+  VStack,
+  Wrap,
+} from "@fidesui/react";
+import { FieldArrayRenderProps } from "formik";
+import React, { 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;
+};
+
+const EmailChipList = forwardRef(
+  (
+    {
+      isRequired = false,
+      ...props
+    }: FieldArrayRenderProps & EmailChipListProps,
+    ref
+  ) => {
+    const { emails }: { emails: string[] } = props.form.values;
+    const [inputValue, setInputValue] = useState("");
+
+    const emailChipExists = (email: string) => emails.includes(email);
+
+    const addEmails = (emailsToAdd: string[]) => {
+      const validatedEmails = emailsToAdd
+        .map((e) => e.trim())
+        .filter((email) => isValidEmail(email) && !emailChipExists(email));
+      validatedEmails.forEach((email) => props.push(email));
+      setInputValue("");
+    };
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setInputValue(event.target.value);
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (["Enter", "Tab", ","].includes(event.key)) {
+        event.preventDefault();
+        addEmails([inputValue]);
+      }
+    };
+
+    const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
+      event.preventDefault();
+      const pastedData = event.clipboardData.getData("text");
+      const pastedEmails = pastedData.split(",");
+      addEmails(pastedEmails);
+    };
+
+    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">
+          {/* @ts-ignore */}
+          <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]}</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>
+    );
+  }
+);
+
+export default EmailChipList;

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

@@ -1,6 +1,5 @@
 import { Checkbox, Flex, Table, Tbody, Th, Thead, Tr } from "@fidesui/react";
-import { debounce } from "common/utils";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect } from "react";
 
 import { useAppDispatch, useAppSelector } from "~/app/hooks";
 
@@ -14,26 +13,13 @@ import {
 } from "./privacy-requests.slice";
 import RequestRow from "./RequestRow";
 import SortRequestButton from "./SortRequestButton";
-import { PrivacyRequest, PrivacyRequestParams } from "./types";
+import { PrivacyRequest } from "./types";
 
-type RequestTableProps = {
-  requests?: PrivacyRequest[];
-};
-
-const useRequestTable = () => {
+const RequestTable: React.FC = () => {
   const dispatch = useAppDispatch();
   const filters = useAppSelector(selectPrivacyRequestFilters);
-  const [cachedFilters, setCachedFilters] = useState(filters);
-  const updateCachedFilters = useRef(
-    debounce(
-      (updatedFilters: React.SetStateAction<PrivacyRequestParams>) =>
-        setCachedFilters(updatedFilters),
-      250
-    )
-  );
-
   const { checkAll, errorRequests } = useAppSelector(selectRetryRequests);
-  const { data, isFetching } = useGetAllPrivacyRequestsQuery(cachedFilters);
+  const { data, isFetching } = useGetAllPrivacyRequestsQuery(filters);
   const { items: requests, total } = data || { items: [], total: 0 };
 
   const getErrorRequests = useCallback(
@@ -75,40 +61,10 @@ const useRequestTable = () => {
   };
 
   useEffect(() => {
-    updateCachedFilters.current(filters);
     if (isFetching && filters.status?.includes("error")) {
       dispatch(setRetryRequests({ checkAll: false, errorRequests: [] }));
     }
-  }, [dispatch, filters, isFetching]);
-
-  return {
-    ...filters,
-    checkAll,
-    errorRequests,
-    handleCheckChange,
-    handleNextPage,
-    handlePreviousPage,
-    handleCheckAll,
-    isFetching,
-    requests,
-    total,
-  };
-};
-
-const RequestTable: React.FC<RequestTableProps> = () => {
-  const {
-    checkAll,
-    errorRequests,
-    handleCheckChange,
-    handleNextPage,
-    handlePreviousPage,
-    handleCheckAll,
-    isFetching,
-    page,
-    requests,
-    size,
-    total,
-  } = useRequestTable();
+  }, [dispatch, filters.status, isFetching]);
 
   return (
     <>
@@ -153,8 +109,8 @@ const RequestTable: React.FC<RequestTableProps> = () => {
         </Tbody>
       </Table>
       <PaginationFooter
-        page={page}
-        size={size}
+        page={filters.page}
+        size={filters.size}
         total={total}
         handleNextPage={handleNextPage}
         handlePreviousPage={handlePreviousPage}
@@ -163,8 +119,4 @@ const RequestTable: React.FC<RequestTableProps> = () => {
   );
 };
 
-RequestTable.defaultProps = {
-  requests: [],
-};
-
 export default RequestTable;

clients/admin-ui/src/features/privacy-requests/buttons/ActionButtons.tsx

@@ -4,16 +4,18 @@ import React from "react";
 import { useAppSelector } from "~/app/hooks";
 
 import { selectRetryRequests } from "../privacy-requests.slice";
+import MoreButton from "./MoreButton";
 import ReprocessButton from "./ReprocessButton";
 
 const ActionButtons: React.FC = () => {
   const { errorRequests } = useAppSelector(selectRetryRequests);
 
-  return errorRequests?.length > 0 ? (
+  return (
     <ButtonGroup flexDirection="row" size="sm" spacing="8px" variant="outline">
-      <ReprocessButton />
+      {errorRequests?.length > 0 && <ReprocessButton />}
+      <MoreButton />
     </ButtonGroup>
-  ) : null;
+  );
 };
 
 export default ActionButtons;

clients/admin-ui/src/features/privacy-requests/buttons/MoreButton.tsx

@@ -0,0 +1,46 @@
+import {
+  Box,
+  Button,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuProps,
+} from "@fidesui/react";
+
+import { ArrowDownLineIcon } from "~/features/common/Icon";
+
+import ConfigureAlerts from "../drawers/ConfigureAlerts";
+
+type MoreButtonProps = {
+  menuProps?: MenuProps;
+};
+
+const MoreButton: React.FC<MoreButtonProps> = ({
+  menuProps,
+}: MoreButtonProps) => (
+  <Box>
+    <Menu {...menuProps}>
+      <MenuButton
+        as={Button}
+        fontWeight="normal"
+        rightIcon={<ArrowDownLineIcon />}
+        size="sm"
+        variant="outline"
+        _active={{
+          bg: "none",
+        }}
+        _hover={{
+          bg: "none",
+        }}
+      >
+        More
+      </MenuButton>
+      <MenuList fontSize="sm">
+        {/* MenuItems are not rendered unless Menu is open */}
+        <ConfigureAlerts />
+      </MenuList>
+    </Menu>
+  </Box>
+);
+
+export default MoreButton;