Update react to v19

Reviewed-on: #279

.drone.yml

@@ -5,7 +5,7 @@ name: default
 
 steps:
 - name: frontend_build
-  image: node:23
+  image: node:24
   volumes:
     - name: frontend_app
       path: /tmp/frontend_build

README.md

@@ -3,4 +3,9 @@ Web UI that allows to start and stop VMs managed by VirtWEB without having to ex
 
 VirtWebRemote rely on OpenID to authenticate users.
 
-VirtWebRemote authenticates against VirtWEB API using an API token.
+VirtWebRemote authenticates against VirtWEB API using an API token. Both the token ID and private key are required to be able to authenticate against the VirtWEB API.
+
+## Docker image options
+```bash
+docker run --rm -it pierre42100/virtweb_remote --help
+```

remote_backend/Cargo.toml

@@ -1,28 +1,28 @@
 [package]
 name = "remote_backend"
 version = "0.1.0"
-edition = "2021"
+edition = "2024"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-log = "0.4.21"
-env_logger = "0.11.3"
-clap = { version = "4.5.21", features = ["derive", "env"] }
-serde = { version = "1.0.215", features = ["derive"] }
-light-openid = { version = "1.0.2", features = ["crypto-wrapper"] }
-basic-jwt = "0.2.0"
-actix-web = "4.5.1"
+log = "0.4.28"
+env_logger = "0.11.8"
+clap = { version = "4.5.51", features = ["derive", "env"] }
+serde = { version = "1.0.228", features = ["derive"] }
+light-openid = { version = "1.0.4", features = ["crypto-wrapper"] }
+basic-jwt = "0.3.0"
+actix-web = "4.11.0"
 actix-remote-ip = "0.1.0"
 actix-session = { version = "0.10.1", features = ["cookie-session"] }
-actix-identity = "0.8.0"
-actix-cors = "0.7.0"
-lazy_static = "1.4.0"
-anyhow = "1.0.93"
-reqwest = { version = "0.12.9", features = ["json"] }
-thiserror = "2.0.3"
-uuid = { version = "1.8.0", features = ["v4", "serde"] }
-futures-util = "0.3.30"
-lazy-regex = "3.1.0"
-mime_guess = "2.0.4"
-rust-embed = { version = "8.3.0" }
+actix-identity = "0.9.0"
+actix-cors = "0.7.1"
+lazy_static = "1.5.0"
+anyhow = "1.0.100"
+reqwest = { version = "0.12.24", features = ["json"] }
+thiserror = "2.0.17"
+uuid = { version = "1.18.1", features = ["v4", "serde"] }
+futures-util = "0.3.31"
+lazy-regex = "3.4.1"
+mime_guess = "2.0.5"
+rust-embed = { version = "8.7.2" }

remote_backend/src/controllers/auth_controller.rs

@@ -1,6 +1,6 @@
 use actix_remote_ip::RemoteIP;
 use actix_web::web::Data;
-use actix_web::{web, HttpResponse, Responder};
+use actix_web::{HttpResponse, Responder, web};
 use light_openid::basic_state_manager::BasicStateManager;
 
 use crate::app_config::AppConfig;

remote_backend/src/controllers/group_controller.rs

@@ -1,7 +1,7 @@
 use crate::controllers::HttpResult;
 use crate::virtweb_client;
 use crate::virtweb_client::{GroupID, VMUuid};
-use actix_web::{web, HttpResponse};
+use actix_web::{HttpResponse, web};
 
 #[derive(serde::Deserialize)]
 pub struct GroupIDInPath {

remote_backend/src/controllers/mod.rs

@@ -1,9 +1,8 @@
+use actix_web::HttpResponse;
 use actix_web::body::BoxBody;
 use actix_web::http::StatusCode;
-use actix_web::HttpResponse;
 use std::error::Error;
 use std::fmt::{Display, Formatter};
-use std::io::ErrorKind;
 
 pub mod auth_controller;
 pub mod group_controller;
@@ -38,7 +37,7 @@ impl actix_web::error::ResponseError for HttpErr {
         }
     }
     fn error_response(&self) -> HttpResponse<BoxBody> {
-        log::error!("Error while processing request! {}", self);
+        log::error!("Error while processing request! {self}");
 
         HttpResponse::InternalServerError().body("Failed to execute request!")
     }
