MPDX-7955 - List Header functionality (#985)

* Removing Starred filter from ListHeader

* When filtering by search it no longer refreshes the whole page and flashes the initial appeal page.

* Adding the mass actions back to the List Header.

* Allowing the StarContact to have it's size passed as a parameter.

* Adding checkbox to FlowsRow. Had to move Star button and alter some styles to fit it in.

* Testing contactRow is selected

* Fixing error with If statement and using `PageEnum`.

* Fixing x scrolling on contactRow.
Adding more tests for appealsMainPanel to boost codecov score.

* cleaning up codebase

src/components/Contacts/StarContactIconButton/StarContactIconButton.tsx

@@ -1,23 +1,26 @@
 import React from 'react';
-import { IconButton } from '@mui/material';
+import { IconButton, IconButtonProps } from '@mui/material';
 import { StarredItemIcon } from '../../common/StarredItemIcon/StarredItemIcon';
 import { useSetContactStarredMutation } from './SetContactStarred.generated';
 
 interface Props {
   accountListId: string;
   contactId: string;
   isStarred: boolean;
+  size?: IconButtonProps['size'];
 }
 
 export const StarContactIconButton: React.FC<Props> = ({
   accountListId,
   contactId,
   isStarred,
+  size = 'medium',
 }) => {
   const [setContactStarred] = useSetContactStarredMutation();
 
   return (
     <IconButton
+      size={size}
       component="div"
       onClick={(event) => {
         event.stopPropagation();

src/components/Shared/Header/ListHeader.test.tsx

@@ -14,6 +14,7 @@ import { TasksMassActionsDropdown } from '../MassActions/TasksMassActionsDropdow
 import {
   ListHeader,
   ListHeaderCheckBoxState,
+  PageEnum,
   TableViewModeEnum,
 } from './ListHeader';
 
@@ -96,7 +97,7 @@ describe('ListHeader', () => {
         <MocksProviders>
           <ListHeader
             selectedIds={selectedIds}
-            page="contact"
+            page={PageEnum.Contact}
             activeFilters={false}
             starredFilter={{}}
             headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
@@ -118,7 +119,7 @@ describe('ListHeader', () => {
         <MocksProviders>
           <ListHeader
             selectedIds={selectedIds}
-            page="contact"
+            page={PageEnum.Contact}
             activeFilters={false}
             starredFilter={{}}
             contactsView={TableViewModeEnum.List}
@@ -142,7 +143,7 @@ describe('ListHeader', () => {
           <MocksProviders>
             <ListHeader
               selectedIds={selectedIds}
-              page="contact"
+              page={PageEnum.Contact}
               activeFilters={false}
               starredFilter={{}}
               contactsView={TableViewModeEnum.List}
@@ -188,7 +189,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={false}
           starredFilter={{}}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
@@ -220,7 +221,7 @@ describe('ListHeader', () => {
         <MocksProviders>
           <ListHeader
             selectedIds={selectedIds}
-            page="task"
+            page={PageEnum.Task}
             activeFilters={false}
             headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
             starredFilter={{}}
@@ -240,7 +241,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={false}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
           totalItems={50}
@@ -267,7 +268,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={false}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
           totalItems={0}
@@ -287,7 +288,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={false}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
           totalItems={50}
@@ -311,7 +312,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={false}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
           starredFilter={{}}
@@ -336,7 +337,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={false}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
           starredFilter={{}}
@@ -363,7 +364,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={true}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
           starredFilter={{}}
@@ -390,7 +391,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={true}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
           starredFilter={{}}
@@ -417,7 +418,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={false}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
           starredFilter={{}}
@@ -445,7 +446,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={true}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
           starredFilter={{}}
@@ -471,7 +472,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={true}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
           starredFilter={{}}
@@ -493,7 +494,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={true}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
           starredFilter={{ starred: true }}
@@ -515,7 +516,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={true}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
           starredFilter={{ starred: true }}
@@ -536,7 +537,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="contact"
+          page={PageEnum.Contact}
           activeFilters={true}
           contactsView={TableViewModeEnum.Flows}
           headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
@@ -556,7 +557,7 @@ describe('ListHeader', () => {
       <MocksProviders>
         <ListHeader
           selectedIds={selectedIds}
-          page="task"
+          page={PageEnum.Task}
           activeFilters={true}
           headerCheckboxState={ListHeaderCheckBoxState.Checked}
           starredFilter={{ starred: true }}
@@ -583,7 +584,7 @@ describe('ListHeader', () => {
         <MocksProviders>
           <ListHeader
             selectedIds={[]}
-            page="report"
+            page={PageEnum.Report}
             activeFilters={false}
             headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
             filterPanelOpen={false}
@@ -605,7 +606,7 @@ describe('ListHeader', () => {
         <MocksProviders>
           <ListHeader
             selectedIds={selectedIds}
-            page="report"
+            page={PageEnum.Report}
             activeFilters={false}
             headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
             filterPanelOpen={false}

src/components/Shared/Header/ListHeader.tsx

@@ -178,7 +178,7 @@ export const ListHeader: React.FC<ListHeaderProps> = ({
         </Hidden>
       </HeaderWrapInner>
       <HeaderWrapInner style={{ marginLeft: 8 }}>
-        {page === PageEnum.Contact && (
+        {(page === PageEnum.Contact || page === PageEnum.Appeal) && (
           <ContactsMassActionsDropdown
             filterPanelOpen={filterPanelOpen}
             contactDetailsOpen={contactDetailsOpen}
@@ -211,8 +211,6 @@ export const ListHeader: React.FC<ListHeaderProps> = ({
           />
         )}
 
-        {page === PageEnum.Appeal && <Box>{buttonGroup}</Box>}
-
         {starredFilter && toggleStarredFilter && (
           // This hidden doesn't remove from document
           <Hidden smDown>