Adds PR review edits.

pages/accountLists/[accountListId]/tools/ToolsWrapper.tsx

@@ -15,7 +15,7 @@ import { useToolsHelper } from './useToolsHelper';
 interface ToolsWrapperProps {
   pageTitle?: string;
   pageUrl: string;
-  selectedMenuId?: string; // for later use
+  selectedMenuId?: string;
   children: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
   styles?: React.ReactNode;
 }

src/components/Tool/Home/ToolList.ts

@@ -12,6 +12,7 @@ import {
   mdiTrophy,
   mdiWrench,
 } from '@mdi/js';
+import i18n from 'src/lib/i18n';
 
 export interface ToolItem {
   tool: string;
@@ -29,104 +30,111 @@ interface ToolsGroup {
 
 export const ToolsList: ToolsGroup[] = [
   {
-    groupName: 'Appeals',
+    groupName: i18n.t('Appeals'),
     groupIcon: mdiWrench,
     items: [
       {
-        tool: 'Appeal',
-        desc: 'Set goals, create asks, and track progress for one-time needs',
+        tool: i18n.t('Appeal'),
+        desc: i18n.t(
+          'Set goals, create asks, and track progress for one-time needs',
+        ),
         icon: mdiTrophy,
         id: 'appeals',
         url: 'appeals',
       },
     ],
   },
   {
-    groupName: 'Contacts',
+    groupName: i18n.t('Contacts'),
     groupIcon: mdiHome,
     items: [
       {
-        tool: 'Fix Commitment Info',
-        desc: 'Set the correct contacts commitment info for each contact',
+        tool: i18n.t('Fix Commitment Info'),
+        desc: i18n.t(
+          'Set the correct contacts commitment info for each contact',
+        ),
 
         icon: mdiCurrencyUsd,
         id: 'fixCommitmentInfo',
         url: 'fix/commitmentInfo',
       },
       {
-        tool: 'Fix Mailing Addresses',
-        desc: 'Set the correct primary mailing address for each contact',
+        tool: i18n.t('Fix Mailing Addresses'),
+        desc: i18n.t(
+          'Set the correct primary mailing address for each contact',
+        ),
         icon: mdiMap,
         id: 'fixMailingAddresses',
         url: 'fix/mailingAddresses',
       },
       {
-        tool: 'Fix Send Newsletter',
-        desc: 'Set the correct newsletter state for each contact',
+        tool: i18n.t('Fix Send Newsletter'),
+        desc: i18n.t('Set the correct newsletter state for each contact'),
         icon: mdiNewspaperVariantOutline,
         id: 'fixSendNewsletter',
         url: 'fix/sendNewsletter',
       },
       {
-        tool: 'Merge Contacts',
-        desc: 'Review and merge duplicate contacts',
+        tool: i18n.t('Merge Contacts'),
+        desc: i18n.t('Review and merge duplicate contacts'),
         icon: mdiHome,
         id: 'mergeContacts',
         url: 'merge/contacts',
       },
     ],
   },
   {
-    groupName: 'People',
+    groupName: i18n.t('People'),
     groupIcon: mdiAccountGroup,
     items: [
       {
-        tool: 'Fix Email Addresses',
-        desc: 'Set the correct primary email address for each person',
+        tool: i18n.t('Fix Email Addresses'),
+        desc: i18n.t('Set the correct primary email address for each person'),
         icon: mdiEmail,
         id: 'fixEmailAddresses',
         url: 'fix/emailAddresses',
       },
       {
-        tool: 'Fix Phone Numbers',
-        desc: 'Set the correct primary phone number for each person',
+        tool: i18n.t('Fix Phone Numbers'),
+        desc: i18n.t('Set the correct primary phone number for each person'),
         icon: mdiPhone,
         id: 'fixPhoneNumbers',
         url: 'fix/phoneNumbers',
       },
       {
-        tool: 'Merge People',
-        desc: 'Review and merge duplicate people',
+        tool: i18n.t('Merge People'),
+        desc: i18n.t('Review and merge duplicate people'),
         icon: mdiAccountGroup,
         id: 'mergePeople',
         url: 'merge/people',
       },
     ],
   },
   {
-    groupName: 'Imports',
+    groupName: i18n.t('Imports'),
     groupIcon: mdiCloudUpload,
     items: [
       {
-        tool: 'Import from Google',
-        desc: 'Import your contact information from your Google account',
+        tool: i18n.t('Import from Google'),
+        desc: i18n.t(
+          'Import your contact information from your Google account',
+        ),
 
         icon: mdiGoogle,
         id: 'import/google',
         url: 'import/google',
       },
-
       {
-        tool: 'Import from TntConnect',
-        desc: 'Import your contacts from your TntConnect database',
+        tool: i18n.t('Import from TntConnect'),
+        desc: i18n.t('Import your contacts from your TntConnect database'),
         icon: mdiCloudUpload,
         id: 'import/tnt',
         url: 'import/tnt',
       },
 
       {
-        tool: 'Import from CSV',
-        desc: 'Import contacts you have saved in a CSV file',
+        tool: i18n.t('Import from CSV'),
+        desc: i18n.t('Import contacts you have saved in a CSV file'),
         icon: mdiTable,
         id: 'import/csv',
         url: 'import/csv',

src/components/Tool/NavToolList/Item/Item.test.tsx

@@ -12,24 +12,45 @@ const item = {
   id: 'testItem',
 };
 
+const TestComponent = ({ totalCount = 0 }: { totalCount?: number }) => (
+  <ThemeProvider theme={theme}>
+    <TestWrapper>
+      <Item
+        url={item.url}
+        title={item.title}
+        isSelected={item.isSelected}
+        loading={false}
+        totalCount={totalCount}
+        toolId={item.id}
+      />
+    </TestWrapper>
+  </ThemeProvider>
+);
+
 describe('ToolItem', () => {
   it('default', () => {
-    const { queryByText } = render(
-      <ThemeProvider theme={theme}>
-        <TestWrapper>
-          <Item
-            url={item.url}
-            title={item.title}
-            isSelected={item.isSelected}
-            loading={false}
-            needsAttention={false}
-            totalCount={0}
-            toolId={item.id}
-          />
-        </TestWrapper>
-        ,
-      </ThemeProvider>,
-    );
+    const { queryByText } = render(<TestComponent />);
+    expect(queryByText(item.title)).toBeInTheDocument();
+  });
+
+  it('renders count less then 9', () => {
+    const { queryByText } = render(<TestComponent totalCount={8} />);
     expect(queryByText(item.title)).toBeInTheDocument();
+    expect(queryByText('8')).toBeInTheDocument();
+  });
+
+  it('renders count greater then 9', () => {
+    const { queryByText } = render(<TestComponent totalCount={10} />);
+    expect(queryByText(item.title)).toBeInTheDocument();
+    expect(queryByText('9+')).toBeInTheDocument();
+  });
+
+  it('renders without Badge', () => {
+    const { queryByText, queryByTestId } = render(<TestComponent />);
+    expect(queryByText(item.title)).toBeInTheDocument();
+
+    expect(
+      queryByTestId('fixCommitmentInfo-notifications'),
+    ).not.toBeInTheDocument();
   });
 });

src/components/Tool/NavToolList/Item/Item.tsx

@@ -2,7 +2,6 @@ import NextLink from 'next/link';
 import React, { ReactElement } from 'react';
 import ArrowForwardIos from '@mui/icons-material/ArrowForwardIos';
 import { Box, ListItem, ListItemText, Theme, Typography } from '@mui/material';
-import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 
@@ -26,7 +25,6 @@ interface Props {
   title: string;
   isSelected: boolean;
   loading: boolean;
-  needsAttention: boolean;
   totalCount: number;
   toolId: string;
 }
@@ -36,13 +34,11 @@ export const Item = ({
   title,
   isSelected,
   loading,
-  needsAttention,
   totalCount,
   toolId,
 }: Props): ReactElement => {
   const { classes } = useStyles();
   const accountListId = useAccountListId();
-  const { t } = useTranslation();
 
   return (
     <NextLink
@@ -56,9 +52,9 @@ export const Item = ({
             variant: 'subtitle1',
             color: 'textPrimary',
           }}
-          primary={t(title)}
+          primary={title}
         />
-        {!loading && needsAttention && (
+        {!loading && !!totalCount && (
           <Box className={classes.notificationBox}>
             <Typography data-testid={`${toolId}-notifications`}>
               {totalCount < 10 ? totalCount : '9+'}

src/components/Tool/NavToolList/NavToolList.test.tsx

@@ -4,26 +4,42 @@ import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import { GetToolNotificationsQuery } from 'src/components/Layouts/Primary/TopBar/Items/NavMenu/GetToolNotifcations.generated';
 import theme from '../../../theme';
 import NavToolList from './NavToolList';
 
-const accountListId = 'account-list-1';
+const accountListId = 'account-list-22';
+
+const toggleMock = jest.fn();
 
 const router = {
   query: { accountListId },
   isReady: true,
 };
 
-const toggleMock = jest.fn();
+const mocks = {
+  GetToolNotifications: {
+    // graphql-ergonomock doesn't handle renamed fields, so we have to mock
+    // using the name of the field in the GraphQL schema, not the renamed field
+    contacts: { totalCount: 2 },
+    people: { totalCount: 4 },
+    contactDuplicates: { totalCount: 6 },
+    personDuplicates: { totalCount: 10 },
+  },
+};
 
 const TestComponent = () => (
-  <ThemeProvider theme={theme}>
-    <TestRouter router={router}>
-      <GqlMockedProvider>
+  <TestRouter router={router}>
+    <ThemeProvider theme={theme}>
+      <GqlMockedProvider<{
+        GetToolNotifications: GetToolNotificationsQuery;
+      }>
+        mocks={mocks}
+      >
         <NavToolList toggle={toggleMock} isOpen={true} />
       </GqlMockedProvider>
-    </TestRouter>
-  </ThemeProvider>
+    </ThemeProvider>
+  </TestRouter>
 );
 
 describe('NavToolList', () => {
@@ -46,16 +62,37 @@ describe('NavToolList', () => {
     const listItems = getAllByTestId('ToolNavListItem');
     expect(listItems).toHaveLength(4);
   });
-  it('test notifications', async () => {
+  it('renders notifications', async () => {
     const { getByTestId, findByTestId } = render(<TestComponent />);
     expect(getByTestId('ToolNavList')).toBeInTheDocument();
     expect(getByTestId('fixCommitmentInfo-list-item')).toBeInTheDocument();
+
     expect(
       await findByTestId('fixCommitmentInfo-notifications'),
-    ).toBeInTheDocument();
+    ).toHaveTextContent('2');
 
     expect(
-      await findByTestId('fixCommitmentInfo-notifications'),
-    ).toHaveTextContent('9+');
+      await findByTestId('fixMailingAddresses-notifications'),
+    ).toHaveTextContent('2');
+
+    expect(
+      await findByTestId('fixSendNewsletter-notifications'),
+    ).toHaveTextContent('2');
+
+    expect(
+      await findByTestId('fixEmailAddresses-notifications'),
+    ).toHaveTextContent('4');
+
+    expect(
+      await findByTestId('fixPhoneNumbers-notifications'),
+    ).toHaveTextContent('4');
+
+    expect(await findByTestId('mergeContacts-notifications')).toHaveTextContent(
+      '6',
+    );
+
+    expect(await findByTestId('mergePeople-notifications')).toHaveTextContent(
+      '9+',
+    );
   });
 });