Add review page accordions

.circleci/config.yml

@@ -120,8 +120,8 @@ parameters:
     description: "Name of github branch that will deploy to dev"
     default: "main"
     type: string
-  sandbox_git_branch:  # change to feature branch to deploy to sandbox
-    default: "js-52-assign-permissions-backend"
+  sandbox_git_branch:  # change to feature branch to test deployment
+    default: "js-fix-user-autoinc"
     type: string
 jobs:
   build_and_lint:

.env.example

@@ -17,7 +17,7 @@ TTA_SMART_HUB_URI=http://localhost:3000
 AUTH_BASE=https://uat.hsesinfo.org
 # This env variable should go away soon in favor of TTA_SMART_HUB_URI
 REDIRECT_URI_HOST=http://localhost:8080
-CUCUMBER_USER_ID=999999;
+CUCUMBER_USER_ID=1;
 # NEW_RELIC_LICENSE_KEY can be omitted in local development
 NEW_RELIC_LICENSE_KEY=secret_key
 # Set to false to require user to go through auth flow, never true in production envs

docs/openapi/index.yaml

@@ -15,4 +15,41 @@ servers:
 paths:
   $ref: "./paths/index.yaml"
 components:
-  schemas: {}
+  schemas:
+    approvingUser:
+      type: object
+      properties:
+        id:
+          type: number
+        name:
+          type: string
+    user:
+      type: object
+      properties:
+        id:
+          type: number
+        name:
+          type: string
+        hsesUserId:
+          type: number
+        email:
+          type: string
+        phoneNumber:
+          type: string
+        homeRegionId:
+          type: number
+        title:
+          type: string
+        permissions:
+          type: array
+          items:
+            $ref: '#/components/schemas/permission'
+    permission:
+      type: object
+      properties:
+        userId:
+          type: number
+        scopeId:
+          type: number
+        regionId:
+          type: number

docs/openapi/paths/activity-reports/approvers.yaml

@@ -0,0 +1,14 @@
+get:
+  tags:
+    - activity-reports
+  operationId: getApproves
+  description: Gets all approvers for any region the current user has write permissions
+  responses:
+    200:
+      description: All approvers for any region the user has write permissions
+      content:
+        application/json:
+          schema:
+            type: array
+            items:
+              $ref: '../../index.yaml#/components/schemas/approvingUser'

docs/openapi/paths/admin.yaml

@@ -17,7 +17,7 @@ get:
         application/json:
           schema:
             type: object
-            $ref: '#/definitions/user'
+            $ref: '../index.yaml#/components/schemas/user'
 post:
   tags:
     - admin
@@ -29,15 +29,15 @@ post:
     content:
       application/json:
         schema:
-          $ref: '#/definitions/user'
+          $ref: '../index.yaml#/components/schemas/user'
   responses:
     200:
       description: User successfully created
       content:
         application/json:
           schema:
             type: object
-            $ref: '#/definitions/user'
+            $ref: '../index.yaml#/components/schemas/user'
 put:
   tags:
     - admin
@@ -56,15 +56,15 @@ put:
     content:
       application/json:
         schema:
-          $ref: '#/definitions/user'
+          $ref: '../index.yaml#/components/schemas/user'
   responses:
     200:
       description: User successfully updated
       content:
         application/json:
           schema:
             type: object
-            $ref: '#/definitions/user'
+            $ref: '../index.yaml#/components/schemas/user'
 delete:
   tags:
     - admin
@@ -105,7 +105,7 @@ definitions:
       permissions:
         type: array
         items:
-          $ref: '#/definitions/permission'
+          $ref: '../index.yaml#/components/schemas/permission'
   permission:
     type: object
     properties:

docs/openapi/paths/adminAllUsers.yaml

@@ -11,35 +11,4 @@ get:
           schema:
             type: array
             items:
