Skip to content
This repository has been archived by the owner on Nov 30, 2022. It is now read-only.

Commit

Permalink
Updated the Manual Processing detail form to not be submitted until t…
Browse files Browse the repository at this point in the history 
…he form is dirty.
  • Loading branch information
@chriscalhoun1974
chriscalhoun1974 committed Sep 25, 2022
1 parent 10f0e66 commit 5584b77
Showing 1 changed file with 96 additions and 95 deletions.
191 changes: 96 additions & 95 deletions ...ts/ops/admin-ui/src/features/subject-request/manual-processing/ManualProcessingDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import {
import { Field, Form, Formik } from "formik";
import { PatchUploadManualWebhookDataRequest } from "privacy-requests/types";
import React, { useRef } from "react";
import { shallowEqual } from "react-redux";
import * as Yup from "yup";

import { ManualInputData } from "./types";
Expand All @@ -44,8 +43,6 @@ const ManualProcessingDetail: React.FC<ManualProcessingDetailProps> = ({

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleSubmit = async (values: any, _actions: any) => {
const hasChanged = !shallowEqual(data.fields, values);
if (!hasChanged) return;
const params: PatchUploadManualWebhookDataRequest = {
connection_key: data.connection_key,
privacy_request_id: data.privacy_request_id,
Expand Down Expand Up @@ -83,100 +80,104 @@ const ManualProcessingDetail: React.FC<ManualProcessingDetailProps> = ({
Begin manual input
</Button>
)}
<Drawer
isOpen={isOpen}
placement="right"
// @ts-ignore
initialFocusRef={firstField}
onClose={onClose}
size="lg"
<Formik
enableReinitialize
initialValues={{ ...data.fields }}
onSubmit={handleSubmit}
validateOnBlur={false}
validateOnChange={false}
validationSchema={Yup.object().shape({})}
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader color="gray.900">
<Text fontSize="xl" mb={4}>
{connectorName}
</Text>
<Divider />
<Text fontSize="md" mt="8">
PII Requirements
</Text>
<Box mt="8px">
<Text color="gray.700" fontSize="sm" fontWeight="normal">
Please complete the following PII fields that have been
collected for the selected subject.
</Text>
</Box>
</DrawerHeader>
<DrawerBody mt="24px">
<Formik
initialValues={{ ...data.fields }}
onSubmit={handleSubmit}
validateOnBlur={false}
validateOnChange={false}
validationSchema={Yup.object().shape({})}
>
<Form id="manual-detail-form" noValidate>
<VStack align="stretch" gap="16px">
{Object.entries(data.fields).map(([key], index) => (
<HStack key={key}>
<Field id={key} name={key}>
{({ field }: { field: any }) => (
<FormControl
alignItems="baseline"
display="inline-flex"
>
<FormLabel
color="gray.900"
fontSize="14px"
fontWeight="semibold"
htmlFor={key}
w="50%"
{/* @ts-ignore */}
{(props: FormikProps<Values>) => (
<Drawer
isOpen={isOpen}
placement="right"
// @ts-ignore
initialFocusRef={firstField}
onClose={onClose}
size="lg"
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton />
<DrawerHeader color="gray.900">
<Text fontSize="xl" mb={4}>
{connectorName}
</Text>
<Divider />
<Text fontSize="md" mt="8">
PII Requirements
</Text>
<Box mt="8px">
<Text color="gray.700" fontSize="sm" fontWeight="normal">
Please complete the following PII fields that have been
collected for the selected subject.
</Text>
</Box>
</DrawerHeader>
<DrawerBody mt="24px">
<Form id="manual-detail-form" noValidate>
<VStack align="stretch" gap="16px">
{Object.entries(data.fields).map(([key], index) => (
<HStack key={key}>
<Field id={key} name={key}>
{({ field }: { field: any }) => (
<FormControl
alignItems="baseline"
display="inline-flex"
>
{key}
</FormLabel>
<Input
{...field}
autoComplete="off"
color="gray.700"
placeholder={`Please enter ${key}`}
ref={index === 0 ? firstField : undefined}
size="sm"
/>
</FormControl>
)}
</Field>
</HStack>
))}
</VStack>
</Form>
</Formik>
</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" }}
_disabled={{ opacity: "inherit" }}
_hover={{ bg: "primary.400" }}
>
Save
</Button>
</ButtonGroup>
</DrawerFooter>
</DrawerContent>
</Drawer>
<FormLabel
color="gray.900"
fontSize="14px"
fontWeight="semibold"
htmlFor={key}
w="50%"
>
{key}
</FormLabel>
<Input
{...field}
autoComplete="off"
color="gray.700"
placeholder={`Please enter ${key}`}
ref={index === 0 ? firstField : undefined}
size="sm"
/>
</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"
isDisabled={!props.dirty}
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>
</>
);
};
Expand Down

0 comments on commit 5584b77

Please sign in to comment.