City-of-Helsinki · mikkojamG · Jun 23, 2026 · Jun 24, 2026 · Jun 24, 2026 · Jun 24, 2026
@@ -38,6 +38,9 @@ module.exports = {
     ],
     '@typescript-eslint/no-floating-promises': 'off',
     '@typescript-eslint/consistent-type-definitions': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/prop-types': 'off',
     'react/no-unused-prop-types': ['warn', { skipShapeProps: true }],
     'array-bracket-spacing': ['warn', 'never'],
     'no-prototype-builtins': 'off',

@@ -12,4 +12,4 @@ jobs:
     uses: City-of-Helsinki/.github/.github/workflows/ci-node.yml@main
     secrets: inherit
     with:
-      node-version: 20
+      node-version: 24.x
@@ -1 +1 @@
-v20.19.5
+v24.18.0
@@ -4,45 +4,40 @@
 
 ## [4.3.0](https://github.com/City-of-Helsinki/kukkuu-admin/compare/kukkuu-admin-v4.2.7...kukkuu-admin-v4.3.0) (2026-06-11)
 
-
 ### Features
 
-* Migrate kukkuu admin yarn to pnpm ([f5e2734](https://github.com/City-of-Helsinki/kukkuu-admin/commit/f5e273498b070051842dcbefa23806d44af68496))
+- Migrate kukkuu admin yarn to pnpm ([f5e2734](https://github.com/City-of-Helsinki/kukkuu-admin/commit/f5e273498b070051842dcbefa23806d44af68496))
 
 ## [4.2.7](https://github.com/City-of-Helsinki/kukkuu-admin/compare/kukkuu-admin-v4.2.6...kukkuu-admin-v4.2.7) (2026-06-04)
 
-
 ### Dependencies
 
-* Bump axios from 1.15.2 to 1.16.0 ([79204b7](https://github.com/City-of-Helsinki/kukkuu-admin/commit/79204b728675752f05c470acc9b4e845b46c9dce))
-* Bump vitest from 3.2.4 to 4.1.0 ([885459e](https://github.com/City-of-Helsinki/kukkuu-admin/commit/885459ed1b46f84775f37f86101298d481a01860))
-* Vite 8 migration required for vitest ([43d1d0d](https://github.com/City-of-Helsinki/kukkuu-admin/commit/43d1d0d660b05727ed36049561db8176cb06f9b7))
+- Bump axios from 1.15.2 to 1.16.0 ([79204b7](https://github.com/City-of-Helsinki/kukkuu-admin/commit/79204b728675752f05c470acc9b4e845b46c9dce))
+- Bump vitest from 3.2.4 to 4.1.0 ([885459e](https://github.com/City-of-Helsinki/kukkuu-admin/commit/885459ed1b46f84775f37f86101298d481a01860))
+- Vite 8 migration required for vitest ([43d1d0d](https://github.com/City-of-Helsinki/kukkuu-admin/commit/43d1d0d660b05727ed36049561db8176cb06f9b7))
 
 ## [4.2.6](https://github.com/City-of-Helsinki/kukkuu-admin/compare/kukkuu-admin-v4.2.5...kukkuu-admin-v4.2.6) (2026-05-11)
 
-
 ### Dependencies
 
-* Bump @babel/plugin-transform-modules-systemjs ([1e3f286](https://github.com/City-of-Helsinki/kukkuu-admin/commit/1e3f2866726349dd5706f76a25f3afff635247a9))
-* Bump axios from 1.15.0 to 1.15.2 ([adf5e91](https://github.com/City-of-Helsinki/kukkuu-admin/commit/adf5e914a006614951c741d6937ee3830db24b6b))
-* Bump fast-uri from 3.1.0 to 3.1.2 ([96c7236](https://github.com/City-of-Helsinki/kukkuu-admin/commit/96c7236ba1f0f2e1d63e540b85fa77fe923079e2))
-* Bump postcss from 8.5.9 to 8.5.14 ([8a7a355](https://github.com/City-of-Helsinki/kukkuu-admin/commit/8a7a3555f8159ca2ceb2461d64f1483802077d4e))
+- Bump @babel/plugin-transform-modules-systemjs ([1e3f286](https://github.com/City-of-Helsinki/kukkuu-admin/commit/1e3f2866726349dd5706f76a25f3afff635247a9))
+- Bump axios from 1.15.0 to 1.15.2 ([adf5e91](https://github.com/City-of-Helsinki/kukkuu-admin/commit/adf5e914a006614951c741d6937ee3830db24b6b))
+- Bump fast-uri from 3.1.0 to 3.1.2 ([96c7236](https://github.com/City-of-Helsinki/kukkuu-admin/commit/96c7236ba1f0f2e1d63e540b85fa77fe923079e2))
+- Bump postcss from 8.5.9 to 8.5.14 ([8a7a355](https://github.com/City-of-Helsinki/kukkuu-admin/commit/8a7a3555f8159ca2ceb2461d64f1483802077d4e))
 
 ## [4.2.5](https://github.com/City-of-Helsinki/kukkuu-admin/compare/kukkuu-admin-v4.2.4...kukkuu-admin-v4.2.5) (2026-04-23)
 
-
 ### Dependencies
 
-* Bump follow-redirects from 1.15.11 to 1.16.0 ([ec53e69](https://github.com/City-of-Helsinki/kukkuu-admin/commit/ec53e69e268ed40fe76059641b43ba3bdea74153))
+- Bump follow-redirects from 1.15.11 to 1.16.0 ([ec53e69](https://github.com/City-of-Helsinki/kukkuu-admin/commit/ec53e69e268ed40fe76059641b43ba3bdea74153))
 
 ## [4.2.4](https://github.com/City-of-Helsinki/kukkuu-admin/compare/kukkuu-admin-v4.2.3...kukkuu-admin-v4.2.4) (2026-04-15)
 
-
 ### Dependencies
 
-* Bump axios from 1.13.5 to 1.15.0 ([3f128bb](https://github.com/City-of-Helsinki/kukkuu-admin/commit/3f128bb4b2d136255218916aff6295f733f8cf19))
-* Bump vite from 6.4.1 to 6.4.2 ([4e9d83f](https://github.com/City-of-Helsinki/kukkuu-admin/commit/4e9d83fdd587b4f121ade218a52676a0f8e9ce49))
-* Update vulnerable packages ([c188e40](https://github.com/City-of-Helsinki/kukkuu-admin/commit/c188e40850420117949d6a54d41dd23a65dca56a))
+- Bump axios from 1.13.5 to 1.15.0 ([3f128bb](https://github.com/City-of-Helsinki/kukkuu-admin/commit/3f128bb4b2d136255218916aff6295f733f8cf19))
+- Bump vite from 6.4.1 to 6.4.2 ([4e9d83f](https://github.com/City-of-Helsinki/kukkuu-admin/commit/4e9d83fdd587b4f121ade218a52676a0f8e9ce49))
+- Update vulnerable packages ([c188e40](https://github.com/City-of-Helsinki/kukkuu-admin/commit/c188e40850420117949d6a54d41dd23a65dca56a))
 
 ## [4.2.3](https://github.com/City-of-Helsinki/kukkuu-admin/compare/kukkuu-admin-v4.2.2...kukkuu-admin-v4.2.3) (2026-03-23)
 

@@ -1,5 +1,5 @@
 # ===============================================
-FROM registry.access.redhat.com/ubi9/nodejs-20 AS appbase
+FROM registry.access.redhat.com/ubi9/nodejs-24 AS appbase
 # ===============================================
 
 # install yarn

@@ -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)

diff --git a/docs/setup-keycloak.md b/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)
 

diff --git a/docs/setup-local-kukkuu-api.md b/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)
 

diff --git a/docs/setup-tunnistamo.md b/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)

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "engines": {
-    "node": ">=20.19"
+    "node": ">=24"
   },
   "scripts": {
     "app:version": "echo \"$npm_package_version\"",
@@ -42,25 +42,23 @@
     "@apollo/client": "^3.8.4",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@hookform/resolvers": "^3.3.1",
-    "@mui/icons-material": "^5.14.11",
-    "@mui/lab": "^5.0.0-alpha.146",
-    "@mui/material": "^5.14.11",
-    "@mui/styles": "^5.14.11",
+    "@mui/icons-material": "^6.5.0",
+    "@mui/material": "^6.5.0",
     "@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/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.5.1",
     "@types/apollo-upload-client": "^17.0.3",
     "@types/classnames": "^2.3.4",
     "@types/dotenv": "^8.2.3",
     "@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-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
+    "@types/node": "^24.1.0",
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.57.1",
     "@typescript-eslint/parser": "^8.57.1",
     "@vitejs/plugin-react": "^6.0.0",
@@ -89,18 +87,16 @@
     "moment-timezone": "^0.5.43",
     "oidc-client-ts": "^3.0.1",
     "prettier": "^3.4.2",
-    "prop-types": "^15.8.1",
     "query-string": "^8.1.0",
-    "ra-data-fakerest": "^4.14.3",
-    "ra-language-english": "^4.14.3",
-    "ra-language-finnish": "^4.13.0",
+    "ra-language-english": "^5.14.7",
+    "ra-language-finnish": "^5.7.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 +117,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"
   }
 }
@@ -41,6 +41,7 @@ resources:
       type: git
       # Azure DevOps project/repository
       name: kukkuu/kukkuu-pipelines
+      ref: refs/heads/KK-1543/node24
 
 extends:
   # Filename in Azure DevOps Repository

@@ -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>

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTranslate } from 'react-admin';
 
 import IsTestEnvironmentLabel from '../isTestEnvironmentLabel/IsTestEnvironmentLabel';

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import Config from '../../../../domain/config';

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTranslate } from 'react-admin';
 import Typography from '@mui/material/Typography';
 

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import Aside from '../Aside';

@@ -1,40 +1,30 @@
-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 +38,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 +56,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>
         );

@@ -1,6 +1,6 @@
-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 +19,11 @@ const defaultProps = {
 };
 const getWrapper = (props) =>
   render(
-    <AdminContext>
-      <Breadcrumbs {...defaultProps} {...props} />
-    </AdminContext>
+    <MemoryRouter>
+      <AdminContext>
+        <Breadcrumbs {...defaultProps} {...props} />
+      </AdminContext>
+    </MemoryRouter>
   );
 
 describe('Breadcrumbs', () => {