Merge pull request #205 from adhocteam/js-283-frontend-updates

Frontend updates
HHS · Mar 9, 2021 · bcca11c · bcca11c
2 parents 76231df + a945aca
commit bcca11c
Show file tree

Hide file tree

Showing 32 changed files with 392 additions and 180 deletions.
diff --git 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: "cm-302-create-mainenance-page"
+    default: "js-283-frontend-updates"
     type: string
 jobs:
   build_and_lint:
@@ -314,10 +314,10 @@ jobs:
                 hses_data_username: HSES_DATA_USERNAME
                 hses_data_password: HSES_DATA_PASSWORD
             - run:
-                name: Return database to neutral, then migrate and seed
+                name: Migrate database
                 command: |
                   cf run-task tta-smarthub-sandbox \
-                    --command "yarn db:migrate:undo:prod && yarn db:migrate:prod && yarn db:seed:prod" \
+                    --command "yarn db:migrate:prod" \
                     --name "Reset DB"
       - when:  # dev
           condition:
@@ -339,10 +339,10 @@ jobs:
                 hses_data_username: HSES_DATA_USERNAME
                 hses_data_password: HSES_DATA_PASSWORD
             - run:
-                name: Undo database seeding, then migrate and seed
+                name: Migrate database
                 command: |
                   cf run-task tta-smarthub-dev \
-                    --command "yarn db:migrate:prod && yarn db:seed:undo:prod && yarn db:seed:prod" \
+                    --command "yarn db:migrate:prod" \
                     --name "Reset DB"
       - when:  # staging
           condition:

diff --git a/docs/openapi/index.yaml b/docs/openapi/index.yaml
@@ -179,9 +179,6 @@ components:
     fileUpload:
       type: object
       properties:
-        attachmentType:
-          type: string
-          description: "Type of attachment. Acceptable values are ATTACHMENT or RESOURCE"
         reportId:
           type: number
           description: "id of the Activity report the file is associated with"

diff --git a/frontend/package.json b/frontend/package.json
@@ -6,6 +6,7 @@
     "@babel/runtime": "^7.12.1",
     "@fortawesome/fontawesome-free": "^5.15.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-regular-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.11",
     "@hookform/error-message": "^0.0.5",

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -30,6 +30,10 @@ body {
   background-color: #f8f8f8;
 }
 
+.text-ink {
+  color: #21272D
+}
+
 .smart-hub-bg-blue-primary {
   background-color: #0166ab;
 }

diff --git a/frontend/src/components/FileUploader.js b/frontend/src/components/FileUploader.js
@@ -17,12 +17,11 @@ import { uploadFile, deleteFile } from '../fetchers/File';
 
 import './FileUploader.css';
 
