Health Indicator

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   # Use production API for codegen to make sure production is compatible with the code to be merged
-  API_URL: 'https://api.mpdx.org/graphql'
+  API_URL: 'https://api.stage.mpdx.org/graphql' # TODO: Revert this before merging!
   SITE_URL: 'http://stage.mpdx.org'
 
 jobs:

__tests__/util/setup.ts

@@ -60,6 +60,12 @@ Object.defineProperty(window, 'location', {
 
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
+window.ResizeObserver = jest.fn().mockReturnValue({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+});
+
 window.URL.revokeObjectURL = jest.fn();
 
 beforeEach(() => {

graphql.config.json

@@ -0,0 +1,4 @@
+{
+  "schema": "src/graphql/schema.graphql",
+  "documents": "**/*.graphql"
+}

pages/404.page.tsx

@@ -8,7 +8,7 @@ import BaseLayout from 'src/components/Layouts/Basic';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
 
 const BoxWrapper = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.cruGrayLight.main,
+  backgroundColor: theme.palette.mpdxGrayLight.main,
   height: 300,
   minWidth: 700,
   margin: 'auto',

pages/500.page.tsx

@@ -8,7 +8,7 @@ import BaseLayout from 'src/components/Layouts/Basic';
 import useGetAppSettings from 'src/hooks/useGetAppSettings';
 
 const BoxWrapper = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.cruGrayLight.main,
+  backgroundColor: theme.palette.mpdxGrayLight.main,
   height: 300,
   minWidth: 700,
   margin: 'auto',

pages/GetAccountLists.graphql

@@ -8,9 +8,15 @@ query GetAccountLists {
       id
       name
       monthlyGoal
+      monthlyGoalUpdatedAt
       receivedPledges
       totalPledges
       currency
+      healthIndicatorData {
+        id
+        machineCalculatedGoal
+        machineCalculatedGoalCurrency
+      }
     }
   }
 }

pages/accountLists/GetDashboard.graphql

@@ -1,11 +1,13 @@
-query GetDashboard($accountListId: ID!) {
+query GetDashboard($accountListId: ID!, $periodBegin: ISO8601Date!) {
   user {
+    id
     firstName
   }
   accountList(id: $accountListId) {
     id
     name
     monthlyGoal
+    monthlyGoalUpdatedAt
     receivedPledges
     totalPledges
     currency
@@ -21,11 +23,19 @@ query GetDashboard($accountListId: ID!) {
     averageIgnoreCurrent
     periods {
       startDate
+      endDate
       convertedTotal
       totals {
         currency
         convertedAmount
       }
     }
   }
+  healthIndicatorData(accountListId: $accountListId, beginDate: $periodBegin) {
+    id
+    indicationPeriodBegin
+    machineCalculatedGoal
+    machineCalculatedGoalCurrency
+    staffEnteredGoal
+  }
 }

pages/accountLists/[accountListId].page.test.tsx

@@ -79,6 +79,7 @@ describe('AccountListsId page', () => {
             contacts: {
               totalCount: 5,
             },
+            healthIndicatorData: [],
           },
         }),
       });

pages/accountLists/[accountListId].page.tsx

@@ -1,6 +1,7 @@
 import Head from 'next/head';
 import React, { ReactElement, useEffect, useState } from 'react';
 import { ApolloError } from '@apollo/client';
+import { DateTime } from 'luxon';
 import {
   GetDefaultAccountDocument,
   GetDefaultAccountQuery,
@@ -106,6 +107,10 @@ export const getServerSideProps = makeGetServerSideProps(
         query: GetDashboardDocument,
         variables: {
           accountListId: query.accountListId,
+          periodBegin: DateTime.now()
+            .startOf('month')
+            .minus({ years: 1 })
+            .toISODate(),
           // TODO: implement these variables in query
           // endOfDay: DateTime.local().endOf('day').toISO(),
           // today: DateTime.local().endOf('day').toISODate(),

pages/accountLists/[accountListId]/reports/healthIndicator/index.page.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SnackbarProvider } from 'notistack';
+import { I18nextProvider } from 'react-i18next';
+import TestRouter from '__tests__/util/TestRouter';
+import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import i18n from 'src/lib/i18n';
+import theme from 'src/theme';
+import HealthIndicatorPage from './index.page';
+
+const accountListId = 'account-list-1';
+const router = {
+  query: { accountListId },
+  isReady: true,
+};
+
+const Components = () => (
+  <I18nextProvider i18n={i18n}>
+    <LocalizationProvider dateAdapter={AdapterLuxon}>
+      <SnackbarProvider>
+        <ThemeProvider theme={theme}>
+          <TestRouter router={router}>
+            <GqlMockedProvider>
+              <HealthIndicatorPage />
+            </GqlMockedProvider>
+          </TestRouter>
+        </ThemeProvider>
+      </SnackbarProvider>
+    </LocalizationProvider>
+  </I18nextProvider>
+);
+
+describe('MPD Health Indicator Page', () => {
+  it('should show initial financial accounts page', async () => {
+    const { findByText } = render(<Components />);
+
+    expect(await findByText('Overall Staff MPD Health')).toBeInTheDocument();
+  });
+
+  it('should open and close  menu', async () => {
+    const { findByRole, getByRole, queryByRole } = render(<Components />);
+
+    userEvent.click(
+      await findByRole('button', { name: 'Toggle Navigation Panel' }),
+    );
+    expect(getByRole('heading', { name: 'Reports' })).toBeInTheDocument();
+    userEvent.click(getByRole('img', { name: 'Close' }));
+    expect(queryByRole('heading', { name: 'Reports' })).not.toBeInTheDocument();
+  });
+});

pages/accountLists/[accountListId]/reports/healthIndicator/index.page.tsx

@@ -0,0 +1,66 @@
+import Head from 'next/head';
+import React, { useState } from 'react';
+import { Box } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { ensureSessionAndAccountList } from 'pages/api/utils/pagePropsHelpers';
+import { SidePanelsLayout } from 'src/components/Layouts/SidePanelsLayout';
+import Loading from 'src/components/Loading';
+import { HealthIndicatorReport } from 'src/components/Reports/HealthIndicatorReport/HealthIndicatorReport';
+import { headerHeight } from 'src/components/Shared/Header/ListHeader';
+import {
+  MultiPageMenu,
+  NavTypeEnum,
+} from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenu';
+import { useAccountListId } from 'src/hooks/useAccountListId';
+import useGetAppSettings from 'src/hooks/useGetAppSettings';
+
+const HealthIndicatorPage: React.FC = () => {
+  const { t } = useTranslation();
+  const accountListId = useAccountListId();
+  const { appName } = useGetAppSettings();
+  const [navListOpen, setNavListOpen] = useState(false);
+
+  const handleNavListToggle = () => {
+    setNavListOpen(!navListOpen);
+  };
+  return (
+    <>
+      <Head>
+        <title>{`${appName} | ${t('Reports - MPD Health')}`}</title>
+      </Head>
+
+      {accountListId ? (
+        <Box sx={{ background: 'common.white' }}>
+          <SidePanelsLayout
+            headerHeight={headerHeight}
+            isScrollBox={false}
+            leftOpen={navListOpen}
+            leftWidth="290px"
+            mainContent={
+              <HealthIndicatorReport
+                accountListId={accountListId}
+                isNavListOpen={navListOpen}
+                onNavListToggle={handleNavListToggle}
+                title={t('Overall Staff MPD Health')}
+              />
+            }
+            leftPanel={
+              <MultiPageMenu
+                isOpen={navListOpen}
+                selectedId="healthIndicator"
+                onClose={handleNavListToggle}
+                navType={NavTypeEnum.Reports}
+              />
+            }
+          />
+        </Box>
+      ) : (
+        <Loading loading />
+      )}
+    </>
+  );
+};
+
+export const getServerSideProps = ensureSessionAndAccountList;
+
+export default HealthIndicatorPage;

pages/accountLists/[accountListId]/settings/preferences.page.test.tsx

@@ -15,6 +15,7 @@ import {
 } from 'src/components/Settings/preferences/GetAccountPreferences.generated';
 import { GetPersonalPreferencesQuery } from 'src/components/Settings/preferences/GetPersonalPreferences.generated';
 import { GetProfileInfoQuery } from 'src/components/Settings/preferences/GetProfileInfo.generated';
+import { MachineCalculatedGoalQuery } from 'src/components/Settings/preferences/accordions/MonthlyGoalAccordion/MachineCalculatedGoal.generated';
 import { TestSetupProvider } from 'src/components/Setup/SetupProvider';
 import theme from 'src/theme';
 import Preferences from './preferences.page';
@@ -68,6 +69,7 @@ const MocksProviders: React.FC<MocksProvidersProps> = ({
         GetPersonalPreferences: GetPersonalPreferencesQuery;
         GetProfileInfo: GetProfileInfoQuery;
         CanUserExportData: CanUserExportDataQuery;
+        MachineCalculatedGoal: MachineCalculatedGoalQuery;
       }>
         mocks={{
           GetAccountPreferences: {
@@ -79,10 +81,10 @@ const MocksProviders: React.FC<MocksProvidersProps> = ({
               name: 'test',
               activeMpdMonthlyGoal: null,
               activeMpdFinishAt: null,
+              currency: 'USD',
               activeMpdStartAt: null,
               salaryOrganizationId: null,
               settings: {
-                currency: 'USD',
                 homeCountry: 'USA',
                 monthlyGoal: 100,
                 tester: true,
@@ -132,6 +134,11 @@ const MocksProviders: React.FC<MocksProvidersProps> = ({
               exportedAt: null,
             },
           },
+          MachineCalculatedGoal: {
+            accountList: {
+              healthIndicatorData: null,
+            },
+          },
         }}
         onCall={mutationSpy}
       >

pages/accountLists/[accountListId]/settings/preferences.page.tsx

@@ -248,73 +248,71 @@
                 accountPreferencesData?.accountList?.settings?.monthlyGoal ||
                 null
               }
-              accountListId={accountListId}
-              currency={
-                accountPreferencesData?.accountList?.settings?.currency || ''
+              monthlyGoalUpdatedAt={
+                accountPreferencesData?.accountList?.monthlyGoalUpdatedAt ??
+                null
               }
+              accountListId={accountListId}
+              currency={accountPreferencesData?.accountList?.currency || null}
               disabled={onSetupTour && setup !== 1}
               handleSetupChange={handleSetupChange}
             />
             <HomeCountryAccordion
               handleAccordionChange={setExpandedAccordion}
               expandedAccordion={expandedAccordion}
               homeCountry={
                 accountPreferencesData?.accountList?.settings?.homeCountry || ''
               }
               accountListId={accountListId}
               countries={countries}
               disabled={onSetupTour && setup !== 2}
               handleSetupChange={handleSetupChange}
             />
             <CurrencyAccordion
               handleAccordionChange={setExpandedAccordion}
               expandedAccordion={expandedAccordion}
-              currency={
-                accountPreferencesData?.accountList?.settings?.currency || ''
-              }
+              currency={accountPreferencesData?.accountList?.currency || null}
               accountListId={accountListId}
               disabled={onSetupTour}
             />
             {userOrganizationAccountsData?.userOrganizationAccounts &&
               userOrganizationAccountsData?.userOrganizationAccounts?.length >
                 1 && (
                 <PrimaryOrgAccordion
                   handleAccordionChange={setExpandedAccordion}
                   expandedAccordion={expandedAccordion}
                   organizations={userOrganizationAccountsData}
                   salaryOrganizationId={
                     accountPreferencesData?.accountList?.salaryOrganizationId ||
                     ''
                   }
                   accountListId={accountListId}
                   disabled={onSetupTour}
                 />
               )}
             <EarlyAdopterAccordion
               handleAccordionChange={setExpandedAccordion}
               expandedAccordion={expandedAccordion}
               tester={
                 accountPreferencesData?.accountList?.settings?.tester || false
               }
               accountListId={accountListId}
               disabled={onSetupTour}
             />
             <MpdInfoAccordion
               handleAccordionChange={setExpandedAccordion}
               expandedAccordion={expandedAccordion}
               activeMpdStartAt={
                 accountPreferencesData?.accountList?.activeMpdStartAt || ''
               }
               activeMpdFinishAt={
                 accountPreferencesData?.accountList?.activeMpdFinishAt || ''
               }
               activeMpdMonthlyGoal={
                 accountPreferencesData?.accountList?.activeMpdMonthlyGoal ||
                 null
               }
-              currency={
-                accountPreferencesData?.accountList?.settings?.currency || ''
-              }
+              currency={accountPreferencesData?.accountList?.currency || ''}
               accountListId={accountListId}
               disabled={onSetupTour}
             />

pages/api/Schema/CoachingAnswerSets/dataHandler.ts

@@ -3,8 +3,7 @@ import {
   CoachingAnswerSet,
   CoachingQuestion,
 } from 'src/graphql/types.generated';
-
-const isNotNull = <T>(item: T | null): item is T => item !== null;
+import { isNotNullish } from 'src/lib/typeGuards';
 
 interface CoachingAnswerSetData {
   id: string;
@@ -77,10 +76,10 @@ const parseCoachingAnswerSet = (
   };
   const answers = relationships.answers.data
     .map(({ id }) => getIncludedAnswer(id, included))
-    .filter(isNotNull);
+    .filter(isNotNullish);
   const questions = relationships.questions.data
     .map(({ id }) => getIncludedQuestion(id, included))
-    .filter(isNotNull);
+    .filter(isNotNullish);
 
   return {
     id,

pages/logout.page.tsx

@@ -11,7 +11,7 @@ import { clearDataDogUser } from 'src/lib/dataDog';
 import { ensureSessionAndAccountList } from './api/utils/pagePropsHelpers';
 
 const BoxWrapper = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.cruGrayLight.main,
+  backgroundColor: theme.palette.mpdxGrayLight.main,
   height: 300,
   minWidth: 700,
   margin: 'auto',