-              $ref: '#/definitions/user'
-definitions:
-  user:
-    type: object
-    properties:
-      id:
-        type: number
-      name:
-        type: string
-      hsesUserId:
-        type: number
-      email:
-        type: string
-      phoneNumber:
-        type: string
-      homeRegionId:
-        type: number
-      title:
-        type: string
-      permissions:
-        type: array
-        items:
-          $ref: '#/definitions/permission'
-  permission:
-    type: object
-    properties:
-      userId:
-        type: number
-      scopeId:
-        type: number
-      regionId:
-        type: number
+              $ref: '../index.yaml#/components/schemas/user'

docs/openapi/paths/index.yaml

@@ -10,3 +10,5 @@
   $ref: './admin.yaml'
 '/admin/users':
   $ref: './adminAllUsers.yaml'
+'/activity-reports/approvers':
+  $ref: './activity-reports/approvers.yaml'

frontend/package.json

@@ -25,6 +25,7 @@
     "react-responsive": "^8.1.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "react-router-hash-link": "^2.3.1",
     "react-router-prop-types": "^1.0.5",
     "react-scripts": "^3.4.4",
     "react-select": "^3.1.0",

frontend/src/components/DatePicker.js

@@ -21,6 +21,8 @@ import moment from 'moment';
 
 import './DatePicker.css';
 
