Duration fix, Filter grantees to region and Small screen fixes

docs/openapi/index.yaml

@@ -120,10 +120,10 @@ components:
             type: string
         specialistNextSteps:
           description: List of notes/next steps that a specialists enters
-          $ref: '#/components/schema/nextStepNotes'
+          $ref: '#/components/schemas/nextStepNotes'
         granteeNextSteps:
           description: List of notes/next steps that are assigned to the grantee
-          $ref: '#/components/schema/nextStepNotes'
+          $ref: '#/components/schemas/nextStepNotes'
     shortActivityReport:
       type: object
       description: >

frontend/src/__tests__/permissions.js

@@ -1,12 +1,13 @@
-import isAdmin, { hasReadWrite } from '../permissions';
+import { SCOPE_IDS } from '../Constants';
+import isAdmin, { hasReadWrite, allRegionsUserHasPermissionTo, getRegionWithReadWrite } from '../permissions';
 
 describe('permissions', () => {
   describe('isAdmin', () => {
     it('returns true if the user is an admin', () => {
       const user = {
         permissions: [
           {
-            scopeId: 2,
+            scopeId: SCOPE_IDS.ADMIN,
           },
         ],
       };
@@ -21,6 +22,51 @@ describe('permissions', () => {
     });
   });
 
+  describe('allRegionsUserHasPermissionTo', () => {
+    it('returns an array with all the correct regions', () => {
+      const user = {
+        permissions: [
+          {
+            scopeId: SCOPE_IDS.ADMIN,
+            regionId: 14,
+          },
+          {
+            scopeId: SCOPE_IDS.SITE_ACCESS,
+            regionId: 14,
+          },
+          {
+            scopeId: SCOPE_IDS.SITE_ACCESS,
+            regionId: 1,
+          },
+          {
+            scopeId: SCOPE_IDS.APPROVE_ACTIVITY_REPORTS,
+            regionId: 1,
+          },
+          {
+            scopeId: SCOPE_IDS.READ_WRITE_ACTIVITY_REPORTS,
+            regionId: 3,
+          },
+          {
+            scopeId: SCOPE_IDS.READ_ACTIVITY_REPORTS,
+            regionId: 4,
+          },
+          {
+            scopeId: SCOPE_IDS.APPROVE_ACTIVITY_REPORTS,
+            regionId: 4,
+          },
+        ],
+      };
+      const regions = allRegionsUserHasPermissionTo(user);
+      expect(regions).toEqual(expect.arrayContaining([14, 3, 4]));
+    });
+
+    it('returns empty array when user has no permissions', () => {
+      const user = {};
+      const regions = allRegionsUserHasPermissionTo(user);
+      expect(regions).toEqual([]);
+    });
+  });
+
   describe('hasReadWrite', () => {
     it('returns true if the user has read/write to a region', () => {
       const user = {
@@ -46,4 +92,53 @@ describe('permissions', () => {
       expect(hasReadWrite(user)).toBeFalsy();
     });
   });
+
+  describe('getRegionWithReadWrite', () => {
+    it('returns region where user has permission', () => {
+      const user = {
+        permissions: [
+          {
+            regionId: 4,
+            scopeId: SCOPE_IDS.READ_ACTIVITY_REPORTS,
+          },
+          {
+            regionId: 1,
+            scopeId: SCOPE_IDS.ADMIN,
+          },
+          {
+            regionId: 2,
+            scopeId: SCOPE_IDS.READ_WRITE_ACTIVITY_REPORTS,
+          },
+        ],
+      };
+
+      const region = getRegionWithReadWrite(user);
+      expect(region).toBe(2);
+    });
+
+    it('returns no region', () => {
+      const user = {
+        permissions: [
+          {
+            regionId: 4,
+            scopeId: SCOPE_IDS.READ_ACTIVITY_REPORTS,
+          },
+          {
+            regionId: 1,
+            scopeId: SCOPE_IDS.ADMIN,
+          },
+        ],
+      };
+
+      const region = getRegionWithReadWrite(user);
+      expect(region).toBe(-1);
+    });
+
+    it('returns region because user object has no permissions', () => {
+      const user = {};
+
+      const region = getRegionWithReadWrite(user);
+      expect(region).toBe(-1);
+    });
+  });
 });

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

@@ -40,7 +40,7 @@ const tagClass = (state) => {
 function SideNav({
   pages, skipTo, skipToMessage, lastSaveTime, errorMessage,
 }) {
-  const isMobile = useMediaQuery({ maxWidth: 640 });
+  const isMobile = useMediaQuery({ maxWidth: 1023 });
   const navItems = () => pages.map((page) => (
     <li key={page.label} className="smart-hub--navigator-item">
       <Button

frontend/src/components/Navigator/index.js

@@ -130,7 +130,7 @@ function Navigator({
 
   return (
     <Grid row gap>
-      <Grid className="smart-hub-sidenav-wrapper no-print" col={12} tablet={{ col: 6 }} desktop={{ col: 4 }}>
+      <Grid className="smart-hub-sidenav-wrapper no-print" col={12} desktop={{ col: 4 }}>
         <SideNav
           skipTo="navigator-form"
           skipToMessage="Skip to report content"
@@ -139,7 +139,7 @@ function Navigator({
           errorMessage={errorMessage}
         />
       </Grid>
-      <Grid className="smart-hub-navigator-wrapper" col={12} tablet={{ col: 6 }} desktop={{ col: 8 }}>
+      <Grid className="smart-hub-navigator-wrapper" col={12} desktop={{ col: 8 }}>
         <FormProvider {...hookForm}>
           <div id="navigator-form">
             {page.review

frontend/src/fetchers/activityReports.js

@@ -41,8 +41,8 @@ export const getReportAlerts = async () => {
   return reports.json();
 };
 
-export const getRecipients = async () => {
-  const recipients = await get(join(activityReportUrl, 'activity-recipients'));
+export const getRecipients = async (region) => {
+  const recipients = await get(join(activityReportUrl, 'activity-recipients', `?region=${region}`));
   return recipients.json();
 };
 

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

@@ -10,7 +10,6 @@
      of the activity report, they contain items.
   3. Items: these are the individual form fields for the activity report
 */
-import { Grid } from '@trussworks/react-uswds';
 import PropTypes from 'prop-types';
 import { HashLink } from 'react-router-hash-link';
 import _ from 'lodash';
@@ -41,26 +40,27 @@ const Section = ({
   const isEmpty = !items.some(({ value }) => value && value.length);
   const classes = [
     'smart-hub-review-section',
+    'margin-top-2 desktop:margin-top-0',
     isEmpty ? 'smart-hub-review-section--empty no-print' : '',
     'margin-bottom-3',
   ].filter((x) => x).join(' ');
 
   return (
     <div className={classes}>
-      <Grid row className="border-bottom padding-bottom-1 margin-bottom-105">
-        <Grid col={6}>
+      <div className="grid-row border-bottom padding-bottom-1 margin-bottom-105">
+        <div className="grid-col-12 desktop:grid-col-6">
           <b className="margin-y-1">{title}</b>
-        </Grid>
-        <Grid col={6} className="flex-align-end display-flex flex-column flex-justify-center">
+        </div>
+        <div className="grid-col-12 desktop:grid-col-6 display-flex flex-align-end flex-column flex-justify-center">
           <HashLink
             aria-label={`Edit form section "${title}"`}
             to={`${basePath}#${anchor}`}
             className="smart-hub-edit-link pull-right no-print"
           >
             Edit
           </HashLink>
-        </Grid>
-      </Grid>
+        </div>
+      </div>
       {items.map(({ label, value, path }) => (
         <Item key={label} label={label} value={value} path={path} />
       ))}
@@ -85,18 +85,18 @@ const Item = ({ label, value, path }) => {
   const classes = ['margin-top-1', emptySelector].filter((x) => x !== '').join(' ');
 
   return (
-    <Grid row className={classes}>
-      <Grid col={6}>
+    <div className={`grid-row ${classes} margin-bottom-3 desktop:margin-bottom-0`}>
+      <div className="grid-col-12 desktop:grid-col-6 font-sans-2xs desktop:font-sans-sm text-bold desktop:text-normal">
         {label}
-      </Grid>
-      <Grid col={6}>
+      </div>
+      <div className="grid-col-12 desktop: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">
+          <div aria-label={`${label} ${index + 1}`} key={`${label}${v}`} col={12} className="desktop:flex-align-end display-flex flex-column flex-justify-center">
             {Number.isNaN(v) ? '' : v}
-          </Grid>
+          </div>
         ))}
-      </Grid>
-    </Grid>
+      </div>
+    </div>
   );
 };
 

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

@@ -257,6 +257,7 @@ const ActivitySummary = ({
                   name="duration"
                   type="number"
                   min={0}
+                  step={0.5}
                   inputRef={
                     register({
                       required: 'Please enter the duration of the activity',

frontend/src/pages/ActivityReport/__tests__/index.js

@@ -12,8 +12,14 @@ import userEvent from '@testing-library/user-event';
 
 import { withText } from '../../../testHelpers';
 import ActivityReport from '../index';
+// import { getRegionWithReadWrite } from '../../../permissions';
+
+jest.mock('../../../permissions', () => ({
+  getRegionWithReadWrite: jest.fn(() => 1),
+}));
 
 const formData = () => ({
+  regionId: 1,
   deliveryMethod: 'in-person',
   ttaType: ['training'],
   duration: '1',
@@ -62,7 +68,7 @@ describe('ActivityReport', () => {
   afterEach(() => fetchMock.restore());
 
   beforeEach(() => {
-    fetchMock.get('/api/activity-reports/activity-recipients', recipients);
+    fetchMock.get('/api/activity-reports/activity-recipients?region=1', recipients);
     fetchMock.get('/api/users/collaborators?region=1', []);
     fetchMock.get('/api/activity-reports/approvers?region=1', []);
   });
@@ -74,9 +80,18 @@ describe('ActivityReport', () => {
     expect(alert).toHaveTextContent('Unable to load activity report');
   });
 
+  it('handles when region is invalid', async () => {
+    fetchMock.get('/api/activity-reports/-1', () => { throw new Error('unable to download report'); });
+
+    renderActivityReport('-1');
+    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();
+
       fetchMock.get('/api/activity-reports/1', data);
       renderActivityReport('1', 'activity-summary', true);
       await screen.findByRole('group', { name: 'Who was the activity for?' }, { timeout: 4000 });
@@ -85,6 +100,7 @@ describe('ActivityReport', () => {
 
     it('is not shown if history.state.showLastUpdatedTime is null', async () => {
       const data = formData();
+
       fetchMock.get('/api/activity-reports/1', data);
       renderActivityReport('1', 'activity-summary');
       await screen.findByRole('group', { name: 'Who was the activity for?' });