Add topics/reasons, filters, and activity reports table to TTA record page, update robots.txt for lower environments, Update Trussworks 2.0, lower export CSV limit

.circleci/config.yml

@@ -165,10 +165,10 @@ parameters:
     type: string
   dev_git_branch: # change to feature branch to test deployment
     description: "Name of github branch that will deploy to dev"
-    default: "kw-disable-hses-staging"
+    default: "TTAHUB276"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "kw-delete-reports-script"
+    default: "TTAHUB276"
     type: string
   prod_new_relic_app_id:
     default: "877570491"
@@ -333,6 +333,15 @@ jobs:
       - run:
           name: Build backend assets
           command: yarn build
+      - when:
+          condition:
+            and:
+              - equal: [<< pipeline.project.git_url >>, << pipeline.parameters.prod_git_url >>]
+              - equal: [<< pipeline.git.branch >>, << pipeline.parameters.prod_git_branch >>]
+          steps:
+          - run: 
+              name: Create production robot
+              command: ./bin/robot-factory
       - run:
           name: Build frontend assets
           command: yarn --cwd frontend run build

bin/robot-factory

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+echo 'Setting site to be indexable in robots.txt'
+
+cat >frontend/public/robots.txt <<EOL
+# Welcome Robots
+User-agent: *
+Disallow:
+EOL

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.11.0",
+    "@trussworks/react-uswds": "2.4.1",
     "@use-it/interval": "^1.0.0",
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
@@ -19,6 +19,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.33",
+    "plotly.js": "^2.5.1",
     "plotly.js-basic-dist": "^2.2.1",
     "prop-types": "^15.7.2",
     "query-string": "^7.0.0",
@@ -34,6 +35,7 @@
     "react-idle-timer": "^4.4.2",
     "react-input-autosize": "^3.0.0",
     "react-js-pagination": "^3.0.3",
+    "react-plotly.js": "^2.5.1",
     "react-responsive": "^8.1.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
@@ -155,7 +157,9 @@
       "<rootDir>/src/pages/NotFound/index.js",
       "<rootDir>/src/polyfills.js",
       "<rootDir>/src/pages/Widgets/index.js",
-      "<rootDir>/src/widgets/Example.js"
+      "<rootDir>/src/widgets/Example.js",
+      "<rootDir>/src/pages/RegionalDashboard/formatDateRange.js",
+      "<rootDir>/src/pages/RegionalDashboard/constants.js"
     ],
     "coverageThreshold": {
       "global": {

frontend/public/robots.txt

@@ -1,3 +1,6 @@
+# we disallow everything by default
+# in production, we allow indexing by removing the slash from the disallow
+
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow:
+Disallow: /

frontend/src/Constants.js

@@ -103,4 +103,5 @@ export const ESCAPE_KEY_CODE = 27;
 export const ESCAPE_KEY_CODES = ['Escape', 'Esc'];
 
 export const DATE_FMT = 'YYYY/MM/DD';
+export const DATE_DISPLAY_FORMAT = 'MM/DD/YYYY';
 export const EARLIEST_INC_FILTER_DATE = moment('2020-08-31');

frontend/src/components/Accordion.js

@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+export const AccordionItem = ({
+  title,
+  id,
+  content,
+  expanded,
+  className,
+  handleToggle,
+  headingSize,
+}) => {
+  const headingClasses = `usa-accordion__heading ${className}`;
+  const contentClasses = `usa-accordion__content usa-prose ${className}`;
+  const HeadingSizeTag = `h${headingSize}`;
+  return (
+    <>
+      <HeadingSizeTag className={headingClasses}>
+        <button
+          type="button"
+          className="usa-accordion__button"
+          aria-expanded={expanded}
+          aria-controls={id}
+          data-testid={`accordionButton_${id}`}
+          onClick={handleToggle}
+        >
+          {title}
+        </button>
+      </HeadingSizeTag>
+      <div
+        id={id}
+        data-testid={`accordionItem_${id}`}
+        className={contentClasses}
+        hidden={!expanded}
+      >
+        {content}
+      </div>
+    </>
+  );
+};
+
+AccordionItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  expanded: PropTypes.bool.isRequired,
+  id: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  handleToggle: PropTypes.func,
+  headingSize: PropTypes.number.isRequired,
+};
+
+AccordionItem.defaultProps = {
+  className: '',
+  handleToggle: () => { },
+};
+
+export const Accordion = ({
+  bordered,
+  items,
+  multiselectable,
+  headingSize,
+}) => {
+  const [openItems, setOpenState] = useState(
+    items.filter((i) => !!i.expanded).map((i) => i.id),
+  );
+
+  const classes = bordered ? 'usa-accordion usa-accordion--bordered' : 'usa-accordion';
+
+  const toggleItem = (itemId) => {
+    const newOpenItems = [...openItems];
+    const itemIndex = openItems.indexOf(itemId);
+    const isMultiselectable = multiselectable;
+
+    if (itemIndex > -1) {
+      newOpenItems.splice(itemIndex, 1);
+    } else if (isMultiselectable) {
+      newOpenItems.push(itemId);
+    } else {
+      newOpenItems.splice(0, newOpenItems.length);
+      newOpenItems.push(itemId);
+    }
+    setOpenState(newOpenItems);
+  };
+
+  return (
+    <div
+      className={classes}
+      data-testid="accordion"
+      aria-multiselectable={multiselectable || undefined}
+    >
+      {items.map((item) => (
+        <AccordionItem
+          key={`accordionItem_${item.id}`}
+          title={item.title}
+          id={item.id}
+          content={item.content}
+          className={item.className}
+          expanded={openItems.indexOf(item.id) > -1}
+          handleToggle={() => {
+            toggleItem(item.id);
+          }}
+          headingSize={headingSize}
+        />
+      ))}
+    </div>
+  );
+};
+
+Accordion.propTypes = {
+  bordered: PropTypes.bool,
+  multiselectable: PropTypes.bool,
+  items: PropTypes.arrayOf(PropTypes.shape(AccordionItem)).isRequired,
+  headingSize: PropTypes.number,
+};
+
+Accordion.defaultProps = {
+  bordered: false,
+  multiselectable: false,
+  headingSize: 2,
+};
+
+export default Accordion;

frontend/src/components/ActivityReportsTable/ColumnHeader.js

@@ -0,0 +1,47 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function ColumnHeader({
+  displayName, name, sortBy, sortDirection, onUpdateSort,
+}) {
+  const getClassNamesFor = (n) => (sortBy === n ? sortDirection : '');
+  const sortClassName = getClassNamesFor(name);
+  let fullAriaSort;
+  switch (sortClassName) {
+    case 'asc':
+      fullAriaSort = 'ascending';
+      break;
+    case 'desc':
+      fullAriaSort = 'descending';
+      break;
+    default:
+      fullAriaSort = 'none';
+      break;
+  }
+
+  return (
+    <th scope="col" aria-sort={fullAriaSort}>
+      <a
+        role="button"
+        tabIndex={0}
+        onClick={() => onUpdateSort(name)}
+        onKeyPress={() => onUpdateSort(name)}
+        className={`sortable ${sortClassName}`}
+        aria-label={`${displayName}. Activate to sort ${sortClassName === 'asc' ? 'descending' : 'ascending'}`}
+      >
+        {displayName}
+      </a>
+    </th>
+  );
+}
+
+ColumnHeader.propTypes = {
+  displayName: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  sortBy: PropTypes.string.isRequired,
+  sortDirection: PropTypes.string.isRequired,
+  onUpdateSort: PropTypes.func.isRequired,
+};
+
+export default ColumnHeader;