2. List Header - Update to show actions we need for each page

CruGlobal · Aug 28, 2024 · d97be2a · d97be2a
1 parent d4bcf7f
commit d97be2a
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 13 deletions.
diff --git a/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx b/pages/accountLists/[accountListId]/tasks/[[...contactId]].page.tsx
@@ -20,6 +20,7 @@ import { UserOptionFragment } from 'src/components/Shared/Filters/FilterPanel.ge
 import NullState from 'src/components/Shared/Filters/NullState/NullState';
 import {
   ListHeader,
+  PageEnum,
   headerHeight,
 } from 'src/components/Shared/Header/ListHeader';
 import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal';
@@ -330,7 +331,7 @@ const TasksPage: React.FC = () => {
               mainContent={
                 <>
                   <ListHeader
-                    page="task"
+                    page={PageEnum.Task}
                     activeFilters={isFiltered}
                     filterPanelOpen={filterPanelOpen}
                     toggleFilterPanel={toggleFilterPanel}

diff --git a/src/components/Contacts/ContactsMainPanel/ContactsMainPanelHeader.tsx b/src/components/Contacts/ContactsMainPanel/ContactsMainPanelHeader.tsx
@@ -15,6 +15,7 @@ import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import {
   ListHeader,
+  PageEnum,
   TableViewModeEnum,
 } from 'src/components/Shared/Header/ListHeader';
 import {
@@ -64,7 +65,7 @@ export const ContactsMainPanelHeader: React.FC = () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return (
     <ListHeader
-      page="contact"
+      page={PageEnum.Contact}
       activeFilters={Object.keys(sanitizedFilters).length > 0}
       filterPanelOpen={filterPanelOpen}
       toggleFilterPanel={toggleFilterPanel}

diff --git a/src/components/Reports/PartnerGivingAnalysisReport/PartnerGivingAnalysisReport.tsx b/src/components/Reports/PartnerGivingAnalysisReport/PartnerGivingAnalysisReport.tsx
@@ -7,7 +7,7 @@ import React, {
 import { Box, CircularProgress, TablePagination } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { EmptyReport } from 'src/components/Reports/EmptyReport/EmptyReport';
-import { ListHeader } from 'src/components/Shared/Header/ListHeader';
+import { ListHeader, PageEnum } from 'src/components/Shared/Header/ListHeader';
 import {
   HeaderTypeEnum,
   MultiPageHeader,
@@ -174,7 +174,7 @@ export const PartnerGivingAnalysisReport = forwardRef<
           headerType={HeaderTypeEnum.Report}
         />
         <ListHeader
-          page="report"
+          page={PageEnum.Report}
           activeFilters={isActiveFilters}
           filterPanelOpen={panelOpen === Panel.Filters}
           toggleFilterPanel={onFilterListToggle}

diff --git a/src/components/Shared/Header/ListHeader.stories.tsx b/src/components/Shared/Header/ListHeader.stories.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { ListHeader, ListHeaderCheckBoxState } from './ListHeader';
+import { ListHeader, ListHeaderCheckBoxState, PageEnum } from './ListHeader';
 
 export default {
   title: 'Shared/Header/ListHeader',
@@ -8,7 +8,7 @@ export default {
 export const Default = (): ReactElement => {
   return (
     <ListHeader
-      page="contact"
+      page={PageEnum.Contact}
       activeFilters={false}
       starredFilter={{}}
       toggleStarredFilter={() => {}}
@@ -26,7 +26,7 @@ export const Default = (): ReactElement => {
 export const Task = (): ReactElement => {
   return (
     <ListHeader
-      page="task"
+      page={PageEnum.Task}
       activeFilters={false}
       headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
       starredFilter={{}}
@@ -44,7 +44,7 @@ export const Task = (): ReactElement => {
 export const ActiveFilters = (): ReactElement => {
   return (
     <ListHeader
-      page="contact"
+      page={PageEnum.Contact}
       activeFilters={true}
       headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
       starredFilter={{}}
@@ -62,7 +62,7 @@ export const ActiveFilters = (): ReactElement => {
 export const FilterPanelOpen = (): ReactElement => {
   return (
     <ListHeader
-      page="contact"
+      page={PageEnum.Contact}
       activeFilters={false}
       headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
       starredFilter={{}}
@@ -80,7 +80,7 @@ export const FilterPanelOpen = (): ReactElement => {
 export const ActiveFiltersAndFilterPanelOpen = (): ReactElement => {
   return (
     <ListHeader
-      page="contact"
+      page={PageEnum.Contact}
       activeFilters={true}
       headerCheckboxState={ListHeaderCheckBoxState.Unchecked}
       starredFilter={{}}

diff --git a/src/components/Shared/Header/ListHeader.tsx b/src/components/Shared/Header/ListHeader.tsx
@@ -86,7 +86,7 @@ export enum PageEnum {
 }
 
 interface ListHeaderProps {
-  page: 'contact' | 'task' | 'report' | 'appeal';
+  page: PageEnum;
   activeFilters: boolean;
   headerCheckboxState: ListHeaderCheckBoxState;
   filterPanelOpen: boolean;
@@ -185,6 +185,7 @@ export const ListHeader: React.FC<ListHeaderProps> = ({
             buttonGroup={buttonGroup}
             contactsView={contactsView}
             selectedIds={selectedIds}
+            page={page}
           />
         )}
         {page === PageEnum.Report && (
@@ -195,6 +196,7 @@ export const ListHeader: React.FC<ListHeaderProps> = ({
               buttonGroup={buttonGroup}
               contactsView={contactsView}
               selectedIds={selectedIds}
+              page={page}
             />
           </Box>
         )}

diff --git a/src/components/Shared/MassActions/ContactsMassActionsDropdown.test.tsx b/src/components/Shared/MassActions/ContactsMassActionsDropdown.test.tsx
@@ -13,7 +13,7 @@ import { AppSettingsProvider } from 'src/components/common/AppSettings/AppSettin
 import { useAccountListId } from 'src/hooks/useAccountListId';
 import theme from 'src/theme';
 import useTaskModal from '../../../hooks/useTaskModal';
-import { TableViewModeEnum } from '../Header/ListHeader';
+import { PageEnum, TableViewModeEnum } from '../Header/ListHeader';
 import { ContactsMassActionsDropdown } from './ContactsMassActionsDropdown';
 
 const selectedIds: string[] = ['abc'];
@@ -277,6 +277,7 @@ describe('ContactsMassActionsDropdown', () => {
                     contactDetailsOpen={false}
                     contactsView={TableViewModeEnum.List}
                     selectedIds={selectedIdsMerge}
+                    page={PageEnum.Contact}
                   />
                 </ContactsProvider>
               </SnackbarProvider>

diff --git a/src/components/Shared/MassActions/ContactsMassActionsDropdown.tsx b/src/components/Shared/MassActions/ContactsMassActionsDropdown.tsx
@@ -42,7 +42,7 @@ import { TaskModalEnum } from 'src/components/Task/Modal/TaskModal';
 import { StatusEnum } from 'src/graphql/types.generated';
 import useTaskModal from 'src/hooks/useTaskModal';
 import { useAccountListId } from '../../../hooks/useAccountListId';
-import { TableViewModeEnum } from '../Header/ListHeader';
+import { PageEnum, TableViewModeEnum } from '../Header/ListHeader';
 import {
   DynamicHideContactsModal,
   preloadHideContactsModal,
@@ -55,6 +55,7 @@ interface ContactsMassActionsDropdownProps {
   contactsView?: TableViewModeEnum;
   buttonGroup?: ReactElement;
   selectedIds: string[];
+  page: PageEnum;
 }
 
 export const ContactsMassActionsDropdown: React.FC<
@@ -65,6 +66,7 @@ export const ContactsMassActionsDropdown: React.FC<
   contactsView,
   buttonGroup,
   selectedIds,
+  page,
 }) => {
   const { t } = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
@@ -236,6 +238,10 @@ export const ContactsMassActionsDropdown: React.FC<
                   <ListItemText>{t('Hide Contacts')}</ListItemText>
                 </MenuItem>
 
+
+                {page !== PageEnum.Appeal && (
+                  <>
+                    {!isExcludedAppealPage && (
                 <MenuItem
                   onClick={() => {
                     setAddToAppealModalOpen(true);
@@ -245,6 +251,7 @@ export const ContactsMassActionsDropdown: React.FC<
                 >
                   <ListItemText>{t('Add to Appeal')}</ListItemText>
                 </MenuItem>
+                    )}
                 <MenuItem
                   divider
                   onClick={() => {
@@ -255,6 +262,8 @@ export const ContactsMassActionsDropdown: React.FC<
                 >
                   <ListItemText>{t('Add to New Appeal')}</ListItemText>
                 </MenuItem>
+                  </>
+                )}
 
                 <MenuItem
                   onClick={() => {