Merge pull request #55 from adhocteam/js-81-first-activity-report-fields

First activity report fields

.circleci/config.yml

@@ -109,7 +109,7 @@ parameters:
     default: "main"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "sj-update-cf-org"
+    default: "js-81-first-activity-report-fields"
     type: string
 jobs:
   build:

cucumber/features/activityReport.feature

@@ -0,0 +1,7 @@
+Feature: TTA Smarthub Activity Report
+    Scenario: Report can be filled out
+        Given I am logged in
+        And I am on the activity reports page
+        Then I see "New activity report for Region 14" message
+        When I select "Non-Grantee"
+        Then I see "QRIS System" as an option in the "Who was this activity for?" dropdown

cucumber/features/homePage.feature

@@ -5,7 +5,3 @@ Feature: TTA Smarthub Home Page
         And I am on the Smart Hub home page
         Then I see "Welcome to the TTA Smart Hub" message
         And I see "Activity Reports" link
-    # Scenario: Login is redirected to HSES
-    #     Given the home page of tta-smarthub
-    #     When pressing login
-    #     Then we should see "Head Start Enterprise System" page

cucumber/features/steps/activityReportSteps.js

@@ -0,0 +1,32 @@
+require('dotenv').config();
+const {
+  Given, Then, When,
+} = require('@cucumber/cucumber');
+const assert = require('assert');
+const scope = require('../support/scope');
+
+Given('I am on the activity reports page', async () => {
+  const page = scope.context.currentPage;
+  const selector = 'a[href$="activity-reports"]';
+  await Promise.all([
+    page.waitForNavigation(),
+    page.click(selector),
+  ]);
+});
+
+When('I select {string}', async (inputLabel) => {
+  const page = scope.context.currentPage;
+  const selector = `//label[text()='${inputLabel}']`;
+  const element = await page.$x(selector);
+  await element[0].click();
+});
+
+Then('I see {string} as an option in the {string} dropdown', async (expectedOption, dropdownLabel) => {
+  const page = scope.context.currentPage;
+  const selector = `//label[text()='${dropdownLabel}']/../select`;
+  const el = await page.$x(selector);
+  const selected = await el[0].$x(`//option[text()='${expectedOption}']`);
+
+  assert(selected.length === 1);
+  assert(selected !== null || selected !== undefined);
+});

frontend/package.json

@@ -3,14 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "@testing-library/jest-dom": "^4.2.4",
     "@trussworks/react-uswds": "^1.9.1",
     "http-proxy-middleware": "^1.0.5",
     "lodash": "^4.17.20",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
+    "react-datepicker": "^3.3.0",
     "react-dom": "^16.13.1",
-    "react-hook-form": "^6.9.1",
+    "react-dropzone": "^11.2.0",
+    "react-hook-form": "^6.9.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-router-prop-types": "^1.0.5",

frontend/src/App.js

@@ -51,7 +51,7 @@ function App() {
   }
 
   const renderAuthenticatedRoutes = () => (
-    <>
+    <div role="main" id="main-content">
       <Route
         exact
         path="/"
@@ -77,11 +77,12 @@ function App() {
           </Page>
         )}
       />
-    </>
+    </div>
   );
 
   return (
     <BrowserRouter>
+      {authenticated && <a className="usa-skipnav" href="#main-content">Skip to main content</a>}
       <UserContext.Provider value={{ user, authenticated, logout }}>
         <Header authenticated={authenticated} />
         <div className="background-stripe" />

frontend/src/components/DatePicker.css

@@ -0,0 +1,3 @@
+.usa-date-picker__button {
+  margin-top: 0.5rem
+}

frontend/src/components/DatePicker.js

@@ -0,0 +1,109 @@
+/*
+  This component requires being embedded into a `react-hook-form` form
+
+  Uses ReactDatePicker styled as the USWDS date picker. The react USWDS library does
+  not have a date picker component. We could have used USWDS component directly here
+  instead of ReactDatePicker but I decided against for a couple reasons:
+   1. I was having a hard time getting input back into react hook form using the USWDS
+      code directly. Issue centered around the USWDS code not sending `onChange` events
+      when an invalid date was input
+   2. Related to #1, ReactDatePicker handles invalid dates by removing the invalid input
+      on blur, which is nicer then how the USWDS component handled invalid dates.
+   3. ReactDatePicker had easily readable documentation and conveniences such as `maxDate`
+      and `minDate`. I couldn't find great docs using the USWDS datepicker javascript
+*/
+
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { TextInput, Label } from '@trussworks/react-uswds';
+import ReactDatePicker from 'react-datepicker';
+import { Controller } from 'react-hook-form';
+
+import 'react-datepicker/dist/react-datepicker.css';
+import './DatePicker.css';
+
+const DateInput = ({
+  control, label, minDate, name, disabled, maxDate,
+}) => {
+  const labelId = `${name}-id`;
+  const hintId = `${name}-hint`;
+
+  const CustomInput = forwardRef(({ value, onChange, onFocus }, ref) => (
+    <div className="display-flex" onFocus={onFocus}>
+      <TextInput
+        id={name}
+        disabled={disabled}
+        inputRef={ref}
+        onChange={onChange}
+        className="usa-date-picker__external-input"
+        aria-describedby={`${labelId} ${hintId}`}
+        value={value}
+        autoComplete="off"
+      />
+      <button disabled={disabled} aria-hidden tabIndex={-1} aria-label="open calendar" type="button" className="usa-date-picker__button" />
+    </div>
+  ));
+
+  CustomInput.propTypes = {
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    onFocus: PropTypes.func,
+  };
+
+  CustomInput.defaultProps = {
+    value: undefined,
+    onChange: undefined,
+    onFocus: undefined,
+  };
+
+  return (
+    <>
+      <Label id={labelId} htmlFor={name}>{label}</Label>
+      <div className="usa-hint" id={hintId}>mm/dd/yyyy</div>
+      <Controller
+        render={({ onChange, value }) => (
+          <ReactDatePicker
+            dateFormat="MM/dd/yyyy"
+            showTimeSelect={false}
+            todayButton="Today"
+            minDate={minDate}
+            maxDate={maxDate}
+            strictParsing
+            selected={value}
+            onChange={onChange}
+            customInput={<CustomInput />}
+            dropdownMode="select"
+            placeholderText="Click to select time"
+            shouldCloseOnSelect
+          />
+        )}
+        control={control}
+        name={name}
+        disabled={disabled}
+        defaultValue={null}
+        rules={{
+          required: true,
+        }}
+      />
+    </>
+  );
+};
+
+DateInput.propTypes = {
+  // control is an object from react-hook-form
+  // eslint-disable-next-line react/forbid-prop-types
+  control: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  minDate: PropTypes.instanceOf(Date),
+  maxDate: PropTypes.instanceOf(Date),
+  disabled: PropTypes.bool,
+};
+
+DateInput.defaultProps = {
+  minDate: undefined,
+  maxDate: undefined,
+  disabled: false,
+};
+
+export default DateInput;