[MPDX-7854] Add links to new coaching page

src/components/Coaching/CoachingRow/CoachingRow.tsx

@@ -1,11 +1,12 @@
+import NextLink from 'next/link';
 import React, { useState } from 'react';
 import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import { Link } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
-import HandoffLink from 'src/components/HandoffLink';
 import { useUser } from 'src/hooks/useUser';
 import { Confirmation } from '../../common/Modal/Confirmation/Confirmation';
 import { AppealProgress } from '../AppealProgress/AppealProgress';
@@ -30,7 +31,10 @@ const CoachingNameText = styled(Typography)(({ theme }) => ({
   display: 'flex',
 }));
 
-export const CoachingRow: React.FC<Props> = ({ coachingAccount }) => {
+export const CoachingRow: React.FC<Props> = ({
+  coachingAccount,
+  accountListId,
+}) => {
   const user = useUser();
   const {
     id,
@@ -62,36 +66,42 @@ export const CoachingRow: React.FC<Props> = ({ coachingAccount }) => {
 
   return (
     <>
-      <HandoffLink path={`/coaches/${id}`}>
-        <CoachingRowWrapper role="listitem">
-          <CoachingNameText variant="h6" color="primary">
-            <Box flex={1}>{name}</Box>
-            <Button
-              onClick={(event) => {
-                event.preventDefault();
-                setConfirmingDelete(true);
-              }}
-              aria-label={t('Remove Access')}
-            >
-              <VisibilityOff />
-            </Button>
-          </CoachingNameText>
-          <AppealProgress
-            currency={currency}
-            goal={calculatedMonthlyGoal}
-            received={receivedPledges}
-            pledged={totalPledges}
-            isPrimary={false}
-          />
-          <AppealProgress
-            currency={appealCurrencyCode}
-            goal={primaryAppeal?.amount ?? 0}
-            received={primaryAppeal?.pledgesAmountProcessed}
-            pledged={primaryAppeal?.pledgesAmountTotal}
-            isPrimary={true}
-          />
-        </CoachingRowWrapper>
-      </HandoffLink>
+      <CoachingRowWrapper role="listitem">
+        <CoachingNameText variant="h6" color="primary">
+          <NextLink
+            href={{
+              pathname: '/accountLists/[accountListId]/coaching/[coachingId]',
+              query: { accountListId: accountListId, coachingId: id },
+            }}
+            passHref
+          >
+            <Link flex={1}>{name}</Link>
+          </NextLink>
+          <Button
+            onClick={(event) => {
+              event.preventDefault();
+              setConfirmingDelete(true);
+            }}
+            aria-label={t('Remove Access')}
+          >
+            <VisibilityOff />
+          </Button>
+        </CoachingNameText>
+        <AppealProgress
+          currency={currency}
+          goal={calculatedMonthlyGoal}
+          received={receivedPledges}
+          pledged={totalPledges}
+          isPrimary={false}
+        />
+        <AppealProgress
+          currency={appealCurrencyCode}
+          goal={primaryAppeal?.amount ?? 0}
+          received={primaryAppeal?.pledgesAmountProcessed}
+          pledged={primaryAppeal?.pledgesAmountTotal}
+          isPrimary={true}
+        />
+      </CoachingRowWrapper>
       <Confirmation
         isOpen={confirmingDelete}
         title={t('Confirm Remove Access')}

src/components/Dashboard/ThisWeek/WeeklyActivity/WeeklyActivity.test.tsx

@@ -11,10 +11,12 @@ import {
 } from './WeeklyActivity.mock';
 import WeeklyActivity from '.';
 
+const accountListId = 'abc';
+
 jest.mock('next/router', () => ({
   useRouter: () => {
     return {
-      query: { accountListId: 'abc' },
+      query: { accountListId },
       isReady: true,
     };
   },
@@ -28,7 +30,7 @@ describe('WeeklyActivity', () => {
           mocks={GetWeeklyActivityQueryLoadingMocks()}
           addTypename={false}
         >
-          <WeeklyActivity accountListId="abc" />
+          <WeeklyActivity accountListId={accountListId} />
         </MockedProvider>
       </SnackbarProvider>,
     );
@@ -66,7 +68,7 @@ describe('WeeklyActivity', () => {
           mocks={GetWeeklyActivityQueryDefaultMocks()}
           addTypename={false}
         >
-          <WeeklyActivity accountListId="abc" />
+          <WeeklyActivity accountListId={accountListId} />
         </MockedProvider>
       </SnackbarProvider>,
     );
@@ -126,7 +128,7 @@ describe('WeeklyActivity', () => {
       getByRole('link', { hidden: true, name: 'View Activity Detail' }),
     ).toHaveAttribute(
       'href',
-      `https://${process.env.REWRITE_DOMAIN}/reports/coaching`,
+      `/accountLists/${accountListId}/reports/coaching`,
     );
   });
 
@@ -138,7 +140,7 @@ describe('WeeklyActivity', () => {
             mocks={GetWeeklyActivityQueryDefaultMocks()}
             addTypename={false}
           >
-            <WeeklyActivity accountListId="abc" />
+            <WeeklyActivity accountListId={accountListId} />
           </MockedProvider>
         </ThemeProvider>
       </SnackbarProvider>,

src/components/Dashboard/ThisWeek/WeeklyActivity/WeeklyActivity.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import React, { ReactElement, useState } from 'react';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
@@ -22,7 +23,6 @@ import { makeStyles, withStyles } from 'tss-react/mui';
 import { useLocale } from 'src/hooks/useLocale';
 import { numberFormat } from '../../../../lib/intlFormat';
 import AnimatedCard from '../../../AnimatedCard';
-import HandoffLink from '../../../HandoffLink';
 import { useGetWeeklyActivityQuery } from './GetWeeklyActivity.generated';
 import { WeeklyReportModal } from './WeeklyReportModal/WeeklyReportModal';
 
@@ -247,11 +247,14 @@ const WeeklyActivity = ({ accountListId }: Props): ReactElement => {
           </Table>
         </TableContainer>
         <CardActions sx={{ justifyContent: 'space-between' }}>
-          <HandoffLink path="/reports/coaching">
+          <Link
+            href={`/accountLists/${accountListId}/reports/coaching`}
+            passHref
+          >
             <Button size="small" color="primary">
               {t('View Activity Detail')}
             </Button>
-          </HandoffLink>
+          </Link>
           <Button size="small" color="primary" onClick={onWeeklyReportOpen}>
             {t('Fill out weekly report')}
           </Button>

src/components/Layouts/Primary/TopBar/Items/NavMenu/NavMenu.tsx

@@ -25,7 +25,6 @@ import { useCurrentToolId } from '../../../../../../hooks/useCurrentToolId';
 import theme from '../../../../../../theme';
 import { ToolsList } from '../../../../../Tool/Home/ToolList';
 import { useGetToolNotificationsQuery } from './GetToolNotifcations.generated';
-import { ReportLink } from './ReportLink';
 
 const useStyles = makeStyles()(() => ({
   navListItem: {
@@ -251,10 +250,9 @@ const NavMenu: React.FC = () => {
                 <ClickAwayListener onClickAway={handleReportsMenuClose}>
                   <MenuList autoFocusItem={reportsMenuOpen} id="menu-list-grow">
                     {reportNavItems.map(({ id, title }) => (
-                      <ReportLink
+                      <NextLink
                         key={id}
-                        id={id}
-                        accountListId={accountListId}
+                        href={`/accountLists/${accountListId}/reports/${id}`}
                       >
                         <MenuItem
                           onClick={handleReportsMenuClose}
@@ -265,7 +263,7 @@ const NavMenu: React.FC = () => {
                         >
                           <ListItemText primary={t(title)} />
                         </MenuItem>
-                      </ReportLink>
+                      </NextLink>
                     ))}
                   </MenuList>
                 </ClickAwayListener>

src/components/Shared/MultiPageLayout/MultiPageMenu/Item/Item.tsx

@@ -3,7 +3,6 @@ import React, { useMemo, useState } from 'react';
 import { ArrowForwardIos } from '@mui/icons-material';
 import { Collapse, ListItem, ListItemText } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import HandoffLink from 'src/components/HandoffLink';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import theme from 'src/theme';
 import { NavTypeEnum } from '../MultiPageMenu';
@@ -62,39 +61,35 @@ export const Item: React.FC<Props> = ({
     </ListItem>
   );
 
-  if (item.id === 'coaching') {
-    return <HandoffLink path={`/${navType}/coaching`}>{children}</HandoffLink>;
-  } else {
-    return (
-      <>
-        <NextLink
-          href={`/accountLists/${accountListId}/${navType}/${item.id}`}
-          scroll={false}
+  return (
+    <>
+      <NextLink
+        href={`/accountLists/${accountListId}/${navType}/${item.id}`}
+        scroll={false}
+      >
+        {children}
+      </NextLink>
+      {item?.subItems?.length && (
+        <Collapse
+          in={openSubMenu || isSelected}
+          timeout="auto"
+          unmountOnExit
+          style={{
+            background: theme.palette.cruGrayLight.main,
+          }}
         >
-          {children}
-        </NextLink>
-        {item?.subItems?.length && (
-          <Collapse
-            in={openSubMenu || isSelected}
-            timeout="auto"
-            unmountOnExit
-            style={{
-              background: theme.palette.cruGrayLight.main,
-            }}
-          >
-            {item.subItems.map((subItem) => {
-              return (
-                <Item
-                  key={subItem.id}
-                  item={subItem}
-                  selectedId={selectedId}
-                  navType={navType}
-                />
-              );
-            })}
-          </Collapse>
-        )}
-      </>
-    );
-  }
+          {item.subItems.map((subItem) => {
+            return (
+              <Item
+                key={subItem.id}
+                item={subItem}
+                selectedId={selectedId}
+                navType={navType}
+              />
+            );
+          })}
+        </Collapse>
+      )}
+    </>
+  );
 };