Fix appeal contact row click to prevent it opening contact when clicking on action icons.

Author: dr-bizz

src/components/Tool/Appeal/List/ContactRow/ContactRow.test.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { ThemeProvider } from '@mui/material/styles';
+import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { SnackbarProvider } from 'notistack';
 import TestRouter from '__tests__/util/TestRouter';
 import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
 import { AppealsWrapper } from 'pages/accountLists/[accountListId]/tools/appeals/AppealsWrapper';
@@ -24,9 +27,10 @@ const router = {
   query: { accountListId },
   isReady: true,
 };
+const contactUrl = `/accountLists/${accountListId}/tools/appeals/${appealId}/${defaultContact.id}`;
 
 const getContactUrl = jest.fn().mockReturnValue({
-  contactUrl: `/contacts/${defaultContact.id}`,
+  contactUrl,
 });
 const contactDetailsOpen = true;
 const toggleSelectionById = jest.fn();
@@ -43,29 +47,33 @@ const Components = ({
   excludedContacts = [],
 }: ComponentsProps) => (
   <TestRouter router={router}>
-    <GqlMockedProvider>
-      <ThemeProvider theme={theme}>
-        <AppealsWrapper>
-          <AppealsContext.Provider
-            value={
-              {
-                appealId,
-                getContactUrl,
-                isRowChecked,
-                contactDetailsOpen,
-                toggleSelectionById,
-              } as unknown as AppealsType
-            }
-          >
-            <ContactRow
-              contact={contact}
-              appealStatus={appealStatus}
-              excludedContacts={excludedContacts}
-            />
-          </AppealsContext.Provider>
-        </AppealsWrapper>
-      </ThemeProvider>
-    </GqlMockedProvider>
+    <LocalizationProvider dateAdapter={AdapterLuxon}>
+      <SnackbarProvider>
+        <GqlMockedProvider>
+          <ThemeProvider theme={theme}>
+            <AppealsWrapper>
+              <AppealsContext.Provider
+                value={
+                  {
+                    appealId,
+                    getContactUrl,
+                    isRowChecked,
+                    contactDetailsOpen,
+                    toggleSelectionById,
+                  } as unknown as AppealsType
+                }
+              >
+                <ContactRow
+                  contact={contact}
+                  appealStatus={appealStatus}
+                  excludedContacts={excludedContacts}
+                />
+              </AppealsContext.Provider>
+            </AppealsWrapper>
+          </ThemeProvider>
+        </GqlMockedProvider>
+      </SnackbarProvider>
+    </LocalizationProvider>
   </TestRouter>
 );
 
@@ -92,7 +100,17 @@ describe('ContactsRow', () => {
 
     const contact = getByTestId('rowButton');
     expect(contact).toBeInTheDocument();
-    expect(contact).toHaveAttribute('href', `/contacts/${defaultContact.id}`);
+    expect(contact).toHaveAttribute('href', contactUrl);
+  });
+
+  it('should open commitment modal', async () => {
+    const { getByTestId, findByRole } = render(<Components />);
+
+    const addCommitment = getByTestId('AddIcon');
+    userEvent.click(addCommitment);
+    expect(
+      await findByRole('heading', { name: 'Add Commitment' }),
+    ).toBeInTheDocument();
   });
 
   describe('Contact Row by status type', () => {

src/components/Tool/Appeal/List/ContactRow/ContactRow.tsx

@@ -63,6 +63,14 @@ const ContactRowActions = styled(Box)(() => ({
   paddingRight: theme.spacing(2),
 }));
 
+export const handleClickWithCallback = (
+  event: React.MouseEvent<HTMLDivElement>,
+  callback: () => void,
+) => {
+  event.preventDefault();
+  callback();
+};
+
 interface Props {
   contact: AppealContactInfoFragment;
   appealStatus: AppealStatusEnum;
@@ -249,21 +257,22 @@ export const ContactRow: React.FC<Props> = ({
                     <IconButton
                       size={'small'}
                       component="div"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        handleCreatePledge();
-                      }}
+                      onClick={(event) =>
+                        handleClickWithCallback(event, handleCreatePledge)
+                      }
                       onMouseOver={preloadPledgeModal}
                     >
                       <AddIcon />
                     </IconButton>
                     <IconButton
                       size={'small'}
                       component="div"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        handleRemoveContactFromAppeal();
-                      }}
+                      onClick={(event) =>
+                        handleClickWithCallback(
+                          event,
+                          handleRemoveContactFromAppeal,
+                        )
+                      }
                       onMouseOver={preloadDeleteAppealContactModal}
                     >
                       <DeleteIcon color="error" />
@@ -277,21 +286,19 @@ export const ContactRow: React.FC<Props> = ({
                     <IconButton
                       size={'small'}
                       component="div"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        handleEditContact();
-                      }}
+                      onClick={(event) =>
+                        handleClickWithCallback(event, handleEditContact)
+                      }
                       onMouseOver={preloadPledgeModal}
                     >
                       <EditIcon />
                     </IconButton>
                     <IconButton
                       size={'small'}
                       component="div"
-                      onClick={(event) => {
-                        event.stopPropagation();
-                        handleRemovePledge();
-                      }}
+                      onClick={(event) =>
+                        handleClickWithCallback(event, handleRemovePledge)
+                      }
                       onMouseOver={preloadDeletePledgeModal}
                     >
                       <DeleteIcon color="error" />
@@ -302,10 +309,12 @@ export const ContactRow: React.FC<Props> = ({
                   <IconButton
                     size={'small'}
                     component="div"
-                    onClick={(event) => {
-                      event.stopPropagation();
-                      handleAddExcludedContactToAppeal();
-                    }}
+                    onClick={(event) =>
+                      handleClickWithCallback(
+                        event,
+                        handleAddExcludedContactToAppeal,
+                      )
+                    }
                     onMouseOver={preloadAddExcludedContactModal}
                   >
                     <AddIcon />