KK-1543 React 19

.eslintrc.cjs

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

.github/workflows/ci.yml

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

.gitignore

@@ -27,6 +27,11 @@ yarn-error.log*
 screenshots
 report
 
+# Playwright
+e2e/.auth/
+playwright-report/
+test-results/
+
 # don't store these .env files in version control
 .env
 .env.development

.nvmrc

@@ -1 +1 @@
-v20.19.5
+v24.18.0

CHANGELOG.md

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

Dockerfile

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

README.md

@@ -31,7 +31,7 @@
   - [`yarn build`](#yarn-build)
   - [`yarn generate:graphql`](#yarn-generategraphql)
   - [`yarn test`](#yarn-test)
-  - [`yarn test:browser`](#yarn-testbrowser)
+  - [`yarn test:e2e`](#yarn-teste2e)
 - [Releases, changelogs and deployments](#releases-changelogs-and-deployments)
   - [Conventional Commits](#conventional-commits)
   - [Releasable units](#releasable-units)
@@ -93,7 +93,7 @@ This project is built using the following key frameworks and libraries:
 
 Compatibility defined by [Dockerfile](./Dockerfile):
 
-- Node.js 20.x
+- Node.js 24.x
 - Yarn 1.x
 
 ### Getting started
@@ -225,12 +225,11 @@ In browser tests, we want to bypass the regular authentication flow and directly
 
 **How it works:**
 
-- **[`clientUtils`](./browser-tests/utils/jwt/clientUtils/):** Contains helper functions that run within the Testcafe browser environment. These functions utilize Testcafe's [`ClientFunction`](https://testcafe.io/documentation/402832/guides/basic-guides/client-functions) to interact with the browser and manage JWTs.
-- **[`mocks`](./browser-tests/utils/jwt/mocks/):** Provides functions to intercept network requests to the authentication service and replace them with mocked responses containing the test JWTs. This prevents actual authentication and allows us to control the user context during tests.
-- **[`config`](./browser-tests/utils/jwt/config.ts):** Holds configuration settings for the JWT library used in browser tests.
-- **[`jwt`](./browser-tests/utils/jwt/jwt.ts):** Contains utilities to create and sign JWTs symmetrically. The API needs to be configured with the same secret key to verify these tokens.
-- **[`oidc`](./browser-tests/utils/jwt/oidc.ts):** Adapts the generated JWTs to a format compatible with the OpenID Connect (OIDC) client used in the application.
-- **[`services`](./browser-tests/utils/jwt/services.ts):** Includes helper functions for managing test data, such as selecting an admin project for the test user. These functions make actual API calls (not mocked) to prepare the test environment.
+- **[`auth`](./e2e/utils/auth/):** Playwright-side auth helpers. `seedStorage.ts` seeds a signed JWT and the OIDC user profile into `localStorage` via `page.addInitScript`, so the app boots already authenticated. `oidcMock.ts` installs `page.route` handlers that intercept the OIDC endpoints and return mocked JWT-based responses. `setupAuth.ts` composes both for use inside a test.
+- **[`config`](./e2e/utils/jwt/config.ts):** Holds configuration settings for the JWT library used in browser tests.
+- **[`jwt`](./e2e/utils/jwt/jwt.ts):** Contains utilities to create and sign JWTs symmetrically. The API needs to be configured with the same secret key to verify these tokens.
+- **[`oidc`](./e2e/utils/jwt/oidc.ts):** Adapts the generated JWTs to a format compatible with the OpenID Connect (OIDC) client used in the application.
+- **[`services`](./e2e/utils/jwt/services.ts):** Includes helper functions for managing test data, such as selecting an admin project for the test user. These functions make actual API calls (not mocked) to prepare the test environment.
 
 **Key points:**
 
@@ -298,32 +297,37 @@ Fetches the GraphQL schema from the backend and updates typing information. The
 
 Launches the `vitest` test runner. See the section about [Getting started](https://vitest.dev/guide/) for more information.
 
-### `yarn test:browser`
+### `yarn test:e2e`
 
-Runs browser tests against your local version of the application (assumes port `3001`).
+Runs the Playwright browser test suite (`e2e/`) against your local version of the application (assumes port `3001`).
 
-- The `yarn test:browser:ci` variant of this command is meant to run in the CI, and it targets the staging server. It uses headless mode and may therefore behave differently compared to the local test runner.
-- The deployment pipelines are running the browser tests as automated actions. They are run against PR and staging environments when after they have been built and deployed.
+- Deployment pipelines run the browser tests as automated actions. They are run against PR and staging environments after they have been built and deployed.
 - See also [JWT issuance for browser tests](#jwt-issuance-for-browser-tests)
 
+Related scripts:
+
+- `yarn test:e2e:install` — installs the Playwright browsers (first-time setup).
+- `yarn test:e2e:ui` — opens Playwright's interactive UI runner.
+- `yarn test:e2e:debug` — runs Playwright in debug mode.
+
 To run browser tests locally, you need to configure the browser testing environment:
 
 1. Run a local Kukkuu API instance with the browser testing JWT features set on. This allows the UI client to issue new JWTs for authorization by itself.
 2. Run a local Kukkuu Admin UI.
 3. Carefully double-check that the UI instance is configured to use the local API. The browser test JWT token configurations also need to match in order to successfully verify the newly issued tokens. You can navigate through the UI manually to see that everything is working as expected.
-4. Run the browser test with `yarn test:browser` or `yarn test:browser:ci`.
+4. Run the browser tests with `yarn test:e2e`.
 
 For configuration, check the following environment variables:
 
 1. `BROWSER_TESTS_JWT_SIGN_SECRET` needs to be a valid 256 bits token and it needs to be configured the same in both the API and the Admin UI in order to verify the self-issued JWT for browser testing.
 2. `BROWSER_TESTS_JWT_AD_GROUP` defines the AD group that should be used while running the browser tests. This value is used while issuing a JWT for an admin user. The AD group should be made in the API so that it gives admin permissions for the newly created user with this AD group for the (year) project that is created for browser testing. These AD groups and user groups can be managed from the API.
-3. `BROWSER_TESTS_ENV_URL` tells Testcafe where the testable UI is located.
+3. `BROWSER_TESTS_ENV_URL` tells Playwright where the testable UI is located.
 4. `VITE_API_URI` defines the Kukkuu API GraphQL endpoint. It's important in browser testing configuration for JWT mocking reasons.
 5. `VITE_OIDC_KUKKUU_API_CLIENT_ID` OIDC config that is needed in JWT mocking.
 6. `VITE_OIDC_CLIENT_ID` OIDC config that is needed in JWT mocking.
 7. `VITE_OIDC_AUTHORITY` OIDC config that is needed in JWT mocking.
 
-NOTE: There is an [.env.test.local.example](.env.test.local.example) that can be copied to a file named `.env.test.local`. If the `.env.test.local` is present, it will be used during the local Testcafe runs.
+NOTE: There is an [.env.test.local.example](.env.test.local.example) that can be copied to a file named `.env.test.local`. If the `.env.test.local` is present, it will be used during the local Playwright runs.
 
 ## Releases, changelogs and deployments