Kbdev 1499 react upgrade

package.json

@@ -22,8 +22,8 @@
     "@types/lodash.omit": "^4.5.9",
     "@types/lodash.uniq": "^4.5.7",
     "@types/lodash.without": "^4.4.7",
-    "ag-grid-community": "~27.0.0",
-    "ag-grid-react": "~27.0.0",
+    "ag-grid-community": "^35.2.0",
+    "ag-grid-react": "^35.2.0",
     "buffer": "^6.0.3",
     "change-case": "^3.1.0",
     "copy-to-clipboard": "^3.3.1",
@@ -44,11 +44,10 @@
     "lodash.without": "^4.4.0",
     "notistack": "^3.0.2",
     "qs": "^6.9.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-google-charts": "^3.0.15",
-    "react-is": "^17.0.2",
-    "react-query": "^3.39.3",
+    "react-query": "npm:@tanstack/react-query@^5.96.1",
     "react-router-dom": "^6.22.2",
     "slugify": "^1.4.0",
     "typescript": "5.1",
@@ -57,16 +56,15 @@
     "whatwg-fetch": "2.0.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/d3-drag": "^3.0.7",
     "@types/d3-force": "^3.0.9",
     "@types/d3-selection": "^3.0.10",
     "@types/d3-zoom": "^3.0.8",
     "@types/lodash.isobject": "^3.0.6",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^5.1.4",
@@ -82,7 +80,7 @@
     "eslint-plugin-react-hooks": "~4.3.0",
     "eslint-plugin-simple-import-sort": "~7.0.0",
     "jsdom": "^28.1.0",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^19.2.4",
     "sass-embedded": "^1.97.3",
     "serve": "^14.2.1",
     "vite": "^7.3.1",
@@ -108,8 +106,5 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  },
-  "overrides": {
-    "react-is": "^17.0.2"
   }
 }

src/App.tsx

@@ -2,6 +2,7 @@ import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { CssBaseline } from '@mui/material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
 import { SnackbarProvider } from 'notistack';
 import React from 'react';
 import { QueryClientProvider } from 'react-query';
@@ -12,6 +13,8 @@ import api from '@/services/api';
 
 import MainView from './views/MainView';
 
