Fix warnings caused by react upgrade

louise-davies · louise-davies · commit 1e79f6d00381 · 2026-02-27T10:33:35.000Z
- also had to upgrade react-virtualized to fix warnings
- which then broke querying for rows as now there's a top level row container that was previously role rowgroup but now role row
- so adjust code/tests to account for this
diff --git a/packages/datagateway-common/package.json b/packages/datagateway-common/package.json
@@ -30,7 +30,7 @@
     "react-draggable": "4.5.0",
     "react-i18next": "12.3.1",
     "react-redux": "8.1.3",
-    "react-virtualized": "9.22.5",
+    "react-virtualized": "9.22.6",
     "redux": "4.2.0",
     "redux-mock-store": "1.5.4",
     "redux-thunk": "2.4.1",
diff --git a/packages/datagateway-common/src/api/dataPublications.test.tsx b/packages/datagateway-common/src/api/dataPublications.test.tsx
@@ -1,7 +1,6 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import axios from 'axios';
 import { History, createMemoryHistory } from 'history';
-import { act } from 'react-dom/test-utils';
 import { DataPublication } from '../app.types';
 import handleICATError from '../handleICATError';
 import { createReactQueryWrapper } from '../setupTests';
diff --git a/packages/datagateway-common/src/api/datasets.test.tsx b/packages/datagateway-common/src/api/datasets.test.tsx
@@ -1,7 +1,6 @@
-import { renderHook, waitFor } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import axios from 'axios';
 import { History, createMemoryHistory } from 'history';
-import { act } from 'react-dom/test-utils';
 import { Dataset } from '../app.types';
 import handleICATError from '../handleICATError';
 import { createReactQueryWrapper } from '../setupTests';
diff --git a/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx b/packages/datagateway-common/src/table/headerRenderers/dataHeader.component.tsx
@@ -1,25 +1,25 @@
+import AddIcon from '@mui/icons-material/Add';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import SortIcon from '@mui/icons-material/Sort';
+import {
+  Box,
+  Divider,
+  SxProps,
+  TableCell,
+  TableSortLabel,
+  Typography,
+} from '@mui/material';
 import React from 'react';
+import Draggable from 'react-draggable';
+import { TableHeaderProps } from 'react-virtualized';
 import {
   Filter,
   FiltersType,
   Order,
   SortType,
   UpdateMethod,
 } from '../../app.types';
-import { TableHeaderProps } from 'react-virtualized';
-import {
-  TableCell,
-  TableSortLabel,
-  Box,
-  Typography,
-  Divider,
-  SxProps,
-} from '@mui/material';
 import { StyledTooltip } from '../../arrowtooltip.component';