+const dateFmt = 'MM/DD/YYYY';
+
 const DateInput = ({
   control, label, minDate, name, disabled, maxDate, openUp, required,
 }) => {
@@ -30,8 +32,8 @@ const DateInput = ({
   const openDirection = openUp ? OPEN_UP : OPEN_DOWN;
 
   const isOutsideRange = (date) => {
-    const isBefore = minDate && date.isBefore(minDate);
-    const isAfter = maxDate && date.isAfter(maxDate);
+    const isBefore = minDate && date.isBefore(moment(minDate, dateFmt));
+    const isAfter = maxDate && date.isAfter(moment(maxDate, dateFmt));
 
     return isBefore || isAfter;
   };
@@ -41,23 +43,26 @@ const DateInput = ({
       <Label id={labelId} htmlFor={name}>{label}</Label>
       <div className="usa-hint" id={hintId}>mm/dd/yyyy</div>
       <Controller
-        render={({ onChange, value, ref }) => (
-          <div className="display-flex smart-hub--date-picker-input">
-            <button onClick={() => { updateFocus(true); }} disabled={disabled} tabIndex={-1} aria-label="open calendar" type="button" className="usa-date-picker__button margin-top-0" />
-            <SingleDatePicker
-              id={name}
-              focused={isFocused}
-              date={value}
-              ref={ref}
-              isOutsideRange={isOutsideRange}
-              numberOfMonths={1}
-              openDirection={openDirection}
-              disabled={disabled}
-              onDateChange={onChange}
-              onFocusChange={({ focused }) => updateFocus(focused)}
-            />
-          </div>
-        )}
+        render={({ onChange, value, ref }) => {
+          const date = value ? moment(value, dateFmt) : null;
+          return (
+            <div className="display-flex smart-hub--date-picker-input">
+              <button onClick={() => { updateFocus(true); }} disabled={disabled} tabIndex={-1} aria-label="open calendar" type="button" className="usa-date-picker__button margin-top-0" />
+              <SingleDatePicker
+                id={name}
+                focused={isFocused}
+                date={date}
+                ref={ref}
+                isOutsideRange={isOutsideRange}
+                numberOfMonths={1}
+                openDirection={openDirection}
+                disabled={disabled}
+                onDateChange={(d) => { onChange(d.format(dateFmt)); }}
+                onFocusChange={({ focused }) => updateFocus(focused)}
+              />
+            </div>
+          );
+        }}
         control={control}
         name={name}
         disabled={disabled}
@@ -76,8 +81,8 @@ DateInput.propTypes = {
   control: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  minDate: PropTypes.instanceOf(moment),
-  maxDate: PropTypes.instanceOf(moment),
+  minDate: PropTypes.string,
+  maxDate: PropTypes.string,
   openUp: PropTypes.bool,
   disabled: PropTypes.bool,
   required: PropTypes.bool,

frontend/src/components/MultiSelect.js

@@ -65,6 +65,7 @@ function MultiSelect({
           }
           return (
             <Select
+              className="margin-top-1"
               id={name}
               value={values}
               onChange={(e) => {
@@ -96,7 +97,10 @@ MultiSelect.propTypes = {
   name: PropTypes.string.isRequired,
   options: PropTypes.arrayOf(
     PropTypes.shape({
-      value: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+      ]).isRequired,
       label: PropTypes.string.isRequired,
     }),
   ).isRequired,

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

@@ -41,7 +41,7 @@ const pages = [
     path: 'review',
     label: 'review page',
     review: true,
-    render: (allComplete, onSubmit) => (
+    render: (allComplete, formData, submitted, onSubmit) => (
       <div>
         <button type="button" data-testid="review" onClick={onSubmit}>Continue</button>
       </div>

frontend/src/components/Navigator/components/Form.js

@@ -51,7 +51,7 @@ function Form({
   return (
     <UswdsForm onSubmit={handleSubmit(onContinue)} className="smart-hub--form-large">
       {renderForm(hookForm)}
-      <Button className="stepper-button" type="submit" disabled={!formState.isValid}>Continue</Button>
+      <Button type="submit" disabled={!formState.isValid}>Continue</Button>
     </UswdsForm>
   );
 }

frontend/src/components/Navigator/components/SideNav.css

@@ -80,3 +80,11 @@
   top: -2.5rem;
   transition: 0.2s ease-in-out;
 }
+
+.smart-hub--navigator-item:first-child .smart-hub--navigator-link-active {
+  border-top-right-radius: 4px;
+}
+
+.smart-hub--navigator-item:last-child .smart-hub--navigator-link-active {
+  border-bottom-right-radius: 4px;
+}

frontend/src/components/Navigator/index.js

@@ -2,8 +2,6 @@
   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
   display that item in the content section. The navigator keeps track of the "state" of each page.
-  In the future logic will be added to the navigator to prevent the complete form from being
-  submitted until every page is completed.
 */
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
@@ -19,10 +17,6 @@ import SideNav from './components/SideNav';
 import Form from './components/Form';
 import IndicatorHeader from './components/IndicatorHeader';
 
-/*
-  Get the current state of navigator items. Sets the currently selected item as "In Progress" and
-  sets a "current" flag which the side nav uses to style the selected component as selected.
-*/
 function Navigator({
   defaultValues,
   pages,
@@ -31,6 +25,7 @@ function Navigator({
   submitted,
   currentPage,
   updatePage,
+  additionalData,
 }) {
   const [formData, updateFormData] = useState(defaultValues);
   const [pageState, updatePageState] = useState(initialPageState);
@@ -80,13 +75,12 @@ function Navigator({
         />
       </Grid>
       <Grid col={12} tablet={{ col: 6 }} desktop={{ col: 8 }}>
-        <Container skipTopPadding>
-          <div id="navigator-form">
-            {page.review
-              && page.render(allComplete, onSubmit)}
-            {!page.review
+        <div id="navigator-form">
+          {page.review
+            && page.render(allComplete, formData, submitted, onSubmit, additionalData)}
+          {!page.review
             && (
-              <>
+              <Container skipTopPadding>
                 <IndicatorHeader
                   currentStep={page.position}
                   totalSteps={pages.filter((p) => !p.review).length}
@@ -100,10 +94,9 @@ function Navigator({
                   saveForm={onSaveForm}
                   renderForm={page.render}
                 />
-              </>
+              </Container>
             )}
-          </div>
-        </Container>
+        </div>
       </Grid>
     </Grid>
   );
@@ -122,10 +115,12 @@ Navigator.propTypes = {
   ).isRequired,
   currentPage: PropTypes.string.isRequired,
   updatePage: PropTypes.func.isRequired,
+  additionalData: PropTypes.shape({}),
 };
 
 Navigator.defaultProps = {
   defaultValues: {},
+  additionalData: {},
 };
 
 export default Navigator;