Merge pull request #221 from adhocteam/js-152-browser-controls

Browser nav fix and various IE 11 fixes

.circleci/config.yml

@@ -133,7 +133,7 @@ parameters:
     default: "main"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "js-283-frontend-updates"
+    default: "js-152-browser-controls"
     type: string
 jobs:
   build_and_lint:

frontend/package.json

@@ -10,7 +10,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.11",
     "@hookform/error-message": "^0.0.5",
-    "@trussworks/react-uswds": "^1.12.2",
+    "@trussworks/react-uswds": "1.11.0",
     "@use-it/interval": "^1.0.0",
     "http-proxy-middleware": "^1.0.5",
     "lodash": "^4.17.20",

frontend/src/components/DatePicker.js

@@ -14,7 +14,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { SingleDatePicker } from 'react-dates';
 import { OPEN_UP, OPEN_DOWN } from 'react-dates/constants';
-import { Controller } from 'react-hook-form';
+import { Controller } from 'react-hook-form/dist/index.ie11';
 import moment from 'moment';
 
 import './DatePicker.css';

frontend/src/components/FormItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import { ErrorMessage as ReactHookFormError } from '@hookform/error-message';
 import {
   Label, FormGroup, ErrorMessage, Fieldset,

frontend/src/components/MultiSelect.js

@@ -23,7 +23,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select, { components } from 'react-select';
-import { Controller } from 'react-hook-form';
+import { Controller } from 'react-hook-form/dist/index.ie11';
 
 import arrowBoth from '../images/arrow-both.svg';
 
@@ -34,43 +34,6 @@ const DropdownIndicator = (props) => (
   </components.DropdownIndicator>
 );
 
-const styles = {
-  container: (provided, state) => {
-    // To match the focus indicator provided by uswds
-    const outline = state.isFocused ? '0.25rem solid #2491ff;' : '';
-    return {
-      ...provided,
-      outline,
-    };
-  },
-  groupHeading: (provided) => ({
-    ...provided,
-    fontWeight: 'bold',
-    fontFamily: 'SourceSansPro',
-    textTransform: 'capitalize',
-    fontSize: '14px',
-    color: '#21272d',
-    lineHeight: '22px',
-  }),
-  control: (provided, state) => ({
-    ...provided,
-    borderColor: '#565c65',
-    backgroundColor: 'white',
-    borderRadius: '0',
-    '&:hover': {
-      borderColor: '#565c65',
-    },
-    // Match uswds disabled style
-    opacity: state.isDisabled ? '0.7' : '1',
-  }),
-  indicatorsContainer: (provided) => ({
-    ...provided,
-    // The arrow dropdown icon is too far to the right, this pushes it back to the left
-    marginRight: '4px',
-  }),
-  indicatorSeparator: () => ({ display: 'none' }),
-};
-
 function MultiSelect({
   name,
   options,
@@ -83,8 +46,47 @@ function MultiSelect({
   rules,
   multiSelectOptions,
   onItemSelected,
+  singleRowInput,
   components: componentReplacements,
 }) {
+  const styles = {
+    container: (provided, state) => {
+      // To match the focus indicator provided by uswds
+      const outline = state.isFocused ? '0.25rem solid #2491ff;' : '';
+      return {
+        ...provided,
+        outline,
+      };
+    },
+    groupHeading: (provided) => ({
+      ...provided,
+      fontWeight: 'bold',
+      fontFamily: 'SourceSansPro',
+      textTransform: 'capitalize',
+      fontSize: '14px',
+      color: '#21272d',
+      lineHeight: '22px',
+    }),
+    control: (provided, state) => ({
+      height: singleRowInput ? '38px' : '',
+      ...provided,
+      borderColor: '#565c65',
+      backgroundColor: 'white',
+      borderRadius: '0',
+      '&:hover': {
+        borderColor: '#565c65',
+      },
+      // Match uswds disabled style
+      opacity: state.isDisabled ? '0.7' : '1',
+    }),
+    indicatorsContainer: (provided) => ({
+      ...provided,
+      // The arrow dropdown icon is too far to the right, this pushes it back to the left
+      marginRight: '4px',
+    }),
+    indicatorSeparator: () => ({ display: 'none' }),
+  };
+
   /*
    * @param {Array<string> || Array<object>} - value array. Either an array of strings or array
    * of objects
@@ -196,6 +198,7 @@ MultiSelect.propTypes = {
   control: PropTypes.object.isRequired,
   components: PropTypes.shape({}),
   onItemSelected: PropTypes.func,
+  singleRowInput: PropTypes.bool,
   multiSelectOptions: PropTypes.shape({
     isClearable: PropTypes.bool,
     closeMenuOnSelect: PropTypes.bool,
@@ -209,6 +212,7 @@ MultiSelect.propTypes = {
 
 MultiSelect.defaultProps = {
   disabled: false,
+  singleRowInput: false,
   required: 'Please select at least one item',
   simple: true,
   labelProperty: 'label',

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

@@ -5,7 +5,7 @@ import {
   render, screen, waitFor, within,
 } from '@testing-library/react';
 
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import Navigator from '../index';
 import { NOT_STARTED } from '../constants';
 

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

@@ -1,8 +1,8 @@
 .smart-hub--navigator-link-active {
-  background-color: #f8f8f8;
-  color: #0166ab;
+  background-color: rgb(248, 248, 248);
+  color: rgb(1, 102, 171);
   font-weight: bold;
-  border-left: 2px solid #0166ab;
+  border-left: 2px solid rgb(1, 102, 171);
   text-decoration-line: none;
 }
 
@@ -13,45 +13,45 @@
   width: 100%;
   height: 100%;
   font-size: 16px;
-  color: #12549d;
+  color: rgb(18, 84, 157);
   line-height: 24px;
 }
 
 .smart-hub--navigator-list {
   list-style-type: none;
-  padding-inline-start: 0;
+  padding-left: 0;
   margin: 0;
 }
 
 .smart-hub--navigator-item {
   width: 100%;
   height: 40px;
-  color: #0166ab;
+  color: rgb(1, 102, 171);
 }
 
 .smart-hub--tag-not-started {
   background-color: #eceef1;
-  color: #21272dc1;
+  color: rgba(33, 39, 45, 0.76);
 }
 
 .smart-hub--tag-in-progress {
-  background-color: #e2eff7;
-  color: #0166ab;
+  background-color: rgb(226, 239, 247);
+  color: rgb(1, 102, 171);
 }
 
 .smart-hub--tag-complete {
-  background-color: #e6faedb0;
-  color: #3a7e5a;
+  background-color: rgba(230, 250, 237, 0.69);
+  color: rgb(58, 126, 90);
 }
 
 .smart-hub--tag-submitted {
-  background-color: #0166ab;
-  color: #f8f8f8;
+  background-color: rgb(1, 102, 171);
+  color: rgb(248, 248, 248);
 }
 
 .smart-hub--tag-needs-action {
-  background-color: #f9e0e4;
-  color: #d42240;
+  background-color: rgb(249, 224, 228);
+  color: rgb(212, 34, 64);
 }
 
 .smart-hub--tag {
@@ -67,7 +67,7 @@
   font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
   font-size: 1.06rem;
   line-height: 1.5;
-  color: #005ea2;
+  color: rgb(0, 94, 162);
   text-decoration: underline;
   background: transparent;
   left: 0;

frontend/src/components/Navigator/index.js

@@ -6,7 +6,7 @@
 */
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 import {
   Form,
   Button,

frontend/src/components/__tests__/DatePicker.js

@@ -4,7 +4,7 @@ import {
   render, screen, fireEvent, waitFor,
 } from '@testing-library/react';
 
-import { useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form/dist/index.ie11';
 import DatePicker from '../DatePicker';
 
 // react-dates when opening the calendar in these tests. For details see

frontend/src/components/__tests__/MutliSelect.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import selectEvent from 'react-select-event';
 import { act } from 'react-dom/test-utils';
-import { useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form/dist/index.ie11';
 import userEvent from '@testing-library/user-event';
 import { Label } from '@trussworks/react-uswds';
 

frontend/src/fetchers/index.js

@@ -10,6 +10,10 @@ export class HTTPError extends Error {
 export const get = async (url) => {
   const res = await fetch(url, {
     credentials: 'same-origin',
+    headers: {
+      'Cache-Control': 'no-cache',
+      Pragma: 'no-cache',
+    },
   });
   if (!res.ok) {
     throw new HTTPError(res.status, res.statusText);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import _ from 'lodash';
 import {
   Dropdown, Form, Label, Fieldset, Textarea, Alert, Button,

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

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 import Approver from '../index';
 import { REPORT_STATUSES } from '../../../../../../Constants';
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 
 const ReviewItem = ({ label, name, path }) => {
   const { watch } = useFormContext();

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { some } from 'lodash';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 
 import Section from './ReviewSection';
 import ReviewItem from './ReviewItem';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import {
   Dropdown, Form, Fieldset, Textarea, Button,
 } from '@trussworks/react-uswds';

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

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { useForm, FormProvider } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form/dist/index.ie11';
 
 import Submitter from '../index';
 import { REPORT_STATUSES } from '../../../../../../Constants';

frontend/src/pages/ActivityReport/Pages/Review/__tests__/ReviewPage.js

@@ -3,7 +3,7 @@ import React from 'react';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 import ReviewPage from '../ReviewPage';
 
 const sections = [

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

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 
 import ReviewSubmit from '../index';
 import { REPORT_STATUSES } from '../../../../../Constants';

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

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 import join from 'url-join';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';

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

@@ -2,7 +2,7 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form/dist/index.ie11';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
 

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form/dist/index.ie11';
 import { isEmpty } from 'lodash';
 
 import {
@@ -265,6 +265,7 @@ const ActivitySummary = ({
                     register({
                       required: 'Please enter the duration of the activity',
                       valueAsNumber: true,
+                      pattern: { value: /^\d+(\.[0,5]{1})?$/, message: 'Duration must be rounded to the nearest half hour' },
                       min: { value: 0, message: 'Duration can not be negative' },
                     })
                   }