QA dashboard overview FE

frontend/src/pages/QADashboard/__tests__/index.js

@@ -0,0 +1,56 @@
+/* eslint-disable max-len */
+import '@testing-library/jest-dom';
+import React from 'react';
+import { SCOPE_IDS } from '@ttahub/common';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import {
+  render,
+  screen,
+} from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+
+import QADashboard from '../index';
+import UserContext from '../../../UserContext';
+import AriaLiveContext from '../../../AriaLiveContext';
+
+const history = createMemoryHistory();
+const mockAnnounce = jest.fn();
+
+const defaultUser = {
+  homeRegionId: 14,
+  permissions: [{
+    regionId: 1,
+    scopeId: SCOPE_IDS.READ_ACTIVITY_REPORTS,
+  }, {
+    regionId: 2,
+    scopeId: SCOPE_IDS.READ_ACTIVITY_REPORTS,
+  }],
+};
+
+describe('Resource Dashboard page', () => {
+  afterEach(() => fetchMock.restore());
+  const renderQADashboard = (user) => {
+    render(
+      <UserContext.Provider value={{ user }}>
+        <AriaLiveContext.Provider value={{ announce: mockAnnounce }}>
+          <Router history={history}>
+            <QADashboard user={user} />
+          </Router>
+        </AriaLiveContext.Provider>
+      </UserContext.Provider>,
+    );
+  };
+
+  it('renders correctly', async () => {
+    renderQADashboard(defaultUser);
+
+    // Header
+    expect(await screen.findByText('Quality assurance dashboard')).toBeVisible();
+
+    // Overview
+    expect(await screen.findByText('Recipients with no TTA')).toBeVisible();
+    expect(await screen.findByText('Recipients with OHS standard FEI goal')).toBeVisible();
+    expect(await screen.findByText('Recipients with OHS standard CLASS goal')).toBeVisible();
+  });
+});

frontend/src/pages/QADashboard/index.js

