MPDX-8056 - Tools - Initial Page (#1027)

* Tools - Initial Page cleanup

src/components/Layouts/Primary/NavBar/NavBar.tsx

@@ -6,7 +6,7 @@ import { Box, Drawer, Hidden, List, Theme, useMediaQuery } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 import { reportNavItems } from 'src/components/Shared/MultiPageLayout/MultiPageMenu/MultiPageMenuItems';
-import { ToolsList } from 'src/components/Tool/Home/ToolList';
+import { ToolsListNav } from 'src/components/Tool/Home/ToolsListNav';
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import { toolsRedirectLinks } from '../TopBar/Items/NavMenu/NavMenu';
 import { NavItem } from './NavItem/NavItem';
@@ -138,7 +138,7 @@ export const NavBar: FC<NavBarProps> = ({ onMobileClose, openMobile }) => {
     },
     {
       title: t('Tools'),
-      items: ToolsList.flatMap((toolsGroup) =>
+      items: ToolsListNav.flatMap((toolsGroup) =>
         toolsGroup.items.map((tool) => ({
           title: tool.tool,
           href: `https://${process.env.REWRITE_DOMAIN}/tools/${

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

@@ -23,7 +23,7 @@ import { reportNavItems } from 'src/components/Shared/MultiPageLayout/MultiPageM
 import { useAccountListId } from '../../../../../../hooks/useAccountListId';
 import { useCurrentToolId } from '../../../../../../hooks/useCurrentToolId';
 import theme from '../../../../../../theme';
-import { ToolsList } from '../../../../../Tool/Home/ToolList';
+import { ToolsListNav } from '../../../../../Tool/Home/ToolsListNav';
 import { useGetToolNotificationsQuery } from './GetToolNotifcations.generated';
 
 const useStyles = makeStyles()(() => ({
@@ -322,7 +322,7 @@ const NavMenu: React.FC = () => {
               <Paper className={classes.subMenu}>
                 <ClickAwayListener onClickAway={handleToolsMenuClose}>
                   <MenuList autoFocusItem={toolsMenuOpen} id="menu-list-grow">
-                    {ToolsList.map((toolsGroup) => (
+                    {ToolsListNav.map((toolsGroup) => (
                       <Box key={toolsGroup.groupName}>
                         {toolsGroup.items.map((tool) => {
                           const needsAttention = toolData

src/components/Tool/Home/Home.test.tsx

@@ -2,8 +2,11 @@ import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
 import { render } from '@testing-library/react';
 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 Home from './Home';
+import { ToolsListHome } from './ToolsListHome';
 
 const accountListId = 'account-list-1';
 
@@ -12,16 +15,55 @@ const router = {
   isReady: true,
 };
 
+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}>
+    <GqlMockedProvider<{
+      GetToolNotifications: GetToolNotificationsQuery;
+    }>
+      mocks={mocks}
+    >
+      <TestRouter router={router}>
+        <Home />
+      </TestRouter>
+    </GqlMockedProvider>
+  </ThemeProvider>
+);
+
 describe('ToolHome', () => {
   it('default', () => {
-    const { getByTestId } = render(
-      <ThemeProvider theme={theme}>
-        <TestRouter router={router}>
-          <Home />
-        </TestRouter>
-      </ThemeProvider>,
-    );
+    const { getByTestId, queryByText } = render(<TestComponent />);
 
     expect(getByTestId('Home')).toBeInTheDocument();
+    ToolsListHome.forEach((tool) => {
+      expect(queryByText(tool.tool)).toBeInTheDocument();
+      expect(queryByText(tool.desc)).toBeInTheDocument();
+    });
+  });
+
+  it('renders notifications', async () => {
+    const { findAllByText } = render(<TestComponent />);
+
+    const contacts = await findAllByText('2');
+    expect(contacts).toHaveLength(3);
+
+    const people = await findAllByText('4');
+    expect(people).toHaveLength(2);
+
+    const contactDuplicates = await findAllByText('6');
+    expect(contactDuplicates).toHaveLength(1);
+
+    const personDuplicates = await findAllByText('9+');
+    expect(personDuplicates).toHaveLength(1);
   });
 });

src/components/Tool/Home/Home.tsx

@@ -1,10 +1,12 @@
 import React, { ReactElement } from 'react';
 import { Box, Grid, Theme } from '@mui/material';
 import { motion } from 'framer-motion';
-import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
+import { useGetToolNotificationsQuery } from 'src/components/Layouts/Primary/TopBar/Items/NavMenu/GetToolNotifcations.generated';
+import { ToolName } from 'src/components/Layouts/Primary/TopBar/Items/NavMenu/NavMenu';
+import { useAccountListId } from '../../../hooks/useAccountListId';
 import Tool from './Tool';
-import { ToolsList } from './ToolList';
+import { ToolsListHome } from './ToolsListHome';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   container: {
@@ -26,6 +28,16 @@ const useStyles = makeStyles()((theme: Theme) => ({
     width: '100%',
     justifyContent: 'center',
   },
+  notificationBox: {
+    backgroundColor: theme.palette.progressBarYellow.main,
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    borderRadius: '25%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: theme.spacing(2),
+  },
 }));
 
 const variants = {
@@ -43,8 +55,21 @@ const variants = {
 
 const ToolHome = (): ReactElement => {
   const { classes } = useStyles();
-  const toolsListFlattened = ToolsList.flatMap((tool) => tool.items);
-  const { t } = useTranslation();
+  const accountListId = useAccountListId();
+  const { data, loading } = useGetToolNotificationsQuery({
+    variables: { accountListId: accountListId ?? '' },
+    skip: !accountListId,
+  });
+
+  const toolDataTotalCount: { [key: string]: number } = {
+    [ToolName.FixCommitmentInfo]: data?.fixCommitmentInfo.totalCount ?? 0,
+    [ToolName.FixMailingAddresses]: data?.fixMailingAddresses.totalCount ?? 0,
+    [ToolName.FixSendNewsletter]: data?.fixSendNewsletter.totalCount ?? 0,
+    [ToolName.FixEmailAddresses]: data?.fixEmailAddresses.totalCount ?? 0,
+    [ToolName.FixPhoneNumbers]: data?.fixPhoneNumbers.totalCount ?? 0,
+    [ToolName.MergeContacts]: data?.mergeContacts.totalCount ?? 0,
+    [ToolName.MergePeople]: data?.mergePeople.totalCount ?? 0,
+  };
 
   return (
     <motion.div
@@ -55,14 +80,21 @@ const ToolHome = (): ReactElement => {
     >
       <Box className={classes.outer} data-testid="Home">
         <Grid container spacing={3} className={classes.container}>
-          {toolsListFlattened.map((tool) => {
+          {ToolsListHome.map((tool) => {
+            const needsAttention = toolDataTotalCount
+              ? toolDataTotalCount[tool.id] > 0
+              : false;
             return (
               <Grid item xs={12} sm={6} lg={4} key={tool.tool}>
                 <Tool
-                  tool={t('{{toolname}}', { toolname: tool.tool })}
-                  desc={t('{{tooldesc}}', { tooldesc: tool.desc })}
+                  tool={tool.tool}
+                  desc={tool.desc}
                   icon={tool.icon}
                   url={tool.url}
+                  needsAttention={needsAttention}
+                  totalCount={toolDataTotalCount[tool.id]}
+                  loading={loading}
+                  toolId={tool.id}
                 />
               </Grid>
             );

src/components/Tool/Home/Tool.test.tsx

@@ -13,22 +13,70 @@ const router = {
   isReady: true,
 };
 
+const TestComponent = ({
+  needsAttention = true,
+  totalCount = 8,
+}: {
+  needsAttention?: boolean;
+  totalCount?: number;
+}) => (
+  <ThemeProvider theme={theme}>
+    <TestRouter router={router}>
+      <Tool
+        tool={'Test'}
+        desc={'Test description!!!'}
+        icon={mdiAlert}
+        url={'test'}
+        needsAttention={needsAttention}
+        totalCount={totalCount}
+        loading={false}
+        toolId={'fixCommitmentInfo'}
+      />
+    </TestRouter>
+  </ThemeProvider>
+);
+
 describe('Tool', () => {
-  it('props', () => {
-    const { getByText } = render(
-      <ThemeProvider theme={theme}>
-        <TestRouter router={router}>
-          <Tool
-            tool={'Test'}
-            desc={'Test description!!!'}
-            icon={mdiAlert}
-            url={'test'}
-          />
-          ,
-        </TestRouter>
-      </ThemeProvider>,
-    );
+  it('default', () => {
+    const { getByText } = render(<TestComponent />);
     expect(getByText('Test')).toBeInTheDocument();
     expect(getByText('Test description!!!')).toBeInTheDocument();
   });
+
+  it('renders count less then 9', () => {
+    const { queryByText, getByTestId } = render(<TestComponent />);
+    expect(queryByText('8')).toBeInTheDocument();
+    expect(getByTestId('fixCommitmentInfo-icon')).toBeInTheDocument();
+    expect(getByTestId('fixCommitmentInfo-icon')).toHaveStyle(
+      'background-color: rgb(249, 182, 37)',
+    );
+    expect(getByTestId('fixCommitmentInfo-container')).toHaveStyle(
+      'border-color: #9c9fa1',
+    );
+  });
+
+  it('renders count with 0', () => {
+    const { queryByText, getByTestId } = render(
+      <TestComponent needsAttention={false} totalCount={0} />,
+    );
+    expect(queryByText('0')).not.toBeInTheDocument();
+    expect(getByTestId('fixCommitmentInfo-icon')).toBeInTheDocument();
+    expect(getByTestId('fixCommitmentInfo-icon')).not.toHaveStyle(
+      'background-color: rgb(249, 182, 37)',
+    );
+  });
+
+  it('renders count with over 9', () => {
+    const { queryByText, getByTestId } = render(
+      <TestComponent totalCount={10} />,
+    );
+    expect(queryByText('9+')).toBeInTheDocument();
+    expect(getByTestId('fixCommitmentInfo-icon')).toBeInTheDocument();
+    expect(getByTestId('fixCommitmentInfo-icon')).toHaveStyle(
+      'background-color: rgb(249, 182, 37)',
+    );
+    expect(getByTestId('fixCommitmentInfo-container')).toHaveStyle(
+      'border-color: #9c9fa1',
+    );
+  });
 });