Pause manual erasure requests

clients/admin-ui/src/features/common/RequestType.tsx

@@ -8,25 +8,33 @@ type RequestTypeProps = {
   rules: Rule[];
 };
 
-const RequestType = ({ rules }: RequestTypeProps) => {
-  const actions = Array.from(
+/**
+ * Extracts and returns the unique action types from the rules.
+ * @param rules Array of Rule objects.
+ */
+export const getActionTypes = (rules: Rule[]): ActionType[] =>
+  Array.from(
     new Set(
       rules
         .filter((d) => Object.values(ActionType).includes(d.action_type))
-        .map((d) => capitalize(d.action_type))
+        .map((d) => d.action_type)
     )
   );
-  const tags = actions.map((action_type) => (
-    <Tag
-      key={action_type}
-      color="white"
-      bg="primary.400"
-      fontWeight="medium"
-      fontSize="sm"
-    >
-      {action_type}
-    </Tag>
-  ));
+
+const RequestType = ({ rules }: RequestTypeProps) => {
+  const tags = getActionTypes(rules)
+    .map((action) => capitalize(action))
+    .map((action_type) => (
+      <Tag
+        key={action_type}
+        color="white"
+        bg="primary.400"
+        fontWeight="medium"
+        fontSize="sm"
+      >
+        {action_type}
+      </Tag>
+    ));
 
   return <Box>{tags}</Box>;
 };

clients/admin-ui/src/features/privacy-requests/manual-processing/ManualProcessingDetail.tsx → clients/admin-ui/src/features/privacy-requests/manual-processing/ManualAccessProcessingDetail.tsx

@@ -26,19 +26,16 @@ import * as Yup from "yup";
 
 import { ManualInputData } from "./types";
 
-type ManualProcessingDetailProps = {
+type ManualAccessProcessingDetailProps = {
   connectorName: string;
   data: ManualInputData;
   isSubmitting: boolean;
   onSaveClick: (params: PatchUploadManualWebhookDataRequest) => void;
 };
 
-const ManualProcessingDetail: React.FC<ManualProcessingDetailProps> = ({
-  connectorName,
-  data,
-  isSubmitting = false,
-  onSaveClick,
-}) => {
+const ManualAccessProcessingDetail: React.FC<
+  ManualAccessProcessingDetailProps
+> = ({ connectorName, data, isSubmitting = false, onSaveClick }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const firstField = useRef(null);
 
@@ -101,12 +98,12 @@ const ManualProcessingDetail: React.FC<ManualProcessingDetailProps> = ({
             <DrawerContent>
               <DrawerCloseButton />
               <DrawerHeader color="gray.900">
-                <Text fontSize="xl" mb={4}>
+                <Text fontSize="xl" mb={8}>
                   {connectorName}
                 </Text>
                 <Divider />
-                <Text fontSize="md" mt="8">
-                  PII Requirements
+                <Text fontSize="md" mt="4">
+                  Manual access
                 </Text>
                 <Box mt="8px">
                   <Text color="gray.700" fontSize="sm" fontWeight="normal">
@@ -115,7 +112,7 @@ const ManualProcessingDetail: React.FC<ManualProcessingDetailProps> = ({
                   </Text>
                 </Box>
               </DrawerHeader>
-              <DrawerBody mt="24px">
+              <DrawerBody>
                 <Form id="manual-detail-form" noValidate>
                   <VStack align="stretch" gap="16px">
                     {Object.entries(data.fields).map(([key], index) => (
@@ -180,4 +177,4 @@ const ManualProcessingDetail: React.FC<ManualProcessingDetailProps> = ({
   );
 };
 
-export default ManualProcessingDetail;
+export default ManualAccessProcessingDetail;

clients/admin-ui/src/features/privacy-requests/manual-processing/ManualErasureProcessingDetail.tsx

@@ -0,0 +1,180 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  Checkbox,
+  Divider,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  FormControl,
+  FormLabel,
+  HStack,
+  Text,
+  useDisclosure,
+  VStack,
+} from "@fidesui/react";
+import { Field, FieldInputProps, Form, Formik } from "formik";
+import { PatchUploadManualWebhookDataRequest } from "privacy-requests/types";
+import React, { useRef } from "react";
+import * as Yup from "yup";
+
+import { ManualInputData } from "./types";
+
+type ManualAccessProcessingDetailProps = {
+  connectorName: string;
+  data: ManualInputData;
+  isSubmitting: boolean;
+  onSaveClick: (params: PatchUploadManualWebhookDataRequest) => void;
+};
+
+const ManualErasureProcessingDetail: React.FC<
+  ManualAccessProcessingDetailProps
+> = ({ connectorName, data, isSubmitting = false, onSaveClick }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const firstField = useRef(null);
+
+  const handleSubmit = async (values: any, _actions: any) => {
+    const params: PatchUploadManualWebhookDataRequest = {
+      connection_key: data.connection_key,
+      privacy_request_id: data.privacy_request_id,
+      body: { ...values } as object,
+    };
+    onSaveClick(params);
+    onClose();
+  };
+
+  return (
+    <>
+      {data?.checked && (
+        <Button
+          color="gray.700"
+          fontSize="xs"
+          h="24px"
+          onClick={onOpen}
+          variant="outline"
+          w="58px"
+        >
+          Review
+        </Button>
+      )}
+      {!data?.checked && (
+        <Button
+          color="white"
+          bg="primary.800"
+          fontSize="xs"
+          h="24px"
+          onClick={onOpen}
+          w="127px"
+          _hover={{ bg: "primary.400" }}
+          _active={{ bg: "primary.500" }}
+        >
+          Begin manual input
+        </Button>
+      )}
+      <Formik
+        enableReinitialize
+        initialValues={{ ...data.fields }}
+        onSubmit={handleSubmit}
+        validateOnBlur={false}
+        validateOnChange={false}
+        validationSchema={Yup.object().shape({})}
+      >
+        {/* @ts-ignore */}
+        {(_props: FormikProps<Values>) => (
+          <Drawer
+            isOpen={isOpen}
+            placement="right"
+            initialFocusRef={firstField}
+            onClose={onClose}
+            size="lg"
+          >
+            <DrawerOverlay />
+            <DrawerContent>
+              <DrawerCloseButton />
+              <DrawerHeader color="gray.900">
+                <Text fontSize="xl" mb={8}>
+                  {connectorName}
+                </Text>
+                <Divider />
+                <Text fontSize="md" mt="4">
+                  Manual erasure
+                </Text>
+                <Box mt="8px">
+                  <Text color="gray.700" fontSize="sm" fontWeight="normal">
+                    Please delete the following PII fields associated with the
+                    selected subject if they are available. Once deleted, check
+                    the box to confirm the deletion.
+                  </Text>
+                </Box>
+              </DrawerHeader>
+              <DrawerBody>
+                <Form id="manual-detail-form" noValidate>
+                  <VStack align="stretch" gap="16px">
+                    {Object.entries(data.fields).map(([key]) => (
+                      <HStack key={key}>
+                        <Field id={key} name={key}>
+                          {({ field }: { field: FieldInputProps<string> }) => (
+                            <FormControl
+                              alignItems="baseline"
+                              display="inline-flex"
+                            >
+                              <FormLabel
+                                color="gray.900"
+                                fontSize="14px"
+                                fontWeight="semibold"
+                                htmlFor={key}
+                                w="50%"
+                              >
+                                {key}
+                              </FormLabel>
+                              <Checkbox
+                                {...field}
+                                isChecked={!!field.value}
+                                onChange={field.onChange}
+                                name={key}
+                                id={key}
+                              />
+                            </FormControl>
+                          )}
+                        </Field>
+                      </HStack>
+                    ))}
+                  </VStack>
+                </Form>
+              </DrawerBody>
+              <DrawerFooter justifyContent="flex-start">
+                <ButtonGroup size="sm" spacing="8px" variant="outline">
+                  <Button onClick={onClose} variant="outline">
+                    Cancel
+                  </Button>
+                  <Button
+                    bg="primary.800"
+                    color="white"
+                    form="manual-detail-form"
+                    isLoading={isSubmitting}
+                    loadingText="Submitting"
+                    size="sm"
+                    variant="solid"
+                    type="submit"
+                    _active={{ bg: "primary.500" }}
+                    _hover={{ bg: "primary.400" }}
+                  >
+                    Save
+                  </Button>
+                </ButtonGroup>
+              </DrawerFooter>
+            </DrawerContent>
+          </Drawer>
+        )}
+      </Formik>
+    </>
+  );
+};
+
+export default ManualErasureProcessingDetail;