Cleaning up PR and simplifying code

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

@@ -3,6 +3,7 @@ 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';
@@ -37,6 +38,17 @@ describe('MPD Health Indicator Page', () => {
   it('should show initial financial accounts page', async () => {
     const { findByText } = render(<Components />);
 
-    expect(await findByText('content')).toBeInTheDocument();
+    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();
   });
 });

src/components/Coaching/CoachingDetail/CoachingDetail.tsx

@@ -13,7 +13,6 @@ import {
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import DonationHistories from 'src/components/Dashboard/DonationHistories';
-import MonthlyGoal from 'src/components/Dashboard/MonthlyGoal/MonthlyGoal';
 import { useGetTaskAnalyticsQuery } from 'src/components/Dashboard/ThisWeek/NewsletterMenu/NewsletterMenu.generated';
 import { navBarHeight } from 'src/components/Layouts/Primary/Primary';
 import { useGetDonationGraphQuery } from 'src/components/Reports/DonationsReport/GetDonationGraph.generated';
@@ -214,9 +213,6 @@ export const CoachingDetail: React.FC<CoachingDetailProps> = ({
                 }
                 currencyCode={accountListData?.currency}
               />
-
-              <MonthlyGoal accountListId={accountListId} />
-
               <MonthlyCommitment
                 coachingId={accountListId}
                 accountListType={accountListType}

src/components/Reports/HealthIndicatorReport/HealthIndicatorFormula/HealthIndicatorFormula.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, SetStateAction, useEffect } from 'react';
 import { Box, Card, Skeleton, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { DateTime } from 'luxon';
@@ -15,11 +15,13 @@ const StyledBox = styled(Box)(({ theme }) => ({
 
 interface HealthIndicatorFormulaProps {
   accountListId: string;
+  noHealthIndicatorData: boolean;
   setNoHealthIndicatorData: Dispatch<SetStateAction<boolean>>;
 }
 
 export const HealthIndicatorFormula: React.FC<HealthIndicatorFormulaProps> = ({
   accountListId,
+  noHealthIndicatorData,
   setNoHealthIndicatorData,
 }) => {
   const { t } = useTranslation();
@@ -31,29 +33,34 @@ export const HealthIndicatorFormula: React.FC<HealthIndicatorFormulaProps> = ({
     },
   });
 
+  useEffect(() => {
+    if (!data?.healthIndicatorData?.length && !loading) {
+      setNoHealthIndicatorData(true);
+    }
+  }, [data, loading]);
+
   const latestMpdHealthData = data?.healthIndicatorData[0];
 
-  if (!data?.healthIndicatorData?.length && !loading) {
-    setNoHealthIndicatorData(true);
+  if (noHealthIndicatorData) {
     return null;
   }
 
   return (
     <Card sx={{ padding: 3 }}>
       <Typography variant="h6" mb={2}>
-        {t('MPD Health')} = [({t('Ownership')} * 3) + ({t('Success')} * 2) + (
-        {t('Consistency')} * 1) + ({t('Depth')} * 1)] / 7
+        {t('MPD Health')} = [({t('Ownership')} x 3) + ({t('Success')} * 2) + (
+        {t('Consistency')} x 1) + ({t('Depth')} x 1)] / 7
       </Typography>
       <Box pl={2}>
         <FormulaItem
           name={t('Ownership')}
-          explanation={t('% of Self-raised Funds over Total Funds')}
+          explanation={t('% of Self-raised funds over total funds')}
           value={latestMpdHealthData?.ownershipHi ?? 0}
           isLoading={loading}
         />
         <FormulaItem
           name={t('Success')}
-          explanation={t('% of Self-raised Funds over Support Goal')}
+          explanation={t('% of Self-raised funds over support goal')}
           value={latestMpdHealthData?.successHi ?? 0}
           isLoading={loading}
         />
@@ -92,7 +99,7 @@ const FormulaItem: React.FC<FormulaItemProps> = ({
       <Skeleton width={'60px'} height={'42px'} />
     ) : (
       <Typography variant="h4" color="primary" fontWeight="bold" width={'60px'}>
-        {isLoading ? <Skeleton></Skeleton> : value}
+        {value}
       </Typography>
     )}
     <Box width={'calc(100% - 60px)'} display="flex" gap={0.7}>

src/components/Reports/HealthIndicatorReport/HealthIndicatorReport.tsx

@@ -79,6 +79,7 @@ export const HealthIndicatorReport: React.FC<HealthIndicatorReportProps> = ({
 
               <HealthIndicatorFormula
                 accountListId={accountListId}
+                noHealthIndicatorData={noHealthIndicatorData}
                 setNoHealthIndicatorData={setNoHealthIndicatorData}
               />
             </Grid>