Merge HHS/main into adhocteam/main (#488)

* refactor and seperate button select and date range select * Bump validator from 13.6.0 to 13.7.0 Bumps [validator](https://github.com/validatorjs/validator.js) from 13.6.0 to 13.7.0. - [Release notes](https://github.com/validatorjs/validator.js/releases) - [Changelog](https://github.com/validatorjs/validator.js/blob/master/CHANGELOG.md) - [Commits](validatorjs/validator.js@13.6.0...13.7.0) --- updated-dependencies: - dependency-name: validator dependency-type: direct:production ... Signed-off-by: dependabot[bot] <[email protected]> * start another refactor * refactor menu usage * refactor dropdowns to use one component * add test for grantee search * cleanup TTA History filter * convert filter menu to dropdown menu * ui fixes after refactoring * fix more ui bugs * fill in some test coverage * add filter menu item test * get rid of duplicate constant * add test for filter date range * more test coverage * fix bug with filter blurring * fix blur interactions * fix weird checkbox behavior * bring date icons inline; * reset condition on topic change * remove debugging comment * ditch unused code so we don\'t have to test it * adapt test since query is killed by topic change * write test for button select * remove phantom state from checkbox select * refactor formatDateRange function * add test to date range select * remove unused code from filter menu that we shouldnt test * final changes to export message from accessibility spec. * welcoming robots in certain situations * Update known vulnerabilities * trying a different approach in the config * fix date range select label bug * fix specialist select blur bug * [TTAHUB-404] Add target populations to Grantee record page (#480) * add label to input in search form * create new widget front and back * ui test * put it in a grid * fix ui test * clean up tests * radd scopes to goals for grant * I put the where in the wrong place (oopsie) * fix test * Add SES to the diagram * Add to ignored yarn vulnerabilities Co-authored-by: unknown <[email protected]> * is this how we set vars? * fix var name * fix ui tests * test on dev since sandbox does not do what I thought * update trusworks with modal changes * fix weird blur behavior * need to learn how to do bash * more bash better * tweak the export limit * for christmas sake * testing complete * fix ui test * fix bash script var names * make grids agree * resolve merge issues * TTA-HUB: 397 Add Pill Filters to Grantee Page (#481) * first version of filter pills * added first version of filter pills * added tests for filter pill ui * change colors and add test * fixed issues found by Matt * fixed filter issues and specialists check boxes * fixed pill row spacing and moved AND to front * fix audit vuln * fix lint errors * wip * css fixes * code clean up * added unit test for tool tip and fixed filter pill test * align text in ellipsis pill * fixes based on Joshs PR review Co-authored-by: Matt Bevilacqua <[email protected]> * neaten the prop types * updated file uploader modal * fighting against extra api calls * clear out query on condition * updated external resource modal * fix ui tests * move logic to circlci config * add column header test * remove unneeded code * add another ui test * awaken robot on prod * Update .circleci/config.yml Co-authored-by: Josh Salisbury <[email protected]> * adjust maxiumum number; * fix unit test again * add approvedat migration * update approvedAt on approval * clean up constants, add new one * add approved and created dates to fe landing page * add approved and created date to csv download * remove console statement * fixing tests * pass correct filters to the frequency graph * fix weird useState * refactor filter usage across TTA History * fixed modal unit tests * updated my alert test * fixed modal tests for external resource * partial fixes for ui tests * clean up prop type * cleanup UI tests * more unit test fixes for trussworks2 * idle modal test fixes * add backend tests * apply filters to table as well * add min width to menu * fixed accessibility issue and added test coverage * add target populations to ar * remove all specialists as an option * fix table colors * add approved and created date to ar, table css fixes * fix failing ui test * fix grantee record ui test * remove toggle all checked ui test * fix other failing tests * fix failing tooltip test * unique id value * update known issues * just checking, there is no way I fixed this * deploy feat. to dev * fix axe * Update known vulnerabilities * fix axe again * fix axe issues again * add test to column header * try heading axe fix * test * update test for axe * update * no div + caption * cleanup test * see if remvoing display none fixes issue * add test to mock * hide headings * limit number of headings * lwrite a test that works * temp remove unit test * style alert a little better * fix some ui interactions * added cusom accordion with heading size prop * added test for accordion * redo date picker logic * update date range select further * add explanatory comment * we! test! our! code! * fix capitalizations while we're here * fixes based on Kryss comments * linter fixes * audit vuln * change unlock report button css to outline * export maximum for use in test * upgrade test * added save animation and save alert on review submit * fix table colors * update date picker within activity report * debug statement * port start date functionality to ar createe * meet jira criteria for targetPopulationTable * remove test that is no longer needed * added unit tests for new changes * change CSV warning start date * move func to own line per Matts comment * grantee scope change * first round of changes wip * tests and changes for PS and GS on results and summary * refine search results * fix error message fade in * fix test * standardize table color override * fix issue with one PS being displayed showing trailing comma * audit vuln * audit vuln BE * increase prod memory limit * audit known issues update * update audit vulnerabilities output * update audit vulns * update frontend vulns * fix menu css * fix alert for screen reader * maximum export exported * revise test to be flexible * move filters * fix regional dashboard legend styles * fixes based on PR review * return grantee type on granteeById * remove console statement * added grantee type * audit vuln * smooth smaller screen styles * rmenu aria label is prop * pass correct label * simplify code so no need to test * wrote some test coverage * audit vlun again * fix test after merge * fix test post merge * changes for program types in grant list widget * remove deploy * remove commented out css * ensure program type list is always distinct and sorted * remove unused css * update node to lts * deploy to dev * update axe * update axe and selenium * trying to set chromedriver path another way * file path both ways * does this work? * fix syntax error * replace existing * dont set chromedriver path * update chromedriver to 96 * update chromedriver * lets set a chromedriver * try a different chrome flavor * lets see if this works * test v96 of chrome * install right version of chrome 96 * revert to chrome 93 * add stripes back to tables * Remove aria announcements on total tta graph and fix CSS select * fix failing unit test Co-authored-by: Matt Bevilacqua <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Adam Levin <[email protected]> Co-authored-by: Adam Levin <[email protected]> Co-authored-by: Josh Salisbury <[email protected]>
HHS · Nov 23, 2021 · c5e0105 · c5e0105
1 parent 4ef0353
commit c5e0105
Show file tree

Hide file tree

Showing 75 changed files with 853 additions and 555 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,14 +1,15 @@
 version: 2.1
 orbs:
   node: circleci/[email protected]
+  browser-tools: circleci/[email protected]
 executors:
   docker-executor:
     # for docker you must specify an image to use for the primary container
     docker:
-      - image: circleci/node:14.17.6-browsers
+      - image: circleci/node:14.18.1-browsers
   docker-postgres-executor:
     docker:
-      - image: circleci/node:14.17.6-browsers
+      - image: circleci/node:14.18.1-browsers
         environment:
           DATABASE_URL: postgresql://postgres@localhost/ttasmarthub
       - image: circleci/postgres:12.4-ram
@@ -165,7 +166,7 @@ parameters:
     type: string
   dev_git_branch: # change to feature branch to test deployment
     description: "Name of github branch that will deploy to dev"
-    default: "TTAHUB276"
+    default: "update-node-to-14.18.1"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
     default: "TTAHUB276"
@@ -305,6 +306,10 @@ jobs:
     steps:
       - attach_workspace:
           at: .
+      - browser-tools/install-chrome:   
+          chrome-version: 93.0.4577.63
+          replace-existing: true
+      - browser-tools/install-chromedriver
       - run:
           name: Run migrations ci
           command: yarn db:migrate:ci

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-14.17.6
+14.18.1
diff --git a/Dockerfile b/Dockerfile
@@ -1,2 +1,2 @@
-FROM node:14.17.6
+FROM node:14.18.1
 WORKDIR /app
diff --git a/README.md b/README.md
@@ -35,7 +35,7 @@ those services are already running on your machine.
 #### Docker
 
 1. Make sure Docker is installed. To check run `docker ps`.
-2. Make sure you have Node 14.17.6 installed.
+2. Make sure you have Node 14.18.1 installed.
 4. Copy `.env.example` to `.env`.
 6. Change the `AUTH_CLIENT_ID` and `AUTH_CLIENT_SECRET` variables to to values found in the "Values for local development" section of the "Development Credentials" document. If you don't have access to this document, please ask in the hs-vendors-ohs-tta channel of the gsa-tts slack channel.
 7. Optionally, set `CURRENT_USER` to your current user's uid:gid. This will cause files created by docker compose to be owned by your user instead of root.

diff --git a/deployment_config/prod_vars.yml b/deployment_config/prod_vars.yml
@@ -1,6 +1,6 @@
 env: prod
 web_instances: 3
-web_memory: 2GB
+web_memory: 4GB
 worker_instances: 1
 worker_memory: 512M
 LOG_LEVEL: info

diff --git a/frontend/package.json b/frontend/package.json
@@ -50,7 +50,7 @@
     "uuid": "^8.3.2"
   },
   "engines": {
-    "node": "14.17.6"
+    "node": "14.18.1"
   },
   "scripts": {
     "start": "cross-env DISABLE_ESLINT_PLUGIN=true react-scripts start",

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -73,6 +73,13 @@ body {
   opacity: 0.7;
 }
 
+
+/* ========== Table stripe overrride ========== */
+.usa-table--striped tbody tr:nth-child(2n+1) td, .usa-table--striped tbody tr:nth-child(2n+1) th {
+  background-color: #f8f8f8;
+}
+
+
 /* ========== Print Styles ========== */
 
 /* This is for elements that in the DOM that should appear only when printing */

diff --git a/frontend/src/components/ActivityReportsTable/index.css b/frontend/src/components/ActivityReportsTable/index.css
@@ -1,5 +1,4 @@
 .usa-table-container--scrollable, 
 .usa-checkbox__label {
   margin-top: 0px;
-}
-
+}
diff --git a/frontend/src/components/ActivityReportsTable/index.js b/frontend/src/components/ActivityReportsTable/index.js
@@ -2,18 +2,13 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {
-  Table, Button, Checkbox, Grid, Alert,
+  Table, Checkbox, Grid, Alert,
 } from '@trussworks/react-uswds';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
-
-import Pagination from 'react-js-pagination';
-
-import { getReports } from '../../fetchers/activityReports';
+import { getReports, downloadReports } from '../../fetchers/activityReports';
 import { getReportsDownloadURL, getAllReportsDownloadURL } from '../../fetchers/helpers';
 import Container from '../Container';
-import Filter, { filtersToQueryString } from '../Filter';
-import ReportMenu from '../../pages/Landing/ReportMenu';
+import { filtersToQueryString } from '../Filter';
+import TableHeader from '../TableHeader';
 import ReportRow from './ReportRow';
 import { REPORTS_PER_PAGE } from '../../Constants';
 
@@ -32,18 +27,6 @@ const emptyReport = {
   calculatedStatus: '',
 };
 
-export function renderTotal(offset, perPage, activePage, reportsCount) {
-  const from = offset >= reportsCount ? 0 : offset + 1;
-  const offsetTo = perPage * activePage;
-  let to;
-  if (offsetTo > reportsCount) {
-    to = reportsCount;
-  } else {
-    to = offsetTo;
-  }
-  return `${from}-${to} of ${reportsCount}`;
-}
-
 function ActivityReportsTable({
   filters,
   showFilter,
@@ -59,6 +42,7 @@ function ActivityReportsTable({
   const [perPage] = useState(REPORTS_PER_PAGE);
   const [activePage, setActivePage] = useState(1);
   const [reportsCount, setReportsCount] = useState(0);
+  const [downloadError, setDownloadError] = useState(false);
   const [sortConfig, setSortConfig] = React.useState({
     sortBy: 'updatedAt',
     direction: 'desc',
@@ -149,10 +133,23 @@ function ActivityReportsTable({
     setSortConfig({ sortBy, direction });
   };
 
-  const handleDownloadAllReports = () => {
+  const handleDownloadAllReports = async () => {
     const filterQuery = filtersToQueryString(filters);
     const downloadURL = getAllReportsDownloadURL(filterQuery);
-    window.location.assign(downloadURL);
+
+    try {
+      // changed the way this works ever so slightly because I was thinking
+      // you'd want a try/catch around the fetching of the reports and not the
+      // window.location.assign
+
+      const blob = await downloadReports(downloadURL);
+      const csv = URL.createObjectURL(blob);
+      window.location.assign(csv);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.log(err);
+      setDownloadError(true);
+    }
   };
 
   const handleDownloadClick = () => {
@@ -217,72 +214,28 @@ function ActivityReportsTable({
         </Alert>
         )}
       </Grid>
+
       <Container className="landing inline-size maxw-full" padding={0} loading={loading} loadingLabel="Activity reports table loading">
-        <span className="smart-hub--table-controls display-flex flex-row flex-align-center">
-          {numberOfSelectedReports > 0
-        && (
-          <span className="padding-y-05 padding-left-105 padding-right-1 text-white smart-hub-bg-vivid radius-pill font-sans-xs text-middle margin-right-1 smart-hub--selected-tag">
-            {numberOfSelectedReports}
-            {' '}
-            selected
-            {' '}
-            <Button
-              className="smart-hub--select-tag__button"
-              unstyled
-              aria-label="deselect all reports"
-              onClick={() => {
-                toggleSelectAll({ target: { checked: false } });
-              }}
-            >
-              <FontAwesomeIcon
-                color="blue"
-                inverse
-                icon={faTimesCircle}
-              />
-            </Button>
-          </span>
-        )}
-          {showFilter && <Filter applyFilters={onUpdateFilters} />}
-          <ReportMenu
-            hasSelectedReports={numberOfSelectedReports > 0}
-            onExportAll={handleDownloadAllReports}
-            onExportSelected={handleDownloadClick}
-            count={reportsCount}
-          />
-        </span>
-        <span className="smart-hub--table-nav">
-          <span aria-label="Pagination for activity reports">
-            <span
-              className="smart-hub--total-count"
-              aria-label={`Page ${activePage}, displaying rows ${renderTotal(
-                offset,
-                perPage,
-                activePage,
-                reportsCount,
-              )}`}
-            >
-              {renderTotal(offset, perPage, activePage, reportsCount)}
-              <Pagination
-                hideFirstLastPages
-                prevPageText="<Prev"
-                nextPageText="Next>"
-                activePage={activePage}
-                itemsCountPerPage={perPage}
-                totalItemsCount={reportsCount}
-                pageRangeDisplayed={4}
-                onChange={handlePageChange}
-                linkClassPrev="smart-hub--link-prev"
-                linkClassNext="smart-hub--link-next"
-                tabIndex={0}
-              />
-            </span>
-          </span>
-        </span>
+        <TableHeader
+          title={tableCaption}
+          numberOfSelected={numberOfSelectedReports}
+          toggleSelectAll={toggleSelectAll}
+          showFilter={showFilter}
+          onUpdateFilters={onUpdateFilters}
+          handleDownloadAll={handleDownloadAllReports}
+          handleDownloadClick={handleDownloadClick}
+          count={reportsCount}
+          activePage={activePage}
+          offset={offset}
+          perPage={perPage}
+          handlePageChange={handlePageChange}
+          downloadError={downloadError}
+        />
         <div className="usa-table-container--scrollable">
-          <Table className="usa-table usa-table--borderless usa-table--striped" fullWidth>
-            <caption>
+          <Table fullWidth striped>
+            <caption className="usa-sr-only">
               {tableCaption}
-              <p className="usa-sr-only">with sorting and pagination</p>
+              with sorting and pagination
             </caption>
             <thead>
               <tr>

diff --git a/frontend/src/components/CheckboxSelect.js b/frontend/src/components/CheckboxSelect.js
@@ -104,7 +104,7 @@ export default function CheckboxSelect(props) {
     <DropdownMenu
       canBlur={canBlur}
       forwardedRef={menu}
-      className="smart-hub--checkbox-select position-relative margin-left-1"
+      className="smart-hub--checkbox-select position-relative desktop:margin-left-1"
       buttonText={label}
       buttonAriaLabel={ariaLabel}
       styleAsSelect={styleAsSelect}

diff --git a/frontend/src/components/DatePicker.js b/frontend/src/components/DatePicker.js
@@ -12,36 +12,29 @@
 */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { SingleDatePicker } from 'react-dates';
+import { SingleDatePicker, isInclusivelyBeforeDay } from 'react-dates';
 import { OPEN_UP, OPEN_DOWN } from 'react-dates/constants';
 import { Controller } from 'react-hook-form/dist/index.ie11';
 import moment from 'moment';
-import { DATE_DISPLAY_FORMAT } from '../Constants';
+import { DATE_DISPLAY_FORMAT, EARLIEST_INC_FILTER_DATE } from '../Constants';
 import './DatePicker.css';
 
 const DateInput = ({
-  control, minDate, name, disabled, maxDate, openUp, required, ariaName, maxDateInclusive,
+  control,
+  maxDate,
+  name,
+  disabled,
+  openUp,
+  required,
+  ariaName,
+  isStartDate,
+  setEndDate,
 }) => {
   const hintId = `${name}-hint`;
   const [isFocused, updateFocus] = useState(false);
   const openDirection = openUp ? OPEN_UP : OPEN_DOWN;
 
-  const isOutsideRange = (date) => {
-    const isBefore = minDate && date.isBefore(moment(minDate, DATE_DISPLAY_FORMAT));
-
-    // If max date is inclusive (maxDateInclusive == true)
-    // allow the user to pick a start date that is the same as the maxDate
-    // otherwise, only the day before is allowed
-    let isAfter = false;
-    if (maxDateInclusive) {
-      const newDate = moment(maxDate, DATE_DISPLAY_FORMAT).add(1, 'days');
-      isAfter = maxDate && date.isAfter(newDate, DATE_DISPLAY_FORMAT);
-    } else {
-      isAfter = maxDate && date.isAfter(moment(maxDate, DATE_DISPLAY_FORMAT));
-    }
-
-    return isBefore || isAfter;
-  };
+  const isOutsideRange = (day) => isInclusivelyBeforeDay(day, EARLIEST_INC_FILTER_DATE);
 
   const message = isFocused ? '' : 'Navigate forward and push button to open the calendar';
 
@@ -67,6 +60,18 @@ const DateInput = ({
                 disabled={disabled}
                 hideKeyboardShortcutsPanel
                 onDateChange={(d) => {
+                  if (!d) {
+                    return;
+                  }
+
+                  if (isStartDate) {
+                    if (maxDate && moment(maxDate).isBefore(d)) {
+                      const diff = moment(maxDate).diff(date, 'days');
+                      const newEnd = moment(d).add(diff, 'days').format(DATE_DISPLAY_FORMAT);
+                      setEndDate(newEnd);
+                    }
+                  }
+
                   const newDate = d ? d.format(DATE_DISPLAY_FORMAT) : d;
                   onChange(newDate);
                   const input = document.getElementById(name);
@@ -106,21 +111,21 @@ DateInput.propTypes = {
   control: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
   ariaName: PropTypes.string.isRequired,
-  minDate: PropTypes.string,
   maxDate: PropTypes.string,
   openUp: PropTypes.bool,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
-  maxDateInclusive: PropTypes.bool,
+  isStartDate: PropTypes.bool,
+  setEndDate: PropTypes.func,
 };
 
 DateInput.defaultProps = {
-  minDate: '',
   maxDate: '',
   disabled: false,
   openUp: false,
   required: true,
-  maxDateInclusive: false,
+  isStartDate: false,
+  setEndDate: () => {},
 };
 
 export default DateInput;