@@ -1,7 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
+import { Grid, Alert } from '@trussworks/react-uswds';
+import QAOverview from '../../widgets/QualityAssuranceDashboardOverview';
 
 export default function QADashboard() {
+  const [error] = useState(null);
+
   return (
     <>
       <Helmet>
@@ -11,6 +15,21 @@ export default function QADashboard() {
         <h1 className="landing margin-top-0 margin-bottom-3">
           Quality assurance dashboard
         </h1>
+        <Grid row>
+          {error && (
+          <Alert className="margin-bottom-2" type="error" role="alert">
+            {error}
+          </Alert>
+          )}
+        </Grid>
+        <QAOverview
+          data={{
+            recipientsWithNoTTA: { pct: '2.52%', filterApplicable: true },
+            recipientsWithOhsStandardFeiGoals: { pct: '73.25%', filterApplicable: false },
+            recipientsWithOhsStandardClass: { pct: '14.26%', filterApplicable: false },
+          }}
+          loading={false}
+        />
       </div>
     </>
   );

frontend/src/pages/RecipientRecord/pages/__tests__/TTAHistory.js

@@ -65,7 +65,7 @@ describe('Recipient Record - TTA History', () => {
 
   it('renders the TTA History page appropriately', async () => {
     act(() => renderTTAHistory());
-    const overview = document.querySelector('.smart-hub--dashboard-overview');
+    const overview = document.querySelector('.smart-hub--dashboard-overview-container');
     expect(overview).toBeTruthy();
   });
 

frontend/src/pages/RegionalDashboard/components/__tests__/TrainingReportDashboard.js

@@ -42,7 +42,7 @@ describe('Training report Dashboard page', () => {
     expect(fetchMock.calls(hoursOfTrainingUrl)).toHaveLength(1);
     expect(fetchMock.calls(sessionsByTopicUrl)).toHaveLength(1);
 
-    expect(document.querySelector('.smart-hub--dashboard-overview')).toBeTruthy();
+    expect(document.querySelector('.smart-hub--dashboard-overview-container')).toBeTruthy();
 
     expect(screen.getByText('Reasons in Training Reports')).toBeInTheDocument();
     expect(screen.getByText('Hours of training by National Center')).toBeInTheDocument();

frontend/src/pages/ResourcesDashboard/index.js

@@ -302,14 +302,6 @@ export default function ResourcesDashboard() {
       <ResourcesDashboardOverview
         data={resourcesData.resourcesDashboardOverview}
         loading={isLoading}
-        fields={[
-          'Reports with resources',
-          'ECLKC Resources',
-          'Recipients reached',
-          'Participants reached',
-          'Reports citing iPD courses',
-        ]}
-        showTooltips
       />
       <ResourceUse
         data={resourcesData.resourcesUse}

frontend/src/widgets/DashboardOverview.js

@@ -7,9 +7,9 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import withWidgetData from './withWidgetData';
 import './DashboardOverview.css';
-import Loader from '../components/Loader';
-import Tooltip from '../components/Tooltip';
 import colors from '../colors';
+import { DashboardOverviewContainer } from './DashboardOverviewContainer';
+import Tooltip from '../components/Tooltip';
 
 export function Field({
   label,
@@ -62,116 +62,104 @@ Field.defaultProps = {
   showTooltip: false,
 };
 
-const DASHBOARD_FIELDS = {
-  'Activity reports': {
-    render: (data, showTooltip) => (
-      <Field
-        key="activity-reports"
-        showTooltip={showTooltip}
-        tooltipText="The number of approved activity reports."
-        icon={faChartColumn}
-        iconColor={colors.success}
-        backgroundColor={colors.successLighter}
-        label="Activity reports"
-        data={data.numReports}
-      />
-    ),
+const getDashboardFields = (data, showTooltip) => ([
+  {
+    lookUpKey: 'Activity reports',
+    key: 'activity-reports',
+    showTooltip,
+    tooltipText: 'The number of approved activity reports.',
+    icon: faChartColumn,
+    iconColor: colors.success,
+    backgroundColor: colors.successLighter,
+    label1: 'Activity reports',
+    data: data.numReports,
   },
-  'Training reports': {
-    render: (data, showTooltip) => (
-      <Field
-        key="training-reports"
-        showTooltip={showTooltip}
-        tooltipText="Training reports with a completed session"
-        icon={faChartColumn}
-        iconColor={colors.success}
-        backgroundColor={colors.successLighter}
-        label={`across ${data.numReports} Training Reports`}
-        data={`${data.numSessions} sessions`}
-      />
-    ),
+  {
+    lookUpKey: 'Training reports',
+    key: 'training-reports',
+    showTooltip,
+    tooltipText: 'Training reports with a completed session',
+    icon: faChartColumn,
+    iconColor: colors.success,
+    backgroundColor: colors.successLighter,
+    label1: `across ${data.numReports} Training Reports`,
+    data: `${data.numSessions} sessions`,
   },
-  'Grants served': {
-    render: (data, showTooltip) => (
-      <Field
-        key="grants-served"
-        showTooltip={showTooltip}
-        icon={faBuilding}
-        iconColor={colors.ttahubMediumBlue}
-        backgroundColor={colors.ttahubBlueLight}
-        label="Grants served"
-        tooltipText="Each grant is only counted once"
-        data={data.numGrants}
-      />
-    ),
+  {
+    lookUpKey: 'Grants served',
+    key: 'grants-served',
+    showTooltip,
+    icon: faBuilding,
+    iconColor: colors.ttahubMediumBlue,
+    backgroundColor: colors.ttahubBlueLight,
+    label1: 'Grants served',
+    tooltipText: 'Each grant is only counted once',
+    data: data.numGrants,
   },
-  Participants: {
-    render: (data, showTooltip) => (
-      <Field
-        key="participants"
-        showTooltip={showTooltip}
-        tooltipText="The number of people in all activities"
-        icon={faUserFriends}
-        iconColor={colors.ttahubBlue}
-        backgroundColor={colors.ttahubBlueLighter}
-        label="Participants"
-        data={data.numParticipants}
-      />
-    ),
+  {
+    lookUpKey: 'Participants',
+    key: 'participants',
+    showTooltip,
+    tooltipText: 'The number of people in all activities',
+    icon: faUserFriends,
+    iconColor: colors.ttahubBlue,
+    backgroundColor: colors.ttahubBlueLighter,
+    label1: 'Participants',
+    data: data.numParticipants,
   },
-  'Hours of TTA': {
-    render: (data, showTooltip) => (
-      <Field
-        key="hours-of-tta"
-        showTooltip={showTooltip}
-        tooltipText="Rounded to the nearest half hour"
-        icon={faClock}
-        iconColor={colors.ttahubOrange}
-        backgroundColor={colors.ttahubOrangeLight}
-        label="Hours of TTA"
-        data={data.sumDuration}
-        decimalPlaces={1}
-      />
-    ),
+  {
+    lookUpKey: 'Hours of TTA',
+    key: 'hours-of-tta',
+    showTooltip,
+    tooltipText: 'Rounded to the nearest half hour',
+    icon: faClock,
+    iconColor: colors.ttahubOrange,
+    backgroundColor: colors.ttahubOrangeLight,
+    label1: 'Hours of TTA',
+    data: data.sumDuration,
+    decimalPlaces: 1,
   },
-  'In person activities': {
-    render: (data, showTooltip) => (
-      <Field
-        key="in-person-activities"
-        icon={faUser}
-        showTooltip={showTooltip}
-        tooltipText="Excludes virtual activities"
-        iconColor={colors.ttahubMagenta}
-        backgroundColor={colors.ttahubMagentaLight}
-        label="In person activities"
-        data={data.inPerson}
-      />
-    ),
+  {
+    lookUpKey: 'In person activities',
+    key: 'in-person-activities',
+    icon: faUser,
+    showTooltip,
+    tooltipText: 'Excludes virtual activities',
+    iconColor: colors.ttahubMagenta,
+    backgroundColor: colors.ttahubMagentaLight,
+    label1: 'In person activities',
+    data: data.inPerson,
   },
-  'Recipients served': {
-    render: (data, showTooltip) => (
-      <Field
-        key="recipients-served"
-        icon={faUser}
-        showTooltip={showTooltip}
-        label={`${data.numRecipients} ${data.numRecipients === 1 ? 'Recipient' : 'Recipients'} of ${data.totalRecipients}`}
-        iconColor={colors.ttahubMagenta}
-        backgroundColor={colors.ttahubMagentaLight}
-        tooltipText="Recipients have at least one active grant"
-        data={data.recipientPercentage}
-      />
-    ),
+  {
+    lookUpKey: 'Recipients served',
+    key: 'recipients-served',
+    icon: faUser,
+    showTooltip,
+    label1: `${data.numRecipients} ${data.numRecipients === 1 ? 'Recipient' : 'Recipients'} of ${data.totalRecipients}`,
+    iconColor: colors.ttahubMagenta,
+    backgroundColor: colors.ttahubMagentaLight,
+    tooltipText: 'Recipients have at least one active grant',
+    data: data.recipientPercentage,
   },
-};
+]);
 
 export function DashboardOverviewWidget({
   data, loading, fields, showTooltips,
 }) {
+  // Get the fields we need while maintaining the order.
+  const fieldsToDisplay = fields.map(
+    (field) => getDashboardFields(
+      data, showTooltips,
+    ).find(
+      (f) => f.lookUpKey === field,
+    ),
+  ).filter(Boolean);
+
   return (
-    <Grid row className="smart-hub--dashboard-overview margin-bottom-3 position-relative">
-      <Loader loading={loading} loadingLabel="Overview loading" />
-      { fields.map((field) => DASHBOARD_FIELDS[field].render(data, showTooltips, field)) }
-    </Grid>
+    <DashboardOverviewContainer
+      fieldData={fieldsToDisplay}
+      loading={loading}
+    />
   );
 }