Merge pull request #385 from adhocteam/main

Legacy Activity Reports import

.cfignore

@@ -6,3 +6,4 @@ src/
 terraform/
 hses.zip
 temp/
+.tmp/

.circleci/config.yml

@@ -160,7 +160,7 @@ parameters:
     default: "main"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "cm-370-downloading-files-does-not-work"
+    default: "js-338-383-frontend-tweaks"
     type: string
   prod_new_relic_app_id:
     default: "877570491"

.gitignore

@@ -25,3 +25,6 @@ node_modules
 .DS_Store
 .env
 **/*secrets.auto.tfvars
+
+# Temp files
+.tmp

cucumber/features/activityReport.feature

@@ -2,6 +2,6 @@ Feature: TTA Smarthub Activity Report
     Scenario: Report can be filled out
         Given I am logged in
         And I am on the landing page
-        Then I see "New activity report for Region 14" message
+        Then I see "Activity report for Region 1" message
         When I select "Non-Grantee"
         Then I see "QRIS System" as an option in the "Non-grantee name(s)" multiselect

frontend/src/App.js

@@ -18,6 +18,7 @@ import NotFound from './pages/NotFound';
 import Home from './pages/Home';
 import Landing from './pages/Landing';
 import ActivityReport from './pages/ActivityReport';
+import LegacyReport from './pages/LegacyReport';
 import isAdmin from './permissions';
 import 'react-dates/initialize';
 import 'react-dates/lib/css/_datepicker.css';
@@ -77,22 +78,28 @@ function App() {
         logoutUser={logout}
       />
       <Switch>
+        <Route
+          path="/activity-reports/legacy/:legacyId"
+          render={({ match }) => (
+            <LegacyReport
+              match={match}
+            />
+          )}
+        />
         <Route
           exact
           path="/activity-reports"
           render={({ match }) => (
             <LandingLayout><Landing match={match} /></LandingLayout>
           )}
         />
-
         <Route
           exact
           path="/"
           render={() => (
             <Home />
           )}
         />
-
         <Route
           path="/activity-reports/:activityReportId/:currentPage?"
           render={({ match, location }) => (
@@ -130,7 +137,7 @@ function App() {
           <Header />
           <SiteNav admin={admin} authenticated={authenticated} logout={logout} user={user} />
           <div className="grid-row maxw-widescreen flex-align-start smart-hub-offset-nav tablet:smart-hub-offset-nav desktop:smart-hub-offset-nav margin-top-9">
-            <div className="grid-col-12 margin-top-2 margin-right-2">
+            <div className="grid-col-12 margin-top-2 margin-right-2 margin-left-3">
               <section className="usa-section padding-top-3">
                 {!authenticated && (authError === 403
                   ? <RequestPermissions />

frontend/src/components/FileUploader.js

@@ -199,7 +199,7 @@ const FileTable = ({ onFileRemoved, files }) => {
               </td>
               <td>
                 <Button
-                  role="button"
+                  type="button"
                   className="smart-hub--file-tag-button"
                   unstyled
                   aria-label="remove file"

frontend/src/components/SiteNav.js

@@ -22,7 +22,7 @@ const navLinkClasses = [
   'hover:text-no-underline',
 ].join(' ');
 
-const activeNavLinkClasses = 'border-left-05 border-white';
+const activeNavLinkClasses = 'border-left-05 border-white text-bold';
 
 const NavLink = (props) => (
   <Link activeClassName={activeNavLinkClasses} className={navLinkClasses} {...props} />
@@ -54,12 +54,12 @@ const SiteNav = ({
         <>
           <div className="width-full smart-hub-sitenav-separator--after">
             <div role="complementary" className="padding-2 smart-hub-sitenav-word-wrap--break">
-              <p className="text-bold margin-y-105">{ user.name }</p>
-              <p className="font-sans-3xs margin-y-105">{ user.email }</p>
+              <p className="text-bold margin-top-5">{ user.name }</p>
+              <p className="font-sans-3xs margin-bottom-5">{ user.email }</p>
             </div>
           </div>
           <nav>
-            <div className="width-full margin-bottom-2">
+            <div className="width-full margin-bottom-2 margin-top-6">
               <ul className="add-list-reset">
                 <li>
                   <NavLink
@@ -73,8 +73,8 @@ const SiteNav = ({
                 </li>
               </ul>
             </div>
-            <div className="width-full position-absolute bottom-0 padding-bottom-5 smart-hub-sitenav-separator--before">
-              <ul className="add-list-reset padding-top-2 text-base-lightest">
+            <div className="width-full position-absolute bottom-0 padding-bottom-5 smart-hub-sitenav-separator--before opacity-70">
+              <ul className="add-list-reset padding-top-5 text-base-lightest">
                 {items.map((item, i) => (<li key={`smart-hub-nav__item-${i}`}>{item}</li>))}
               </ul>
             </div>

frontend/src/fetchers/__tests__/activityReports.js

@@ -2,12 +2,21 @@ import join from 'url-join';
 import fetchMock from 'fetch-mock';
 
 import {
-  submitReport, saveReport, reviewReport, resetToDraft,
+  submitReport, saveReport, reviewReport, resetToDraft, legacyReportById,
 } from '../activityReports';
 
 describe('activityReports fetcher', () => {
   afterEach(() => fetchMock.restore());
 
+  describe('legacyReportById', () => {
+    it('returns the report', async () => {
+      const expected = { id: 1 };
+      fetchMock.get(join('api', 'activity-reports', 'legacy', '1'), expected);
+      const report = await legacyReportById('1');
+      expect(report).toEqual(expected);
+    });
+  });
+
   describe('submitReport', () => {
     it('returns the report', async () => {
       const report = { id: 1 };

frontend/src/fetchers/activityReports.js

@@ -5,6 +5,11 @@ import { DECIMAL_BASE, REPORTS_PER_PAGE, ALERTS_PER_PAGE } from '../Constants';
 const activityReportUrl = join('/', 'api', 'activity-reports');
 const activityReportAlertUrl = join('/', 'api', 'activity-reports', 'alerts');
 
+export const legacyReportById = async (legacyId) => {
+  const res = await get(join(activityReportUrl, 'legacy', legacyId));
+  return res.json();
+};
+
 export const getApprovers = async (region) => {
   const res = await get(join(activityReportUrl, 'approvers', `?region=${region}`));
   return res.json();

frontend/src/pages/ActivityReport/Pages/components/Objective.css

@@ -13,3 +13,7 @@
 .usa-form .smart-hub--button__no-margin {
   margin-top: 0;
 }
+
+.smart-hub--text-area__resize-vertical {
+  resize: vertical;
+}

frontend/src/pages/ActivityReport/Pages/components/Objective.js

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import {
-  Tag, Label, Button, TextInput, Dropdown, Grid,
+  Tag, Label, Button, TextInput, Dropdown, Grid, Textarea,
 } from '@trussworks/react-uswds';
 
 import ObjectiveFormItem from './ObjectiveFormItem';
@@ -103,7 +103,8 @@ const Objective = ({
             label="TTA Provided"
             value={ttaProvided}
           >
-            <TextInput
+            <Textarea
+              className="smart-hub--text-area__resize-vertical"
               name="ttaProvided"
               aria-label={`TTA provided for objective ${objectiveAriaLabel}`}
               onChange={onChange}

frontend/src/pages/ActivityReport/Pages/components/ResourceSelector.js

@@ -18,6 +18,15 @@ const ResourceSelector = ({ name, ariaName }) => {
 
   const canDelete = fields.length > 1;
 
+  const onAddNewResource = () => {
+    const allValues = getValues();
+    const fieldArray = allValues[name] || [];
+    const canAdd = fieldArray.every((field) => field.value !== '');
+    if (canAdd) {
+      append({ value: '' });
+    }
+  };
+
   return (
     <>
       {fields.map((item, index) => (
@@ -27,9 +36,14 @@ const ResourceSelector = ({ name, ariaName }) => {
             type="text"
             defaultValue={item.value}
             inputRef={register()}
+            onKeyUp={(e) => {
+              if (e.key === 'Enter') {
+                onAddNewResource();
+              }
+            }}
           />
           {canDelete && (
-          <Button onClick={() => remove(index)} aria-label={`remove ${ariaName} ${index + 1}`} className="smart-hub--remove-resource" unstyled type="button">
+          <Button onClick={() => remove(index)} aria-label={`remove ${ariaName} ${index + 1}`} className="smart-hub--remove-resource padding-left-2" unstyled type="button">
             <FontAwesomeIcon color="black" icon={faTrash} />
           </Button>
           )}
@@ -38,14 +52,7 @@ const ResourceSelector = ({ name, ariaName }) => {
       <Button
         unstyled
         type="button"
-        onClick={() => {
-          const allValues = getValues();
-          const fieldArray = allValues[name] || [];
-          const canAdd = fieldArray.every((field) => field.value !== '');
-          if (canAdd) {
-            append({ value: '' });
-          }
-        }}
+        onClick={onAddNewResource}
       >
         <span className="fa-layers fa-fw">
           <FontAwesomeIcon color="#0166ab" size="lg" icon={faCircle} />

frontend/src/pages/ActivityReport/Pages/components/__tests__/ResourceSelector.js

@@ -49,6 +49,16 @@ describe('ResourceSelector', () => {
     });
   });
 
+  describe('when enter is pressed', () => {
+    it('adds a new resource', async () => {
+      render(<RenderResourceSelector data={[{ value: '' }]} />);
+      const textBox = await screen.findByTestId('textInput');
+      userEvent.type(textBox, 'test{enter}');
+      const text = await screen.findAllByRole('textbox');
+      expect(text.length).toBe(2);
+    });
+  });
+
   describe('with multiple entries', () => {
     it('allows removal of an item', async () => {
       render(<RenderResourceSelector data={[{ value: 'first' }, { value: 'second' }]} />);

frontend/src/pages/ActivityReport/Pages/nextSteps.js

@@ -145,7 +145,7 @@ const NoteEntries = ({ name, humanName }) => {
           </div>
         )
           : (
-            <Button unstyled onClick={() => onEdit(notes.length)}>
+            <Button type="button" unstyled onClick={() => onEdit(notes.length)}>
               <FontAwesomeIcon icon={faPlusCircle} />
               <span className="padding-left-05">Add New Follow Up</span>
             </Button>

frontend/src/pages/ActivityReport/index.js

@@ -95,6 +95,12 @@ function ActivityReport({
     return array.map((value) => ({ value }));
   };
 
+  const convertReportToFormData = (fetchedReport) => {
+    const ECLKCResourcesUsed = unflattenResourcesUsed(fetchedReport.ECLKCResourcesUsed);
+    const nonECLKCResourcesUsed = unflattenResourcesUsed(fetchedReport.nonECLKCResourcesUsed);
+    return { ...fetchedReport, ECLKCResourcesUsed, nonECLKCResourcesUsed };
+  };
+
   useDeepCompareEffect(() => {
     const fetch = async () => {
       let report;
@@ -103,9 +109,7 @@ function ActivityReport({
         updateLoading(true);
         if (activityReportId !== 'new') {
           const fetchedReport = await getReport(activityReportId);
-          const ECLKCResourcesUsed = unflattenResourcesUsed(fetchedReport.ECLKCResourcesUsed);
-          const nonECLKCResourcesUsed = unflattenResourcesUsed(fetchedReport.nonECLKCResourcesUsed);
-          report = { ...fetchedReport, ECLKCResourcesUsed, nonECLKCResourcesUsed };
+          report = convertReportToFormData(fetchedReport);
         } else {
           report = {
             ...defaultValues,
@@ -213,18 +217,21 @@ function ActivityReport({
   };
 
   const onFormSubmit = async (data) => {
-    const report = await submitReport(reportId.current, data);
+    const fetchedReport = await submitReport(reportId.current, data);
+    const report = convertReportToFormData(fetchedReport);
     updateFormData(report);
     updateEditable(false);
   };
 
   const onReview = async (data) => {
-    const report = await reviewReport(reportId.current, data);
+    const fetchedReport = await reviewReport(reportId.current, data);
+    const report = convertReportToFormData(fetchedReport);
     updateFormData(report);
   };
 
   const onResetToDraft = async () => {
-    const report = await resetToDraft(reportId.current);
+    const fetchedReport = await resetToDraft(reportId.current);
+    const report = convertReportToFormData(fetchedReport);
     updateFormData(report);
     updateEditable(true);
   };
@@ -236,7 +243,11 @@ function ActivityReport({
       <Helmet titleTemplate="%s - Activity Report - TTA Smart Hub" defaultTitle="TTA Smart Hub - Activity Report" />
       <Grid row className="flex-justify">
         <Grid col="auto">
-          <h1 className="font-serif-2xl text-bold line-height-serif-2 margin-top-3 margin-bottom-5">New activity report for Region 14</h1>
+          <h1 className="font-serif-2xl text-bold line-height-serif-2 margin-top-3 margin-bottom-5">
+            Activity report for Region
+            {' '}
+            {formData.regionId}
+          </h1>
         </Grid>
         <Grid col="auto" className="flex-align-self-center">
           {formData.status && (