@@ -52,7 +51,7 @@ impl From<anyhow::Error> for HttpErr {
 
 impl From<Box<dyn Error>> for HttpErr {
     fn from(value: Box<dyn Error>) -> Self {
-        HttpErr::Err(std::io::Error::new(ErrorKind::Other, value.to_string()).into())
+        HttpErr::Err(std::io::Error::other(value.to_string()).into())
     }
 }
 
@@ -82,7 +81,7 @@ impl From<reqwest::header::ToStrError> for HttpErr {
 
 impl From<actix_web::Error> for HttpErr {
     fn from(value: actix_web::Error) -> Self {
-        HttpErr::Err(std::io::Error::new(ErrorKind::Other, value.to_string()).into())
+        HttpErr::Err(std::io::Error::other(value.to_string()).into())
     }
 }
 

remote_backend/src/controllers/static_controller.rs

@@ -18,7 +18,7 @@ mod serve_static_debug {
 
 #[cfg(not(debug_assertions))]
 mod serve_static_release {
-    use actix_web::{web, HttpResponse, Responder};
+    use actix_web::{HttpResponse, Responder, web};
     use rust_embed::RustEmbed;
 
     #[derive(RustEmbed)]

remote_backend/src/controllers/vm_controller.rs

@@ -3,7 +3,7 @@
 use crate::controllers::HttpResult;
 use crate::virtweb_client;
 use crate::virtweb_client::VMUuid;
-use actix_web::{web, HttpResponse};
+use actix_web::{HttpResponse, web};
 
 #[derive(serde::Deserialize)]
 pub struct ReqPath {

remote_backend/src/extractors/auth_extractor.rs

@@ -1,7 +1,7 @@
 use actix_identity::Identity;
 use actix_web::dev::Payload;
 use actix_web::{Error, FromRequest, HttpMessage, HttpRequest};
-use futures_util::future::{ready, Ready};
+use futures_util::future::{Ready, ready};
 use std::fmt::Display;
 
 pub struct AuthExtractor {

remote_backend/src/main.rs

@@ -1,13 +1,13 @@
 use actix_cors::Cors;
-use actix_identity::config::LogoutBehaviour;
 use actix_identity::IdentityMiddleware;
+use actix_identity::config::LogoutBehavior;
 use actix_remote_ip::RemoteIPConfig;
-use actix_session::storage::CookieSessionStore;
 use actix_session::SessionMiddleware;
+use actix_session::storage::CookieSessionStore;
 use actix_web::cookie::{Key, SameSite};
 use actix_web::middleware::Logger;
 use actix_web::web::Data;
-use actix_web::{web, App, HttpServer};
+use actix_web::{App, HttpServer, web};
 use light_openid::basic_state_manager::BasicStateManager;
 use remote_backend::app_config::AppConfig;
 use remote_backend::constants;
@@ -37,7 +37,7 @@ async fn main() -> std::io::Result<()> {
         .build();
 
         let identity_middleware = IdentityMiddleware::builder()
-            .logout_behaviour(LogoutBehaviour::PurgeSession)
+            .logout_behavior(LogoutBehavior::PurgeSession)
             .visit_deadline(Some(Duration::from_secs(
                 constants::MAX_INACTIVITY_DURATION,
             )))

remote_backend/src/middlewares/auth_middleware.rs

@@ -1,4 +1,4 @@
-use std::future::{ready, Ready};
+use std::future::{Ready, ready};
 use std::rc::Rc;
 
 use crate::app_config::AppConfig;
@@ -7,8 +7,8 @@ use crate::extractors::auth_extractor::AuthExtractor;
 use actix_web::body::EitherBody;
 use actix_web::dev::Payload;
 use actix_web::{
-    dev::{forward_ready, Service, ServiceRequest, ServiceResponse, Transform},
     Error, FromRequest, HttpResponse,
+    dev::{Service, ServiceRequest, ServiceResponse, Transform, forward_ready},
 };
 use futures_util::future::LocalBoxFuture;
 

remote_frontend/.eslintrc.cjs

@@ -1,18 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-}

remote_frontend/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

remote_frontend/package.json

@@ -10,22 +10,25 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.56.3",
-    "@fluentui/react-icons": "^2.0.266",
-    "filesize": "^10.1.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@fluentui/react-components": "^9.72.3",
+    "@fluentui/react-icons": "^2.0.313",
+    "filesize": "^11.0.13",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.16.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.0.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.1"
+    "@eslint/js": "^9.38.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@typescript-eslint/parser": "^8.46.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "eslint": "^9.38.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.4.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.43.0",
+    "vite": "^7.1.12"
   }
 }

remote_frontend/src/widgets/GroupsWidget.tsx

@@ -123,7 +123,7 @@ function GroupInfo(p: { group: VMGroup }): React.ReactElement {
                 </TableCell>
                 <TableCell>
                   {item.architecture} &bull; RAM :{" "}
-                  {filesize(item.memory * 1000 * 1000)} &bull;{" "}
+                  {filesize(item.memory)} &bull;{" "}
                   {item.number_vcpu} vCPU
                 </TableCell>
                 <TableCell>{state?.[item.uuid] ?? ""}</TableCell>

remote_frontend/src/widgets/VirtualMachinesWidget.tsx

@@ -107,7 +107,7 @@ function VMWidget(p: { vm: VMInfoAndCaps }): React.ReactElement {
         }
       />
       <p className={styles.caption1} style={{ margin: "0px auto" }}>
-        {p.vm.architecture} &bull; RAM : {filesize(p.vm.memory * 1000 * 1000)}{" "}
+        {p.vm.architecture} &bull; RAM : {filesize(p.vm.memory)}{" "}
         &bull; {p.vm.number_vcpu} vCPU
       </p>
 

remote_frontend/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

remote_frontend/tsconfig.json

@@ -1,25 +1,7 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
 }

remote_frontend/tsconfig.node.json

@@ -1,11 +1,24 @@
 {
   "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
     "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
     "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
   },
   "include": ["vite.config.ts"]
 }

remote_frontend/vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-// https://vitejs.dev/config/
+// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
 })

renovate.json

@@ -1,9 +1,3 @@
 {
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "packageRules": [
-    {
-      "matchUpdateTypes": ["major", "minor", "patch"],
-      "automerge": true
-    }
-  ]
+  "extends": ["local>renovate/presets"]
 }