-import Draggable from 'react-draggable';
-import SortIcon from '@mui/icons-material/Sort';
-import AddIcon from '@mui/icons-material/Add';
-import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 
 const DataHeader = (
   props: TableHeaderProps & {
@@ -135,6 +135,8 @@ const DataHeader = (
     </Typography>
   );
 
+  const dividerRef = React.useRef(null);
+
   return (
     <TableCell
       size="small"
@@ -162,9 +164,12 @@ const DataHeader = (
       </div>
       <Draggable
         axis="none"
+        nodeRef={dividerRef}
+        offsetParent={document.body}
         onDrag={(_event, { deltaX }) => resizeColumn(dataKey, deltaX)}
       >
         <div
+          ref={dividerRef}
           style={{
             marginLeft: 18,
             paddingLeft: '4px',
diff --git a/packages/datagateway-common/src/table/table.component.test.tsx b/packages/datagateway-common/src/table/table.component.test.tsx
@@ -75,8 +75,10 @@ describe('Table component', () => {
     expect(within(columnHeaders[0]).getByText('Test 1')).toBeInTheDocument();
     expect(within(columnHeaders[1]).getByText('Test 2')).toBeInTheDocument();
 
-    const rows = await screen.findAllByRole('row');
-    const cellsInFirstRow = within(rows[1]).getAllByRole('gridcell');
+    const rows = (await screen.findAllByRole('row')).filter((e) =>
+      e.hasAttribute('aria-rowindex')
+    );
+    const cellsInFirstRow = within(rows[0]).getAllByRole('gridcell');
     expect(within(cellsInFirstRow[0]).getByText('test1')).toBeInTheDocument();
     expect(within(cellsInFirstRow[1]).getByText('2 B')).toBeInTheDocument();
   });
diff --git a/packages/datagateway-common/src/table/table.component.tsx b/packages/datagateway-common/src/table/table.component.tsx
@@ -330,6 +330,8 @@ export const VirtualizedTable = React.memo(
           return (
             <DetailsPanelRow
               {...props}
+              // eslint-disable-next-line react/prop-types
+              key={props.key}
               detailsPanel={detailsPanel}
               detailPanelRef={detailPanelRef}
               detailsPanelResize={detailsPanelResize}
diff --git a/packages/datagateway-dataview/package.json b/packages/datagateway-dataview/package.json
@@ -43,7 +43,7 @@
     "react-i18next": "12.3.1",
     "react-redux": "8.1.3",
     "react-router-dom": "5.3.4",
-    "react-virtualized": "9.22.5",
+    "react-virtualized": "9.22.6",
     "redux": "4.2.0",
     "redux-logger": "3.0.6",
     "redux-mock-store": "1.5.4",
diff --git a/packages/datagateway-dataview/src/page/pageRouting.component.test.tsx b/packages/datagateway-dataview/src/page/pageRouting.component.test.tsx
@@ -10,10 +10,9 @@ import { initialState as dgDataViewInitialState } from '../state/reducers/dgdata
 import PageRouting from './pageRouting.component';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import axios from 'axios';
 import { History, createMemoryHistory } from 'history';
-import { act } from 'react-dom/test-utils';
 import { findColumnHeaderByName, flushPromises } from '../setupTests';
 import {
   checkDatasetId as unmockedCheckDatasetId,
diff --git a/packages/datagateway-dataview/src/page/withIdCheck.test.tsx b/packages/datagateway-dataview/src/page/withIdCheck.test.tsx
@@ -1,10 +1,9 @@
+import { act, render, RenderResult } from '@testing-library/react';
 import React from 'react';
-import withIdCheck from './withIdCheck';
-import { act } from 'react-dom/test-utils';
-import { flushPromises } from '../setupTests';
 import { MemoryRouter } from 'react-router-dom';
-import { render, RenderResult } from '@testing-library/react';
 import type { Mock, MockInstance } from 'vitest';
+import { flushPromises } from '../setupTests';
+import withIdCheck from './withIdCheck';
 
 describe('withIdCheck', () => {
   let useEffect: MockInstance;
diff --git a/packages/datagateway-dataview/src/setupTests.ts b/packages/datagateway-dataview/src/setupTests.ts
@@ -95,13 +95,14 @@ export const findColumnHeaderByName = async (
  * Finds all table rows except the header row.
  */
 export const findAllRows = async (): Promise<HTMLElement[]> =>
-  (await screen.findAllByRole('row')).slice(1);
+  (await screen.findAllByRole('row')).filter((e) =>
+    e.hasAttribute('aria-rowindex')
+  );
 
 /**
- * Find the table row at the given index. This assumes the first table row is always the header row.
+ * Find the table row at the given index.
  *
- * @param index The index of the table row, igoring the header row. For example, if the table has 2 rows and the first row is the header row,
- *              the actual row that contains the data is considered the first row, and has an index of 0.
+ * @param index The index of the table row to find - so the first data row of the table is 0.
  */
 export const findRowAt = async (index: number): Promise<HTMLElement> => {
   let rows;
diff --git a/packages/datagateway-dataview/src/views/card/isis/isisInvestigationsCardView.component.test.tsx b/packages/datagateway-dataview/src/views/card/isis/isisInvestigationsCardView.component.test.tsx
@@ -1,17 +1,17 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
+  act,
   render,
-  type RenderResult,
   screen,
   within,
+  type RenderResult,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import axios, { type AxiosResponse } from 'axios';
 import { dGCommonInitialState, type Investigation } from 'datagateway-common';
 import { createMemoryHistory, type History } from 'history';
-import { act } from 'react-dom/test-utils';
 import { Provider } from 'react-redux';
-import { generatePath, Router } from 'react-router-dom';
+import { Router, generatePath } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import type { MockInstance } from 'vitest';
diff --git a/packages/datagateway-dataview/src/views/table/dls/dlsProposalsTable.component.test.tsx b/packages/datagateway-dataview/src/views/table/dls/dlsProposalsTable.component.test.tsx
@@ -1,32 +1,32 @@
-import DLSProposalsTable from './dlsProposalsTable.component';
-import type { StateType } from '../../../state/app.types';
-import { initialState as dgDataViewInitialState } from '../../../state/reducers/dgdataview.reducer';
-import {
-  dGCommonInitialState,
-  type Investigation,
-  useInvestigationCount,
-  useInvestigationsInfinite,
-} from 'datagateway-common';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-redux';
-import thunk from 'redux-thunk';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Router } from 'react-router-dom';
-import { createMemoryHistory, History } from 'history';
 import {
   render,
-  type RenderResult,
   screen,
   within,
+  type RenderResult,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {
+  dGCommonInitialState,
+  useInvestigationCount,
+  useInvestigationsInfinite,
+  type Investigation,
+} from 'datagateway-common';
+import { History, createMemoryHistory } from 'history';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
 import {
   findAllRows,
   findCellInRow,
   findColumnHeaderByName,
   findColumnIndexByName,
   findRowAt,
 } from '../../../setupTests';
+import type { StateType } from '../../../state/app.types';
+import { initialState as dgDataViewInitialState } from '../../../state/reducers/dgdataview.reducer';
+import DLSProposalsTable from './dlsProposalsTable.component';
 
 vi.mock('datagateway-common', async () => {
   const originalModule = await vi.importActual('datagateway-common');
diff --git a/packages/datagateway-dataview/src/views/table/isis/isisMyDataTable.component.test.tsx b/packages/datagateway-dataview/src/views/table/isis/isisMyDataTable.component.test.tsx
@@ -547,9 +547,8 @@ describe('ISIS MyData table component', () => {
     });
     renderComponent();
 
-    const rows = await screen.findAllByRole('row');
-    // 2 rows expected, 1 for the header row, and 1 for the items in rowData.
-    expect(rows).toHaveLength(2);
+    const rows = await findAllRows();
+    expect(rows).toHaveLength(1);
   });
 
   it('gracefully handles missing Study from Study Investigation object and missing Instrument from InvestigationInstrument object', async () => {
@@ -577,9 +576,8 @@ describe('ISIS MyData table component', () => {
       'investigations.instrument'
     );
 
-    const rows = await screen.findAllByRole('row');
-    // 2 rows expected, 1 for the header row, and 1 for the items in rowData.
-    expect(rows).toHaveLength(2);
+    const rows = await findAllRows();
+    expect(rows).toHaveLength(1);
 
     const row = await findRowAt(0);
 
diff --git a/packages/datagateway-download/package.json b/packages/datagateway-download/package.json
@@ -43,7 +43,7 @@
     "react-dom": "18.3.1",
     "react-i18next": "12.3.1",
     "react-router-dom": "5.3.4",
-    "react-virtualized": "9.22.5",
+    "react-virtualized": "9.22.6",
     "single-spa-react": "5.1.4",
     "tslib": "2.8.1",
     "typescript": "5.3.3",
diff --git a/packages/datagateway-download/src/App.test.tsx b/packages/datagateway-download/src/App.test.tsx
@@ -1,7 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { RenderResult, render } from '@testing-library/react';
+import { RenderResult, act, render } from '@testing-library/react';
 import * as React from 'react';
-import { act } from 'react-dom/test-utils';
 import App, { ErrorFallback, QueryClientSettingsUpdaterContext } from './App';
 import { DownloadSettingsContext } from './ConfigProvider';
 import { flushPromises } from './setupTests';
diff --git a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.test.tsx
@@ -639,12 +639,12 @@ describe('Download cart table component', () => {
       await screen.findByText('downloadCart.not_mintable')
     ).toBeInTheDocument();
 
-    const tableRows = within(
-      screen.getByRole('rowgroup', { name: 'grid' })
-    ).getAllByRole('row');
+    const tableRows = within(screen.getByRole('rowgroup', { name: 'grid' }))
+      .getAllByRole('row')
+      .filter((e) => e.hasAttribute('aria-rowindex'));
     const muiErrorColor = createTheme().palette.error.main;
     expect(tableRows[1]).toHaveStyle(`background-color: ${muiErrorColor}`);
-    expect(tableRows[1]).toHaveStyle(`background-color: ${muiErrorColor}`);
+    expect(tableRows[3]).toHaveStyle(`background-color: ${muiErrorColor}`);
     expect(tableRows[0]).not.toHaveStyle(`background-color: ${muiErrorColor}`);
     expect(tableRows[2]).not.toHaveStyle(`background-color: ${muiErrorColor}`);
 
diff --git a/packages/datagateway-download/src/downloadCart/downloadCartTable.component.tsx b/packages/datagateway-download/src/downloadCart/downloadCartTable.component.tsx
@@ -13,21 +13,21 @@ import {
   Typography,
 } from '@mui/material';
 import {
-  type ColumnType,
   Download,
-  type DownloadCartItem,
-  type DownloadCartTableItem,
   DownloadConfirmDialog,
-  formatBytes,
-  isMintabilityErrorExpected,
-  type SortType,
   Table,
-  type TableActionProps,
   TextColumnFilter,
-  type TextFilter,
+  formatBytes,
+  isMintabilityErrorExpected,
   useDownloadTypes,
   useIsCartMintable,
   useSubmitCart,
+  type ColumnType,
+  type DownloadCartItem,
+  type DownloadCartTableItem,
+  type SortType,
+  type TableActionProps,
+  type TextFilter,
 } from 'datagateway-common';
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
@@ -452,17 +452,18 @@ const DownloadCartTable: React.FC<DownloadCartTableProps> = (
                   overflowX: 'auto',
                   // handle the highlight of unmintable entities
                   ...(generateDOIButtonHover && {
-                    '& [role="rowgroup"] [role="row"]': Object.assign(
-                      {},
-                      ...unmintableRowIDs.map((id) => ({
-                        [`&:nth-of-type(${id + 1})`]: {
-                          bgcolor: 'error.main',
-                          '& [role="gridcell"] *': {
-                            color: 'error.contrastText',
+                    '& [role="rowgroup"] [role="row"][aria-rowindex]':
+                      Object.assign(
+                        {},
+                        ...unmintableRowIDs.map((id) => ({
+                          [`&:nth-of-type(${id + 1})`]: {
+                            bgcolor: 'error.main',
+                            '& [role="gridcell"] *': {
+                              color: 'error.contrastText',
+                            },
                           },
-                        },
-                      }))
-                    ),
+                        }))
+                      ),
                   }),
                 }}
               >
diff --git a/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap b/packages/datagateway-download/src/downloadStatus/__snapshots__/adminDownloadStatusTable.component.test.tsx.snap
@@ -1170,7 +1170,7 @@ exports[`Admin Download Status Table > should render correctly 1`] = `
                   >
                     <div
                       class="ReactVirtualized__Grid__innerScrollContainer"
-                      role="rowgroup"
+                      role="row"
                       style="width: auto; height: 150px; max-width: 856px; max-height: 150px; overflow: hidden; position: relative;"
                     >
                       <div
diff --git a/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap b/packages/datagateway-download/src/downloadStatus/__snapshots__/downloadStatusTable.component.test.tsx.snap
@@ -573,7 +573,7 @@ exports[`Download Status Table > should render correctly 1`] = `
             >
               <div
                 class="ReactVirtualized__Grid__innerScrollContainer"
-                role="rowgroup"
+                role="row"
                 style="width: auto; height: 150px; max-width: 436px; max-height: 150px; overflow: hidden; position: relative;"
               >
                 <div
diff --git a/packages/datagateway-search/cypress/e2e/search/datafileSearch.cy.ts b/packages/datagateway-search/cypress/e2e/search/datafileSearch.cy.ts
diff --git a/packages/datagateway-search/cypress/e2e/search/datasetSearch.cy.ts b/packages/datagateway-search/cypress/e2e/search/datasetSearch.cy.ts
diff --git a/packages/datagateway-search/cypress/e2e/search/investigationSearch.cy.ts b/packages/datagateway-search/cypress/e2e/search/investigationSearch.cy.ts
diff --git a/packages/datagateway-search/package.json b/packages/datagateway-search/package.json
diff --git a/packages/datagateway-search/src/searchTabs/searchTabs.component.test.tsx b/packages/datagateway-search/src/searchTabs/searchTabs.component.test.tsx
diff --git a/packages/datagateway-search/src/setupTests.ts b/packages/datagateway-search/src/setupTests.ts
diff --git a/yarn.lock b/yarn.lock