+ModuleRegistry.registerModules([AllCommunityModule]);
+
 const cache = createCache({
   key: 'css',
   prepend: true,

src/components/Auth/index.tsx

@@ -65,9 +65,9 @@ const AuthProvider = (props: { children: ReactNode }) => {
   const { children } = props;
 
   const {
-    mutate: logInOrOut, isLoading: isAuthenticating, data, error,
-  } = useMutation(
-    async ({ loggingIn }: { loggingIn: boolean }) => {
+    mutate: logInOrOut, isPending: isAuthenticating, data, error,
+  } = useMutation({
+    mutationFn: async ({ loggingIn }: { loggingIn: boolean }) => {
       if (loggingIn) {
         const loggedIn = await keycloak.init({
           checkLoginIframe: false,
@@ -100,7 +100,7 @@ const AuthProvider = (props: { children: ReactNode }) => {
       await keycloak.logout();
       return undefined;
     },
-  );
+  });
 
   const { authorizationToken } = data ?? {};
 

src/components/DetailChip/__tests__/test.tsx

@@ -1,10 +1,11 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/vitest';
 
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import {
-  afterEach, beforeEach, describe, test, vi,
+  afterEach, beforeEach, describe, expect,
+  test, vi,
 } from 'vitest';
 
 import DetailChip from '..';

src/components/DetailChip/index.tsx

@@ -17,24 +17,24 @@ import {
 import React, { useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-interface DefaultPopupComponentProps<D> {
+interface DefaultPopupComponentProps<D extends object> {
   /** description of object. Defaults to title of card if title is not present */
   label: string;
   /** record object. properties will be extracted to be displayed */
   details?: D;
-  getDetails?: (...args: unknown[]) => unknown;
+  getDetails?: (arg: Partial<D> | undefined) => Record<string, unknown> | undefined;
   /** finds routeName for displayed record */
   getLink?: (...args: unknown[]) => string;
   /** title of card. Will usually be record displayName */
   title?: string;
   /** converts objs to string value for display */
-  valueToString?: (details: D | undefined) => string;
+  valueToString?: (details: unknown | undefined) => string;
 }
 
 /**
  * Default card pop up component displayed outlining details of record.
  */
-function DefaultPopupComponent<D>(props: DefaultPopupComponentProps<D>) {
+function DefaultPopupComponent<D extends object>(props: DefaultPopupComponentProps<D>) {
   const {
     details = {},
     getDetails = (d) => d,
@@ -64,14 +64,14 @@ function DefaultPopupComponent<D>(props: DefaultPopupComponentProps<D>) {
         <Divider />
         <Table>
           <TableBody>
-            {retrievedDetails && Object.keys(retrievedDetails).sort().map(
+            {Boolean(retrievedDetails) && Object.keys(retrievedDetails!).sort().map(
               (name) => (
                 <TableRow key={name} className="detail-popover__row">
                   <TableCell>
                     <Typography variant="h6">{name}</Typography>
                   </TableCell>
                   <TableCell>
-                    {valueToString(retrievedDetails[name])}
+                    {valueToString(retrievedDetails?.[name])}
                   </TableCell>
                 </TableRow>
               ),
@@ -83,34 +83,27 @@ function DefaultPopupComponent<D>(props: DefaultPopupComponentProps<D>) {
   );
 }
 
-interface DetailChipProps<D = Record<string, unknown>> {
+interface DetailChipProps<D extends object = Record<string, unknown>> extends DefaultPopupComponentProps<D> {
   /** label for the record */
   label: string;
   /** properties passed to the chip element */
   ChipProps?: Partial<React.ComponentProps<typeof Chip>>;
   /** function component constructor */
-  PopUpComponent?: (props: Record<string, unknown>) => JSX.Element;
+  PopUpComponent?: (props: Record<string, unknown>) => React.JSX.Element;
   /** props for PopUpComponent so that it mounts correctly */
   PopUpProps?: Record<string, unknown>;
   className?: string;
-  /** record to be displayed in chip. */
-  details?: D;
-  /** function to retrieve the details from the details object */
-  getDetails?: (...args: unknown[]) => unknown;
-  getLink?: (...args: unknown[]) => string;
   /** function handler for the user clicking the X on the chip */
   onDelete?: (...args: unknown[]) => unknown;
   /** the title for the pop-up card (defaults to the chip label) */
   title?: string;
-  /** function to call on details values */
-  valueToString?: (details: D | undefined) => string;
 }
 
 /**
  * Displays a record as a Material Chip. When clicked, opens a Popover
  * containing some brief details about the record.
  */
-function DetailChip<D>(props: DetailChipProps<D>) {
+function DetailChip<D extends object>(props: DetailChipProps<D>) {
   const {
     details,
     onDelete,

src/components/DetailDrawer/LinkEmbeddedPropList/index.tsx

@@ -9,7 +9,7 @@ import {
   ListItemText,
   Typography,
 } from '@mui/material';
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import RecordIdLink from '@/components/RecordIdLink';
 import { GeneralRecordType } from '@/components/types';
@@ -18,7 +18,7 @@ import util from '@/services/util';
 
 interface LinkEmbeddedPropListProps {
   /** property formatting function */
-  formatOtherProps: (arg: unknown, arg2: boolean) => unknown;
+  formatOtherProps: (arg: unknown, arg2: boolean) => (ReactNode[] | undefined);
   /** adds prop to opened object and handles expansion */
   handleExpand?: (name: string) => unknown;
   /** props to be displayed for submenu */

src/components/DetailDrawer/RelationshipList/index.tsx

@@ -12,16 +12,16 @@ import {
   ListSubheader,
   Typography,
 } from '@mui/material';
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { GeneralRecordType } from '@/components/types';
 import schema from '@/services/schema';
 
 interface RelationshipListProps {
   /** formats metadata properties */
-  formatMetadata: (arg: unknown, arg2: boolean) => void;
+  formatMetadata: (arg: unknown, arg2: boolean) => ReactNode[];
   /** formats non-metadata properties */
-  formatOtherProps: (arg: unknown, arg2: boolean) => void;
+  formatOtherProps: (arg: unknown, arg2: boolean) => ReactNode[];
   /** adds link to opened list */
   handleLinkExpand: (rid: string) => void;
   /** edge record opened */

src/components/DetailDrawer/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/vitest';
 
 import {
   act,

src/components/DropDownSelect/__tests__/index.tsx

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/vitest';
 
 import { render } from '@testing-library/react';
 import React from 'react';

src/components/FormField/PermissionsTable/index.tsx

@@ -79,7 +79,7 @@ const PermissionsTable = ({
    * Handle the user clicking a checkbox to either clear or check it
    * when the modelName is not given and is null, assumes a checkAll event
    */
-  const handleClick = useCallback((operation, currModelName = null) => {
+  const handleClick = useCallback((operation, currModelName: string | null = null) => {
     const newContent = { ...content };
     const newTopBoxes = { ...topBoxes };
 

src/components/FormField/PositionForm/__tests__/BasicPosition.test.tsx

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/vitest';
 
 import { render } from '@testing-library/react';
 import React from 'react';

src/components/FormField/PositionForm/__tests__/CytobandPosition.test.tsx

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/vitest';
 
 import { render } from '@testing-library/react';
 import React from 'react';

src/components/FormField/PositionForm/__tests__/ProteinPosition.test.tsx

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/vitest';
 
 import { render } from '@testing-library/react';
 import React from 'react';

src/components/FormField/StatementReviewsTable/StatementReview.tsx

@@ -55,14 +55,12 @@ const StatementReview = ({
     createdByRecord = createdBy;
   }
 
-  const { data: author = createdByRecord } = useQuery(
-    tuple('/query', { target: [createdByRid!] }),
-    ({ queryKey: [, body] }) => api.query(body),
-    {
-      enabled: typeof createdBy === 'string',
-      select: (response) => response[0],
-    },
-  );
+  const { data: author = createdByRecord } = useQuery({
+    queryKey: tuple('/query', { target: [createdByRid!] }),
+    queryFn: ({ queryKey: [, body] }) => api.query(body),
+    enabled: typeof createdBy === 'string',
+    select: (response) => response[0],
+  });
 
   const previewStr = `${author?.name} (${author?.['@rid']})`;
 
@@ -134,7 +132,9 @@ const StatementReview = ({
             PopUpComponent={ReviewComponent}
             PopUpProps={{ onDelete }}
             title={label}
-            valueToString={(record) => {
+            valueToString={(value) => {
+              const record = value as GeneralRecordType | undefined;
+
               if (record && record.name) {
                 return record.name;
               }

src/components/FormField/StatementReviewsTable/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/vitest';
 
 import { render, screen } from '@testing-library/react';
 import React from 'react';

src/components/FormLayout/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/vitest';
 
 import { render } from '@testing-library/react';
 import React from 'react';

src/components/OptionsMenu.tsx

@@ -4,12 +4,14 @@ import {
   Collapse, ListItemIcon, ListItemText,
   MenuItem, MenuList,
 } from '@mui/material';
-import React, { ForwardedRef, forwardRef, useState } from 'react';
+import React, {
+  ForwardedRef, forwardRef, ReactNode, useState,
+} from 'react';
 
 interface OptionsMenuProps {
   options: {
     label: string;
-    content?: Record<string, unknown>;
+    content?: ReactNode;
     handler?: (...args: unknown[]) => unknown;
   }[];
   // eslint-disable-next-line react/require-default-props

src/components/QueryResultsTable/index.tsx

@@ -1,9 +1,8 @@
 import './index.scss';
-import 'ag-grid-community/dist/styles/ag-grid.css';
-import 'ag-grid-community/dist/styles/ag-theme-material.css';
 
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { Typography } from '@mui/material';
+import { ColDef, themeMaterial } from 'ag-grid-community';
 import { AgGridReact } from 'ag-grid-react';
 import React, {
   useEffect,
@@ -32,7 +31,7 @@ const JumpToRecord = ({ data }: JumpToRecordProps) => (
 );
 
 interface QueryResultsTableProps {
-  columnDefs: NonNullable<React.ComponentProps<typeof AgGridReact>['columnDefs']>;
+  columnDefs: ColDef[];
   /** the body of the query request */
   queryBody: QueryBody;
   /** the title to put above the table */
@@ -49,7 +48,7 @@ const QueryResultsTable = ({
 }: QueryResultsTableProps) => {
   const grid = useGrid();
 
-  const { data, isFetching } = useQuery(tuple('/query', queryBody), async ({ queryKey: [, body] }) => api.query(body));
+  const { data, isFetching } = useQuery({ queryKey: tuple('/query', queryBody), queryFn: async ({ queryKey: [, body] }) => api.query(body) });
 
   // resize the columns to fit once the data and grid are ready
   useEffect(() => {
@@ -59,7 +58,7 @@ const QueryResultsTable = ({
       gridApi.sizeColumnsToFit();
 
       if (gridApi && data) {
-        gridApi.setRowData(data);
+        gridApi.setGridOption('rowData', data);
       }
     }
   }, [grid.ref, data]);
@@ -77,14 +76,14 @@ const QueryResultsTable = ({
         <AgGridReact
           {...grid.props}
           columnDefs={columnDefs}
-          deltaRowDataMode
+          components={{ JumpToRecord }}
           enableCellTextSelection
-          frameworkComponents={{ JumpToRecord }}
-          getRowNodeId={(rowData) => rowData['@rid']}
+          getRowId={(params) => params.data['@rid']}
           pagination
           paginationAutoPageSize
           rowData={data}
           suppressHorizontalScroll
+          theme={themeMaterial}
         />
       </div>
     </div>