feat: react 19 and dependencies update

Refs: KK-1543

Author: tjgofore

README.md

@@ -7,6 +7,7 @@
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
 - [Service architecture](#service-architecture)
   - [Environments](#environments)

docs/setup-keycloak.md

@@ -1,5 +1,6 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
 - [Using the Helsinki-Profile Keycloak](#using-the-helsinki-profile-keycloak)
 

docs/setup-local-kukkuu-api.md

@@ -1,5 +1,6 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
 - [Use Kukkuu API locally](#use-kukkuu-api-locally)
 

docs/setup-tunnistamo.md

@@ -1,5 +1,6 @@
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
 - [Setting up Tunnistamo and Kukkuu API locally with Docker](#setting-up-tunnistamo-and-kukkuu-api-locally-with-docker)
   - [Set Tunnistamo hostname](#set-tunnistamo-hostname)

package.json

@@ -47,7 +47,8 @@
     "@mui/material": "^5.14.11",
     "@mui/styles": "^5.14.11",
     "@nabla/vite-plugin-eslint": "^3.0.1",
-    "@sentry/browser": "^10.25.0",
+    "@sentry/browser": "^10.58.0",
+    "@tanstack/react-query": "^5.101.0",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
@@ -57,8 +58,8 @@
     "@types/history": "^5.0.0",
     "@types/lodash": "^4.14.199",
     "@types/node": "^20.7.1",
-    "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.8",
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^8.57.1",
@@ -95,12 +96,12 @@
     "ra-language-english": "^4.14.3",
     "ra-language-finnish": "^4.13.0",
     "ra-language-swedish": "^1.0.0",
-    "react": "^18.2.0",
-    "react-admin": "^4.16.10",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.7",
+    "react-admin": "^5.14.7",
+    "react-dom": "^19.2.7",
     "react-idle-timer": "^5.7.2",
-    "typescript": "<5.4.0",
-    "vite": "8.0.13",
+    "typescript": "5.9.3",
+    "vite": "8.0.16",
     "vitest": "^4.1.0",
     "vitest-localstorage-mock": "^0.1.2",
     "vitest-sonar-reporter": "^2.0.0",
@@ -121,12 +122,16 @@
     "husky": "^9.1.7",
     "jsdom": "^25.0.1",
     "lint-staged": "^15.4.3",
-    "testcafe": "^3.7.1",
+    "testcafe": "^15.1.3",
     "testcafe-reporter-html": "^1.4.6"
   },
   "resolutions": {
     "@types/minimatch": "^5.1.2",
     "lodash": "^4.18.1",
-    "underscore": "^1.13.8"
+    "underscore": "^1.13.8",
+    "shell-quote": ">=1.8.4",
+    "form-data": ">=4.0.6",
+    "qs": ">=6.2.4",
+    "ws": ">=8.21.0"
   }
 }

src/common/components/appBar/KukkuuAppBar.tsx

@@ -1,48 +1,41 @@
 import * as React from 'react';
 import { AppBar } from 'react-admin';
-import classNames from 'classnames';
 import { Typography } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 
 import Config from '../../../domain/config';
 import ProfileProjectDropdown from '../../../domain/profile/ProfileProjectDropdown';
 import AppTitle from '../appTitle/AppTitle';
 import IdleTimer from '../../../domain/authentication/IdleTimer';
 
-const useStyles = makeStyles({
-  title: {
-    flex: 1,
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-  },
-  spacer: {
-    flex: 1,
-  },
-  highlight: {
-    backgroundColor: '#00D7A7 !important',
-  },
-});
-
 const KukkuuAppBar = ({ className }: { className?: string }) => {
-  const classes = useStyles();
-
   const isTestEnvironment = Config.IS_TEST_ENVIRONMENT;
 
   /* note: the idle timer is placed here as its the first available shared place for components
      due to the react-admin architecture
   */
   return (
     <AppBar
-      className={classNames(className, {
-        [classes.highlight]: isTestEnvironment,
-      })}
+      className={className}
+      sx={
+        isTestEnvironment
+          ? { backgroundColor: '#00D7A7 !important' }
+          : undefined
+      }
     >
       <IdleTimer>
-        <Typography variant="h6" color="inherit" className={classes.title}>
+        <Typography
+          variant="h6"
+          color="inherit"
+          sx={{
+            flex: 1,
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+          }}
+        >
           <AppTitle />
         </Typography>
-        <div className={classes.spacer} />
+        <div style={{ flex: 1 }} />
         <ProfileProjectDropdown />
       </IdleTimer>
     </AppBar>

src/common/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,40 +1,31 @@
 import React from 'react';
 import { Link } from 'react-admin';
 import { Typography } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import Breadcrumbs from '@mui/material/Breadcrumbs';
-import { useLocation } from 'react-router';
+import { useLocation } from 'react-router-dom';
 
 export type Crumb = {
   label: string;
   link: string | null;
 };
 
-const useStyles = makeStyles((theme) => ({
-  crumb: {
-    fontSize: theme.typography.body2.fontSize,
-    fontWeight: theme.typography.fontWeightBold,
-  },
-  wrapper: {
-    '& .MuiBreadcrumbs-separator': {
-      fontWeight: theme.typography.fontWeightBold,
-    },
-  },
-}));
-
 type CrumbsProps = {
   className: string;
   crumbs: Crumb[];
 };
 
 const BreadCrumbs = ({ className, crumbs }: CrumbsProps) => {
-  const classes = useStyles();
   const location = useLocation();
 
   return (
     <Breadcrumbs
       separator="<"
-      className={[classes.wrapper, className].join(' ')}
+      className={className}
+      sx={(theme) => ({
+        '& .MuiBreadcrumbs-separator': {
+          fontWeight: theme.typography.fontWeightBold,
+        },
+      })}
     >
       {
         // The breadcrumbs component adds a separator between all
@@ -48,7 +39,14 @@ const BreadCrumbs = ({ className, crumbs }: CrumbsProps) => {
 
         if (isActive) {
           return (
-            <Typography key={key} color="textPrimary" className={classes.crumb}>
+            <Typography
+              key={key}
+              color="textPrimary"
+              sx={(theme) => ({
+                fontSize: theme.typography.body2.fontSize,
+                fontWeight: theme.typography.fontWeightBold,
+              })}
+            >
               {label}
             </Typography>
           );
@@ -59,7 +57,15 @@ const BreadCrumbs = ({ className, crumbs }: CrumbsProps) => {
         }
 
         return (
-          <Link key={key} color="inherit" to={link} className={classes.crumb}>
+          <Link
+            key={key}
+            color="inherit"
+            to={link}
+            sx={(theme) => ({
+              fontSize: theme.typography.body2.fontSize,
+              fontWeight: theme.typography.fontWeightBold,
+            })}
+          >
             {label}
           </Link>
         );

src/common/components/breadcrumbs/__tests__/Breadcrumbs.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { AdminContext } from 'react-admin';
+import { MemoryRouter } from 'react-router-dom';
 
 import Breadcrumbs from '../Breadcrumbs';
 
@@ -19,9 +20,11 @@ const defaultProps = {
 };
 const getWrapper = (props) =>
   render(
-    <AdminContext>
-      <Breadcrumbs {...defaultProps} {...props} />
-    </AdminContext>
+    <MemoryRouter>
+      <AdminContext>
+        <Breadcrumbs {...defaultProps} {...props} />
+      </AdminContext>
+    </MemoryRouter>
   );
 
 describe('Breadcrumbs', () => {

src/common/components/confirmMutationButton/ConfirmMutationButton.tsx

@@ -1,6 +1,6 @@
-import React, { type ReactElement, type ReactText, useState } from 'react';
+import React, { type ReactElement, useState } from 'react';
 import { Button, Confirm } from 'react-admin';
-import type { useMutation } from 'react-query';
+import type { useMutation } from '@tanstack/react-query';
 
 import type {
   MethodHandlerResponse,
@@ -23,15 +23,15 @@ type Props = {
   confirmModalProps: {
     title: string;
     content: string;
-    translateOptions?: Record<string, ReactText>;
+    translateOptions?: Record<string, string>;
   };
   icon?: ReactElement;
 };
 
 const ConfirmMutationButton = ({
   className,
   buttonLabel,
-  mutation: { mutate: applyMutation, isLoading },
+  mutation: { mutate: applyMutation, isPending: isLoading },
   confirmModalProps: { title, content, translateOptions },
   icon: Icon,
 }: Props) => {

src/common/components/confirmMutationButton/__tests__/ConfirmMutationButton.test.jsx

@@ -7,7 +7,7 @@ import {
 } from '@testing-library/react';
 import { AdminContext } from 'react-admin';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material';
-import { createTheme } from '@mui/material/styles/';
+import { createTheme } from '@mui/material';
 
 import ConfirmMutationButton from '../ConfirmMutationButton';