Kw

.circleci/config.yml

@@ -164,7 +164,7 @@ parameters:
     default: "main"
     type: string
   sandbox_git_branch:  # change to feature branch to test deployment
-    default: "kw-overview-widget"
+    default: "kw-fix-region-order"
     type: string
   prod_new_relic_app_id:
     default: "877570491"

frontend/src/App.js

@@ -145,6 +145,7 @@ function App() {
     <>
       <Helmet titleTemplate="%s - TTA Smart Hub" defaultTitle="TTA Smart Hub">
         <meta charSet="utf-8" />
+        <script src="https://touchpoints.app.cloud.gov/touchpoints/7d519b5e.js" async />
       </Helmet>
       <BrowserRouter>
         {authenticated && (

frontend/src/components/SiteNav.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { NavLink as Link } from 'react-router-dom';
+import { NavLink as Link, withRouter } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChartBar } from '@fortawesome/free-solid-svg-icons';
 
@@ -33,6 +33,7 @@ const SiteNav = ({
   authenticated,
   logout,
   user,
+  location,
 }) => {
   const navItems = [
     <button type="button" onClick={() => logout(false)} className={`usa-button--unstyled width-full ${navLinkClasses}`}>
@@ -46,11 +47,25 @@ const SiteNav = ({
     </NavLink>,
   ];
 
+  const [showActivityReportSurveyButton, setShowActivityReportSurveyButton] = useState(false);
+
+  useEffect(() => {
+    if (location.pathname === '/activity-reports') {
+      setShowActivityReportSurveyButton(true);
+    } else {
+      setShowActivityReportSurveyButton(false);
+    }
+  }, [location.pathname]);
+
   const items = admin ? navItems.concat(adminNavItem) : navItems;
 
   return (
-    <div className="smart-hub-sitenav pin-y position-fixed z-0 padding-top-9 font-ui text-white smart-hub-bg-blue width-15 tablet:width-card desktop:width-card-lg no-print">
-      {authenticated && (
+    <div>
+      <div className="position-relative z-top">
+        <button id="tp-ar-landing-survey" className={`usa-button position-fixed  bottom-2 right-1 display-${showActivityReportSurveyButton ? 'block' : 'none'}`} aria-label="Please leave feedback" type="button">Please leave feedback</button>
+      </div>
+      <div className="smart-hub-sitenav pin-y position-fixed z-0 padding-top-9 font-ui text-white smart-hub-bg-blue width-15 tablet:width-card desktop:width-card-lg no-print">
+        {authenticated && (
         <>
           <div className="width-full smart-hub-sitenav-separator--after">
             <div role="complementary" className="padding-2 smart-hub-sitenav-word-wrap--break">
@@ -80,7 +95,8 @@ const SiteNav = ({
             </div>
           </nav>
         </>
-      )}
+        )}
+      </div>
     </div>
   );
 };
@@ -91,6 +107,7 @@ SiteNav.propTypes = {
   authenticated: PropTypes.bool,
   logout: PropTypes.func,
   user: PropTypes.shape({ name: PropTypes.string, email: PropTypes.string }),
+  location: PropTypes.shape({ pathname: PropTypes.string }).isRequired,
 };
 
 SiteNav.defaultProps = {
@@ -103,4 +120,4 @@ SiteNav.defaultProps = {
   },
 };
 
-export default SiteNav;
+export default withRouter(SiteNav);

frontend/src/pages/Landing/RegionalSelect.js

@@ -115,11 +115,19 @@ function RegionalSelect(props) {
   };
 
   CustomOption.propTypes = {
-    data: PropTypes.object.isRequired,
-    innerRef: PropTypes.string.isRequired,
+    data: PropTypes.shape({
+      value: PropTypes.number,
+      label: PropTypes.string,
+    }),
+    innerRef: PropTypes.func,
     innerProps: PropTypes.object.isRequired,
   };
 
+  CustomOption.defaultProps = {
+    data: {},
+    innerRef: () => 0,
+  };
+
   const options = [...getUserOptions(regions), { custom: true }];
   return (
     <Select

frontend/src/pages/Landing/index.css

@@ -2,6 +2,10 @@
   font-family: 'Merriweather', serif;
 }
 
+.fba-modal .fba-modal-dialog {
+  margin-top: 120px;
+}
+
 .pagination {
   float: right;
   white-space: nowrap;

frontend/src/pages/Landing/mocks.js

@@ -302,10 +302,9 @@ export const generateXFakeReports = (count) => {
 export const overviewRegionOne = {
   numReports: '1',
   numGrants: '2',
+  numNonGrantees: '2',
   numTotalGrants: '4',
   numParticipants: '3',
-  sumTrainingDuration: '5.0',
-  sumTaDuration: '1.0',
   sumDuration: '0.5',
 };
 

frontend/src/setupTests.js

@@ -15,4 +15,4 @@ import MutationObserver from '@sheerun/mutationobserver-shim';
 
 window.MutationObserver = MutationObserver;
 
-jest.setTimeout(10000);
+jest.setTimeout(30000);

frontend/src/widgets/Overview.css

@@ -9,8 +9,7 @@
 }
 
 .smart-hub--overview-data {
-  margin-left: -20px;
-  margin-bottom: -20px;
+  margin-left: -36px !important;
 }
 
 .smart-hub--overview-nowrap {

frontend/src/widgets/Overview.js

@@ -21,13 +21,17 @@ function Field({
 Field.propTypes = {
   label: PropTypes.string.isRequired,
   labelExt: PropTypes.string,
-  data: PropTypes.string.isRequired,
-  col: PropTypes.number,
+  data: PropTypes.string,
+  col: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
 };
 
 Field.defaultProps = {
   labelExt: '',
   col: 2,
+  data: '',
 };
 
 /*
@@ -49,15 +53,14 @@ function Overview({ data, region }) {
           {' '}
           TTA Overview
         </h2>
-        <span className="smart-hub--overview-period"> 3/17/21 to Today</span>
+        <span className="smart-hub--overview-period"> 9/15/2020 to Today</span>
       </Grid>
-      <Grid row className="smart-hub--overview-data">
-        <Field label="Grants served " labelExt={`(of ${data.numTotalGrants})`} data={data.numGrants} />
-        <Field label="Activity reports" data={data.numReports} />
-        <Field label="Participants" data={data.numParticipants} />
-        <Field label="Hours of Training" data={data.sumTrainingDuration} />
-        <Field label="Hours of TA" data={data.sumTaDuration} />
-        <Field label="Hours of TTA" data={data.sumDuration} />
+      <Grid row gap className="smart-hub--overview-data">
+        <Field col="fill" tablet={{ col: true }} label="Grants served " labelExt={`(of ${data.numTotalGrants})`} data={data.numGrants} />
+        <Field col="fill" label="Non-grantees served" data={data.numNonGrantees} />
+        <Field col="fill" label="Activity reports" data={data.numReports} />
+        <Field col="fill" label="Participants" data={data.numParticipants} />
+        <Field col={2} label="Hours of TTA" data={data.sumDuration} />
       </Grid>
     </Container>
   );
@@ -67,10 +70,9 @@ Overview.propTypes = {
   data: PropTypes.shape({
     numReports: PropTypes.string,
     numGrants: PropTypes.string,
+    numNonGrantees: PropTypes.string,
     numTotalGrants: PropTypes.string,
     numParticipants: PropTypes.string,
-    sumTrainingDuration: PropTypes.string,
-    sumTaDuration: PropTypes.string,
     sumDuration: PropTypes.string,
   }).isRequired,
   region: PropTypes.number.isRequired,