From 13d8829ab6284c48747842d3aa1370bfac26fda4 Mon Sep 17 00:00:00 2001
From: Josh Salisbury <josh@adhocteam.us>
Date: Wed, 10 Feb 2021 15:36:05 -0600
Subject: [PATCH 1/7] Error messages/validations added to form

Waiting for the recent updates to the review pages before moving forward
more with this work
---
 frontend/package.json                         |   3 +-
 frontend/src/components/DatePicker.css        |   6 +
 frontend/src/components/DatePicker.js         |  11 +-
 frontend/src/components/FormItem.css          |   0
 frontend/src/components/FormItem.js           |  42 +++
 frontend/src/components/MultiSelect.js        |  84 +++--
 frontend/src/components/Navigator/index.js    |  36 +-
 .../ActivityReport/Pages/ReviewSubmit.js      |  16 +-
 .../Pages/SubmitterReviewPage.js              |  92 ++++--
 .../ActivityReport/Pages/activitySummary.js   | 310 +++++++++++-------
 .../src/pages/ActivityReport/Pages/index.js   |   4 +-
 .../ActivityReport/Pages/topicsResources.js   |  23 +-
 frontend/yarn.lock                            |  13 +-
 13 files changed, 404 insertions(+), 236 deletions(-)
 create mode 100644 frontend/src/components/FormItem.css
 create mode 100644 frontend/src/components/FormItem.js

diff --git a/frontend/package.json b/frontend/package.json
index 9269b1d928..13b13d0ad8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,6 +8,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.11",
+    "@hookform/error-message": "^0.0.5",
     "@testing-library/jest-dom": "^4.2.4",
     "@trussworks/react-uswds": "^1.9.1",
     "@use-it/interval": "^1.0.0",
@@ -21,7 +22,7 @@
     "react-dom": "^16.14.0",
     "react-dropzone": "^11.2.0",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^6.9.0",
+    "react-hook-form": "^6.15.0",
     "react-idle-timer": "^4.4.2",
     "react-input-autosize": "^3.0.0",
     "react-responsive": "^8.1.1",
diff --git a/frontend/src/components/DatePicker.css b/frontend/src/components/DatePicker.css
index 6539117efa..1586359b58 100644
--- a/frontend/src/components/DatePicker.css
+++ b/frontend/src/components/DatePicker.css
@@ -14,3 +14,9 @@
 .DateInput {
   width: fit-content;
 }
+
+.usa-hint {
+  font-size: 14px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/DatePicker.js b/frontend/src/components/DatePicker.js
index beab959f6c..65a499c64d 100644
--- a/frontend/src/components/DatePicker.js
+++ b/frontend/src/components/DatePicker.js
@@ -10,10 +10,8 @@
    2. react-dates had easily readable documentation and conveniences such as `maxDate`
       and `minDate`. I couldn't find great docs using the USWDS datepicker javascript
 */
-
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Label } from '@trussworks/react-uswds';
 import { SingleDatePicker } from 'react-dates';
 import { OPEN_UP, OPEN_DOWN } from 'react-dates/constants';
 import { Controller } from 'react-hook-form';
