GFF-544 - Update to React version 19

package.json

@@ -54,9 +54,9 @@
     "idb": "^8.0.3",
     "isomorphic-fetch": "^3.0.0",
     "jsonpath-plus": "10.3.0",
-    "react": "^18.3.1",
+    "react": "^19.2.4",
     "react-cookie": "^7.2.2",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.2.4",
     "react-responsive-carousel": "^3.2.23",
     "url-join": "^5.0.0"
   },
@@ -71,14 +71,14 @@
     "@swc/cli": "^0.5.0",
     "@swc/core": "^1.7.28",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/react": "^16.3.2",
     "@types/jest": "^29.5.13",
     "@types/node": "22.7.2",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.2.14",
     "@types/tinycolor2": "^1.4.6",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",
-    "@welldone-software/why-did-you-render": "^8.0.3",
+    "@welldone-software/why-did-you-render": "^10.0.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.28.0",
     "eslint-config-next": "^15.5.9",

packages/core/package.json

@@ -48,13 +48,13 @@
     "dev": "echo no dev tasks"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
+    "react": "^19.2.4",
     "react-cookie": "^7.2.2",
-    "react-dom": "^18.3.1"
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
     "@swc/wasm": "^1.3.85",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.3.2",
     "@types/estree": "^1.0.0",
     "@types/fastestsmallesttextencoderdecoder": "^1.0.2",
     "@types/flat": "^5.0.3",

packages/core/src/dataAccess.ts

@@ -41,7 +41,7 @@ export interface UseCoreDataHook<P, T> {
 }
 
 export const usePrevious = <T>(value: T): T | undefined => {
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
   useEffect(() => {
     ref.current = value;
   });

packages/frontend/package.json

@@ -63,8 +63,8 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@gen3/core": "^0.12.30",
-    "@graphiql/react": "^0.23.1",
-    "@hello-pangea/dnd": "^17.0.0",
+    "@graphiql/react": "^0.37.3",
+    "@hello-pangea/dnd": "^18.0.0",
     "@iconify-icon/react": "^3.0.3",
     "@mantine/core": "^8.3.15",
     "@mantine/dates": "^8.3.15",
@@ -88,7 +88,7 @@
     "fetch-retry": "^5.0.6",
     "file-saver": "^2.0.5",
     "filesize": "^10.1.1",
-    "graphiql": "^3.7.1",
+    "graphiql": "^5.2.2",
     "graphql": "^16.9.0",
     "graphql-ws": "^5.14.0",
     "igv": "^3.7.3",
@@ -114,8 +114,8 @@
   },
   "peerDependencies": {
     "next": "^15.5.10",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "tailwindcss": "^3.4.18"
   }
 }

packages/frontend/src/components/Buttons/DownloadButtons/DownloadButton.tsx

@@ -1,5 +1,5 @@
-import React, { Dispatch, SetStateAction, forwardRef } from 'react';
-import { Button, ButtonProps, Loader, Tooltip } from '@mantine/core';
+import React, { Dispatch, SetStateAction } from 'react';
+import { Button, Loader, Tooltip } from '@mantine/core';
 import { FiDownload } from 'react-icons/fi';
 import download from '../../../utils/download';
 import { hideModal, Modals, useCoreDispatch } from '@gen3/core';
@@ -45,6 +45,7 @@ interface DownloadButtonProps {
   Modal403?: Modals;
   Modal400?: Modals;
   toolTip?: string;
+  ref: React.RefObject<HTMLButtonElement>;
 }
 
 /**
@@ -76,79 +77,72 @@ interface DownloadButtonProps {
  * @category Buttons
  */
 
-export const DownloadButton = forwardRef<
-  HTMLButtonElement,
-  DownloadButtonProps & ButtonProps
->(
-  (
-    {
-      endpoint = '',
-      disabled = false,
-      inactiveText,
-      activeText,
-      params = {},
-      method = 'POST',
-      customStyle,
-      setActive,
-      onClick,
-      showLoading = true,
-      showIcon = true,
-      preventClickEvent = false,
-      active,
-      Modal400 = Modals.GeneralErrorModal,
-      Modal403 = Modals.NoAccessModal,
-      toolTip,
-      ...buttonProps
-    }: DownloadButtonProps,
+export const DownloadButton = (
+  {
     ref,
-  ) => {
-    const text = active ? activeText : inactiveText;
-    const dispatch = useCoreDispatch();
-    const Icon = active ? (
-      <Loader size="sm" className="p-1" />
-    ) : (
-      <FiDownload title="download" size={16} />
-    );
+    endpoint = '',
+    disabled = false,
+    inactiveText,
+    activeText,
+    params = {},
+    method = 'POST',
+    customStyle,
+    setActive,
+    onClick,
+    showLoading = true,
+    showIcon = true,
+    preventClickEvent = false,
+    active,
+    Modal400 = Modals.GeneralErrorModal,
+    Modal403 = Modals.NoAccessModal,
+    toolTip,
+    ...buttonProps
+  }: DownloadButtonProps
+) => {
+  const text = active ? activeText : inactiveText;
+  const dispatch = useCoreDispatch();
+  const Icon = active ? (
+    <Loader size="sm" className="p-1" />
+  ) : (
+    <FiDownload title="download" size={16} />
+  );
 
-    return (
-      <Tooltip disabled={!toolTip} label={toolTip}>
-        <Button
-          ref={ref}
-          leftSection={showIcon && inactiveText && <FiDownload />}
-          disabled={disabled}
-          className={
-            customStyle ||
-            `text-base-lightest ${
-              disabled ? 'bg-base' : 'bg-primary hover:bg-primary-darker'
-            } `
+  return (
+    <Tooltip disabled={!toolTip} label={toolTip}>
+      <Button
+        ref={ref}
+        leftSection={showIcon && inactiveText && <FiDownload />}
+        disabled={disabled}
+        className={
+          customStyle ||
+          `text-base-lightest ${
+            disabled ? 'bg-base' : 'bg-primary hover:bg-primary-darker'
+          } `
+        }
+        loading={showLoading && active}
+        onClick={() => {
+          if (!preventClickEvent && onClick) {
+            onClick();
+            return;
           }
-          loading={showLoading && active}
-          onClick={() => {
-            if (!preventClickEvent && onClick) {
-              onClick();
-              return;
-            }
-            dispatch(hideModal());
-            if (setActive) setActive(true);
-            download({
-              endpoint,
-              params,
-              method,
-              dispatch,
-              done: () => {
-                if (setActive) setActive(false);
-              },
-              Modal400,
-              Modal403,
-            });
-          }}
-          {...buttonProps}
-        >
-          {text || Icon}
-        </Button>
-      </Tooltip>
-    );
-  },
-);
-
-DownloadButton.displayName = 'DownloadButton';
+          dispatch(hideModal());
+          if (setActive) setActive(true);
+          download({
+            endpoint,
+            params,
+            method,
+            dispatch,
+            done: () => {
+              if (setActive) setActive(false);
+            },
+            Modal400,
+            Modal403,
+          });
+        }}
+        {...buttonProps}
+      >
+        {text || Icon}
+      </Button>
+    </Tooltip>
+  );
+};

packages/frontend/src/components/Buttons/DropdownButtons/DropdownButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { Menu, Button, Text } from '@mantine/core';
 import { type DropdownButtonProps } from './types';
 import { Icon } from '@iconify-icon/react';