Merge pull request #248 from adhocteam/js-392-small-fixes

small fixes

.circleci/config.yml

@@ -164,7 +164,7 @@ parameters:
     default: "main"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "cm-393-read-regions-permissions"
+    default: "js-392-small-fixes"
     type: string
   prod_new_relic_app_id:
     default: "877570491"

frontend/src/components/Navigator/__tests__/index.js

@@ -83,6 +83,7 @@ describe('Navigator', () => {
         onFormSubmit={onSubmit}
         updatePage={updatePage}
         onSave={onSave}
+        updateErrorMessage={() => {}}
       />,
     );
   };

frontend/src/components/Navigator/components/SideNav.js

@@ -29,7 +29,7 @@ const tagClass = (state) => {
     case REPORT_STATUSES.SUBMITTED:
       return 'smart-hub--tag-submitted';
     case REPORT_STATUSES.APPROVED:
-      return 'smart-hub--tag-submitted';
+      return 'smart-hub--tag-approved';
     case REPORT_STATUSES.NEEDS_ACTION:
       return 'smart-hub--tag-needs-action';
     default:

frontend/src/components/Navigator/components/__tests__/SideNav.js

@@ -64,7 +64,7 @@ describe('SideNav', () => {
     it('approved', () => {
       renderNav(REPORT_STATUSES.APPROVED);
       const complete = screen.getByText('Approved');
-      expect(complete).toHaveClass('smart-hub--tag-submitted');
+      expect(complete).toHaveClass('smart-hub--tag-approved');
       expect(complete).toBeVisible();
     });
 

frontend/src/components/Navigator/index.js

@@ -46,8 +46,9 @@ function Navigator({
   updateLastSaveTime,
   showValidationErrors,
   updateShowValidationErrors,
+  errorMessage,
+  updateErrorMessage,
 }) {
-  const [errorMessage, updateErrorMessage] = useState();
   const [showSavedDraft, updateShowSavedDraft] = useState(false);
   const page = pages.find((p) => p.path === currentPage);
 
@@ -235,6 +236,8 @@ Navigator.propTypes = {
     pageState: PropTypes.shape({}),
   }).isRequired,
   updateFormData: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string,
+  updateErrorMessage: PropTypes.func.isRequired,
   lastSaveTime: PropTypes.instanceOf(moment),
   updateLastSaveTime: PropTypes.func.isRequired,
   showValidationErrors: PropTypes.bool.isRequired,
@@ -267,6 +270,7 @@ Navigator.defaultProps = {
   additionalData: {},
   autoSaveInterval: 1000 * 60 * 2,
   lastSaveTime: null,
+  errorMessage: '',
   reportCreator: {
     name: null,
     role: null,

frontend/src/fetchers/__tests__/activityReports.js

@@ -2,12 +2,48 @@ import join from 'url-join';
 import fetchMock from 'fetch-mock';
 
 import {
-  submitReport, saveReport, reviewReport, resetToDraft, legacyReportById,
+  submitReport,
+  saveReport,
+  reviewReport,
+  resetToDraft,
+  legacyReportById,
+  getReports,
+  getReportAlerts,
 } from '../activityReports';
 
 describe('activityReports fetcher', () => {
   afterEach(() => fetchMock.restore());
 
+  describe('getReports', () => {
+    it('defaults query params', async () => {
+      const query = {
+        sortBy: 'updatedAt',
+        sortDir: 'desc',
+        offset: 0,
+        limit: 10,
+      };
+
+      fetchMock.get(join('api', 'activity-reports'), [], { query });
+      await getReports();
+      expect(fetchMock.called()).toBeTruthy();
+    });
+  });
+
+  describe('getReportAlerts', () => {
+    it('defaults query params', async () => {
+      const query = {
+        sortBy: 'startDate',
+        sortDir: 'asc',
+        offset: 0,
+        limit: 10,
+      };
+
+      fetchMock.get(join('api', 'activity-reports', 'alerts'), [], { query });
+      await getReportAlerts();
+      expect(fetchMock.called()).toBeTruthy();
+    });
+  });
+
   describe('legacyReportById', () => {
     it('returns the report', async () => {
       const expected = { id: 1 };

frontend/src/pages/ActivityReport/Pages/Review/Submitter/Submitted.js

@@ -5,6 +5,16 @@ import {
   Alert, Button,
 } from '@trussworks/react-uswds';
 
+const NotEditableAlert = () => (
+  <Alert type="info" noIcon slim className="margin-bottom-1 no-print">
+    <b>Report is not editable</b>
+    <br />
+    This report is no longer editable while it is waiting for manager approval.
+    If you wish to update this report click &quot;Reset to Draft&quot; to
+    move the report back to draft mode.
+  </Alert>
+);
+
 const Submitted = ({
   additionalNotes,
   approvingManager,
@@ -31,6 +41,7 @@ const Submitted = ({
       {' '}
     </p>
     <Button type="button" onClick={resetToDraft}>Reset to Draft</Button>
+    <NotEditableAlert />
   </>
 );
 

frontend/src/pages/ActivityReport/Pages/Review/index.js

@@ -8,6 +8,7 @@ import { Helmet } from 'react-helmet';
 import Submitter from './Submitter';
 import Approver from './Approver';
 import PrintSummary from '../PrintSummary';
+import { REPORT_STATUSES } from '../../../../Constants';
 import './index.css';
 
 const ReviewSubmit = ({
@@ -61,6 +62,12 @@ const ReviewSubmit = ({
     }
   };
 
+  const editing = status === REPORT_STATUSES.DRAFT || status === REPORT_STATUSES.NEEDS_ACTION;
+  const items = editing ? reviewItems : reviewItems.map((ri) => ({
+    ...ri,
+    expanded: true,
+  }));
+
   return (
     <>
       <Helmet>
@@ -79,7 +86,7 @@ const ReviewSubmit = ({
           error={error}
           onSaveForm={onSaveForm}
         >
-          <Accordion bordered={false} items={reviewItems} />
+          <Accordion bordered={false} items={items} />
         </Submitter>
         )}
       {approvingManager
@@ -92,7 +99,7 @@ const ReviewSubmit = ({
           error={error}
           formData={formData}
         >
-          <Accordion bordered={false} items={reviewItems} />
+          <Accordion bordered={false} items={items} />
         </Approver>
         )}
     </>

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

@@ -125,7 +125,7 @@ describe('next steps', () => {
     renderNextSteps(
       [{ note: 'pikachu', id: 1 }, { note: 'bulbasaur', id: 30 }],
     );
-    const newEntry = await screen.findByText('Add New Follow Up');
+    const newEntry = await screen.findByText('Add New Next Step');
     userEvent.click(newEntry);
 
     // When the user presses cancel to change their mind
@@ -143,7 +143,7 @@ describe('next steps', () => {
       [],
       [{ note: 'pikachu', id: 1 }, { note: 'bulbasaur', id: 30 }],
     );
-    const newEntry = await screen.findByText('Add New Follow Up');
+    const newEntry = await screen.findByText('Add New Next Step');
     userEvent.click(newEntry);
 
     // When the user presses cancel to change their mind

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

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

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { useFormContext, useFieldArray } from 'react-hook-form/dist/index.ie11';
 
-import { Button, TextInput } from '@trussworks/react-uswds';
+import { Button, Textarea } from '@trussworks/react-uswds';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { faCircle } from '@fortawesome/free-regular-svg-icons';
@@ -31,16 +31,12 @@ const ResourceSelector = ({ name, ariaName }) => {
     <>
       {fields.map((item, index) => (
         <div key={item.id} className="display-flex flex-align-center">
-          <TextInput
+          <Textarea
+            className="maxh-10 smart-hub--text-area__resize-vertical"
             name={`${name}[${index}].value`}
             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 padding-left-2" unstyled type="button">

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

@@ -29,15 +29,15 @@ describe('ResourceSelector', () => {
     render(<RenderResourceSelector data={[{ value: 'test' }]} />);
     const addResource = await screen.findByRole('button', { name: 'Add New Resource' });
     userEvent.click(addResource);
-    const text = await screen.findAllByRole('textbox');
+    const text = await screen.findAllByTestId('textarea');
     expect(text.length).toBe(2);
   });
 
   it('prevents adding of additional resources if one resource is empty', async () => {
     render(<RenderResourceSelector data={[{ value: '' }]} />);
     const addResource = await screen.findByRole('button');
     userEvent.click(addResource);
-    const text = await screen.findAllByRole('textbox');
+    const text = await screen.findAllByTestId('textarea');
     expect(text.length).toBe(1);
   });
 
@@ -49,24 +49,14 @@ 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' }]} />);
-      const text = await screen.findAllByRole('textbox');
+      const text = await screen.findAllByTestId('textarea');
       expect(text.length).toBe(2);
       const remove = screen.queryByRole('button', { name: 'remove name 1' });
       userEvent.click(remove);
-      const newText = await screen.findAllByRole('textbox');
+      const newText = await screen.findAllByTestId('textarea');
       expect(newText.length).toBe(1);
     });
   });

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

@@ -12,7 +12,7 @@ import FormItem from '../../../components/FormItem';
 import ReviewPage from './Review/ReviewPage';
 
 const NoteEntry = ({
-  onEntry, onCancel, name, isRequired = false, defaultValue = '',
+  onEntry, onCancel, name, isRequired = false, defaultValue = '', label,
 }) => {
   const [input, updateInput] = useState(defaultValue);
 
@@ -30,7 +30,7 @@ const NoteEntry = ({
     <FormItem
       required={isRequired}
       name={name}
-      label="What have you agreed to do next?"
+      label={label}
     >
       <TextInput name={name} onChange={onUpdate} data-testid={`${name}-input`} defaultValue={input} />
       <Button outline disabled={!(input && input.trim())} onClick={onSubmit} data-testid={`${name}-button`} type="button">Save Next Step</Button>
@@ -43,6 +43,7 @@ NoteEntry.propTypes = {
   onEntry: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
   defaultValue: PropTypes.string,
   isRequired: PropTypes.bool,
 };
@@ -52,7 +53,7 @@ NoteEntry.defaultProps = {
   defaultValue: '',
 };
 
-const NoteEntries = ({ name, humanName }) => {
+const NoteEntries = ({ name, humanName, label }) => {
   const {
     register, control, setValue, trigger,
   } = useFormContext();
@@ -92,13 +93,14 @@ const NoteEntries = ({ name, humanName }) => {
 
   if (notes.length === 0) {
     return (
-      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend={`${humanName} Next Steps`}>
+      <Fieldset className="smart-hub--report-legend margin-top-4" legend={`${humanName} Next Steps`}>
         <NoteEntry
           onEntry={(value) => onEntry(value, 0)}
           isRequired
           name={name}
           onCancel={onCancel}
           humanName={humanName}
+          label={label}
         />
       </Fieldset>
     );
@@ -109,7 +111,7 @@ const NoteEntries = ({ name, humanName }) => {
 
   return (
     <>
-      <Fieldset className="smart-hub--report-legend smart-hub--form-section" legend={`${humanName} Next Steps`}>
+      <Fieldset className="smart-hub--report-legend margin-top-4" legend={`${humanName} Next Steps`}>
         <ul className="usa-list--unstyled">
           {notes.map((item, index) => (
             <li key={item.note} className="grid-row flex-row border-bottom padding-top-2 padding-bottom-2" style={{ borderColor: '#f0f0f0' }}>
@@ -141,13 +143,14 @@ const NoteEntries = ({ name, humanName }) => {
               name={name}
               humanName={humanName}
               defaultValue={defaultValue}
+              label={label}
             />
           </div>
         )
           : (
             <Button type="button" unstyled onClick={() => onEdit(notes.length)}>
               <FontAwesomeIcon icon={faPlusCircle} />
-              <span className="padding-left-05">Add New Follow Up</span>
+              <span className="padding-left-05">Add New Next Step</span>
             </Button>
           )}
 
@@ -159,6 +162,7 @@ const NoteEntries = ({ name, humanName }) => {
 NoteEntries.propTypes = {
   name: PropTypes.string.isRequired,
   humanName: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
 };
 
 const NextSteps = () => (
@@ -168,10 +172,10 @@ const NextSteps = () => (
     </Helmet>
 
     <div className="padding-bottom-205">
-      <NoteEntries name="specialistNextSteps" humanName="Specialist" />
+      <NoteEntries name="specialistNextSteps" humanName="Specialist" label="What have you agreed to do next?" />
     </div>
 
-    <NoteEntries name="granteeNextSteps" humanName="Grantees" />
+    <NoteEntries name="granteeNextSteps" humanName="Grantees" label="What has the grantee agreed to do next?" />
 
   </>
 );
@@ -188,7 +192,7 @@ const sections = [
     title: 'Grantee next steps',
     anchor: 'grantee-next-steps',
     items: [
-      { label: 'What have you agreed to do next?', name: 'granteeNextSteps', path: 'note' },
+      { label: 'What has the grantee agreed to do next?', name: 'granteeNextSteps', path: 'note' },
     ],
   },
 ];

frontend/src/pages/ActivityReport/index.css

@@ -74,4 +74,13 @@
     height: 50px;
     text-align: center;
     vertical-align: bottom;
+}
+
+.smart-hub--tag-approved {
+  background-color: #f0fcf4;
+  color: #148439
+}
+
+.smart-hub--text-area__resize-vertical {
+  resize: vertical;
 }