-export const upload = async (file, reportId, attachmentType, setErrorMessage) => {
+export const upload = async (file, reportId, setErrorMessage) => {
   let res;
   try {
     const data = new FormData();
     data.append('reportId', reportId);
-    data.append('attachmentType', attachmentType);
     data.append('file', file);
     res = await uploadFile(data);
   } catch (error) {
@@ -42,13 +41,7 @@ export const handleDrop = async (e, reportId, id, onChange, setErrorMessage) =>
     setErrorMessage('Cannot save attachments without a Grantee or Non-Grantee selected');
     return;
   }
-  let attachmentType;
-  if (id === 'attachments') {
-    attachmentType = 'ATTACHMENT';
-  } else if (id === 'otherResources') {
-    attachmentType = 'RESOURCE';
-  }
-  const newFiles = e.map((file) => upload(file, reportId, attachmentType, setErrorMessage));
+  const newFiles = e.map((file) => upload(file, reportId, setErrorMessage));
   Promise.all(newFiles).then((values) => {
     onChange(values);
   });
@@ -66,8 +59,8 @@ function Dropzone(props) {
       {...getRootProps()}
     >
       <input {...getInputProps()} />
-      <button type="button" className="usa-button">
-        Browse files
+      <button type="button" className="usa-button usa-button--outline">
+        Upload Resources
       </button>
       {errorMessage
         && (

diff --git a/frontend/src/components/FormItem.css b/frontend/src/components/FormItem.css
@@ -1,5 +1,3 @@
 .smart-hub--form-required {
-  font-family: SourceSansPro;
-  font-size: 16px;
   color: #d42240;
 }
diff --git a/frontend/src/components/FormItem.js b/frontend/src/components/FormItem.js
@@ -44,7 +44,7 @@ function FormItem({
   const labelWithRequiredTag = (
     <>
       {label}
-      {required && (<span className="smart-hub--form-required"> (Required)</span>)}
+      {required && (<span className="smart-hub--form-required font-family-sans font-ui-xs"> (Required)</span>)}
     </>
   );
 

diff --git a/frontend/src/components/__tests__/FileUploader.js b/frontend/src/components/__tests__/FileUploader.js
@@ -33,7 +33,7 @@ describe('upload tests', () => {
   const mockSetErrorMessage = jest.fn();
   it('can upload a file and return the correct information', async () => {
     const mockFileUpload = jest.spyOn(fileFetcher, 'uploadFile').mockImplementation(async () => ({ id: 1, url: 'url' }));
-    const got = await upload(mockFile, 1, 'fakeAttachment', mockSetErrorMessage);
+    const got = await upload(mockFile, 1, mockSetErrorMessage);
     expect(got).toStrictEqual({
       id: 1, originalFileName: mockFile.name, fileSize: mockFile.size, status: 'UPLOADED', url: 'url',
     });

diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Approver/Review.js b/frontend/src/pages/ActivityReport/Pages/Review/Approver/Review.js
@@ -38,7 +38,7 @@ const Review = ({
         </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">
+        <Fieldset className="smart-hub--report-legend margin-top-4" legend="Review and submit report">
           <Label htmlFor="managerNotes">Manager notes</Label>
           <Textarea inputRef={register} id="managerNotes" name="managerNotes" className={textAreaClass} />
         </Fieldset>

diff --git a/frontend/src/pages/ActivityReport/Pages/Review/Submitter/Draft.js b/frontend/src/pages/ActivityReport/Pages/Review/Submitter/Draft.js
@@ -37,7 +37,7 @@ const Draft = ({
     <>
       <h2>Submit Report</h2>
       <Form className="smart-hub--form-large" onSubmit={handleSubmit(onSubmit)}>
-        <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Additional Notes">
+        <Fieldset className="smart-hub--report-legend margin-top-4" legend="Additional Notes">
           <FormItem
             label="Creator notes"
             name="additionalNotes"
@@ -46,7 +46,7 @@ const Draft = ({
             <Textarea inputRef={register} id="additionalNotes" name="additionalNotes" className={textAreaClass} />
           </FormItem>
         </Fieldset>
-        <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Review and submit report">
+        <Fieldset className="smart-hub--report-legend margin-top-4" legend="Review and submit report">
           <p className="margin-top-4">
             Submitting this form for approval means that you will no longer be in draft
             mode. Please review all information in each section before submitting to your

diff --git a/frontend/src/pages/ActivityReport/Pages/__tests__/topicsResources.js b/frontend/src/pages/ActivityReport/Pages/__tests__/topicsResources.js
@@ -27,18 +27,18 @@ const RenderTopicsResourcesReview = ({ data }) => {
 
 describe('Topics & resources', () => {
   const data = {
-    otherResources: [{ originalFileName: 'other', url: { url: 'http://localhost/other' }, status: 'APPROVED' }],
     attachments: [{ originalFileName: 'attachment', url: { url: 'http://localhost/attachment' }, status: 'APPROVED' }],
-    resourcesUsed: 'resources',
+    ECLKCResourcesUsed: [{ value: 'eclkc' }],
+    nonECLKCResourcesUsed: [{ value: 'nonEclkc' }],
     topics: 'topics',
   };
 
   describe('review page', () => {
     it('displays attachments and other resources', async () => {
       render(<RenderTopicsResourcesReview data={data} />);
-      expect(await screen.findByText('other')).toBeVisible();
+      expect(await screen.findByText('eclkc')).toBeVisible();
       expect(await screen.findByText('attachment')).toBeVisible();
-      expect(await screen.findByText('resources')).toBeVisible();
+      expect(await screen.findByText('nonEclkc')).toBeVisible();
       expect(await screen.findByText('topics')).toBeVisible();
     });
   });

diff --git a/frontend/src/pages/ActivityReport/Pages/activitySummary.js b/frontend/src/pages/ActivityReport/Pages/activitySummary.js
@@ -34,6 +34,7 @@ const ActivitySummary = ({
   const activityRecipientType = watch('activityRecipientType');
   const startDate = watch('startDate');
   const endDate = watch('endDate');
+  const isVirtual = watch('deliveryMethod') === 'virtual';
   const { nonGrantees: rawNonGrantees, grants: rawGrants } = recipients;
 
   const grants = rawGrants.map((grantee) => ({
@@ -87,9 +88,9 @@ const ActivitySummary = ({
       <Helmet>
         <title>Activity summary</title>
       </Helmet>
-      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Who was the activity for?">
+      <Fieldset className="smart-hub--report-legend margin-top-4" legend="Who was the activity for?">
         <div id="activity-for" />
-        <div className="smart-hub--form-section">
+        <div className="margin-top-2">
           <FormItem
             label="Was this activity for a grantee or non-grantee?"
             name="activityRecipientType"
@@ -113,7 +114,7 @@ const ActivitySummary = ({
             />
           </FormItem>
         </div>
-        <div className="smart-hub--form-section">
+        <div className="margin-top-2">
           <FormItem
             label={recipientLabel}
             name="activityRecipients"
@@ -130,7 +131,7 @@ const ActivitySummary = ({
             />
           </FormItem>
         </div>
-        <div className="smart-hub--form-section">
+        <div className="margin-top-2">
           <FormItem
             label="Collaborating Specialists"
             name="collaborators"
@@ -149,7 +150,7 @@ const ActivitySummary = ({
         </div>
         {granteeSelected
         && (
-        <div className="smart-hub--form-section">
+        <div className="margin-top-2">
           <FormItem
             label="Program type(s)"
             name="programTypes"
@@ -164,7 +165,7 @@ const ActivitySummary = ({
           </FormItem>
         </div>
         )}
-        <div className="smart-hub--form-section">
+        <div className="margin-top-2">
           <FormItem
             label="Target Populations addressed. You may choose more than one."
             name="targetPopulations"
@@ -179,9 +180,9 @@ const ActivitySummary = ({
           </FormItem>
         </div>
       </Fieldset>
-      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Reason for Activity">
+      <Fieldset className="smart-hub--report-legend margin-top-4" legend="Reason for Activity">
         <div id="reasons" />
-        <div className="smart-hub--form-section">
+        <div className="margin-top-2">
           <FormItem
             label="Who requested this activity? Use &quot;Regional Office&quot; for TTA not requested by grantee."
             name="requester"
@@ -205,7 +206,7 @@ const ActivitySummary = ({
             />
           </FormItem>
         </div>
-        <div className="smart-hub--form-section">
+        <div className="margin-top-2">
           <FormItem
             label="Reason(s). You may choose more than one."
             name="reason"
@@ -218,7 +219,7 @@ const ActivitySummary = ({
           </FormItem>
         </div>
       </Fieldset>
-      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Activity date">
+      <Fieldset className="smart-hub--report-legend margin-top-4" legend="Activity date">
         <div id="date" />
         <div>
           <Grid row gap>
@@ -251,7 +252,7 @@ const ActivitySummary = ({
             </Grid>
             <Grid col={5}>
               <FormItem
-                label="Duration"
+                label="Duration (round to the nearest half hour)"
                 name="duration"
               >
                 <TextInput
@@ -273,9 +274,9 @@ const ActivitySummary = ({
           </Grid>
         </div>
       </Fieldset>
-      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Training or Technical Assistance">
+      <Fieldset className="smart-hub--report-legend margin-top-4" legend="Training or Technical Assistance">
         <div id="tta" />
-        <div className="smart-hub--form-section">
+        <div className="margin-top-2">
           <FormItem
             label="What TTA was provided"
             name="ttaType"
@@ -285,7 +286,7 @@ const ActivitySummary = ({
             {renderCheckbox('ttaType', 'technical-assistance', 'Technical Assistance', 'Please specify the type of TTA provided')}
           </FormItem>
         </div>
-        <div className="smart-hub--form-section">
+        <div className="margin-top-2">
           <FormItem
             label="How was the activity conducted?"
             name="deliveryMethod"
@@ -308,11 +309,39 @@ const ActivitySummary = ({
               inputRef={register({ required: 'Please specify how the activity was conducted' })}
             />
           </FormItem>
+          <div aria-live="polite">
+            {isVirtual && (
+            <div className="margin-top-2 smart-hub--virtual-delivery-group">
+              <FormItem
+                label="Please specify how the virtual event was conducted."
+                name="virtualDeliveryType"
+                fieldSetWrapper
+              >
+                <Radio
+                  id="virtual-deliver-method-video"
+                  name="virtualDeliveryType"
+                  label="Video"
+                  value="video"
+                  className="smart-hub--report-checkbox"
+                  inputRef={register({ required: 'Please specify how the virtual event was conducted' })}
+                />
+                <Radio
+                  id="virtual-deliver-method-telephone"
+                  name="virtualDeliveryType"
+                  label="Telephone"
+                  value="telephone"
+                  className="smart-hub--report-checkbox"
+                  inputRef={register({ required: 'Please specify how the virtual event was conducted' })}
+                />
+              </FormItem>
+            </div>
+            )}
+          </div>
         </div>
       </Fieldset>
-      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend="Participants">
+      <Fieldset className="smart-hub--report-legend margin-top-4" legend="Participants">
         <div id="other-participants" />
-        <div className="smart-hub--form-section">
+        <div className="margin-top-2">
           <FormItem
             label={participantsLabel}
             name="participants"

diff --git a/frontend/src/pages/ActivityReport/Pages/components/Goal.js b/frontend/src/pages/ActivityReport/Pages/components/Goal.js
@@ -34,7 +34,7 @@ const Goals = ({
 
           <div className="margin-left-auto">
             <Button type="button" onClick={onRemoveGoal} unstyled className="smart-hub--button" aria-label={`remove goal ${goalIndex + 1}`}>
-              <FontAwesomeIcon color="gray" icon={faTrash} />
+              <FontAwesomeIcon color="black" icon={faTrash} />
             </Button>
           </div>
         </div>

diff --git a/frontend/src/pages/ActivityReport/Pages/components/GoalPicker.js b/frontend/src/pages/ActivityReport/Pages/components/GoalPicker.js
@@ -78,7 +78,7 @@ const GoalPicker = ({
   const uniqueAvailableGoals = uniqBy(allAvailableGoals, 'id');
 
   return (
-    <div className="smart-hub--form-section">
+    <div className="margin-top-4">
       <FormItem
         label="You must select an established goal(s) OR create a new goal for this activity."
         name="goals"