Improve donations tab responsiveness

src/components/Contacts/ContactDetails/ContactDonationsTab/ContactDonationsTab.test.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import { ThemeProvider } from '@mui/material/styles';
 import { DateTime } from 'luxon';
+import theme from 'src/theme';
 import { GqlMockedProvider } from '../../../../../__tests__/util/graphqlMocking';
 import { render } from '../../../../../__tests__/util/testingLibraryReactMock';
 import { ContactDetailProvider } from '../ContactDetailContext';
@@ -12,27 +14,29 @@ const contactId = 'contact-id-1';
 describe('ContactDonationsTab', () => {
   it('test renderer', async () => {
     const { findByRole } = render(
-      <GqlMockedProvider<{ GetContactDonations: GetContactDonationsQuery }>
-        mocks={{
-          GetContactDonations: {
-            contact: {
-              nextAsk: DateTime.now().plus({ month: 5 }).toISO(),
-              pledgeStartDate: DateTime.now().minus({ month: 5 }).toISO(),
-              pledgeCurrency: 'USD',
-              lastDonation: {
-                donationDate: DateTime.now().toISO(),
+      <ThemeProvider theme={theme}>
+        <GqlMockedProvider<{ GetContactDonations: GetContactDonationsQuery }>
+          mocks={{
+            GetContactDonations: {
+              contact: {
+                nextAsk: DateTime.now().plus({ month: 5 }).toISO(),
+                pledgeStartDate: DateTime.now().minus({ month: 5 }).toISO(),
+                pledgeCurrency: 'USD',
+                lastDonation: {
+                  donationDate: DateTime.now().toISO(),
+                },
               },
             },
-          },
-        }}
-      >
-        <ContactDetailProvider>
-          <ContactDonationsTab
-            accountListId={accountListId}
-            contactId={contactId}
-          />
-        </ContactDetailProvider>
-      </GqlMockedProvider>,
+          }}
+        >
+          <ContactDetailProvider>
+            <ContactDonationsTab
+              accountListId={accountListId}
+              contactId={contactId}
+            />
+          </ContactDetailProvider>
+        </GqlMockedProvider>
+      </ThemeProvider>,
     );
     expect(await findByRole('region')).toBeVisible();
   });

src/components/Contacts/ContactDetails/ContactDonationsTab/ContactDonationsTab.tsx

@@ -29,10 +29,6 @@ const DonationsTabContainer = styled(Box)(({ theme }) => ({
   borderBottom: '1px solid #DCDCDC',
 }));
 
-const DonationsGraphContainer = styled(Box)(({ theme }) => ({
-  margin: theme.spacing(1),
-}));
-
 const DonationsTabList = styled(TabList)(({}) => ({
   minHeight: 40,
 }));
@@ -100,23 +96,21 @@ export const ContactDonationsTab: React.FC<ContactDonationsProp> = ({
   };
   return (
     <ContactDonationsContainer>
-      <DonationsGraphContainer>
-        {loading ? (
-          <>
-            <ContactDonationsLoadingPlaceHolder />
-            <ContactDonationsLoadingPlaceHolder />
-            <ContactDonationsLoadingPlaceHolder />
-          </>
-        ) : (
-          <DonationsGraph
-            accountListId={accountListId}
-            donorAccountIds={donorAccountIds}
-            convertedCurrency={
-              data?.contact.lastDonation?.amount.convertedCurrency ?? ''
-            }
-          />
-        )}
-      </DonationsGraphContainer>
+      {loading ? (
+        <>
+          <ContactDonationsLoadingPlaceHolder />
+          <ContactDonationsLoadingPlaceHolder />
+          <ContactDonationsLoadingPlaceHolder />
+        </>
+      ) : (
+        <DonationsGraph
+          accountListId={accountListId}
+          donorAccountIds={donorAccountIds}
+          convertedCurrency={
+            data?.contact.lastDonation?.amount.convertedCurrency ?? ''
+          }
+        />
+      )}
       <TabContext value={selectedDonationTabKey}>
         <DonationsTabContainer role="region">
           <DonationsTabList

src/components/Contacts/ContactDetails/ContactDonationsTab/DonationsGraph/DonationsGraph.test.tsx

@@ -1,21 +1,45 @@
 import React from 'react';
-import { MockedProvider } from '@apollo/client/testing';
 import { renderHook } from '@testing-library/react-hooks';
-import { GqlMockedProvider } from '../../../../../../__tests__/util/graphqlMocking';
-import { render } from '../../../../../../__tests__/util/testingLibraryReactMock';
+import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import { render } from '__tests__/util/testingLibraryReactMock';
+import {
+  afterTestResizeObserver,
+  beforeTestResizeObserver,
+} from '__tests__/util/windowResizeObserver';
 import { DonationsGraph } from './DonationsGraph';
 import {
-  GetDonationsGraphDocument,
   GetDonationsGraphQuery,
   useGetDonationsGraphQuery,
 } from './DonationsGraph.generated';
 
+// ResponsiveContainer isn't rendering its children in tests, so override it to render its children with static dimensions
+jest.mock('recharts', () => ({
+  ...jest.requireActual('recharts'),
+  ResponsiveContainer: ({ children }) => ({
+    ...children,
+    props: {
+      ...children.props,
+      height: 600,
+      width: 300,
+    },
+  }),
+}));
+
 const accountListId = 'account-list-id';
 const donorAccountIds = ['donor-Account-Id'];
 const currency = 'USD';
+
 describe('Donations Graph', () => {
+  beforeEach(() => {
+    beforeTestResizeObserver();
+  });
+
+  afterEach(() => {
+    afterTestResizeObserver();
+  });
+
   it('test renderer', async () => {
-    const { findByRole } = render(
+    const { findByText } = render(
       <GqlMockedProvider<{ GetDonationsGraph: GetDonationsGraphQuery }>
         mocks={{
           GetDonationsGraph: {
@@ -43,35 +67,20 @@ describe('Donations Graph', () => {
         />
       </GqlMockedProvider>,
     );
-    expect(await findByRole('textbox')).toBeVisible();
+    expect(await findByText('Amount (USD)')).toBeInTheDocument();
   });
 
-  it('test loading renderer', async () => {
-    const { findByRole } = render(
-      <MockedProvider
-        mocks={[
-          {
-            request: {
-              query: GetDonationsGraphDocument,
-              variables: {
-                accountListId: accountListId,
-                donorAccountIds: donorAccountIds,
-                convertCurrency: currency,
-              },
-            },
-            result: {},
-            delay: 8640000000,
-          },
-        ]}
-      >
+  it('renders loading placeholders while loading data', () => {
+    const { getByLabelText } = render(
+      <GqlMockedProvider>
         <DonationsGraph
           accountListId="accountListID"
           donorAccountIds={['donorAccountId']}
           convertedCurrency="USD"
         />
-      </MockedProvider>,
+      </GqlMockedProvider>,
     );
-    expect(await findByRole('alert')).toBeVisible();
+    expect(getByLabelText('Loading donations graph')).toBeInTheDocument();
   });
 
   it('test query', async () => {

src/components/Contacts/ContactDetails/ContactDonationsTab/DonationsGraph/DonationsGraph.tsx

@@ -10,30 +10,22 @@ import {
   BarChart,
   CartesianGrid,
   Legend,
+  ResponsiveContainer,
+  Text,
   Tooltip,
   XAxis,
   YAxis,
 } from 'recharts';
 import { useLocale } from 'src/hooks/useLocale';
 import { currencyFormat } from 'src/lib/intlFormat';
-import theme from '../../../../../theme';
+import theme from 'src/theme';
 import { useGetDonationsGraphQuery } from './DonationsGraph.generated';
 
-const LegendText = styled(Typography)(({ theme }) => ({
-  margin: theme.spacing(3, 0),
-  writingMode: 'vertical-rl',
-  textOrientation: 'mixed',
-}));
-
 const GraphContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  margin: theme.spacing(0, 2, 0, 0),
-}));
-
-const GraphLoadingPlaceHolder = styled(Skeleton)(({ theme }) => ({
-  width: '400',
-  height: '24px',
-  margin: theme.spacing(2, 0),
+  height: 300,
+  marginBottom: theme.spacing(2),
+  padding: theme.spacing(1),
+  overflowX: 'scroll',
 }));
 
 interface DonationsGraphProps {
@@ -108,22 +100,26 @@ export const DonationsGraph: React.FC<DonationsGraphProps> = ({
           })}
         </Typography>
       )}
-      <GraphContainer fontFamily={theme.typography.fontFamily}>
+      <GraphContainer>
         {loading ? (
-          <Box style={{ width: '100%' }} role="alert">
-            <GraphLoadingPlaceHolder />
-            <GraphLoadingPlaceHolder />
-            <GraphLoadingPlaceHolder />
-          </Box>
+          <Skeleton
+            variant="rounded"
+            width="100%"
+            height="100%"
+            aria-label={t('Loading donations graph')}
+          />
         ) : (
-          <>
-            <LegendText variant="body1" role="textbox">
-              {t('Amount ({{amount}})', { amount: convertedCurrency })}
-            </LegendText>
-            <BarChart width={600} height={300} data={months}>
+          <ResponsiveContainer minWidth={600}>
+            <BarChart margin={{ left: 30 }} data={months}>
               <CartesianGrid strokeDasharray="3 3" />
               <XAxis dataKey="month" />
-              <YAxis />
+              <YAxis
+                label={
+                  <Text dx={10} dy={80} angle={90}>
+                    {t('Amount ({{amount}})', { amount: convertedCurrency })}
+                  </Text>
+                }
+              />
               <Tooltip />
               <Legend />
               <Bar
@@ -137,7 +133,7 @@ export const DonationsGraph: React.FC<DonationsGraphProps> = ({
                 fill={theme.palette.secondary.main}
               />
             </BarChart>
-          </>
+          </ResponsiveContainer>
         )}
       </GraphContainer>
     </>

src/components/DonationTable/DonationTable.tsx

@@ -205,43 +205,49 @@ export const DonationTable: React.FC<DonationTableProps> = ({
     {
       field: 'date',
       headerName: t('Date'),
-      minWidth: 80,
       flex: 1,
+      minWidth: 80,
       renderCell: date,
     },
     {
       field: 'donorAccountName',
       headerName: t('Partner'),
       flex: 3,
+      minWidth: 200,
       renderCell: donor,
     },
     {
       field: 'convertedAmount',
       headerName: t('Amount'),
       flex: 1,
+      minWidth: 120,
       renderCell: amount,
     },
     {
       field: 'foreignAmount',
       headerName: t('Foreign Amount'),
       flex: 1.5,
+      minWidth: 120,
       renderCell: foreignAmount,
       hideable: false,
     },
     {
       field: 'designationAccount',
       headerName: t('Designation'),
       flex: 3,
+      minWidth: 200,
     },
     {
       field: 'paymentMethod',
       headerName: t('Method'),
       flex: 1,
+      minWidth: 100,
     },
     {
       field: 'appeal',
       headerName: t('Appeal'),
       flex: 1,
+      minWidth: 100,
       renderCell: appeal,
     },
     {

src/components/Layouts/SidePanelsLayout.tsx

@@ -115,7 +115,7 @@ export const SidePanelsLayout: FC<SidePanelsLayoutProps> = ({
   headerHeight = '0px',
 }) => {
   const isMobile = useMediaQuery((theme: Theme) =>
-    theme.breakpoints.down('sm'),
+    theme.breakpoints.down('md'),
   );
 
   return (