@@ -24,9 +22,8 @@ import './DatePicker.css';
 const dateFmt = 'MM/DD/YYYY';
 
 const DateInput = ({
-  control, label, minDate, name, disabled, maxDate, openUp, required,
+  control, minDate, name, disabled, maxDate, openUp, required,
 }) => {
-  const labelId = `${name}-id`;
   const hintId = `${name}-hint`;
   const [isFocused, updateFocus] = useState(false);
   const openDirection = openUp ? OPEN_UP : OPEN_DOWN;
@@ -40,8 +37,7 @@ const DateInput = ({
 
   return (
     <>
-      <Label id={labelId} htmlFor={name}>{label}</Label>
-      <div className="usa-hint" id={hintId}>mm/dd/yyyy</div>
+      <div className="usa-hint font-body-2xs" id={hintId}>mm/dd/yyyy</div>
       <Controller
         render={({ onChange, value, ref }) => {
           const date = value ? moment(value, dateFmt) : null;
@@ -68,7 +64,7 @@ const DateInput = ({
         disabled={disabled}
         defaultValue={null}
         rules={{
-          required,
+          required: required ? 'Please select a date' : false,
         }}
       />
     </>
@@ -80,7 +76,6 @@ DateInput.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   control: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
   minDate: PropTypes.string,
   maxDate: PropTypes.string,
   openUp: PropTypes.bool,
diff --git a/frontend/src/components/FormItem.css b/frontend/src/components/FormItem.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/src/components/FormItem.js b/frontend/src/components/FormItem.js
new file mode 100644
index 0000000000..a1538943fa
--- /dev/null
+++ b/frontend/src/components/FormItem.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useFormContext } from 'react-hook-form';
+import { ErrorMessage as ReactHookFormError } from '@hookform/error-message';
+import { Label, FormGroup, ErrorMessage } from '@trussworks/react-uswds';
+
+import './FormItem.css';
+
+function FormItem({
+  label, children, required, name,
+}) {
+  const { formState: { errors } } = useFormContext();
+  const fieldErrors = errors[name];
+
+  return (
+    <FormGroup error={fieldErrors}>
+      <Label>
+        {label}
+        {required && (<span className="smart-hub--form-required"> (Required)</span>)}
+        <ReactHookFormError
+          errors={errors}
+          name={name}
+          render={({ message }) => <ErrorMessage>{message}</ErrorMessage>}
+        />
+        {children}
+      </Label>
+    </FormGroup>
+  );
+}
+
+FormItem.propTypes = {
+  label: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  name: PropTypes.isRequired,
+  required: PropTypes.bool,
+};
+
+FormItem.defaultProps = {
+  required: true,
+};
+
+export default FormItem;
diff --git a/frontend/src/components/MultiSelect.js b/frontend/src/components/MultiSelect.js
index 68c79d3717..69bc424515 100644
--- a/frontend/src/components/MultiSelect.js
+++ b/frontend/src/components/MultiSelect.js
@@ -23,7 +23,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select, { components } from 'react-select';
-import { Label } from '@trussworks/react-uswds';
 import { Controller } from 'react-hook-form';
 
 import arrowBoth from '../images/arrow-both.svg';
@@ -73,7 +72,6 @@ const styles = {
 };
 
 function MultiSelect({
-  label,
   name,
   options,
   disabled,
@@ -117,44 +115,45 @@ function MultiSelect({
   };
 
   return (
-    <Label>
-      {label}
-      <Controller
-        render={({ onChange: controllerOnChange, value }) => {
-          const values = value ? getValues(value) : value;
-          return (
-            <Select
-              className="margin-top-1"
-              id={name}
-              value={values}
-              onChange={(event) => {
-                if (event) {
-                  onChange(event, controllerOnChange);
-                } else {
-                  controllerOnChange([]);
-                }
-              }}
-              styles={styles}
-              components={{ ...componentReplacements, DropdownIndicator }}
-              options={options}
-              isDisabled={disabled}
-              isClearable={multiSelectOptions.isClearable}
-              closeMenuOnSelect={multiSelectOptions.closeMenuOnSelect}
-              controlShouldRenderValue={multiSelectOptions.controlShouldRenderValue}
-              hideSelectedOptions={multiSelectOptions.hideSelectedOptions}
-              placeholder=""
-              isMulti
-            />
-          );
-        }}
-        control={control}
-        defaultValue={[]}
-        rules={{
-          required,
-        }}
-        name={name}
-      />
-    </Label>
+    <Controller
+      render={({ onChange: controllerOnChange, value }) => {
+        const values = value ? getValues(value) : value;
+        return (
+          <Select
+            className="margin-top-1"
+            id={name}
+            value={values}
+            onChange={(event) => {
+              if (event) {
+                onChange(event, controllerOnChange);
+              } else {
+                controllerOnChange([]);
+              }
+            }}
+            styles={styles}
+            components={{ ...componentReplacements, DropdownIndicator }}
+            options={options}
+            isDisabled={disabled}
+            isClearable={multiSelectOptions.isClearable}
+            closeMenuOnSelect={multiSelectOptions.closeMenuOnSelect}
+            controlShouldRenderValue={multiSelectOptions.controlShouldRenderValue}
+            hideSelectedOptions={multiSelectOptions.hideSelectedOptions}
+            placeholder=""
+            isMulti
+          />
+        );
+      }}
+      control={control}
+      rules={{
+        validate: (value) => {
+          if (required && (!value || value.length === 0)) {
+            return required;
+          }
+          return true;
+        },
+      }}
+      name={name}
+    />
   );
 }
 
@@ -164,7 +163,6 @@ const value = PropTypes.oneOfType([
 ]);
 
 MultiSelect.propTypes = {
-  label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   labelProperty: PropTypes.string,
   valueProperty: PropTypes.string,
@@ -191,12 +189,12 @@ MultiSelect.propTypes = {
     hideSelectedOptions: PropTypes.bool,
   }),
   disabled: PropTypes.bool,
-  required: PropTypes.bool,
+  required: PropTypes.string,
 };
 
 MultiSelect.defaultProps = {
   disabled: false,
-  required: true,
+  required: 'Please select at least one item',
   simple: true,
   labelProperty: 'label',
   valueProperty: 'value',
diff --git a/frontend/src/components/Navigator/index.js b/frontend/src/components/Navigator/index.js
index 004a177cfe..bf11fdaad5 100644
--- a/frontend/src/components/Navigator/index.js
+++ b/frontend/src/components/Navigator/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 /*
   The navigator is a component used to show multiple form pages. It displays a stickied nav window
   on the left hand side with each page of the form listed. Clicking on an item in the nav list will
@@ -5,9 +6,10 @@
 */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
-import { useForm } from 'react-hook-form';
-import { Form, Button, Grid } from '@trussworks/react-uswds';
+import { useForm, FormProvider } from 'react-hook-form';
+import {
+  Form, Button, Grid, Alert,
+} from '@trussworks/react-uswds';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import useInterval from '@use-it/interval';
 import moment from 'moment';
@@ -38,9 +40,7 @@ function Navigator({
   const [errorMessage, updateErrorMessage] = useState();
   const [lastSaveTime, updateLastSaveTime] = useState(initialLastUpdated);
   const { pageState } = formData;
-
   const page = pages.find((p) => p.path === currentPage);
-  const allComplete = _.every(pageState, (state) => state === COMPLETE);
 
   const hookForm = useForm({
     mode: 'onChange',
@@ -54,7 +54,9 @@ function Navigator({
     reset,
   } = hookForm;
 
-  const { isDirty, isValid } = formState;
+  const { isDirty, errors } = formState;
+
+  const hasErrors = Object.keys(errors).length > 0;
 
   const newNavigatorState = (completed) => {
     if (page.review) {
@@ -110,6 +112,7 @@ function Navigator({
       onNavigation: () => onSaveForm(false, p.position),
       state,
       current,
+      review: p.review,
     };
   });
 
@@ -125,34 +128,41 @@ function Navigator({
         />
       </Grid>
       <Grid col={12} tablet={{ col: 6 }} desktop={{ col: 8 }}>
-        <div id="navigator-form">
-          {page.review
+        <FormProvider {...hookForm}>
+          <div id="navigator-form">
+            {page.review
             && page.render(
               hookForm,
-              allComplete,
               formData,
               onFormSubmit,
               additionalData,
               onReview,
               approvingManager,
-              reportId,
+              navigatorPages,
             )}
-          {!page.review
+            {!page.review
             && (
               <Container skipTopPadding>
                 <NavigatorHeader
                   label={page.label}
                 />
+                {hasErrors
+                && (
+                  <Alert type="error" slim>
+                    Please complete all required fields before submitting this report.
+                  </Alert>
+                )}
                 <Form
                   onSubmit={handleSubmit(onContinue)}
                   className="smart-hub--form-large"
                 >
                   {page.render(hookForm, additionalData, formData, reportId)}
-                  <Button type="submit" disabled={!isValid}>Continue</Button>
+                  <Button type="submit">Continue</Button>
                 </Form>
               </Container>
             )}
-        </div>
+          </div>
+        </FormProvider>
       </Grid>
     </Grid>
   );
diff --git a/frontend/src/pages/ActivityReport/Pages/ReviewSubmit.js b/frontend/src/pages/ActivityReport/Pages/ReviewSubmit.js
index 68a9974ff8..f2fea5add2 100644
--- a/frontend/src/pages/ActivityReport/Pages/ReviewSubmit.js
+++ b/frontend/src/pages/ActivityReport/Pages/ReviewSubmit.js
@@ -12,18 +12,16 @@ import './ReviewSubmit.css';
 
 const ReviewSubmit = ({
   hookForm,
-  allComplete,
   onSubmit,
   onReview,
   reviewItems,
   approvers,
   approvingManager,
   initialData,
+  pages,
 }) => {
-  const { handleSubmit, register, formState } = hookForm;
+  const { handleSubmit, register } = hookForm;
   const { additionalNotes } = initialData;
-  const { isValid } = formState;
-  const valid = allComplete && isValid;
 
   const [submitted, updateSubmitted] = useState(false);
   const [reviewed, updateReviewed] = useState(false);
@@ -69,10 +67,9 @@ const ReviewSubmit = ({
         && (
         <SubmitterReviewPage
           submitted={submitted}
-          allComplete={allComplete}
           register={register}
           approvers={approvers}
-          valid={valid}
+          pages={pages}
           handleSubmit={handleSubmit}
           onFormSubmit={onFormSubmit}
         />
@@ -83,7 +80,6 @@ const ReviewSubmit = ({
           reviewed={reviewed}
           additionalNotes={additionalNotes}
           register={register}
-          valid={valid}
           handleSubmit={handleSubmit}
           onFormReview={onFormReview}
         />
@@ -100,7 +96,6 @@ ReviewSubmit.propTypes = {
       name: PropTypes.string.isRequired,
     }),
   ).isRequired,
-  allComplete: PropTypes.bool.isRequired,
   onSubmit: PropTypes.func.isRequired,
   onReview: PropTypes.func.isRequired,
   approvingManager: PropTypes.bool.isRequired,
@@ -116,6 +111,11 @@ ReviewSubmit.propTypes = {
       content: PropTypes.node.isRequired,
     }),
   ).isRequired,
+  pages: PropTypes.arrayOf(PropTypes.shape({
+    review: PropTypes.bool,
+    state: PropTypes.string,
+    label: PropTypes.string,
+  })).isRequired,
 };
 
 export default ReviewSubmit;
diff --git a/frontend/src/pages/ActivityReport/Pages/SubmitterReviewPage.js b/frontend/src/pages/ActivityReport/Pages/SubmitterReviewPage.js
index 62cf6e7609..443b284d4d 100644
--- a/frontend/src/pages/ActivityReport/Pages/SubmitterReviewPage.js
+++ b/frontend/src/pages/ActivityReport/Pages/SubmitterReviewPage.js
@@ -2,49 +2,56 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  Dropdown, Form, Label, Fieldset, Textarea, Alert, Button,
+  Dropdown, Form, Fieldset, Textarea, Alert, Button,
 } from '@trussworks/react-uswds';
 
 import { DECIMAL_BASE } from '../../../Constants';
+import FormItem from '../../../components/FormItem';
 
 const SubmitterReviewPage = ({
   submitted,
-  allComplete,
   register,
   approvers,
-  valid,
   handleSubmit,
   onFormSubmit,
+  pages,
 }) => {
+  const filtered = pages.filter((p) => !(p.state === 'Complete' || p.review));
+  const incompletePages = filtered.map((f) => f.label);
+  const hasIncompletePages = incompletePages.length > 0;
   const setValue = (e) => {
     if (e === '') {
       return null;
     }
     return parseInt(e, DECIMAL_BASE);
   };
+
+  const onSubmit = (e) => {
+    if (!hasIncompletePages) {
+      onFormSubmit(e);
+    }
+  };
+
   return (
     <>
       {submitted
-  && (
-  <Alert noIcon className="margin-y-4" type="success">
-    <b>Success</b>
-    <br />
-    This report was successfully submitted for approval
-  </Alert>
-  )}
-      {!allComplete
-  && (
-  <Alert noIcon className="margin-y-4" type="error">
-    <b>Incomplete report</b>
-    <br />
-    This report cannot be submitted until all sections are complete
-  </Alert>
-  )}
+      && (
+      <Alert noIcon className="margin-y-4" type="success">
+        <b>Success</b>
+        <br />
+        This report was successfully submitted for approval
+      </Alert>
+      )}
       <h2>Submit Report</h2>
-      <Form className="smart-hub--form-large" onSubmit={handleSubmit(onFormSubmit)}>
+      <Form className="smart-hub--form-large" onSubmit={handleSubmit(onSubmit)}>
         <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Additional Notes">
-          <Label htmlFor="additionalNotes">Creator notes</Label>
-          <Textarea inputRef={register} id="additionalNotes" name="additionalNotes" />
+          <FormItem
+            label="Creator notes"
+            name="additionalNotes"
+            required={false}
+          >
+            <Textarea inputRef={register} id="additionalNotes" name="additionalNotes" />
+          </FormItem>
         </Fieldset>
         <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Review and submit report">
           <p className="margin-top-4">
@@ -52,15 +59,35 @@ const SubmitterReviewPage = ({
             mode. Please review all information in each section before submitting to your
             manager for approval.
           </p>
-          <Label htmlFor="approvingManagerId">Approving manager</Label>
-          <Dropdown id="approvingManagerId" name="approvingManagerId" inputRef={register({ setValueAs: setValue, required: true })}>
-            <option name="default" value="" disabled hidden>Select a Manager...</option>
-            {approvers.map((approver) => (
-              <option key={approver.id} value={approver.id}>{approver.name}</option>
-            ))}
-          </Dropdown>
+          <FormItem
+            label="Approving manager"
+            name="approvingManagerId"
+          >
+            <Dropdown id="approvingManagerId" name="approvingManagerId" inputRef={register({ setValueAs: setValue, required: 'A manager must be assigned to the report before submitting' })}>
+              <option name="default" value="" disabled hidden>- Select -</option>
+              {approvers.map((approver) => (
+                <option key={approver.id} value={approver.id}>{approver.name}</option>
+              ))}
+            </Dropdown>
+          </FormItem>
         </Fieldset>
-        <Button type="submit" disabled={!valid}>Submit for approval</Button>
+        {hasIncompletePages
+        && (
+        <Alert noIcon slim type="error">
+          <b>Incomplete report</b>
+          <br />
+          This report cannot be submitted until all sections are complete.
+          Please review the following sections:
+          <ul>
+            {incompletePages.map((page) => (
+              <li key={page}>
+                {page}
+              </li>
+            ))}
+          </ul>
+        </Alert>
+        )}
+        <Button type="submit">Submit for approval</Button>
       </Form>
     </>
   );
@@ -68,15 +95,18 @@ const SubmitterReviewPage = ({
 
 SubmitterReviewPage.propTypes = {
   submitted: PropTypes.bool.isRequired,
-  allComplete: PropTypes.bool.isRequired,
   register: PropTypes.func.isRequired,
   approvers: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
   })).isRequired,
-  valid: PropTypes.bool.isRequired,
   handleSubmit: PropTypes.func.isRequired,
   onFormSubmit: PropTypes.func.isRequired,
+  pages: PropTypes.arrayOf(PropTypes.shape({
+    review: PropTypes.bool,
+    state: PropTypes.string,
+    label: PropTypes.string,
+  })).isRequired,
 };
 
 export default SubmitterReviewPage;
diff --git a/frontend/src/pages/ActivityReport/Pages/activitySummary.js b/frontend/src/pages/ActivityReport/Pages/activitySummary.js
index 3dccf181e4..ee86ef2ee0 100644
--- a/frontend/src/pages/ActivityReport/Pages/activitySummary.js
+++ b/frontend/src/pages/ActivityReport/Pages/activitySummary.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
 
 import {
-  Fieldset, Radio, Label, Grid, TextInput, Checkbox,
+  Fieldset, Radio, Grid, TextInput, Checkbox,
 } from '@trussworks/react-uswds';
 
 import DatePicker from '../../../components/DatePicker';
@@ -15,6 +15,7 @@ import {
   programTypes,
   targetPopulations,
 } from '../constants';
+import FormItem from '../../../components/FormItem';
 
 const ActivitySummary = ({
   register,
@@ -61,7 +62,7 @@ const ActivitySummary = ({
     }
   }, [activityRecipientType, setValue]);
 
-  const renderCheckbox = (name, value, label) => (
+  const renderCheckbox = (name, value, label, requiredMessage) => (
     <Checkbox
       id={value}
       label={label}
@@ -70,7 +71,7 @@ const ActivitySummary = ({
       className="smart-hub--report-checkbox"
       inputRef={register({
         validate: () => (
-          getValues(name).length ? true : `${name} is required`
+          getValues(name).length ? true : requiredMessage
         ),
       })}
     />
@@ -84,84 +85,107 @@ const ActivitySummary = ({
       <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Who was the activity for?">
         <div id="activity-for" />
         <div className="smart-hub--form-section">
-          <Radio
-            id="category-grantee"
+          <FormItem
+            label="Was this activity for a grantee or non-grantee?"
             name="activityRecipientType"
-            label="Grantee"
-            value="grantee"
-            className="smart-hub--report-checkbox"
-            inputRef={register({ required: true })}
-          />
-          <Radio
-            id="category-non-grantee"
-            name="activityRecipientType"
-            label="Non-Grantee"
-            value="non-grantee"
-            className="smart-hub--report-checkbox"
-            inputRef={register({ required: true })}
-          />
+          >
+            <Radio
+              id="category-grantee"
+              name="activityRecipientType"
+              label="Grantee"
+              value="grantee"
+              className="smart-hub--report-checkbox"
+              inputRef={register({ required: 'Please specify grantee or non-grantee' })}
+            />
+            <Radio
+              id="category-non-grantee"
+              name="activityRecipientType"
+              label="Non-Grantee"
+              value="non-grantee"
+              className="smart-hub--report-checkbox"
+              inputRef={register({ required: 'Please specify grantee or non-grantee' })}
+            />
+          </FormItem>
         </div>
         <div className="smart-hub--form-section">
-          <MultiSelect
-            name="activityRecipients"
+          <FormItem
             label={recipientLabel}
-            disabled={disableRecipients}
-            control={control}
-            valueProperty="activityRecipientId"
-            labelProperty="name"
-            simple={false}
-            options={selectedRecipients}
-          />
+            name="activityRecipients"
+          >
+            <MultiSelect
+              name="activityRecipients"
+              disabled={disableRecipients}
+              control={control}
+              valueProperty="activityRecipientId"
+              labelProperty="name"
+              simple={false}
+              required="Please select at least one grantee or non-grantee"
+              options={selectedRecipients}
+            />
+          </FormItem>
         </div>
         <div className="smart-hub--form-section">
-          <MultiSelect
-            name="collaborators"
+          <FormItem
             label="Collaborating Specialists"
-            control={control}
+            name="collaborators"
             required={false}
-            valueProperty="id"
-            labelProperty="name"
-            simple={false}
-            options={collaborators.map((user) => ({ value: user.id, label: user.name }))}
-          />
+          >
+            <MultiSelect
+              name="collaborators"
+              control={control}
+              required={false}
+              valueProperty="id"
+              labelProperty="name"
+              simple={false}
+              options={collaborators.map((user) => ({ value: user.id, label: user.name }))}
+            />
+          </FormItem>
         </div>
         {granteeSelected
         && (
         <div className="smart-hub--form-section">
-          <MultiSelect
-            name="programTypes"
+          <FormItem
             label="Program type(s)"
-            control={control}
-            required
-            options={programTypes.map((pt) => ({ value: pt, label: pt }))}
-          />
+            name="programTypes"
+          >
+            <MultiSelect
+              name="programTypes"
+              label="Program type(s)"
+              control={control}
+              required="Please select at least one program type"
+              options={programTypes.map((pt) => ({ value: pt, label: pt }))}
+            />
+          </FormItem>
         </div>
         )}
         <div className="smart-hub--form-section">
-          <MultiSelect
-            name="targetPopulations"
+          <FormItem
             label="Target Populations addressed. You may choose more than one."
-            control={control}
-            required
-            options={targetPopulations.map((tp) => ({ value: tp, label: tp }))}
-          />
+            name="targetPopulations"
+          >
+            <MultiSelect
+              name="targetPopulations"
+              control={control}
+              required="Please select at least one target population"
+              options={targetPopulations.map((tp) => ({ value: tp, label: tp }))}
+            />
+          </FormItem>
         </div>
       </Fieldset>
       <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Reason for Activity">
         <div id="reasons" />
         <div className="smart-hub--form-section">
-          <Fieldset unstyled>
-            <legend>
-              Who requested this activity?
-              Use &quot;Regional Office&quot; for TTA not requested by grantee
-            </legend>
+          <FormItem
+            label="Who requested this activity? Use &quot;Regional Office&quot; for TTA not requested by grantee."
+            name="requester"
+          >
             <Radio
               id="granteeRequest"
               name="requester"
               label="Grantee"
               value="grantee"
               className="smart-hub--report-checkbox"
-              inputRef={register({ required: true })}
+              inputRef={register({ required: 'Please specify grantee or regional office' })}
             />
             <Radio
               id="requestorRegionalOffice"
@@ -169,47 +193,73 @@ const ActivitySummary = ({
               label="Regional Office"
               value="regionalOffice"
               className="smart-hub--report-checkbox"
-              inputRef={register({ required: true })}
+              inputRef={register({ required: 'Please specify grantee or regional office' })}
             />
-          </Fieldset>
+          </FormItem>
         </div>
         <div className="smart-hub--form-section">
-          <MultiSelect
+          <FormItem
+            label="Reason(s). You may choose more than one."
             name="reason"
-            label="What was the reason for this activity?"
-            control={control}
-            options={reasons.map((reason) => ({ value: reason, label: reason }))}
-          />
+          >
+            <MultiSelect
+              name="reason"
+              control={control}
+              options={reasons.map((reason) => ({ value: reason, label: reason }))}
+            />
+          </FormItem>
         </div>
       </Fieldset>
-      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Date and Duration">
+      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Activity date">
         <div id="date" />
-        <div className="smart-hub--form-section">
+        <div>
           <Grid row gap>
             <Grid col={6}>
-              <DatePicker
-                control={control}
-                maxDate={endDate}
-                name="startDate"
+              <FormItem
                 label="Start Date"
-                register={register}
-                openUp
-              />
+                name="startDate"
+              >
+                <DatePicker
+                  control={control}
+                  maxDate={endDate}
+                  name="startDate"
+                  openUp
+                />
+              </FormItem>
             </Grid>
             <Grid col={6}>
-              <DatePicker
-                control={control}
-                minDate={startDate}
-                disabled={!startDate}
-                name="endDate"
+              <FormItem
                 label="End Date"
-                register={register}
-                openUp
-              />
+                name="endDate"
+              >
+                <DatePicker
+                  control={control}
+                  minDate={startDate}
+                  disabled={!startDate}
+                  name="endDate"
+                  openUp
+                />
+              </FormItem>
             </Grid>
             <Grid col={5}>
-              <Label htmlFor="duration">Duration (round to the nearest half hour)</Label>
-              <TextInput id="duration" name="duration" type="number" inputRef={register({ required: true, valueAsNumber: true })} />
+              <FormItem
+                label="Duration"
+                name="duration"
+              >
+                <TextInput
+                  id="duration"
+                  name="duration"
+                  type="number"
+                  min={0}
+                  inputRef={
+                    register({
+                      required: 'Please enter the duration of the activity',
+                      valueAsNumber: true,
+                      min: { value: 0, message: 'Duration can not be negative' },
+                    })
+                  }
+                />
+              </FormItem>
             </Grid>
           </Grid>
         </div>
@@ -217,56 +267,80 @@ const ActivitySummary = ({
       <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Training or Technical Assistance">
         <div id="tta" />
         <div className="smart-hub--form-section">
-          <Fieldset unstyled>
-            <legend>What TTA was provided?</legend>
-            {renderCheckbox('ttaType', 'training', 'Training')}
-            {renderCheckbox('ttaType', 'technical-assistance', 'Technical Assistance')}
-          </Fieldset>
+          <FormItem
+            label="What TTA was provided"
+            name="ttaType"
+          >
+            {renderCheckbox('ttaType', 'training', 'Training', 'Please specify the type of TTA provided')}
+            {renderCheckbox('ttaType', 'technical-assistance', 'Technical Assistance', 'Please specify the type of TTA provided')}
+          </FormItem>
         </div>
         <div className="smart-hub--form-section">
-          <Fieldset unstyled>
-            <legend>How was this activity conducted? (select at least one)</legend>
-            <div className="smart-hub--form-section">
-              <Radio
-                id="delivery-method-virtual"
-                name="deliveryMethod"
-                label="Virtual"
-                value="virtual"
-                className="smart-hub--report-checkbox"
-                inputRef={register({ required: true })}
-              />
-              <Radio
-                id="delivery-method-in-person"
-                name="deliveryMethod"
-                label="In Person"
-                value="in-person"
-                className="smart-hub--report-checkbox"
-                inputRef={register({ required: true })}
-              />
-            </div>
-          </Fieldset>
+          <FormItem
+            label="How was the activity conducted?"
+            name="deliveryMethod"
+          >
+            <Radio
+              id="delivery-method-virtual"
+              name="deliveryMethod"
+              label="Virtual"
+              value="virtual"
+              className="smart-hub--report-checkbox"
+              inputRef={register({ required: 'Please specify how the activity was conducted' })}
+            />
+            <Radio
+              id="delivery-method-in-person"
+              name="deliveryMethod"
+              label="In Person"
+              value="in-person"
+              className="smart-hub--report-checkbox"
+              inputRef={register({ required: 'Please specify how the activity was conducted' })}
+            />
+          </FormItem>
         </div>
       </Fieldset>
-      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Other participants">
+      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Participants">
         <div id="other-participants" />
         <div className="smart-hub--form-section">
-          <MultiSelect
-            name="participants"
+          <FormItem
             label={participantsLabel}
-            control={control}
-            options={
+            name="participants"
+          >
+            <MultiSelect
+              name="participants"
+              control={control}
+              options={
               participants.map((participant) => ({ value: participant, label: participant }))
             }
-          />
+            />
+          </FormItem>
         </div>
-        <div className="smart-hub--form-section">
-          <Label htmlFor="numberOfParticipants">Number of grantee participants involved</Label>
-          <TextInput
-            id="numberOfParticipants"
+        <div>
+          <FormItem
+            label="Number of participants involved"
             name="numberOfParticipants"
-            type="number"
-            inputRef={register({ required: true, valueAsNumber: true })}
-          />
+          >
+            <Grid row gap>
+              <Grid col={5}>
+                <TextInput
+                  id="numberOfParticipants"
+                  name="numberOfParticipants"
+                  type="number"
+                  min={1}
+                  inputRef={
+                    register({
+                      required: 'Please enter the number of participants involved in the activity',
+                      valueAsNumber: true,
+                      min: {
+                        value: 1,
+                        message: 'Number of participants can not be zero or negative',
+                      },
+                    })
+                  }
+                />
+              </Grid>
+            </Grid>
+          </FormItem>
         </div>
       </Fieldset>
     </>
diff --git a/frontend/src/pages/ActivityReport/Pages/index.js b/frontend/src/pages/ActivityReport/Pages/index.js
index b8907e27c6..f8c43319fe 100644
--- a/frontend/src/pages/ActivityReport/Pages/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/index.js
@@ -29,16 +29,15 @@ const reviewPage = {
   render:
     (
       hookForm,
-      allComplete,
       formData,
       onSubmit,
       additionalData,
       onReview,
       approvingManager,
+      allPages,
     ) => (
       <ReviewSubmit
         approvers={additionalData.approvers}
-        allComplete={allComplete}
         onSubmit={onSubmit}
         onReview={onReview}
         hookForm={hookForm}
@@ -47,6 +46,7 @@ const reviewPage = {
           pages.map((p) => reviewItem(p.path, p.label, p.sections, formData))
         }
         initialData={formData}
+        pages={allPages}
       />
     ),
 };
diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index cb555a8edf..d500464d7e 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -10,6 +10,7 @@ import {
 
 import MultiSelect from '../../../components/MultiSelect';
 import FileUploader from '../../../components/FileUploader';
+import FormItem from '../../../components/FormItem';
 import { topics } from '../constants';
 
 const TopicsResources = ({
@@ -24,18 +25,24 @@ const TopicsResources = ({
     <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Topics Covered">
       <div id="topics-covered" />
       <div className="smart-hub--form-section">
-        <MultiSelect
-          name="topics"
+        <FormItem
           label="Topic(s) covered. You may choose more than one."
-          control={control}
-          placeholder="Select a topic..."
-          options={
+          name="topics"
+        >
+          <MultiSelect
+            name="topics"
+            label="Topic(s) covered. You may choose more than one."
+            control={control}
+            placeholder="Select a topic..."
+            required="Please select at least one topic"
+            options={
               topics.map((topic) => ({ value: topic, label: topic }))
             }
-        />
+          />
+        </FormItem>
       </div>
     </Fieldset>
-    <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Resources">
+    <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="OHS / ECLKC resources">
       <div id="resources" />
       <div className="smart-hub--form-section">
         <Label htmlFor="resourcesUsed">
@@ -47,7 +54,7 @@ const TopicsResources = ({
           id="resourcesUsed"
           name="resourcesUsed"
           type="text"
-          inputRef={register({ required: true })}
+          inputRef={register()}
         />
       </div>
       <div className="smart-hub--form-section">
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 005956f0e0..ef047d574e 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1288,6 +1288,11 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
+"@hookform/error-message@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@hookform/error-message/-/error-message-0.0.5.tgz#606912b506513669980c440f383ff6c78a7aca3a"
+  integrity sha512-es7eLLFA3SXNYAT8aUjvf7Gok1eMHK+9DMILtJA7ZEwYZlCCCPifhpoZmY+5SOopEtF7e+qxFOjX+MJnI3jOcg==
+
 "@jest/console@^24.7.1", "@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
@@ -9607,10 +9612,10 @@ react-helmet@^6.1.0:
     react-fast-compare "^3.1.1"
     react-side-effect "^2.1.0"
 
-react-hook-form@^6.9.0:
-  version "6.13.1"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.13.1.tgz#b9c0aa61f746db8169ed5e1050de21cacb1947d6"
-  integrity sha512-Q0N7MYcbA8SigYufb02h9z97ZKCpIbe62rywOTPsK4Ntvh6fRTGDXSuzWuRhLHhArLoWbGrWYSNSS4tlb+OFXg==
+react-hook-form@^6.15.0:
+  version "6.15.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.1.tgz#57d887ec4dac5a6c0099902171aa39cc893f7bca"
+  integrity sha512-bL0LQuQ3OlM3JYfbacKtBPLOHhmgYz8Lj6ivMrvu2M6e1wnt4sbGRtPEPYCc/8z3WDbjrMwfAfLX92OsB65pFA==
 
 react-idle-timer@^4.4.2:
   version "4.5.0"

From dcbd6fa82b07df4663416b9aaa3a1f3d512d3fb9 Mon Sep 17 00:00:00 2001
From: Josh Salisbury <josh@adhocteam.us>
Date: Fri, 12 Feb 2021 14:40:59 -0600
Subject: [PATCH 2/7] Form context updates. Add tests

---
 frontend/src/components/FormItem.css          |  5 ++
 frontend/src/components/FormItem.js           |  2 +-
 frontend/src/components/MultiSelect.js        |  2 +-
 .../components/Navigator/__tests__/index.js   | 28 ++++--
 frontend/src/components/Navigator/index.js    |  3 +-
 .../src/components/__tests__/MutliSelect.js   | 19 ++--
 .../Pages/Review/Approver/Review.js           | 71 ++++++++-------
 .../Pages/Review/Approver/__tests__/index.js  | 21 ++---
 .../Pages/Review/Approver/index.js            |  9 --
 .../Pages/Review/Submitter/Draft.js           | 36 ++------
 .../Review/Submitter/IncompletePages.css      |  3 +
 .../Pages/Review/Submitter/IncompletePages.js | 29 ++++++
 .../Pages/Review/Submitter/NeedsAction.js     | 15 +++-
 .../Pages/Review/Submitter/__tests__/index.js | 88 ++++++++++++++-----
 .../Pages/Review/Submitter/index.js           | 24 +++--
 .../Pages/Review/__tests__/index.js           | 43 ++++-----
 .../ActivityReport/Pages/Review/reviewItem.js |  2 +-
 .../Pages/components/GoalPicker.js            |  1 +
 .../pages/ActivityReport/__tests__/index.js   | 47 +++-------
 frontend/src/pages/ActivityReport/index.js    |  2 +
 20 files changed, 255 insertions(+), 195 deletions(-)
 create mode 100644 frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.css
 create mode 100644 frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.js

diff --git a/frontend/src/components/FormItem.css b/frontend/src/components/FormItem.css
index e69de29bb2..d281b31642 100644
--- a/frontend/src/components/FormItem.css
+++ b/frontend/src/components/FormItem.css
@@ -0,0 +1,5 @@
+.smart-hub--form-required {
+  font-family: SourceSansPro;
+  font-size: 16px;
+  color: #d42240;
+}
\ No newline at end of file
diff --git a/frontend/src/components/FormItem.js b/frontend/src/components/FormItem.js
index a1538943fa..aa8e4abc22 100644
--- a/frontend/src/components/FormItem.js
+++ b/frontend/src/components/FormItem.js
@@ -31,7 +31,7 @@ function FormItem({
 FormItem.propTypes = {
   label: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
-  name: PropTypes.isRequired,
+  name: PropTypes.string.isRequired,
   required: PropTypes.bool,
 };
 
diff --git a/frontend/src/components/MultiSelect.js b/frontend/src/components/MultiSelect.js
index 69bc424515..ce008e2c47 100644
--- a/frontend/src/components/MultiSelect.js
+++ b/frontend/src/components/MultiSelect.js
@@ -189,7 +189,7 @@ MultiSelect.propTypes = {
     hideSelectedOptions: PropTypes.bool,
   }),
   disabled: PropTypes.bool,
-  required: PropTypes.string,
+  required: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 };
 
 MultiSelect.defaultProps = {
diff --git a/frontend/src/components/Navigator/__tests__/index.js b/frontend/src/components/Navigator/__tests__/index.js
index 58365a0530..7213f5d423 100644
--- a/frontend/src/components/Navigator/__tests__/index.js
+++ b/frontend/src/components/Navigator/__tests__/index.js
@@ -10,14 +10,14 @@ import Navigator from '../index';
 import { NOT_STARTED } from '../constants';
 
 // eslint-disable-next-line react/prop-types
-const Input = ({ name }) => {
+const Input = ({ name, required }) => {
   const { register } = useFormContext();
   return (
     <input
       type="radio"
       data-testid={name}
       name={name}
-      ref={register}
+      ref={register({ required })}
     />
   );
 };
@@ -43,12 +43,21 @@ const pages = [
   },
   {
     position: 3,
+    path: 'third',
+    label: 'third page',
+    review: false,
+    render: () => (
+      <Input name="third" required />
+    ),
+  },
+  {
+    position: 4,
     label: 'review page',
     path: 'review',
     review: true,
-    render: (allComplete, formData, onSubmit) => (
+    render: (formData, onFormSubmit) => (
       <div>
-        <button type="button" data-testid="review" onClick={onSubmit}>Continue</button>
+        <button type="button" data-testid="review" onClick={onFormSubmit}>Continue</button>
       </div>
     ),
   },
@@ -88,7 +97,7 @@ describe('Navigator', () => {
     const onSave = jest.fn();
     renderNavigator('second', () => {}, onSave);
     userEvent.click(screen.getByRole('button', { name: 'Continue' }));
-    await waitFor(() => expect(onSave).toHaveBeenCalledWith({ pageState: { ...initialData.pageState, 2: 'Complete' }, second: '' }, 3));
+    await waitFor(() => expect(onSave).toHaveBeenCalledWith({ pageState: { ...initialData.pageState, 2: 'Complete' }, second: null }, 3));
   });
 
   it('submits data when "continuing" from the review page', async () => {
@@ -98,10 +107,17 @@ describe('Navigator', () => {
     await waitFor(() => expect(onSubmit).toHaveBeenCalled());
   });
 
+  it('shows an error message if the form is not valid', async () => {
+    renderNavigator('third');
+    const button = await screen.findByRole('button', { name: 'Continue' });
+    userEvent.click(button);
+    expect(await screen.findByTestId('alert')).toHaveTextContent('Please complete all required fields before submitting this report.');
+  });
+
   it('calls onSave on navigation', async () => {
     const onSave = jest.fn();
     renderNavigator('second', () => {}, onSave);
     userEvent.click(screen.getByRole('button', { name: 'first page' }));
-    await waitFor(() => expect(onSave).toHaveBeenCalledWith({ ...initialData, second: '' }, 1));
+    await waitFor(() => expect(onSave).toHaveBeenCalledWith({ ...initialData, second: null }, 1));
   });
 });
diff --git a/frontend/src/components/Navigator/index.js b/frontend/src/components/Navigator/index.js
index 9b72595335..eedcf10fbf 100644
--- a/frontend/src/components/Navigator/index.js
+++ b/frontend/src/components/Navigator/index.js
@@ -75,7 +75,8 @@ function Navigator({
   };
 
   const onSaveForm = async (completed, index) => {
-    const data = { ...formData, ...getValues(), pageState: newNavigatorState(completed) };
+    const { status, ...values } = getValues();
+    const data = { ...formData, ...values, pageState: newNavigatorState(completed) };
     const newIndex = index === page.position ? null : index;
     try {
       updateFormData(data);
diff --git a/frontend/src/components/__tests__/MutliSelect.js b/frontend/src/components/__tests__/MutliSelect.js
index 7118968706..f08786654e 100644
--- a/frontend/src/components/__tests__/MutliSelect.js
+++ b/frontend/src/components/__tests__/MutliSelect.js
@@ -5,6 +5,7 @@ import selectEvent from 'react-select-event';
 import { act } from 'react-dom/test-utils';
 import { useForm } from 'react-hook-form';
 import userEvent from '@testing-library/user-event';
+import { Label } from '@trussworks/react-uswds';
 
 import MultiSelect from '../MultiSelect';
 
@@ -27,14 +28,16 @@ describe('MultiSelect', () => {
 
     return (
       <form onSubmit={handleSubmit(submit)}>
-        <MultiSelect
-          control={control}
-          label="label"
-          name="name"
-          options={options}
-          required={false}
-        />
-        <button data-testid="submit" type="submit">submit</button>
+        <Label>
+          label
+          <MultiSelect
+            control={control}
+            name="name"
+            options={options}
+            required={false}
+          />
+          <button data-testid="submit" type="submit">submit</button>
+        </Label>
       </form>
     );
   };
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Approver/Review.js b/frontend/src/pages/ActivityReport/Pages/Review/Approver/Review.js
index 05138c6df1..4297d938c1 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Approver/Review.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Approver/Review.js
@@ -4,19 +4,20 @@ import _ from 'lodash';
 import {
   Dropdown, Form, Label, Fieldset, Textarea, Alert, Button,
 } from '@trussworks/react-uswds';
+import { useFormContext } from 'react-hook-form';
 
 import { managerReportStatuses } from '../../../../../Constants';
+import FormItem from '../../../../../components/FormItem';
 
 const Review = ({
   reviewed,
   additionalNotes,
-  register,
-  valid,
-  handleSubmit,
   onFormReview,
-}) => (
-  <>
-    {reviewed
+}) => {
+  const { register, handleSubmit } = useFormContext();
+  return (
+    <>
+      {reviewed
       && (
       <Alert noIcon className="margin-y-4" type="success">
         <b>Success</b>
@@ -24,38 +25,40 @@ const Review = ({
         Your review of this report was successfully submitted
       </Alert>
       )}
-    <h2>Review and approve report</h2>
-    <div className="smart-hub--creator-notes" aria-label="additionalNotes">
-      <p>
-        <span className="text-bold">Creator notes</span>
-        <br />
-        <br />
-        { additionalNotes || 'No creator notes'}
-      </p>
-    </div>
-    <Form className="smart-hub--form-large" onSubmit={handleSubmit(onFormReview)}>
-      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Review and submit report">
-        <Label htmlFor="managerNotes">Manager notes</Label>
-        <Textarea inputRef={register} id="managerNotes" name="managerNotes" />
-      </Fieldset>
-      <Label htmlFor="status">Choose report status</Label>
-      <Dropdown id="status" name="status" defaultValue="" inputRef={register({ required: true })}>
-        <option name="default" value="" disabled hidden>- Select -</option>
-        {managerReportStatuses.map((status) => (
-          <option key={status} value={status}>{_.startCase(status)}</option>
-        ))}
-      </Dropdown>
-      <Button type="submit" disabled={!valid}>Submit</Button>
-    </Form>
-  </>
-);
+      <h2>Review and approve report</h2>
+      <div className="smart-hub--creator-notes" aria-label="additionalNotes">
+        <p>
+          <span className="text-bold">Creator notes</span>
+          <br />
+          <br />
+          { additionalNotes || 'No creator notes'}
+        </p>
+      </div>
+      <Form className="smart-hub--form-large" onSubmit={handleSubmit(onFormReview)}>
+        <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Review and submit report">
+          <Label htmlFor="managerNotes">Manager notes</Label>
+          <Textarea inputRef={register} id="managerNotes" name="managerNotes" />
+        </Fieldset>
+        <FormItem
+          name="status"
+          label="Choose report status"
+        >
+          <Dropdown id="status" name="status" defaultValue="" inputRef={register({ required: 'Please select a status before submitting your review' })}>
+            <option name="default" value="" disabled hidden>- Select -</option>
+            {managerReportStatuses.map((status) => (
+              <option key={status} value={status}>{_.startCase(status)}</option>
+            ))}
+          </Dropdown>
+        </FormItem>
+        <Button type="submit">Submit</Button>
+      </Form>
+    </>
+  );
+};
 
 Review.propTypes = {
   reviewed: PropTypes.bool.isRequired,
   additionalNotes: PropTypes.string.isRequired,
-  register: PropTypes.func.isRequired,
-  valid: PropTypes.bool.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
   onFormReview: PropTypes.func.isRequired,
 };
 
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Approver/__tests__/index.js b/frontend/src/pages/ActivityReport/Pages/Review/Approver/__tests__/index.js
index fa09c8966e..9b35e9f138 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Approver/__tests__/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Approver/__tests__/index.js
@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 
 import Approver from '../index';
 import { REPORT_STATUSES } from '../../../../../../Constants';
@@ -11,20 +11,21 @@ const RenderApprover = ({
   // eslint-disable-next-line react/prop-types
   onFormReview, reviewed, valid, formData,
 }) => {
-  const { register, handleSubmit } = useForm({
+  const hookForm = useForm({
     mode: 'onChange',
     defaultValues: formData,
   });
 
   return (
-    <Approver
-      register={register}
-      handleSubmit={handleSubmit}
-      onFormReview={onFormReview}
-      reviewed={reviewed}
-      valid={valid}
-      formData={formData}
-    />
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <FormProvider {...hookForm}>
+      <Approver
+        onFormReview={onFormReview}
+        reviewed={reviewed}
+        valid={valid}
+        formData={formData}
+      />
+    </FormProvider>
   );
 };
 
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Approver/index.js b/frontend/src/pages/ActivityReport/Pages/Review/Approver/index.js
index aee8a7e675..7acf3dc12d 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Approver/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Approver/index.js
@@ -6,12 +6,9 @@ import Approved from './Approved';
 import { REPORT_STATUSES } from '../../../../../Constants';
 
 const Approver = ({
-  register,
-  handleSubmit,
   onFormReview,
   reviewed,
   formData,
-  valid,
 }) => {
   const { managerNotes, additionalNotes, status } = formData;
   const review = status === REPORT_STATUSES.SUBMITTED || status === REPORT_STATUSES.NEEDS_ACTION;
@@ -22,11 +19,8 @@ const Approver = ({
       {review
       && (
       <Review
-        valid={valid}
         reviewed={reviewed}
         additionalNotes={additionalNotes}
-        register={register}
-        handleSubmit={handleSubmit}
         onFormReview={onFormReview}
       />
       )}
@@ -42,11 +36,8 @@ const Approver = ({
 };
 
 Approver.propTypes = {
-  register: PropTypes.func.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
   onFormReview: PropTypes.func.isRequired,
   reviewed: PropTypes.bool.isRequired,
-  valid: PropTypes.bool.isRequired,
   formData: PropTypes.shape({
     approvingManager: PropTypes.shape({
       name: PropTypes.string,
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/Draft.js b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/Draft.js
index fe0e5d57a3..42006f9640 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/Draft.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/Draft.js
@@ -1,24 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import {
   Dropdown, Form, Fieldset, Textarea, Alert, Button,
 } from '@trussworks/react-uswds';
+import { useFormContext } from 'react-hook-form';
 
+import IncompletePages from './IncompletePages';
 import { DECIMAL_BASE } from '../../../../../Constants';
 import FormItem from '../../../../../components/FormItem';
 
 const Draft = ({
   submitted,
-  register,
   approvers,
-  handleSubmit,
   onFormSubmit,
-  pages,
+  incompletePages,
 }) => {
-  const filtered = pages.filter((p) => !(p.state === 'Complete' || p.review));
-  const incompletePages = filtered.map((f) => f.label);
+  const { register, handleSubmit } = useFormContext();
   const hasIncompletePages = incompletePages.length > 0;
+
   const setValue = (e) => {
     if (e === '') {
       return null;
@@ -71,22 +70,7 @@ const Draft = ({
             </Dropdown>
           </FormItem>
         </Fieldset>
-        {hasIncompletePages
-        && (
-        <Alert noIcon slim type="error">
-          <b>Incomplete report</b>
-          <br />
-          This report cannot be submitted until all sections are complete.
-          Please review the following sections:
-          <ul>
-            {incompletePages.map((page) => (
-              <li key={page}>
-                {page}
-              </li>
-            ))}
-          </ul>
-        </Alert>
-        )}
+        {hasIncompletePages && <IncompletePages incompletePages={incompletePages} />}
         <Button type="submit">Submit for approval</Button>
       </Form>
     </>
@@ -95,18 +79,12 @@ const Draft = ({
 
 Draft.propTypes = {
   submitted: PropTypes.bool.isRequired,
-  register: PropTypes.func.isRequired,
   approvers: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
   })).isRequired,
-  handleSubmit: PropTypes.func.isRequired,
   onFormSubmit: PropTypes.func.isRequired,
-  pages: PropTypes.arrayOf(PropTypes.shape({
-    review: PropTypes.bool,
-    state: PropTypes.string,
-    label: PropTypes.string,
-  })).isRequired,
+  incompletePages: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
 export default Draft;
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.css b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.css
new file mode 100644
index 0000000000..169cc5862a
--- /dev/null
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.css
@@ -0,0 +1,3 @@
+.smart-hub--incomplete-notice .usa-alert__body {
+  padding-left: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.js b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.js
new file mode 100644
index 0000000000..918a1acda1
--- /dev/null
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/IncompletePages.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from '@trussworks/react-uswds';
+
+import './IncompletePages.css';
+
+const IncompletePages = ({
+  incompletePages,
+}) => (
+  <Alert className="smart-hub--incomplete-notice" validation noIcon slim type="error">
+    <b>Incomplete report</b>
+    <br />
+    This report cannot be submitted until all sections are complete.
+    Please review the following sections:
+    <ul>
+      {incompletePages.map((page) => (
+        <li key={page}>
+          {page}
+        </li>
+      ))}
+    </ul>
+  </Alert>
+);
+
+IncompletePages.propTypes = {
+  incompletePages: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default IncompletePages;
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/NeedsAction.js b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/NeedsAction.js
index e7da7eeb78..187a180584 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/NeedsAction.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/NeedsAction.js
@@ -4,15 +4,21 @@ import { Alert, Button } from '@trussworks/react-uswds';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
+import IncompletePages from './IncompletePages';
+
 const NeedsAction = ({
   additionalNotes,
   managerNotes,
   onSubmit,
   approvingManager,
-  valid,
+  incompletePages,
 }) => {
+  const hasIncompletePages = incompletePages.length > 0;
+
   const submit = async () => {
-    await onSubmit({ approvingManagerId: approvingManager.id, additionalNotes });
+    if (!hasIncompletePages) {
+      await onSubmit({ approvingManagerId: approvingManager.id, additionalNotes });
+    }
   };
 
   return (
@@ -56,8 +62,9 @@ const NeedsAction = ({
           { approvingManager.name || 'No manager notes' }
         </div>
       </div>
+      {hasIncompletePages && <IncompletePages incompletePages={incompletePages} />}
       <div className="margin-top-3">
-        <Button disabled={!valid} onClick={submit}>Re-submit for Approval</Button>
+        <Button onClick={submit}>Re-submit for Approval</Button>
       </div>
     </>
   );
@@ -67,7 +74,7 @@ NeedsAction.propTypes = {
   additionalNotes: PropTypes.string,
   managerNotes: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
-  valid: PropTypes.bool.isRequired,
+  incompletePages: PropTypes.arrayOf(PropTypes.string).isRequired,
   approvingManager: PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/__tests__/index.js b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/__tests__/index.js
index 00904e1a0c..aa80382f43 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/__tests__/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/__tests__/index.js
@@ -2,49 +2,61 @@ import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 
 import Submitter from '../index';
 import { REPORT_STATUSES } from '../../../../../../Constants';
 
 const RenderSubmitter = ({
   // eslint-disable-next-line react/prop-types
-  submitted, allComplete, onFormSubmit, formData, valid,
+  submitted, onFormSubmit, formData, pages,
 }) => {
-  const { register, handleSubmit } = useForm({
+  const hookForm = useForm({
     mode: 'onChange',
     defaultValues: formData,
   });
 
   return (
-    <Submitter
-      submitted={submitted}
-      allComplete={allComplete}
-      onFormSubmit={onFormSubmit}
-      register={register}
-      handleSubmit={handleSubmit}
-      valid={valid}
-      approvers={[{ name: 'test', id: 1 }]}
-      formData={formData}
-    />
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <FormProvider {...hookForm}>
+      <Submitter
+        submitted={submitted}
+        onFormSubmit={onFormSubmit}
+        approvers={[{ name: 'test', id: 1 }]}
+        formData={formData}
+        pages={pages}
+      />
+    </FormProvider>
   );
 };
 
-const renderReview = (status, submitted, allComplete, onFormSubmit) => {
+const completePages = [{
+  label: 'label',
+  state: 'Complete',
+  review: false,
+}];
+
+const incompletePages = [{
+  label: 'incomplete',
+  state: 'In progress',
+  review: false,
+}];
+
+const renderReview = (status, submitted, onFormSubmit, complete = true) => {
   const formData = {
     approvingManager: { name: 'name' },
     approvingManagerId: 1,
     status,
   };
 
+  const pages = complete ? completePages : incompletePages;
+
   render(
     <RenderSubmitter
-      status={status}
       submitted={submitted}
-      allComplete={allComplete}
       onFormSubmit={onFormSubmit}
       formData={formData}
-      valid
+      pages={pages}
     />,
   );
 };
@@ -52,26 +64,40 @@ const renderReview = (status, submitted, allComplete, onFormSubmit) => {
 describe('Submitter review page', () => {
   describe('when the report is a draft', () => {
     it('displays the draft review component', async () => {
-      renderReview(REPORT_STATUSES.DRAFT, false, true, () => {});
+      renderReview(REPORT_STATUSES.DRAFT, false, () => {});
       expect(await screen.findByText('Submit Report')).toBeVisible();
     });
 
     it('allows the author to submit for review', async () => {
       const mockSubmit = jest.fn();
-      renderReview(REPORT_STATUSES.DRAFT, false, true, mockSubmit);
+      renderReview(REPORT_STATUSES.DRAFT, false, mockSubmit);
       const button = await screen.findByRole('button');
       userEvent.click(button);
       await waitFor(() => expect(mockSubmit).toHaveBeenCalled());
     });
 
     it('displays an error if the report is not complete', async () => {
-      renderReview(REPORT_STATUSES.DRAFT, false, false, () => {});
+      renderReview(REPORT_STATUSES.DRAFT, false, () => {}, false);
       const alert = await screen.findByTestId('alert');
       expect(alert.textContent).toContain('Incomplete report');
     });
 
+    it('shows pages that are not completed', async () => {
+      renderReview(REPORT_STATUSES.DRAFT, false, () => {}, false);
+      const alert = await screen.findByText('Incomplete report');
+      expect(alert).toBeVisible();
+    });
+
+    it('fails to submit if there are pages that have not been completed', async () => {
+      const mockSubmit = jest.fn();
+      renderReview(REPORT_STATUSES.DRAFT, false, mockSubmit, false);
+      const button = await screen.findByRole('button');
+      userEvent.click(button);
+      await waitFor(() => expect(mockSubmit).not.toHaveBeenCalled());
+    });
+
     it('displays success if the report has been submitted', async () => {
-      renderReview(REPORT_STATUSES.DRAFT, true, true, () => {});
+      renderReview(REPORT_STATUSES.DRAFT, true, () => {});
       const alert = await screen.findByTestId('alert');
       expect(alert.textContent).toContain('Success');
     });
@@ -79,20 +105,34 @@ describe('Submitter review page', () => {
 
   describe('when the report is approved', () => {
     it('displays the approved component', async () => {
-      renderReview(REPORT_STATUSES.APPROVED, false, true, () => {});
+      renderReview(REPORT_STATUSES.APPROVED, false, () => {});
       expect(await screen.findByText('Report approved')).toBeVisible();
     });
   });
 
   describe('when the report needs action', () => {
     it('displays the needs action component', async () => {
-      renderReview(REPORT_STATUSES.NEEDS_ACTION, false, true, () => {});
+      renderReview(REPORT_STATUSES.NEEDS_ACTION, false, () => {});
       expect(await screen.findByText('Review and re-submit report')).toBeVisible();
     });
 
+    it('shows pages that are not completed', async () => {
+      renderReview(REPORT_STATUSES.NEEDS_ACTION, false, () => {}, false);
+      const alert = await screen.findByText('Incomplete report');
+      expect(alert).toBeVisible();
+    });
+
+    it('fails to re-submit if there are pages that have not been completed', async () => {
+      const mockSubmit = jest.fn();
+      renderReview(REPORT_STATUSES.NEEDS_ACTION, false, mockSubmit, false);
+      const button = await screen.findByRole('button');
+      userEvent.click(button);
+      await waitFor(() => expect(mockSubmit).not.toHaveBeenCalled());
+    });
+
     it('allows the user to resubmit the report', async () => {
       const mockSubmit = jest.fn();
-      renderReview(REPORT_STATUSES.NEEDS_ACTION, false, true, mockSubmit);
+      renderReview(REPORT_STATUSES.NEEDS_ACTION, false, mockSubmit);
       const button = await screen.findByRole('button');
       userEvent.click(button);
       await waitFor(() => expect(mockSubmit).toHaveBeenCalled());
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/index.js b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/index.js
index a29fa07c3c..4550c9a2ab 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/index.js
@@ -9,13 +9,10 @@ import { REPORT_STATUSES } from '../../../../../Constants';
 
 const Submitter = ({
   submitted,
-  allComplete,
-  register,
   approvers,
-  valid,
-  handleSubmit,
   onFormSubmit,
   formData,
+  pages,
 }) => {
   const {
     approvingManager,
@@ -27,18 +24,18 @@ const Submitter = ({
   const needsAction = status === REPORT_STATUSES.NEEDS_ACTION;
   const approved = status === REPORT_STATUSES.APPROVED;
 
+  const filtered = pages.filter((p) => !(p.state === 'Complete' || p.review));
+  const incompletePages = filtered.map((f) => f.label);
+
   return (
     <>
       {notReviewed
       && (
       <DraftReview
         submitted={submitted}
-        allComplete={allComplete}
-        register={register}
         approvers={approvers}
-        valid={valid}
-        handleSubmit={handleSubmit}
         onFormSubmit={onFormSubmit}
+        incompletePages={incompletePages}
       />
       )}
       {needsAction
@@ -48,7 +45,7 @@ const Submitter = ({
         managerNotes={managerNotes}
         onSubmit={onFormSubmit}
         approvingManager={approvingManager}
-        valid={valid}
+        incompletePages={incompletePages}
       />
       )}
       {approved
@@ -64,14 +61,15 @@ const Submitter = ({
 
 Submitter.propTypes = {
   submitted: PropTypes.bool.isRequired,
-  allComplete: PropTypes.bool.isRequired,
-  register: PropTypes.func.isRequired,
+  pages: PropTypes.arrayOf(PropTypes.shape({
+    state: PropTypes.string,
+    review: PropTypes.bool,
+    label: PropTypes.string,
+  })).isRequired,
   approvers: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number,
     name: PropTypes.string,
   })).isRequired,
-  valid: PropTypes.bool.isRequired,
-  handleSubmit: PropTypes.func.isRequired,
   onFormSubmit: PropTypes.func.isRequired,
   formData: PropTypes.shape({
     approvingManager: PropTypes.shape({
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/__tests__/index.js b/frontend/src/pages/ActivityReport/Pages/Review/__tests__/index.js
index 6ca86152d6..2fe52a1166 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/__tests__/index.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/__tests__/index.js
@@ -15,7 +15,7 @@ const approvers = [
 
 const RenderReview = ({
   // eslint-disable-next-line react/prop-types
-  allComplete, formData, onSubmit, onReview, approvingManagerId, approvingManager,
+  allComplete, formData, onSubmit, onReview, approvingManagerId, approvingManager, pages,
 }) => {
   const hookForm = useForm({
     mode: 'onChange',
@@ -32,11 +32,24 @@ const RenderReview = ({
         formData={formData}
         onReview={onReview}
         approvingManager={approvingManager}
+        pages={pages}
       />
     </FormProvider>
   );
 };
 
+const completePages = [{
+  label: 'label',
+  state: 'Complete',
+  review: false,
+}];
+
+const incompletePages = [{
+  label: 'incomplete',
+  state: 'In progress',
+  review: false,
+}];
+
 const renderReview = (
   allComplete,
   approvingManager = false,
@@ -45,7 +58,10 @@ const renderReview = (
   onSubmit = () => {},
   onReview = () => {},
   approvingManagerId = null,
+  complete = true,
 ) => {
+  const pages = complete ? completePages : incompletePages;
+
   render(
     <RenderReview
       allComplete={allComplete}
@@ -54,11 +70,12 @@ const renderReview = (
       approvingManager={approvingManager}
       onReview={onReview}
       approvingManagerId={approvingManagerId}
+      pages={pages}
     />,
   );
 };
 
-const selectLabel = 'Approving manager';
+const selectLabel = 'Approving manager (Required)';
 
 describe('ReviewSubmit', () => {
   describe('when the user is the approving manager', () => {
@@ -93,18 +110,12 @@ describe('ReviewSubmit', () => {
   });
 
   describe('when the form is not complete', () => {
-    it('an error alert is shown', async () => {
-      renderReview(false, false);
-      const alert = await screen.findByTestId('alert');
-      expect(alert).toHaveClass('usa-alert--error');
-      await waitFor(() => expect(screen.getByLabelText(selectLabel)).toBeEnabled());
-    });
-
-    it('the submit button is disabled', async () => {
+    it('an error message is shown when the report is submitted', async () => {
       renderReview(false, false);
       const button = await screen.findByRole('button');
-      expect(button).toBeDisabled();
-      await waitFor(() => expect(screen.getByLabelText(selectLabel)).toBeEnabled());
+      userEvent.click(button);
+      const error = await screen.findByTestId('errorMessage');
+      expect(error).toBeVisible();
     });
   });
 
@@ -116,14 +127,6 @@ describe('ReviewSubmit', () => {
       await waitFor(() => expect(screen.getByLabelText(selectLabel)).toBeEnabled());
     });
 
-    it('the submit button is disabled until one approver is selected', async () => {
-      renderReview(true, false);
-      const button = await screen.findByRole('button');
-      expect(button).toBeDisabled();
-      userEvent.selectOptions(screen.getByTestId('dropdown'), ['1']);
-      expect(await screen.findByRole('button')).toBeEnabled();
-    });
-
     it('the submit button calls onSubmit', async () => {
       const onSubmit = jest.fn();
       renderReview(true, false, REPORT_STATUSES.DRAFT, {}, onSubmit, () => {}, 1);
diff --git a/frontend/src/pages/ActivityReport/Pages/Review/reviewItem.js b/frontend/src/pages/ActivityReport/Pages/Review/reviewItem.js
index 29d5c1431f..ac1d1d90c5 100644
--- a/frontend/src/pages/ActivityReport/Pages/Review/reviewItem.js
+++ b/frontend/src/pages/ActivityReport/Pages/Review/reviewItem.js
@@ -81,7 +81,7 @@ const Item = ({ label, value, path }) => {
       <Grid col={6}>
         {values.map((v, index) => (
           <Grid aria-label={`${label} ${index + 1}`} key={`${label}${v}`} col={12} className="flex-align-end display-flex flex-column flex-justify-center">
-            {v}
+            {Number.isNaN(v) ? '' : v}
           </Grid>
         ))}
       </Grid>
diff --git a/frontend/src/pages/ActivityReport/Pages/components/GoalPicker.js b/frontend/src/pages/ActivityReport/Pages/components/GoalPicker.js
index a0a76b1719..4806250cb3 100644
--- a/frontend/src/pages/ActivityReport/Pages/components/GoalPicker.js
+++ b/frontend/src/pages/ActivityReport/Pages/components/GoalPicker.js
@@ -30,6 +30,7 @@ const GoalPicker = ({
           valueProperty="id"
           labelProperty="name"
           simple={false}
+          required={false}
           components={components}
           options={availableGoals.map((goal) => ({ value: goal.id, label: goal.name }))}
           multiSelectOptions={{
diff --git a/frontend/src/pages/ActivityReport/__tests__/index.js b/frontend/src/pages/ActivityReport/__tests__/index.js
index b12e811eef..162b1d69ef 100644
--- a/frontend/src/pages/ActivityReport/__tests__/index.js
+++ b/frontend/src/pages/ActivityReport/__tests__/index.js
@@ -67,6 +67,13 @@ describe('ActivityReport', () => {
     fetchMock.get('/api/activity-reports/approvers?region=1', []);
   });
 
+  it('handles failures to download a report', async () => {
+    fetchMock.get('/api/activity-reports/1', () => { throw new Error('unable to download report'); });
+    renderActivityReport('1', 'activity-summary', true);
+    const alert = await screen.findByTestId('alert');
+    expect(alert).toHaveTextContent('Unable to load activity report');
+  });
+
   describe('last saved time', () => {
     it('is shown if history.state.showLastUpdatedTime is true', async () => {
       const data = formData();
@@ -91,7 +98,7 @@ describe('ActivityReport', () => {
     await waitFor(() => expect(screen.queryByLabelText('Program type(s)')).toBeNull());
     const nonGrantee = within(information).getByLabelText('Grantee');
     fireEvent.click(nonGrantee);
-    await waitFor(() => expect(screen.queryByLabelText('Program type(s)')).toBeVisible());
+    await waitFor(() => expect(screen.queryByLabelText('Program type(s) (Required)')).toBeVisible());
   });
 
   it('defaults to activity summary if no page is in the url', async () => {
@@ -115,7 +122,7 @@ describe('ActivityReport', () => {
       const information = await screen.findByRole('group', { name: 'Who was the activity for?' });
       const grantee = within(information).getByLabelText('Grantee');
       fireEvent.click(grantee);
-      const granteeSelectbox = await screen.findByRole('textbox', { name: 'Grantee name(s)' });
+      const granteeSelectbox = await screen.findByRole('textbox', { name: 'Grantee name(s) (Required)' });
       await reactSelectEvent.select(granteeSelectbox, ['grant']);
 
       const button = await screen.findByRole('button', { name: 'Topics and resources' });
@@ -141,7 +148,7 @@ describe('ActivityReport', () => {
         const information = await screen.findByRole('group', { name: 'Who was the activity for?' });
         const grantee = within(information).getByLabelText('Grantee');
         fireEvent.click(grantee);
-        const granteeSelectbox = await screen.findByRole('textbox', { name: 'Grantee name(s)' });
+        const granteeSelectbox = await screen.findByRole('textbox', { name: 'Grantee name(s) (Required)' });
         reactSelectEvent.openMenu(granteeSelectbox);
         expect(await screen.findByText(withText('grant'))).toBeVisible();
       });
@@ -151,7 +158,7 @@ describe('ActivityReport', () => {
         const information = await screen.findByRole('group', { name: 'Who was the activity for?' });
         const nonGrantee = within(information).getByLabelText('Non-Grantee');
         fireEvent.click(nonGrantee);
-        const granteeSelectbox = await screen.findByRole('textbox', { name: 'Grantee name(s)' });
+        const granteeSelectbox = await screen.findByRole('textbox', { name: 'Grantee name(s) (Required)' });
         reactSelectEvent.openMenu(granteeSelectbox);
         expect(await screen.findByText(withText('nonGrantee'))).toBeVisible();
       });
@@ -159,41 +166,13 @@ describe('ActivityReport', () => {
 
     it('clears selection when non-grantee is selected', async () => {
       renderActivityReport('new');
-      const enabled = await screen.findByRole('textbox', { name: 'Grantee name(s)' });
+      const enabled = await screen.findByRole('textbox', { name: 'Grantee name(s) (Required)' });
       expect(enabled).toBeDisabled();
       const information = await screen.findByRole('group', { name: 'Who was the activity for?' });
       const grantee = within(information).getByLabelText('Grantee');
       fireEvent.click(grantee);
-      const disabled = await screen.findByRole('textbox', { name: 'Grantee name(s)' });
+      const disabled = await screen.findByRole('textbox', { name: 'Grantee name(s) (Required)' });
       expect(disabled).not.toBeDisabled();
     });
   });
-
-  describe('method checkboxes', () => {
-    it('require a single selection for the form to be valid', async () => {
-      const data = formData();
-      delete data.deliveryMethod;
-      fetchMock.get('/api/activity-reports/1', data);
-
-      renderActivityReport(1);
-      expect(await screen.findByText('Continue')).toBeDisabled();
-      const box = await screen.findByLabelText('Virtual');
-      fireEvent.click(box);
-      await waitFor(() => expect(screen.getByText('Continue')).not.toBeDisabled());
-    });
-  });
-
-  describe('tta checkboxes', () => {
-    it('requires a single selection for the form to be valid', async () => {
-      const data = formData();
-      delete data.ttaType;
-      fetchMock.get('/api/activity-reports/1', data);
-
-      renderActivityReport(1);
-      expect(await screen.findByText('Continue')).toBeDisabled();
-      const box = await screen.findByLabelText('Training');
-      fireEvent.click(box);
-      await waitFor(() => expect(screen.getByText('Continue')).not.toBeDisabled());
-    });
-  });
 });
diff --git a/frontend/src/pages/ActivityReport/index.js b/frontend/src/pages/ActivityReport/index.js
index d784d4c33d..66cc6daaf6 100644
--- a/frontend/src/pages/ActivityReport/index.js
+++ b/frontend/src/pages/ActivityReport/index.js
@@ -40,6 +40,8 @@ const fakeGoals = [
 
 const defaultValues = {
   deliveryMethod: [],
+  activityRecipientType: '',
+  activityRecipients: [],
   activityType: [],
   attachments: [],
   context: '',

From 69957ce939c73fbf11bbcc8b118bbcb87fc37fdb Mon Sep 17 00:00:00 2001
From: Josh Salisbury <josh@adhocteam.us>
Date: Fri, 12 Feb 2021 15:15:29 -0600
Subject: [PATCH 3/7] Nested labels removed

Nesting labels caused an axe violation. Now checkboxes are fieldsets as
they were before
---
 frontend/src/components/FormItem.css          |  2 +-
 frontend/src/components/FormItem.js           | 49 ++++++++++++++++---
 .../ActivityReport/Pages/activitySummary.js   |  4 ++
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/FormItem.css b/frontend/src/components/FormItem.css
index d281b31642..f2ddc3bd1e 100644
--- a/frontend/src/components/FormItem.css
+++ b/frontend/src/components/FormItem.css
@@ -2,4 +2,4 @@
   font-family: SourceSansPro;
   font-size: 16px;
   color: #d42240;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/FormItem.js b/frontend/src/components/FormItem.js
index aa8e4abc22..672d74268a 100644
--- a/frontend/src/components/FormItem.js
+++ b/frontend/src/components/FormItem.js
@@ -2,28 +2,63 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useFormContext } from 'react-hook-form';
 import { ErrorMessage as ReactHookFormError } from '@hookform/error-message';
-import { Label, FormGroup, ErrorMessage } from '@trussworks/react-uswds';
+import {
+  Label, FormGroup, ErrorMessage, Fieldset,
+} from '@trussworks/react-uswds';
 
 import './FormItem.css';
 
+const labelPropTypes = {
+  label: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+function Checkbox({ label, children }) {
+  return (
+    <Fieldset unstyled>
+      <legend>{label}</legend>
+      {children}
+    </Fieldset>
+  );
+}
+
+Checkbox.propTypes = labelPropTypes;
+
+function Field({ label, children }) {
+  return (
+    <Label>
+      {label}
+      {children}
+    </Label>
+  );
+}
+
+Field.propTypes = labelPropTypes;
+
 function FormItem({
-  label, children, required, name,
+  label, children, required, name, isCheckbox,
 }) {
   const { formState: { errors } } = useFormContext();
   const fieldErrors = errors[name];
+  const labelWithRequiredTag = (
+    <>
+      {label}
+      {required && (<span className="smart-hub--form-required"> (Required)</span>)}
+    </>
+  );
+
+  const LabelType = isCheckbox ? Checkbox : Field;
 
   return (
     <FormGroup error={fieldErrors}>
-      <Label>
-        {label}
-        {required && (<span className="smart-hub--form-required"> (Required)</span>)}
+      <LabelType label={labelWithRequiredTag}>
         <ReactHookFormError
           errors={errors}
           name={name}
           render={({ message }) => <ErrorMessage>{message}</ErrorMessage>}
         />
         {children}
-      </Label>
+      </LabelType>
     </FormGroup>
   );
 }
@@ -32,11 +67,13 @@ FormItem.propTypes = {
   label: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
   name: PropTypes.string.isRequired,
+  isCheckbox: PropTypes.bool,
   required: PropTypes.bool,
 };
 
 FormItem.defaultProps = {
   required: true,
+  isCheckbox: false,
 };
 
 export default FormItem;
diff --git a/frontend/src/pages/ActivityReport/Pages/activitySummary.js b/frontend/src/pages/ActivityReport/Pages/activitySummary.js
index 1c6f1821c6..c433727e87 100644
--- a/frontend/src/pages/ActivityReport/Pages/activitySummary.js
+++ b/frontend/src/pages/ActivityReport/Pages/activitySummary.js
@@ -91,6 +91,7 @@ const ActivitySummary = ({
           <FormItem
             label="Was this activity for a grantee or non-grantee?"
             name="activityRecipientType"
+            isCheckbox
           >
             <Radio
               id="category-grantee"
@@ -181,6 +182,7 @@ const ActivitySummary = ({
           <FormItem
             label="Who requested this activity? Use &quot;Regional Office&quot; for TTA not requested by grantee."
             name="requester"
+            isCheckbox
           >
             <Radio
               id="granteeRequest"
@@ -273,6 +275,7 @@ const ActivitySummary = ({
           <FormItem
             label="What TTA was provided"
             name="ttaType"
+            isCheckbox
           >
             {renderCheckbox('ttaType', 'training', 'Training', 'Please specify the type of TTA provided')}
             {renderCheckbox('ttaType', 'technical-assistance', 'Technical Assistance', 'Please specify the type of TTA provided')}
@@ -282,6 +285,7 @@ const ActivitySummary = ({
           <FormItem
             label="How was the activity conducted?"
             name="deliveryMethod"
+            isCheckbox
           >
             <Radio
               id="delivery-method-virtual"

From a63e2a27f0d11d3a77ae8e7650f935d41288af2f Mon Sep 17 00:00:00 2001
From: Josh Salisbury <josh@adhocteam.us>
Date: Fri, 12 Feb 2021 15:16:27 -0600
Subject: [PATCH 4/7] Set sandbox branch

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index fe300d4fb2..11540dfacd 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -133,7 +133,7 @@ parameters:
     default: "main"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "js-117-selection-of-goals"
+    default: "js-6-frontend-validations"
     type: string
 jobs:
   build_and_lint:

From ea341da0ad0cae2777fdfea026f3689c0cb07fe7 Mon Sep 17 00:00:00 2001
From: Josh Salisbury <josh@adhocteam.us>
Date: Tue, 16 Feb 2021 09:44:29 -0600
Subject: [PATCH 5/7] Add "otherResources" back into form

---
 .../ActivityReport/Pages/topicsResources.js    | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/ActivityReport/Pages/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
index 8dcb3f8ba1..6f3ff4aa52 100644
--- a/frontend/src/pages/ActivityReport/Pages/topicsResources.js
+++ b/frontend/src/pages/ActivityReport/Pages/topicsResources.js
@@ -57,18 +57,32 @@ const TopicsResources = ({
             inputRef={register()}
           />
         </div>
+      </Fieldset>
+      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Upload resources">
         <div className="smart-hub--form-section">
           <Label htmlFor="otherResources">Upload any resources used that are not available through ECLKC</Label>
           <Controller
-            name="attachments"
+            name="otherResources"
             defaultValue={[]}
             control={control}
             render={({ onChange, value }) => (
-              <FileUploader files={value} onChange={onChange} reportId={reportId} id="attachments" />
+              <FileUploader files={value} onChange={onChange} reportId={reportId} id="otherResources" />
             )}
           />
         </div>
       </Fieldset>
+      <Fieldset legend="Attachments" className="smart-hub--report-legend smart-hub--form-section">
+        <div id="attachments" />
+        <Label htmlFor="attachments">Agendas, service plans, sign-in sheets, etc.</Label>
+        <Controller
+          name="attachments"
+          defaultValue={[]}
+          control={control}
+          render={({ onChange, value }) => (
+            <FileUploader files={value} onChange={onChange} reportId={reportId} id="attachments" />
+          )}
+        />
+      </Fieldset>
     </>
   );
 };

From aef0ed5f7885a0cbebf8de68e049f22642822871 Mon Sep 17 00:00:00 2001
From: Josh Salisbury <josh@adhocteam.us>
Date: Tue, 16 Feb 2021 09:46:45 -0600
Subject: [PATCH 6/7] Only format date if we have a date

---
 frontend/src/components/DatePicker.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/DatePicker.js b/frontend/src/components/DatePicker.js
index 65a499c64d..1863257cac 100644
--- a/frontend/src/components/DatePicker.js
+++ b/frontend/src/components/DatePicker.js
@@ -53,7 +53,10 @@ const DateInput = ({
                 numberOfMonths={1}
                 openDirection={openDirection}
                 disabled={disabled}
-                onDateChange={(d) => { onChange(d.format(dateFmt)); }}
+                onDateChange={(d) => {
+                  const newDate = d ? d.format(dateFmt) : d;
+                  onChange(newDate);
+                }}
                 onFocusChange={({ focused }) => updateFocus(focused)}
               />
             </div>

From 959f1e14b2689f426c8a5754110fe43c6aafc686 Mon Sep 17 00:00:00 2001
From: Josh Salisbury <josh@adhocteam.us>
Date: Mon, 22 Feb 2021 09:16:59 -0600
Subject: [PATCH 7/7] Target populations isn't a required field

---
 frontend/src/pages/ActivityReport/Pages/activitySummary.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/pages/ActivityReport/Pages/activitySummary.js b/frontend/src/pages/ActivityReport/Pages/activitySummary.js
index c433727e87..2cd68f1d85 100644
--- a/frontend/src/pages/ActivityReport/Pages/activitySummary.js
+++ b/frontend/src/pages/ActivityReport/Pages/activitySummary.js
@@ -166,6 +166,7 @@ const ActivitySummary = ({
           <FormItem
             label="Target Populations addressed. You may choose more than one."
             name="targetPopulations"
+            required={false}
           >
             <MultiSelect
               name="targetPopulations"