refactor: [M3-7585] - Upgrade to React 18

package.json

@@ -58,11 +58,11 @@
     "lodash": "^4.17.21",
     "glob-parent": "^5.1.2",
     "hosted-git-info": "^5.0.0",
-    "@types/react": "^17",
     "yaml": "^2.3.0",
     "word-wrap": "^1.2.4",
     "semver": "^7.5.2",
-    "tough-cookie": "^4.1.3"
+    "tough-cookie": "^4.1.3",
+    "jackspeak": "2.1.1"
   },
   "workspaces": {
     "packages": [

packages/manager/.changeset/pr-10169-tech-stories-1707760967410.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Update to React 18 ([#10169](https://github.com/linode/manager/pull/10169))

packages/manager/cypress/support/ui/select.ts

@@ -25,6 +25,7 @@ export const select = {
    * @returns Cypress chainable.
    */
   findItemById: (id: string) => {
+    // eslint-disable-next-line cypress/unsafe-to-chain-command
     return cy
       .get(`[data-qa-option="${id}"]`)
       .scrollIntoView()
@@ -41,6 +42,7 @@ export const select = {
    * @returns Cypress chainable.
    */
   findItemByText: (text: string) => {
+    // eslint-disable-next-line cypress/unsafe-to-chain-command
     return cy
       .get('[data-qa-option]')
       .contains(text)
@@ -58,6 +60,7 @@ export const select = {
    * @returns Cypress chainable.
    */
   findLinodeItemByText: (text: string) => {
+    // eslint-disable-next-line cypress/unsafe-to-chain-command
     return cy
       .get('[data-qa-linode-option]')
       .contains(text)

packages/manager/package.json

@@ -49,10 +49,10 @@
     "patch-package": "^7.0.0",
     "qrcode.react": "^0.8.0",
     "ramda": "~0.25.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-csv": "^2.0.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-dropzone": "~11.2.0",
     "react-number-format": "^3.5.0",
     "react-query": "^3.3.2",
@@ -121,17 +121,15 @@
     "@storybook/theming": "^7.6.10",
     "@swc/core": "^1.3.1",
     "@testing-library/cypress": "^10.0.0",
-    "@testing-library/jest-dom": "~5.11.3",
-    "@testing-library/react": "~10.4.9",
-    "@testing-library/react-hooks": "~3.4.1",
-    "@testing-library/user-event": "^12.1.1",
+    "@testing-library/jest-dom": "~6.4.2",
+    "@testing-library/react": "~14.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/braintree-web": "^3.75.23",
     "@types/chai-string": "^1.4.5",
     "@types/chart.js": "^2.9.21",
     "@types/css-mediaquery": "^0.1.1",
     "@types/he": "^1.1.0",
     "@types/highlight.js": "~10.1.0",
-    "@types/jest-axe": "^3.5.7",
     "@types/jsdom": "^21.1.4",
     "@types/jspdf": "^1.3.3",
     "@types/luxon": "3.4.2",
@@ -141,10 +139,10 @@
     "@types/node": "^12.7.1",
     "@types/qrcode.react": "^0.8.0",
     "@types/ramda": "0.25.16",
-    "@types/react": "^17.0.27",
+    "@types/react": "^18.2.55",
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-csv": "^1.1.3",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^18.2.18",
     "@types/react-redux": "~7.1.7",
     "@types/react-router-dom": "~5.3.3",
     "@types/react-router-hash-link": "^1.2.1",
@@ -165,7 +163,7 @@
     "chalk": "^5.2.0",
     "commander": "^6.2.1",
     "css-mediaquery": "^0.1.2",
-    "cypress": "^13.5.0",
+    "cypress": "13.5.0",
     "cypress-axe": "^1.0.0",
     "cypress-file-upload": "^5.0.7",
     "cypress-real-events": "^1.11.0",
@@ -188,7 +186,6 @@
     "eslint-plugin-xss": "^0.1.10",
     "factory.ts": "^0.5.1",
     "glob": "^10.3.1",
-    "jest-axe": "^8.0.0",
     "jsdom": "^22.1.0",
     "junit2json": "^3.1.4",
     "lint-staged": "^13.2.2",

packages/manager/src/components/AccessPanel/UserSSHKeyPanel.test.tsx

@@ -111,7 +111,7 @@ describe('UserSSHKeyPanel', () => {
         expect(getByText('test-user')).toBeInTheDocument();
         expect(getByText('ssh-key')).toBeInTheDocument();
       });
-      userEvent.click(getByRole('checkbox'));
+      await userEvent.click(getByRole('checkbox'));
       expect(props.setAuthorizedUsers).toBeCalledWith(['test-user']);
     });
   });

packages/manager/src/components/AccountActivation/AccountActivationError.tsx

@@ -26,7 +26,7 @@ const AccountActivationError = (props: CombinedProps) => {
       {getAPIErrorOrDefault(
         props.errors,
         'Your account is not yet activated. Please reach out to [email protected] for more information'
-      )}
+      )[0].reason}
     </React.Fragment>
   );
 };

packages/manager/src/components/ActionsPanel/ActionsPanel.test.tsx

@@ -47,7 +47,7 @@ describe('ActionsPanel', () => {
     expect(screen.queryByTestId(secondaryButtonTestId)).not.toBeInTheDocument();
   });
 
-  it('should call primaryButtonHandler when primary button is clicked', () => {
+  it('should call primaryButtonHandler when primary button is clicked', async () => {
     const mockHandler = vi.fn();
     renderWithTheme(
       <ActionsPanel
@@ -58,11 +58,11 @@ describe('ActionsPanel', () => {
         }}
       />
     );
-    userEvent.click(screen.getByTestId(primaryButtonTestId));
+    await userEvent.click(screen.getByTestId(primaryButtonTestId));
     expect(mockHandler).toHaveBeenCalledTimes(1);
   });
 
-  it('should call secondaryButtonHandler when secondary button is clicked', () => {
+  it('should call secondaryButtonHandler when secondary button is clicked', async () => {
     const mockHandler = vi.fn();
     renderWithTheme(
       <ActionsPanel
@@ -73,7 +73,7 @@ describe('ActionsPanel', () => {
         }}
       />
     );
-    userEvent.click(screen.getByTestId(secondaryButtonTestId));
+    await userEvent.click(screen.getByTestId(secondaryButtonTestId));
     expect(mockHandler).toHaveBeenCalledTimes(1);
   });
 });

packages/manager/src/components/AreaChart/AreaChart.tsx

@@ -173,11 +173,15 @@ export const AreaChart = (props: AreaChartProps) => {
                   {value}
                 </span>
               )}
+              onClick={({ dataKey }) => {
+                if (dataKey) {
+                  handleLegendClick(dataKey as string);
+                }
+              }}
               wrapperStyle={{
                 left: 25,
               }}
               iconType="square"
-              onClick={(props) => handleLegendClick(props.dataKey)}
             />
           )}
           {showLegend && legendRows && (

packages/manager/src/components/Autocomplete/Autocomplete.tsx

@@ -33,6 +33,7 @@ export interface EnhancedAutocompleteProps<
   noMarginTop?: boolean;
   /** Text to show when the Autocomplete search yields no results. */
   noOptionsText?: string;
+  placeholder?: string;
   /** Label for the "select all" option. */
   selectAllLabel?: string;
   textFieldProps?: Partial<TextFieldProps>;

packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextfield.test.tsx

@@ -1,13 +1,11 @@
+import { waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { debounce } from 'lodash';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { DebouncedSearchTextField } from './DebouncedSearchTextField';
 
-vi.useFakeTimers();
-
 const labelVal = 'Search textfield label';
 const textfieldId = 'textfield-input';
 const props = {
@@ -45,20 +43,15 @@ describe('Debounced Search Text Field', () => {
     expect(circleIcon).toBeInTheDocument();
   });
 
-  it('calls isSearching', () => {
-    const debouncedOnSearch = debounce(props.onSearch, 250);
+  it('calls isSearching', async () => {
     const screen = renderWithTheme(
-      <DebouncedSearchTextField
-        {...props}
-        debounceTime={250}
-        onSearch={debouncedOnSearch}
-      />
+      <DebouncedSearchTextField {...props} debounceTime={250} />
     );
 
     const textfield = screen.getByTestId(textfieldId);
-    userEvent.type(textfield, 'test');
-    vi.runAllTimers();
-    expect(props.onSearch).toHaveBeenCalled();
+    await userEvent.type(textfield, 'test');
+
+    await waitFor(() => expect(props.onSearch).toHaveBeenCalled());
   });
 
   it('renders the expected placeholder', () => {

packages/manager/src/components/EditableText/EditableText.test.tsx

@@ -86,7 +86,7 @@ describe('Editable Text', () => {
     expect(getByLabelText(BUTTON_LABEL)).toBeInTheDocument();
   });
 
-  it('calls onEdit if the text has been changed', () => {
+  it('calls onEdit if the text has been changed', async () => {
     const { getByLabelText, getByTestId } = renderWithTheme(
       <EditableText {...props} />
     );
@@ -101,7 +101,7 @@ describe('Editable Text', () => {
     // editing text
     const textfield = getByTestId('textfield-input');
     expect(textfield).toHaveValue('Edit this');
-    userEvent.type(textfield, ' has now been edited');
+    await userEvent.type(textfield, ' has now been edited');
     expect(textfield).toHaveValue('Edit this has now been edited');
 
     // saving text

packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.test.tsx

@@ -16,8 +16,6 @@ const disabledProps = {
   disabled: true,
 };
 
-beforeEach(vi.clearAllMocks);
-
 describe('EnhancedNumberInput', () => {
   it("should increment the input's value by 1 when the plus button is clicked", () => {
     const { getByTestId } = render(

packages/manager/src/components/EnhancedSelect/__mocks__/Select.tsx

@@ -50,7 +50,6 @@ export default ({
         name={_label}
         onBlur={handleChange}
         onChange={handleChange}
-        placeholder={placeholder}
         value={value ?? ''}
       >
         {_options.map((thisOption: any) => (

packages/manager/src/components/Link.test.tsx

@@ -60,7 +60,7 @@ describe('Link component', () => {
     expect(linkElement).toHaveTextContent(/External Link/);
   });
 
-  it('calls the onClick handler when the link is clicked', () => {
+  it('calls the onClick handler when the link is clicked', async () => {
     const mockOnClick = vi.fn();
     const mockProps: LinkProps = {
       children: 'External Link',
@@ -76,7 +76,7 @@ describe('Link component', () => {
     expect(linkElement.tagName).toBe('A');
     expect(linkElement).toHaveTextContent(/External Link/);
 
-    userEvent.click(linkElement);
+    await userEvent.click(linkElement);
 
     expect(mockOnClick).toHaveBeenCalledTimes(1);
   });

packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.test.tsx

@@ -111,7 +111,7 @@ describe('Payment Method Row', () => {
     expect(getByLabelText(expectedLabelPayPal)).toBeVisible();
   });
 
-  it('Disables "Make Default" and "Delete" actions if payment method is set as default', () => {
+  it('Disables "Make Default" and "Delete" actions if payment method is set as default', async () => {
     const { getByLabelText, getByText } = renderWithTheme(
       <PayPalScriptProvider options={{ 'client-id': PAYPAL_CLIENT_ID }}>
         <PaymentMethodRow
@@ -120,7 +120,7 @@ describe('Payment Method Row', () => {
         />
       </PayPalScriptProvider>
     );
-    userEvent.click(getByLabelText(/^Action menu for/));
+    await userEvent.click(getByLabelText(/^Action menu for/));
     expect(
       getByText('Make Default').closest('li')?.getAttribute('aria-disabled')
     ).toEqual('true');
@@ -129,7 +129,7 @@ describe('Payment Method Row', () => {
     ).toEqual('true');
   });
 
-  it('Calls `onDelete` callback when "Delete" action is clicked', () => {
+  it('Calls `onDelete` callback when "Delete" action is clicked', async () => {
     const mockFunction = vi.fn();
 
     const { getByLabelText, getByText } = renderWithTheme(
@@ -142,16 +142,16 @@ describe('Payment Method Row', () => {
     );
 
     const actionMenu = getByLabelText('Action menu for card ending in 1881');
-    userEvent.click(actionMenu);
+    await userEvent.click(actionMenu);
 
     const deleteActionButton = getByText('Delete');
     expect(deleteActionButton).toBeVisible();
-    userEvent.click(deleteActionButton);
+    await userEvent.click(deleteActionButton);
 
     expect(mockFunction).toBeCalledTimes(1);
   });
 
-  it('Makes payment method default when "Make Default" action is clicked', () => {
+  it('Makes payment method default when "Make Default" action is clicked', async () => {
     const paymentMethod = paymentMethodFactory.build({
       data: {
         card_type: 'Visa',
@@ -167,16 +167,16 @@ describe('Payment Method Row', () => {
     );
 
     const actionMenu = getByLabelText('Action menu for card ending in 1111');
-    userEvent.click(actionMenu);
+    await userEvent.click(actionMenu);
 
     const makeDefaultButton = getByText('Make Default');
     expect(makeDefaultButton).toBeVisible();
-    userEvent.click(makeDefaultButton);
+    await userEvent.click(makeDefaultButton);
 
     expect(makeDefaultPaymentMethod).toBeCalledTimes(1);
   });
 
-  it('Opens "Make a Payment" drawer if "Make a Payment" action is clicked', () => {
+  it('Opens "Make a Payment" drawer if "Make a Payment" action is clicked', async () => {
     const paymentMethod = paymentMethodFactory.build();
 
     /*
@@ -195,11 +195,11 @@ describe('Payment Method Row', () => {
     );
 
     const actionMenu = getByLabelText('Action menu for card ending in 1881');
-    userEvent.click(actionMenu);
+    await userEvent.click(actionMenu);
 
     const makePaymentButton = getByText('Make a Payment');
     expect(makePaymentButton).toBeVisible();
-    userEvent.click(makePaymentButton);
+    await userEvent.click(makePaymentButton);
 
     expect(getByTestId('drawer')).toBeVisible();
     expect(getByTestId('drawer-title').textContent).toEqual('Make a Payment');

packages/manager/src/components/PrimaryNav/SideMenu.test.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom';
 import { fireEvent, screen } from '@testing-library/react';
 import React from 'react';
 

packages/manager/src/components/SingleTextFieldForm/SingleTextFieldForm.test.tsx

@@ -21,8 +21,8 @@ describe('SingleTextFieldForm', () => {
 
   it('Renders a success message on success', async () => {
     renderWithTheme(<SingleTextFieldForm {...props} />);
-    userEvent.type(screen.getByTestId('textfield-input'), 'new-value');
-    userEvent.click(screen.getByText('Update Username'));
+    await userEvent.type(screen.getByTestId('textfield-input'), 'new-value');
+    await userEvent.click(screen.getByText('Update Username'));
     await waitFor(() =>
       expect(screen.getByText(/username updated/i)).toBeInTheDocument()
     );
@@ -37,8 +37,8 @@ describe('SingleTextFieldForm', () => {
         )}
       />
     );
-    userEvent.type(screen.getByTestId('textfield-input'), 'new-value');
-    userEvent.click(screen.getByText('Update Username'));
+    await userEvent.type(screen.getByTestId('textfield-input'), 'new-value');
+    await userEvent.click(screen.getByText('Update Username'));
     await waitFor(() =>
       expect(screen.getByText(/error updating/i)).toBeInTheDocument()
     );

packages/manager/src/components/TagCell/TagCell.tsx

@@ -41,7 +41,7 @@ const TagCell = (props: TagCellProps) => {
   const [addingTag, setAddingTag] = React.useState<boolean>(false);
   const [loading, setLoading] = React.useState<boolean>(false);
   const overflowRef = React.useCallback(
-    (node) => {
+    (node: HTMLDivElement) => {
       if (node !== null) {
         setOverflow(checkOverflow(node));
       }