Merge in main

.yarn/patches/@mui-base-npm-5.0.0-alpha.98-f4d605d753.patch → .yarn/patches/@mui-base-npm-5.0.0-beta.40-248417914d.patch

@@ -1,19 +1,18 @@
-diff --git a/AutocompleteUnstyled/useAutocomplete.js b/AutocompleteUnstyled/useAutocomplete.js
-index 8bb17682cf79bf201ab080833d10194832e6080e..53357d7cbf8fc9a6eca319f68af9f0fc8854129b 100644
---- a/AutocompleteUnstyled/useAutocomplete.js
-+++ b/AutocompleteUnstyled/useAutocomplete.js
-@@ -344,6 +344,10 @@ export default function useAutocomplete(props) {
+diff --git a/useAutocomplete/useAutocomplete.js b/useAutocomplete/useAutocomplete.js
+index b2c2a8a6770571390b3aa61267413314865642e7..8d386b2b0e240ae5746d156d3b8dea110a80bee2 100644
+--- a/useAutocomplete/useAutocomplete.js
++++ b/useAutocomplete/useAutocomplete.js
+@@ -330,6 +330,9 @@ export function useAutocomplete(props) {
+     }
      const getNextIndex = () => {
        const maxIndex = filteredOptions.length - 1;
-
 +      if (diff === 'clear') {
 +        return -1;
 +      }
-+
        if (diff === 'reset') {
          return defaultHighlighted;
        }
-@@ -1009,6 +1013,9 @@ export default function useAutocomplete(props) {
+@@ -958,6 +961,9 @@ export function useAutocomplete(props) {
        onMouseDown: event => {
          // Prevent blur
          event.preventDefault();

package.json

@@ -183,8 +183,9 @@
     "package-json/got": "^11.8.5",
     "http-cache-semantics": "~4.1.1",
     "cacheable-request": "^10.2.7",
-    "@mui/[email protected]": "patch:@mui/base@npm%3A5.0.0-alpha.98#./.yarn/patches/@mui-base-npm-5.0.0-alpha.98-f4d605d753.patch",
-    "@mui/x-data-grid@^5.17.4": "patch:@mui/x-data-grid@npm%3A5.17.4#./.yarn/patches/@mui-x-data-grid-npm-5.17.4-542730a19e.patch"
+    "@mui/x-data-grid@^5.17.4": "patch:@mui/x-data-grid@npm%3A5.17.4#./.yarn/patches/@mui-x-data-grid-npm-5.17.4-542730a19e.patch",
+    "@mui/base@^5.0.0-beta.36": "patch:@mui/base@npm%3A5.0.0-beta.40#./.yarn/patches/@mui-base-npm-5.0.0-beta.40-248417914d.patch",
+    "@mui/[email protected]": "patch:@mui/base@npm%3A5.0.0-beta.40#./.yarn/patches/@mui-base-npm-5.0.0-beta.40-248417914d.patch"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --cache --fix"

pages/accountLists/[accountListId]/tools/fixSendNewsletter/[[...contactId]].page.test.tsx

@@ -0,0 +1,91 @@
+import { useRouter } from 'next/router';
+import { ThemeProvider } from '@mui/material/styles';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ApolloErgonoMockMap } from 'graphql-ergonomock';
+import { getSession } from 'next-auth/react';
+import { SnackbarProvider } from 'notistack';
+import { I18nextProvider } from 'react-i18next';
+import TestRouter from '__tests__/util/TestRouter';
+import { GqlMockedProvider } from '__tests__/util/graphqlMocking';
+import { mockInvalidNewslettersResponse } from 'src/components/Tool/FixSendNewsletter/FixSendNewsletterMock';
+import { InvalidNewsletterQuery } from 'src/components/Tool/FixSendNewsletter/InvalidNewsletter.generated';
+import i18n from 'src/lib/i18n';
+import theme from 'src/theme';
+import FixSendNewsletterPage from './[[...contactId]].page';
+
+jest.mock('next-auth/react');
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(),
+}));
+jest.mock('src/lib/helpScout', () => ({
+  suggestArticles: jest.fn(),
+}));
+jest.mock('notistack', () => ({
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  ...jest.requireActual('notistack'),
+  useSnackbar: () => {
+    return {
+      enqueueSnackbar: jest.fn(),
+    };
+  },
+}));
+const pushFn = jest.fn();
+const accountListId = 'account-list-1';
+const session = {
+  expires: '2021-10-28T14:48:20.897Z',
+  user: {
+    email: 'Chair Library Bed',
+    image: null,
+    name: 'Dung Tapestry',
+    token: 'superLongJwtString',
+  },
+};
+const Components = () => (
+  <ThemeProvider theme={theme}>
+    <TestRouter>
+      <I18nextProvider i18n={i18n}>
+        <SnackbarProvider>
+          <GqlMockedProvider<{
+            InvalidNewsletter: InvalidNewsletterQuery;
+          }>
+            mocks={mockInvalidNewslettersResponse as ApolloErgonoMockMap}
+          >
+            <FixSendNewsletterPage />
+          </GqlMockedProvider>
+        </SnackbarProvider>
+      </I18nextProvider>
+    </TestRouter>
+  </ThemeProvider>
+);
+
+describe('FixSendNewsletterPage', () => {
+  beforeEach(() => {
+    (getSession as jest.Mock).mockResolvedValue(session);
+    (useRouter as jest.Mock).mockReturnValue({
+      query: {
+        accountListId,
+      },
+      isReady: true,
+      push: pushFn,
+    });
+  });
+
+  it('should open up contact details', async () => {
+    const { findByText, queryByTestId } = render(<Components />);
+    await waitFor(() =>
+      expect(queryByTestId('LoadingSpinner')).not.toBeInTheDocument(),
+    );
+    const contactName = await findByText('Baggins, Frodo');
+
+    expect(contactName).toBeInTheDocument();
+    userEvent.click(contactName);
+
+    await waitFor(() => {
+      expect(pushFn).toHaveBeenCalledWith(
+        `/accountLists/${accountListId}/tools/fixSendNewsletter/${'contactId1'}`,
+      );
+    });
+  });
+});

pages/accountLists/[accountListId]/tools/fixSendNewsletter/[[...contactId]].page.tsx

@@ -19,6 +19,17 @@ const FixSendNewsletterPage: React.FC = () => {
       pageTitle={t('Fix Send Newsletter')}
       pageUrl={pageUrl}
       selectedMenuId="fixSendNewsletter'"
+      styles={
+        <style>{`
+          div.MuiBox-root {
+            overflow-x: visible;
+            overflow-y: visible;
+          }
+          div.MuiBox-root#scrollOverride {
+            overflow-y: auto;
+          }
+    `}</style>
+      }
     >
       <FixSendNewsletter
         accountListId={accountListId || ''}