Add release configuration

Reviewed-on: #305

.drone.yml

@@ -12,6 +12,7 @@ steps:
   commands:
   - cd virtweb_frontend
   - npm install --legacy-peer-deps # TODO : remove when mui-file-input is updated
+  - npm run lint
   - npm run build
   - mv dist /tmp/web_build
 
@@ -35,6 +36,8 @@ steps:
     path: /usr/local/cargo/registry
   - name: web_app
     path: /tmp/web_build
+  - name: release
+    path: /tmp/release
   depends_on:
   - backend_check
   - web_build
@@ -44,10 +47,30 @@ steps:
   - mv /tmp/web_build/dist static
   - cargo build --release
   - ls -lah target/release/virtweb_backend
+  - cp target/release/virtweb_backend /tmp/release
 
+- name: gitea_release
+  image: plugins/gitea-release
+  depends_on:
+  - backend_compile
+  when:
+    event:
+      - tag
+  volumes:
+  - name: release
+    path: /tmp/release
+  environment:
+    PLUGIN_API_KEY:
+      from_secret: API_KEY
+  settings:
+    base_url: https://gitea.communiquons.org
+    files: /tmp/release/*
+    checksum: sha512
 
 volumes:
 - name: rust_registry
   temp: {}
 - name: web_app
   temp: {}
+- name: release
+  temp: {}

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"]
 }

virtweb_backend/Cargo.lock

@@ -590,15 +590,15 @@ checksum = "89e25b6adfb930f02d1981565a6e5d9c547ac15a96606256d3b59040e5cd4ca3"
 
 [[package]]
 name = "basic-jwt"
-version = "0.2.0"
+version = "0.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "741afb780192f091b1ceebdc794540a956f3eb96628939f83c5d15e0cb98fa71"
+checksum = "1b87da415ea2a5c22d90143d39a2db6c0c910d3d01bfd19d0f50369de91215f0"
 dependencies = [
  "anyhow",
  "elliptic-curve",
  "jsonwebtoken",
  "p384",
- "rand 0.8.5",
+ "rand 0.9.0",
  "serde",
 ]
 
@@ -3261,9 +3261,9 @@ dependencies = [
 
 [[package]]
 name = "sysinfo"
-version = "0.34.0"
+version = "0.34.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "36913edff7a70c19d204c379e484b2a04d121fbb4e68bebc9fea651eb4386397"
+checksum = "a4b93974b3d3aeaa036504b8eefd4c039dced109171c1ae973f1dc63b2c7e4b2"
 dependencies = [
  "libc",
  "memchr",

virtweb_backend/Cargo.toml

@@ -6,7 +6,7 @@ edition = "2024"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-log = "0.4.26"
+log = "0.4.27"
 env_logger = "0.11.7"
 clap = { version = "4.5.34", features = ["derive", "env"] }
 light-openid = { version = "1.0.4", features = ["crypto-wrapper"] }
@@ -22,7 +22,7 @@ actix-ws = "0.3.0"
 actix-http = "3.10.0"
 serde = { version = "1.0.219", features = ["derive"] }
 serde_json = "1.0.140"
-quick-xml = { version = "0.37.2", features = ["serialize", "overlapped-lists"] }
+quick-xml = { version = "0.37.3", features = ["serialize", "overlapped-lists"] }
 futures-util = "0.3.31"
 anyhow = "1.0.97"
 actix-multipart = "0.7.2"
@@ -30,19 +30,19 @@ tempfile = "3.19.1"
 reqwest = { version = "0.12.15", features = ["stream"] }
 url = "2.5.4"
 virt = "0.4.2"
-sysinfo = { version = "0.34.0", features = ["serde"] }
+sysinfo = { version = "0.34.2", features = ["serde"] }
 uuid = { version = "1.16.0", features = ["v4", "serde"] }
 lazy-regex = "3.4.1"
 thiserror = "2.0.12"
-image = "0.25.5"
+image = "0.25.6"
 rand = "0.9.0"
 bytes = "1.10.1"
 tokio = { version = "1.44.1", features = ["rt", "time", "macros"] }
 futures = "0.3.31"
 ipnetwork = { version = "0.21.1", features = ["serde"] }
-num = "0.4.2"
-rust-embed = { version = "8.5.0" }
+num = "0.4.3"
+rust-embed = { version = "8.6.0" }
 mime_guess = "2.0.5"
 dotenvy = "0.15.7"
 nix = { version = "0.29.0", features = ["net"] }
-basic-jwt = "0.2.0"
+basic-jwt = "0.3.0"

virtweb_frontend/eslint.config.js

@@ -1,12 +1,11 @@
 import js from "@eslint/js";
-import reactDom from 'eslint-plugin-react-dom';
+import reactDom from "eslint-plugin-react-dom";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
-import reactX from 'eslint-plugin-react-x';
+import reactX from "eslint-plugin-react-x";
 import globals from "globals";
 import tseslint from "typescript-eslint";
 
-
 export default tseslint.config(
   { ignores: ["dist"] },
   {
@@ -38,6 +37,18 @@ export default tseslint.config(
       ],
       ...reactX.configs["recommended-typescript"].rules,
       ...reactDom.configs.recommended.rules,
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-misused-promises": "off",
+      "@typescript-eslint/no-floating-promises": "off",
+      "@typescript-eslint/restrict-template-expressions": "off",
+      "@typescript-eslint/no-extraneous-class": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-return": "off",
+      "@typescript-eslint/no-unsafe-call": "off",
+      "@typescript-eslint/no-unsafe-member-access": "off",
+      "@typescript-eslint/no-unsafe-argument": "off",
+      "react-refresh/only-export-components": "off",
     },
   }
 );

virtweb_frontend/src/App.tsx

@@ -51,7 +51,10 @@ export function App() {
 
   const context: AuthContext = {
     signedIn: signedIn,
-    setSignedIn: (s) => setSignedIn(s),
+    setSignedIn: (s) => {
+      setSignedIn(s);
+      location.reload();
+    },
   };
 
   const router = createBrowserRouter(
@@ -97,12 +100,12 @@ export function App() {
   );
 
   return (
-    <AuthContextK.Provider value={context}>
+    <AuthContextK value={context}>
       <RouterProvider router={router} />
-    </AuthContextK.Provider>
+    </AuthContextK>
   );
 }
 
 export function useAuth(): AuthContext {
-  return React.useContext(AuthContextK)!;
+  return React.use(AuthContextK)!;
 }

virtweb_frontend/src/api/ApiClient.ts

@@ -26,7 +26,7 @@ export class APIClient {
    * Get backend URL
    */
   static backendURL(): string {
-    const URL = import.meta.env.VITE_APP_BACKEND ?? "";
+    const URL = String(import.meta.env.VITE_APP_BACKEND ?? "");
     if (URL.length === 0) throw new Error("Backend URL undefined!");
     return URL;
   }
@@ -44,7 +44,7 @@ export class APIClient {
    */
   static async exec(args: RequestParams): Promise<APIResponse> {
     let body: string | undefined | FormData = undefined;
-    let headers: any = {};
+    const headers: any = {};
 
     // JSON request
     if (args.jsonData) {
@@ -66,22 +66,25 @@ export class APIClient {
     if (args.upProgress) {
       const res: XMLHttpRequest = await new Promise((resolve, reject) => {
         const xhr = new XMLHttpRequest();
-        xhr.upload.addEventListener("progress", (e) =>
-          args.upProgress!(e.loaded / e.total)
-        );
-        xhr.addEventListener("load", () => resolve(xhr));
-        xhr.addEventListener("error", () =>
-          reject(new Error("File upload failed"))
-        );
-        xhr.addEventListener("abort", () =>
-          reject(new Error("File upload aborted"))
-        );
-        xhr.addEventListener("timeout", () =>
-          reject(new Error("File upload timeout"))
-        );
+        xhr.upload.addEventListener("progress", (e) => {
+          args.upProgress!(e.loaded / e.total);
+        });
+        xhr.addEventListener("load", () => {
+          resolve(xhr);
+        });
+        xhr.addEventListener("error", () => {
+          reject(new Error("File upload failed"));
+        });
+        xhr.addEventListener("abort", () => {
+          reject(new Error("File upload aborted"));
+        });
+        xhr.addEventListener("timeout", () => {
+          reject(new Error("File upload timeout"));
+        });
         xhr.open(args.method, url, true);
         xhr.withCredentials = true;
         for (const key in headers) {
+          // eslint-disable-next-line no-prototype-builtins
           if (headers.hasOwnProperty(key))
             xhr.setRequestHeader(key, headers[key]);
         }

virtweb_frontend/src/api/NWFilterApi.ts

@@ -140,7 +140,7 @@ export interface NWFilter {
   rules: NWFilterRule[];
 }
 
-export function NWFilterURL(n: NWFilter, edit: boolean = false): string {
+export function NWFilterURL(n: NWFilter, edit = false): string {
   return `/nwfilter/${n.uuid}${edit ? "/edit" : ""}`;
 }
 
@@ -221,7 +221,7 @@ export class NWFilterApi {
   static async Delete(n: NWFilter): Promise<void> {
     await APIClient.exec({
       method: "DELETE",
-      uri: `/nwfilter/${n.uuid}`,
+      uri: `/nwfilter/${n.uuid!}`,
     });
   }
 }

virtweb_frontend/src/api/NetworksApi.ts

@@ -53,7 +53,7 @@ export interface NetworkInfo {
 
 export type NetworkStatus = "Started" | "Stopped";
 
-export function NetworkURL(n: NetworkInfo, edit: boolean = false): string {
+export function NetworkURL(n: NetworkInfo, edit = false): string {
   return `/net/${n.uuid}${edit ? "/edit" : ""}`;
 }
 

virtweb_frontend/src/api/TokensApi.ts

@@ -20,7 +20,7 @@ export interface APIToken {
   max_inactivity?: number;
 }
 
-export function APITokenURL(t: APIToken, edit: boolean = false): string {
+export function APITokenURL(t: APIToken, edit = false): string {
   return `/token/${t.id}${edit ? "/edit" : ""}`;
 }
 

virtweb_frontend/src/hooks/providers/AlertDialogProvider.tsx

@@ -39,7 +39,7 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
 
   return (
     <>
-      <AlertContextK.Provider value={hook}>{p.children}</AlertContextK.Provider>
+      <AlertContextK value={hook}>{p.children}</AlertContextK>
 
       <Dialog
         open={open}
@@ -67,5 +67,5 @@ export function AlertDialogProvider(p: PropsWithChildren): React.ReactElement {
 }
 
 export function useAlert(): AlertContext {
-  return React.useContext(AlertContextK)!;
+  return React.use(AlertContextK)!;
 }

virtweb_frontend/src/hooks/providers/ConfirmDialogProvider.tsx

@@ -59,13 +59,13 @@ export function ConfirmDialogProvider(
 
   return (
     <>
-      <ConfirmContextK.Provider value={hook}>
+      <ConfirmContextK value={hook}>
         {p.children}
-      </ConfirmContextK.Provider>
+      </ConfirmContextK>
 
       <Dialog
         open={open}
-        onClose={() => handleClose(false)}
+        onClose={() => { handleClose(false); }}
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
       >
@@ -76,10 +76,10 @@ export function ConfirmDialogProvider(
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => handleClose(false)} autoFocus>
+          <Button onClick={() => { handleClose(false); }} autoFocus>
             {cancelButton ?? "Cancel"}
           </Button>
-          <Button onClick={() => handleClose(true)} color="error">
+          <Button onClick={() => { handleClose(true); }} color="error">
             {confirmButton ?? "Confirm"}
           </Button>
         </DialogActions>
@@ -89,5 +89,5 @@ export function ConfirmDialogProvider(
 }
 
 export function useConfirm(): ConfirmContext {
-  return React.useContext(ConfirmContextK)!;
+  return React.use(ConfirmContextK)!;
 }

virtweb_frontend/src/hooks/providers/LoadingMessageProvider.tsx

@@ -6,10 +6,10 @@ import {
 } from "@mui/material";
 import React, { PropsWithChildren } from "react";
 
-type LoadingMessageContext = {
+interface LoadingMessageContext {
   show: (message: string) => void;
   hide: () => void;
-};
+}
 
 const LoadingMessageContextK =
   React.createContext<LoadingMessageContext | null>(null);
@@ -34,9 +34,9 @@ export function LoadingMessageProvider(
 
   return (
     <>
-      <LoadingMessageContextK.Provider value={hook}>
+      <LoadingMessageContextK value={hook}>
         {p.children}
-      </LoadingMessageContextK.Provider>
+      </LoadingMessageContextK>
 
       <Dialog open={open}>
         <DialogContent>
@@ -60,5 +60,5 @@ export function LoadingMessageProvider(
 }
 
 export function useLoadingMessage(): LoadingMessageContext {
-  return React.useContext(LoadingMessageContextK)!;
+  return React.use(LoadingMessageContextK)!;
 }

virtweb_frontend/src/hooks/providers/SnackbarProvider.tsx

@@ -24,9 +24,9 @@ export function SnackbarProvider(p: PropsWithChildren): React.ReactElement {
 
   return (
     <>
-      <SnackbarContextK.Provider value={hook}>
+      <SnackbarContextK value={hook}>
         {p.children}
-      </SnackbarContextK.Provider>
+      </SnackbarContextK>
 
       <Snackbar
         open={open}
@@ -39,5 +39,5 @@ export function SnackbarProvider(p: PropsWithChildren): React.ReactElement {
 }
 
 export function useSnackbar(): SnackbarContext {
-  return React.useContext(SnackbarContextK)!;
+  return React.use(SnackbarContextK)!;
 }

virtweb_frontend/src/index.tsx

@@ -21,7 +21,7 @@ const darkTheme = createTheme({
 });
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
+  document.getElementById("root")!
 );
 root.render(
   <React.StrictMode>

virtweb_frontend/src/routes/EditAPITokenRoute.tsx

@@ -116,7 +116,7 @@ function EditApiTokenRouteInner(p: {
   const [changed, setChanged] = React.useState(false);
 
   const [, updateState] = React.useState<any>();
-  const forceUpdate = React.useCallback(() => updateState({}), []);
+  const forceUpdate = React.useCallback(() => { updateState({}); }, []);
 
   const valueChanged = () => {
     setChanged(true);

virtweb_frontend/src/routes/EditNWFilterRoute.tsx

@@ -99,7 +99,7 @@ function EditNetworkFilterRouteInner(p: {
   const [changed, setChanged] = React.useState(false);
 
   const [, updateState] = React.useState<any>();
-  const forceUpdate = React.useCallback(() => updateState({}), []);
+  const forceUpdate = React.useCallback(() => { updateState({}); }, []);
 
   const valueChanged = () => {
     setChanged(true);

virtweb_frontend/src/routes/EditNetworkRoute.tsx

@@ -97,7 +97,7 @@ function EditNetworkRouteInner(p: {
   const [changed, setChanged] = React.useState(false);
 
   const [, updateState] = React.useState<any>();
-  const forceUpdate = React.useCallback(() => updateState({}), []);
+  const forceUpdate = React.useCallback(() => { updateState({}); }, []);
 
   const valueChanged = () => {
     setChanged(true);

virtweb_frontend/src/routes/EditVMRoute.tsx

@@ -15,7 +15,7 @@ export function CreateVMRoute(): React.ReactElement {
   const alert = useAlert();
   const navigate = useNavigate();
 
-  const [vm, setVM] = React.useState(VMInfo.NewEmpty);
+  const [vm, setVM] = React.useState(VMInfo.NewEmpty());
 
   const create = async (v: VMInfo) => {
     try {
@@ -103,7 +103,9 @@ function EditVMInner(p: {
   const [changed, setChanged] = React.useState(false);
 
   const [, updateState] = React.useState<any>();
-  const forceUpdate = React.useCallback(() => updateState({}), []);
+  const forceUpdate = React.useCallback(() => {
+    updateState({});
+  }, []);
 
   const valueChanged = () => {
     setChanged(true);

virtweb_frontend/src/routes/IsoFilesRoute.tsx

@@ -96,7 +96,7 @@ function UploadIsoFileCard(p: {
       p.onFileUploaded();
     } catch (e) {
       console.error(e);
-      await alert("Failed to perform file upload! " + e);
+      await alert(`Failed to perform file upload! ${e}`);
     }
 
     setUploadProgress(null);
@@ -120,7 +120,9 @@ function UploadIsoFileCard(p: {
           value={value}
           onChange={handleChange}
           style={{ flex: 1 }}
-          inputProps={{ accept: ServerApi.Config.iso_mimetypes.join(",") }}
+          slotProps={{
+            htmlInput: { accept: ServerApi.Config.iso_mimetypes.join(",") },
+          }}
         />
 
         {value && <Button onClick={upload}>Upload file</Button>}
@@ -166,14 +168,18 @@ function UploadIsoFileFromUrlCard(p: {
           label="URL"
           value={url}
           style={{ flex: 3 }}
-          onChange={(e) => setURL(e.target.value)}
+          onChange={(e) => {
+            setURL(e.target.value);
+          }}
         />
         <span style={{ width: "10px" }}></span>
         <TextField
           label="Filename"
           value={actualFileName}
           style={{ flex: 2 }}
-          onChange={(e) => setFilename(e.target.value)}
+          onChange={(e) => {
+            setFilename(e.target.value);
+          }}
         />
         {url !== "" && actualFileName !== "" && (
           <Button onClick={upload}>Upload file</Button>
@@ -200,7 +206,7 @@ function IsoFilesList(p: {
     try {
       const blob = await IsoFilesApi.Download(entry, setDlProgress);
 
-      await downloadBlob(blob, entry.filename);
+      downloadBlob(blob, entry.filename);
     } catch (e) {
       console.error(e);
       alert("Failed to download iso file!");
@@ -238,7 +244,7 @@ function IsoFilesList(p: {
       </Typography>
     );
 
-  const columns: GridColDef[] = [
+  const columns: GridColDef<IsoFile>[] = [
     { field: "filename", headerName: "File name", flex: 3 },
     {
       field: "size",
@@ -303,7 +309,6 @@ function IsoFilesList(p: {
           getRowId={(c) => c.filename}
           rows={p.list}
           columns={columns}
-          autoHeight={true}
         />
       </VirtWebPaper>
     </>

virtweb_frontend/src/routes/NetworkFiltersListRoute.tsx

@@ -66,7 +66,7 @@ function NetworkFiltersListRouteInner(p: {
     const onlyBuiltin = visibleFilters === VisibleFilters.Builtin;
 
     return p.list.filter((f) => NWFilterIsBuiltin(f) === onlyBuiltin);
-  }, [visibleFilters]);
+  }, [visibleFilters, p.list]);
 
   return (
     <VirtWebRouteContainer
@@ -78,7 +78,9 @@ function NetworkFiltersListRouteInner(p: {
             size="small"
             value={visibleFilters}
             exclusive
-            onChange={(_ev, v) => setVisibleFilters(v)}
+            onChange={(_ev, v) => {
+              setVisibleFilters(v);
+            }}
             aria-label="visible filters"
           >
             <ToggleButton value={VisibleFilters.All}>All</ToggleButton>
@@ -130,8 +132,8 @@ function NetworkFiltersListRouteInner(p: {
                   </TableCell>
                   <TableCell>
                     <ul>
-                      {t.join_filters.map((f, n) => (
-                        <li key={n}>{f}</li>
+                      {t.join_filters.map((f) => (
+                        <li key={f}>{f}</li>
                       ))}
                     </ul>
                   </TableCell>

virtweb_frontend/src/routes/SysInfoRoute.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-x/no-array-index-key */
 import {
   mdiHarddisk,
   mdiInformation,
@@ -236,7 +237,7 @@ export function SysInfoRouteInner(p: {
 function SysInfoDetailsTable(p: {
   label: string;
   icon: React.ReactElement;
-  entries: Array<{ label: string; value: string | number }>;
+  entries: { label: string; value: string | number }[];
 }): React.ReactElement {
   return (
     <VirtWebPaper

virtweb_frontend/src/routes/TokensListRoute.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-x/no-array-index-key */
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import {
   Button,
@@ -99,9 +100,9 @@ export function TokensListRouteInner(p: {
                     {t.max_inactivity && timeDiff(0, t.max_inactivity)}
                   </TableCell>
                   <TableCell>
-                    {t.rights.map((r) => {
+                    {t.rights.map((r, n) => {
                       return (
-                        <div>
+                        <div key={n}>
                           {r.verb} {r.path}
                         </div>
                       );

virtweb_frontend/src/routes/VMListRoute.tsx

@@ -25,13 +25,13 @@ import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import { VMStatusWidget } from "../widgets/vms/VMStatusWidget";
 
 export function VMListRoute(): React.ReactElement {
-  const [groups, setGroups] = React.useState<Array<string | undefined>>();
+  const [groups, setGroups] = React.useState<(string | undefined)[]>();
   const [list, setList] = React.useState<VMInfo[] | undefined>();
 
   const loadKey = React.useRef(1);
 
   const load = async () => {
-    const groups: Array<string | undefined> = await GroupApi.GetList();
+    const groups: (string | undefined)[] = await GroupApi.GetList();
     const list = await VMApi.GetList();
 
     if (list.find((v) => !v.group) !== undefined) groups.push(undefined);
@@ -70,7 +70,7 @@ export function VMListRoute(): React.ReactElement {
 }
 
 function VMListWidget(p: {
-  groups: Array<string | undefined>;
+  groups: (string | undefined)[];
   list: VMInfo[];
   onReload: () => void;
 }): React.ReactElement {
@@ -115,8 +115,8 @@ function VMListWidget(p: {
           </TableRow>
         </TableHead>
         <TableBody>
-          {p.groups.map((g, num) => (
-            <React.Fragment key={num}>
+          {p.groups.map((g) => (
+            <React.Fragment key={g}>
               {p.groups.length > 1 && (
                 <TableRow>
                   <TableCell
@@ -125,9 +125,11 @@ function VMListWidget(p: {
                   >
                     <IconButton
                       size="small"
-                      onClick={() => toggleHiddenGroup(g)}
+                      onClick={() => {
+                        toggleHiddenGroup(g);
+                      }}
                     >
-                      {!hiddenGroups?.has(g) ? (
+                      {!hiddenGroups.has(g) ? (
                         <KeyboardArrowUpIcon />
                       ) : (
                         <KeyboardArrowDownIcon />
@@ -157,7 +159,9 @@ function VMListWidget(p: {
                       <TableCell>
                         <VMStatusWidget
                           vm={row}
-                          onChange={(s) => updateVMState(row, s)}
+                          onChange={(s) => {
+                            updateVMState(row, s);
+                          }}
                         />
                       </TableCell>
                       <TableCell>

virtweb_frontend/src/routes/VNCRoute.tsx

@@ -44,8 +44,8 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
   const [counter, setCounter] = React.useState(1);
   const [connected, setConnected] = React.useState(false);
 
-  const vncRef = React.createRef<HTMLDivElement>();
-  const vncScreenRef = React.createRef<VncScreenHandle>();
+  const vncRef = React.useRef<HTMLDivElement>(null);
+  const vncScreenRef = React.useRef<VncScreenHandle>(null);
 
   const connect = async (force: boolean) => {
     try {
@@ -91,7 +91,9 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
     connect(false);
 
     if (vncRef.current) {
-      vncRef.current.onfullscreenchange = () => setCounter(counter + 1);
+      vncRef.current.onfullscreenchange = () => {
+        setCounter(counter + 1);
+      };
     }
   });
 
@@ -140,10 +142,12 @@ function VNCInner(p: { vm: VMInfo }): React.ReactElement {
           ref={vncScreenRef}
           url={token.url}
           onDisconnect={() => {
-            console.info("VNC disconnected " + token?.url);
+            console.info("VNC disconnected " + token.url);
             disconnected();
           }}
-          onConnect={() => setConnected(true)}
+          onConnect={() => {
+            setConnected(true);
+          }}
         />
       </div>
     </div>

virtweb_frontend/src/routes/auth/LoginRoute.tsx

@@ -36,7 +36,7 @@ export function LoginRoute(): React.ReactElement {
   const canSubmit = username.length > 0 && password.length > 0;
 
   const [showPassword, setShowPassword] = React.useState(false);
-  const handleClickShowPassword = () => setShowPassword((show) => !show);
+  const handleClickShowPassword = () => { setShowPassword((show) => !show); };
 
   const handleMouseDownPassword = (
     event: React.MouseEvent<HTMLButtonElement>
@@ -105,7 +105,7 @@ export function LoginRoute(): React.ReactElement {
               label="Username"
               name="username"
               value={username}
-              onChange={(e) => setUsername(e.target.value)}
+              onChange={(e) => { setUsername(e.target.value); }}
               autoComplete="username"
               autoFocus
             />
@@ -120,7 +120,7 @@ export function LoginRoute(): React.ReactElement {
                 type={showPassword ? "text" : "password"}
                 id="password"
                 value={password}
-                onChange={(e) => setPassword(e.target.value)}
+                onChange={(e) => { setPassword(e.target.value); }}
                 autoComplete="current-password"
                 endAdornment={
                   <InputAdornment position="end">

virtweb_frontend/src/utils/FilesUtils.ts

@@ -1,4 +1,4 @@
-export async function downloadBlob(blob: Blob, filename: string) {
+export function downloadBlob(blob: Blob, filename: string) {
   const url = URL.createObjectURL(blob);
 
   const link = document.createElement("a");

virtweb_frontend/src/utils/RandUtils.ts

@@ -2,8 +2,9 @@
  * Generate a random MAC address
  */
 export function randomMacAddress(prefix: string | undefined): string {
+  prefix = prefix ?? "";
   let mac = "XX:XX:XX:XX:XX:XX";
-  mac = prefix + mac.slice(prefix?.length);
+  mac = prefix + mac.slice(prefix.length);
 
   return mac.replace(/X/g, () =>
     "0123456789abcdef".charAt(Math.floor(Math.random() * 16))

virtweb_frontend/src/widgets/AsyncWidget.tsx

@@ -19,7 +19,7 @@ export function AsyncWidget(p: {
 }): React.ReactElement {
   const [state, setState] = useState(State.Loading);
 
-  const counter = useRef<any | null>(null);
+  const counter = useRef<any>(null);
 
   const load = async () => {
     try {
@@ -67,7 +67,7 @@ export function AsyncWidget(p: {
 
           <Button onClick={load}>Try again</Button>
 
-          {p.errAdditionalElement && p.errAdditionalElement()}
+          {p.errAdditionalElement?.()}
         </Box>
       )
     );

virtweb_frontend/src/widgets/BaseAuthenticatedPage.tsx

@@ -13,8 +13,7 @@ import {
   List,
   ListItemButton,
   ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText,
+  ListItemText
 } from "@mui/material";
 import { Outlet, useLocation } from "react-router-dom";
 import { RouterLink } from "./RouterLink";
@@ -95,7 +94,6 @@ function NavLink(p: {
   icon: React.ReactElement;
   uri: string;
   label: string;
-  secondaryAction?: React.ReactElement;
 }): React.ReactElement {
   const location = useLocation();
   return (
@@ -103,9 +101,6 @@ function NavLink(p: {
       <ListItemButton selected={p.uri === location.pathname}>
         <ListItemIcon>{p.icon}</ListItemIcon>
         <ListItemText primary={p.label} />
-        {p.secondaryAction && (
-          <ListItemSecondaryAction>{p.secondaryAction}</ListItemSecondaryAction>
-        )}
       </ListItemButton>
     </RouterLink>
   );

virtweb_frontend/src/widgets/ConfigImportExportButtons.tsx

@@ -31,14 +31,16 @@ export function ConfigImportExportButtons(p: {
       fileEl.click();
 
       // Wait for a file to be chosen
-      await new Promise((res, _rej) =>
-        fileEl.addEventListener("change", () => res(null))
-      );
+      await new Promise((res) => {
+        fileEl.addEventListener("change", () => {
+          res(null);
+        });
+      });
 
       if ((fileEl.files?.length ?? 0) === 0) return null;
 
       // Import conf
-      let file = fileEl.files![0];
+      const file = fileEl.files![0];
       const content = await file.text();
       p.importConf?.(JSON.parse(content));
     } catch (e) {

virtweb_frontend/src/widgets/StateActionButton.tsx

@@ -23,7 +23,7 @@ export function StateActionButton<S>(p: {
       p.onExecuted();
     } catch (e) {
       console.error(e);
-      alert("Failed to perform action! " + e);
+      alert(`Failed to perform action! ${e}`);
     }
   };
 

virtweb_frontend/src/widgets/TabsWidget.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-x/no-array-index-key */
 import { Box, Tab, Tabs } from "@mui/material";
 
 export interface TabWidgetOption<E> {
@@ -24,7 +25,9 @@ export function TabsWidget<E>(p: {
     <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
       <Tabs
         value={currTabIndex}
-        onChange={(_ev, newVal) => updateActiveTab(newVal)}
+        onChange={(_ev, newVal) => {
+          updateActiveTab(newVal);
+        }}
       >
         {activeOptions.map((o, index) => (
           <Tab key={index} label={o.label} style={{ color: o.color }} />

virtweb_frontend/src/widgets/forms/CheckboxInput.tsx

@@ -17,7 +17,7 @@ export function CheckboxInput(p: {
         <Checkbox
           disabled={!p.editable}
           checked={p.checked}
-          onChange={(e) => p.onValueChange(e.target.checked)}
+          onChange={(e) => { p.onValueChange(e.target.checked); }}
         />
       }
       label={p.label}

virtweb_frontend/src/widgets/forms/EditSection.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import { Paper, Typography } from "@mui/material";
 import React, { PropsWithChildren } from "react";
 import Grid from "@mui/material/Grid";

virtweb_frontend/src/widgets/forms/IPInput.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import React from "react";
 import { TextInput } from "./TextInput";
 
@@ -32,7 +33,7 @@ export function IPInputWithMask(p: {
 
   const currValue =
     p.ipAndMask ??
-    (p.ip ?? "") + (p.mask || showSlash.current ? "/" : "") + (p.mask ?? "");
+    `${p.ip ?? ""}${p.mask || showSlash.current ? "/" : ""}${p.mask ?? ""}`;
 
   const { onValueChange, ...props } = p;
   return (
@@ -44,7 +45,7 @@ export function IPInputWithMask(p: {
           return;
         }
 
-        const split = v?.split("/");
+        const split = v.split("/");
         const ip =
           p.version === 4 ? sanitizeIpV4(split[0]) : sanitizeIpV6(split[0]);
         let mask = undefined;
@@ -69,7 +70,7 @@ export function IPInputWithMask(p: {
 function sanitizeIpV4(s: string | undefined): string | undefined {
   if (s === "" || s === undefined) return s;
 
-  let split = s.split(".");
+  const split = s.split(".");
   if (split.length > 4) split.splice(4);
 
   let needAnotherIteration = false;
@@ -106,7 +107,7 @@ function sanitizeIpV6(s: string | undefined): string | undefined {
       const num = parseInt(e, 16);
       if (isNaN(num)) return "0";
 
-      let s = num.toString(16);
+      const s = num.toString(16);
       if (num > 0xffff) {
         needAnotherIteration = true;
         return s.slice(0, 4) + ":" + s.slice(4);

virtweb_frontend/src/widgets/forms/MACInput.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import { TextInput } from "./TextInput";
 
 export function MACInput(p: {
@@ -32,7 +33,7 @@ function sanitizeMacAddress(s: string | undefined): string | undefined {
       const num = parseInt(e, 16);
       if (isNaN(num)) return "0";
 
-      let s = num.toString(16).padStart(2, "0");
+      const s = num.toString(16).padStart(2, "0");
       if (num > 0xff) {
         needAnotherIteration = true;
         return s.slice(0, 2) + ":" + s.slice(2);

virtweb_frontend/src/widgets/forms/NWFConnStateInput.tsx

@@ -12,7 +12,7 @@ export function NWFConnStateInput(p: {
       label="Connection state"
       value={p.value}
       onValueChange={(s) => {
-        p.onChange?.(s as any);
+        p.onChange(s as any);
       }}
       options={[
         { label: "None", value: undefined },

virtweb_frontend/src/widgets/forms/NWFSelectReferencedFilters.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react-x/no-array-index-key */
+/* eslint-disable react-hooks/exhaustive-deps */
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { NWFilter, NWFilterURL } from "../../api/NWFilterApi";

virtweb_frontend/src/widgets/forms/NWFilterPriorityInput.tsx

@@ -13,7 +13,7 @@ export function NWFilterPriorityInput(p: {
       value={p.value?.toString()}
       type="number"
       onValueChange={(v) => {
-        p.onChange?.(v && v !== "" ? Number(v) : undefined);
+        p.onChange(v && v !== "" ? Number(v) : undefined);
       }}
       size={ServerApi.Config.constraints.nwfilter_priority}
       helperText="A lower priority value is accessed before one with a higher value"

virtweb_frontend/src/widgets/forms/NWFilterRules.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-x/no-array-index-key */
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -66,9 +67,19 @@ export function NWFilterRules(p: {
             deleteRule(n);
           }}
           onGoDown={
-            n < p.rules.length - 1 ? () => swapRules(n, n + 1) : undefined
+            n < p.rules.length - 1
+              ? () => {
+                  swapRules(n, n + 1);
+                }
+              : undefined
+          }
+          onGoUp={
+            n > 0
+              ? () => {
+                  swapRules(n, n - 1);
+                }
+              : undefined
           }
-          onGoUp={n > 0 ? () => swapRules(n, n - 1) : undefined}
           {...p}
         />
       ))}
@@ -153,7 +164,9 @@ function NWRuleEdit(p: {
             editable={p.editable}
             onChange={p.onChange}
             selector={s}
-            onDelete={() => deleteSelector(n)}
+            onDelete={() => {
+              deleteSelector(n);
+            }}
           />
         ))}
       </CardContent>

virtweb_frontend/src/widgets/forms/NWFilterSelectInput.tsx

@@ -25,9 +25,7 @@ export function NWFilterSelectInput(p: {
         value={selectedValue}
         onDelete={p.editable ? () => p.onChange?.(undefined) : undefined}
         onClick={
-          !p.editable && selectedValue
-            ? () => navigate(NWFilterURL(selectedValue))
-            : undefined
+          !p.editable ? () => navigate(NWFilterURL(selectedValue)) : undefined
         }
       />
     );
@@ -48,7 +46,7 @@ export function NWFilterSelectInput(p: {
       renderInput={(params) => (
         <TextField {...params} variant="standard" label={p.label} />
       )}
-      renderOption={(_props, option, _state) => (
+      renderOption={(_props, option) => (
         <NWFilterItem
           dense
           onClick={() => {

virtweb_frontend/src/widgets/forms/NetDHCPHostReservations.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-x/no-array-index-key */
 import { mdiIp } from "@mdi/js";
 import Icon from "@mdi/react";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -130,7 +131,7 @@ function HostReservationWidget(p: {
             value={p.host.mac}
             onValueChange={(v) => {
               p.host.mac = v!;
-              p.onChange?.();
+              p.onChange();
             }}
           />
         )}
@@ -142,7 +143,7 @@ function HostReservationWidget(p: {
           value={p.host.ip}
           onValueChange={(v) => {
             p.host.ip = v!;
-            p.onChange?.();
+            p.onChange();
           }}
         />
       </div>

virtweb_frontend/src/widgets/forms/NetNatConfiguration.tsx

@@ -54,6 +54,7 @@ export function NetNatConfiguration(p: {
     <>
       {p.nat.map((e, num) => (
         <NatEntryForm
+          // eslint-disable-next-line react-x/no-array-index-key
           key={num}
           {...p}
           entry={e}

virtweb_frontend/src/widgets/forms/PortInput.tsx

@@ -12,7 +12,7 @@ export function PortInput(p: {
       value={p.value?.toString() ?? ""}
       type="number"
       onValueChange={(v) => {
-        p.onChange?.(sanitizePort(v));
+        p.onChange(sanitizePort(v));
       }}
       checkValue={(v) => Number(v) <= 65535}
     />

virtweb_frontend/src/widgets/forms/RadioGroupInput.tsx

@@ -24,10 +24,13 @@ export function RadioGroupInput(p: {
       <RadioGroup
         row
         value={p.value}
-        onChange={(_ev, v) => p.onValueChange?.(v)}
+        onChange={(_ev, v) => {
+          p.onValueChange(v);
+        }}
       >
         {p.options.map((o) => (
           <FormControlLabel
+            key={o.value}
             disabled={!p.editable}
             value={o.value}
             control={<Radio />}

virtweb_frontend/src/widgets/forms/SelectInput.tsx

@@ -33,7 +33,7 @@ export function SelectInput(p: {
       <Select
         value={p.value ?? ""}
         label={p.label}
-        onChange={(e) => p.onValueChange(e.target.value)}
+        onChange={(e) => { p.onValueChange(e.target.value); }}
       >
         {p.options.map((e) => (
           <MenuItem

virtweb_frontend/src/widgets/forms/TextInput.tsx

@@ -2,7 +2,7 @@ import { TextField } from "@mui/material";
 import { LenConstraint } from "../../api/ServerApi";
 
 /**
- * Couple / Member property edition
+ * Text input property edition
  */
 export function TextInput(p: {
   label?: string;
@@ -42,12 +42,14 @@ export function TextInput(p: {
           e.target.value.length === 0 ? undefined : e.target.value
         )
       }
-      inputProps={{
+      slotProps={{
+        htmlInput: {
           maxLength: p.size?.max,
-      }}
-      InputProps={{
+        },
+        input: {
           readOnly: !p.editable,
           type: p.type,
+        },
       }}
       variant={"standard"}
       style={p.style ?? { width: "100%", marginBottom: "15px" }}

virtweb_frontend/src/widgets/forms/VMDisksList.tsx

@@ -40,6 +40,7 @@ export function VMDisksList(p: {
       {/* disks list */}
       {p.vm.disks.map((d, num) => (
         <DiskInfo
+          // eslint-disable-next-line react-x/no-array-index-key
           key={num}
           editable={p.editable}
           disk={d}

virtweb_frontend/src/widgets/forms/VMNetworkFilterParameters.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-x/no-array-index-key */
 import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Button,

virtweb_frontend/src/widgets/forms/VMNetworksList.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-x/no-array-index-key */
 import { mdiNetworkOutline } from "@mdi/js";
 import Icon from "@mdi/react";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -51,7 +52,6 @@ export function VMNetworksList(p: {
         {p.vm.networks.map((n, num) => (
           <EditSection key={num}>
             <NetworkInfoWidget
-              key={num}
               network={n}
               removeFromList={() => {
                 p.vm.networks.splice(num, 1);

virtweb_frontend/src/widgets/forms/VMSelectIsoInput.tsx

@@ -19,7 +19,7 @@ export function VMSelectIsoInput(p: {
   attachedISOs: string[];
   onChange: (newVal: string[]) => void;
 }): React.ReactElement {
-  if (!p.attachedISOs && !p.editable) return <></>;
+  if (p.attachedISOs.length === 0 && !p.editable) return <></>;
 
   return (
     <>
@@ -27,7 +27,7 @@ export function VMSelectIsoInput(p: {
         const iso = p.isoList.find((d) => d.filename === isoName);
         return (
           <ListItem
-            key={num}
+            key={isoName}
             secondaryAction={
               p.editable && (
                 <IconButton
@@ -73,8 +73,7 @@ export function VMSelectIsoInput(p: {
             label: `${i.filename} ${filesize(i.size)}`,
             value: i.filename,
           };
-          })
-        }
+        })}
       />
     </>
   );

virtweb_frontend/src/widgets/net/NetworkDetails.tsx

@@ -25,7 +25,7 @@ interface DetailsProps {
 }
 
 export function NetworkDetails(p: DetailsProps): React.ReactElement {
-  const [nicsList, setNicsList] = React.useState<string[] | any>();
+  const [nicsList, setNicsList] = React.useState<string[] | undefined>();
 
   const load = async () => {
     setNicsList(await ServerApi.GetNetworksList());
@@ -36,7 +36,7 @@ export function NetworkDetails(p: DetailsProps): React.ReactElement {
       loadKey={"1"}
       load={load}
       errMsg="Failed to load the list of host network cards!"
-      build={() => <NetworkDetailsInner nicsList={nicsList} {...p} />}
+      build={() => <NetworkDetailsInner nicsList={nicsList!} {...p} />}
     />
   );
 }
@@ -260,7 +260,7 @@ function IPSection(p: {
   const confirm = useConfirm();
 
   const toggleNetwork = async () => {
-    if (!!p.config) {
+    if (p.config) {
       if (
         !(await confirm(
           `Do you really want to disable IPv${p.version} on this network? Specific configuration will be deleted!`
@@ -268,11 +268,11 @@ function IPSection(p: {
       )
         return;
 
-      p.onChange?.(undefined);
+      p.onChange(undefined);
       return;
     }
 
-    p.onChange?.({
+    p.onChange({
       bridge_address: p.version === 4 ? "192.168.1.1" : "fd00::1",
       prefix: p.version === 4 ? 24 : 8,
     });
@@ -298,7 +298,7 @@ function IPSection(p: {
       p.config!.dhcp = undefined;
     }
 
-    p.onChange?.(p.config);
+    p.onChange(p.config);
   };
 
   const toggleNAT = async (v: boolean) => {
@@ -306,7 +306,7 @@ function IPSection(p: {
       p.config!.nat = [];
     } else {
       if (
-        (p.config?.nat?.length ?? 0 > 0) &&
+        (p.config?.nat?.length ?? 0) > 0 &&
         !(await confirm(
           `Do you really want to disable IPv${p.version} NAT port forwarding on this network? Specific configuration will be deleted!`
         ))
@@ -315,7 +315,7 @@ function IPSection(p: {
       p.config!.nat = undefined;
     }
 
-    p.onChange?.(p.config);
+    p.onChange(p.config);
   };
 
   if (!p.config && !p.editable) return <></>;
@@ -338,10 +338,10 @@ function IPSection(p: {
               editable={p.editable}
               label="Bridge address"
               version={p.version}
-              value={p.config?.bridge_address}
+              value={p.config.bridge_address}
               onValueChange={(v) => {
                 p.config!.bridge_address = v ?? "";
-                p.onChange?.(p.config);
+                p.onChange(p.config);
               }}
             />
 
@@ -352,7 +352,7 @@ function IPSection(p: {
               type="number"
               onValueChange={(v) => {
                 p.config!.prefix = Number(v);
-                p.onChange?.(p.config);
+                p.onChange(p.config);
               }}
               size={
                 p.version === 4 ? { min: 0, max: 32 } : { min: 0, max: 128 }
@@ -407,7 +407,7 @@ function IPSection(p: {
             dhcp={p.config.dhcp}
             onChange={(d) => {
               p.config!.dhcp = d;
-              p.onChange?.(p.config);
+              p.onChange(p.config);
             }}
           />
         </EditSection>
@@ -431,7 +431,7 @@ function IPSection(p: {
               nat={p.config.nat}
               onChange={(n) => {
                 p.config!.nat = n;
-                p.onChange?.(p.config);
+                p.onChange(p.config);
               }}
             />
           )}

virtweb_frontend/src/widgets/net/NetworkStatusWidget.tsx

@@ -29,13 +29,13 @@ export function NetworkStatusWidget(p: {
     }
   };
 
-  const changedAction = () => setState(undefined);
+  const changedAction = () => { setState(undefined); };
 
   React.useEffect(() => {
     refresh();
     const i = setInterval(() => refresh(), 3000);
 
-    return () => clearInterval(i);
+    return () => { clearInterval(i); };
   });
 
   if (state === undefined)

virtweb_frontend/src/widgets/nwfilter/NWFilterDetails.tsx

@@ -28,7 +28,9 @@ interface DetailsProps {
 }
 
 export function NWFilterDetails(p: DetailsProps): ReactElement {
-  const [nwFiltersList, setNwFiltersList] = React.useState<NWFilter[] | any>();
+  const [nwFiltersList, setNwFiltersList] = React.useState<
+    NWFilter[] | undefined
+  >();
 
   const load = async () => {
     setNwFiltersList(await NWFilterApi.GetList());
@@ -40,7 +42,7 @@ export function NWFilterDetails(p: DetailsProps): ReactElement {
       load={load}
       errMsg="Failed to load the list of network filters!"
       build={() => (
-        <NetworkFilterDetailsInner nwFiltersList={nwFiltersList} {...p} />
+        <NetworkFilterDetailsInner nwFiltersList={nwFiltersList!} {...p} />
       )}
     />
   );
@@ -116,7 +118,7 @@ function NetworkFilterDetailsTabGeneral(
             p.nwfilter.name = v ?? "";
             p.onChange?.();
           }}
-          checkValue={(v) => /^[a-zA-Z0-9\_\-]+$/.test(v)}
+          checkValue={(v) => /^[a-zA-Z0-9_-]+$/.test(v)}
           size={ServerApi.Config.constraints.nwfilter_name_size}
         />
 

virtweb_frontend/src/widgets/tokens/APITokenDetails.tsx

@@ -161,14 +161,14 @@ function APITokenTabGeneral(p: DetailsInnerProps): React.ReactElement {
         {p.status === TokenWidgetStatus.Create && (
           <RadioGroupInput
             {...p}
-            editable={p.status === TokenWidgetStatus.Create}
+            editable={true}
             options={[
               { label: "IPv4", value: "4" },
               { label: "IPv6", value: "6" },
             ]}
             value={ipVersion.toString()}
             onValueChange={(v) => {
-              setIpVersion(Number(v) as any);
+              setIpVersion(Number(v) as 4 | 6);
             }}
             label="Token IP restriction version"
           />

virtweb_frontend/src/widgets/tokens/TokenRawRightsEditor.tsx

@@ -63,6 +63,7 @@ export function TokenRawRightsEditor(p: {
         </TableHead>
         <TableBody>
           {p.token.rights.map((r, num) => (
+            // eslint-disable-next-line react-x/no-array-index-key
             <TableRow key={num} hover>
               <TableCell style={{ width: "100px" }}>
                 <SelectInput
@@ -95,7 +96,11 @@ export function TokenRawRightsEditor(p: {
               </TableCell>
               {p.editable && (
                 <TableCell style={{ width: "100px" }}>
-                  <IconButton onClick={() => deleteRule(num)}>
+                  <IconButton
+                    onClick={() => {
+                      deleteRule(num);
+                    }}
+                  >
                     <Tooltip title="Remove the rule">
                       <DeleteIcon />
                     </Tooltip>

virtweb_frontend/src/widgets/tokens/TokenRightsEditor.tsx

@@ -85,8 +85,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per VM operations */}
-            {p.vms.map((v, n) => (
-              <TableRow hover key={n}>
+            {p.vms.map((v) => (
+              <TableRow hover key={v.uuid}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
@@ -185,8 +185,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per VM operations */}
-            {p.vms.map((v, n) => (
-              <TableRow hover key={n}>
+            {p.vms.map((v) => (
+              <TableRow hover key={v.uuid}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
@@ -306,8 +306,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per VM operations */}
-            {p.groups.map((v, n) => (
-              <TableRow hover key={n}>
+            {p.groups.map((v) => (
+              <TableRow hover key={v}>
                 <TableCell>{v}</TableCell>
                 <CellRight
                   {...p}
@@ -448,8 +448,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per network operations */}
-            {p.networks.map((v, n) => (
-              <TableRow hover key={n}>
+            {p.networks.map((v) => (
+              <TableRow hover key={v.uuid}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
@@ -568,15 +568,15 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per network filter operations */}
-            {p.nwFilters.map((v, n) => (
-              <TableRow hover key={n}>
+            {p.nwFilters.map((v) => (
+              <TableRow hover key={v.uuid}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
                   right={{ verb: "GET", path: `/api/nwfilter/${v.uuid}` }}
                   parent={{ verb: "GET", path: "/api/nwfilter/*" }}
                 />
-                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name!) ? (
+                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name) ? (
                   <TableCell></TableCell>
                 ) : (
                   <CellRight
@@ -585,7 +585,7 @@ export function TokenRightsEditor(p: {
                     parent={{ verb: "PUT", path: "/api/nwfilter/*" }}
                   />
                 )}
-                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name!) ? (
+                {ServerApi.Config.builtin_nwfilter_rules.includes(v.name) ? (
                   <TableCell></TableCell>
                 ) : (
                   <CellRight
@@ -645,8 +645,8 @@ export function TokenRightsEditor(p: {
             </TableRow>
 
             {/* Per API token operations */}
-            {p.tokens.map((v, n) => (
-              <TableRow hover key={n}>
+            {p.tokens.map((v) => (
+              <TableRow hover key={v.id}>
                 <TableCell>{v.name}</TableCell>
                 <CellRight
                   {...p}
@@ -767,7 +767,7 @@ function RouteRight(p: RightOpts): React.ReactElement {
   const parentActivated =
     !!p.parent &&
     p.token.rights.findIndex(
-      (r) => r.verb === p.parent?.verb && r.path === p.parent?.path
+      (r) => r.verb === p.parent?.verb && r.path === p.parent.path
     ) !== -1;
 
   const toggle = (a: boolean) => {
@@ -804,7 +804,9 @@ function RouteRight(p: RightOpts): React.ReactElement {
               <Checkbox
                 checked={activated || parentActivated}
                 disabled={!p.editable || parentActivated}
-                onChange={(_e, a) => toggle(a)}
+                onChange={(_e, a) => {
+                  toggle(a);
+                }}
               />
             }
             label={p.label}
@@ -814,7 +816,9 @@ function RouteRight(p: RightOpts): React.ReactElement {
             <Checkbox
               checked={activated || parentActivated}
               disabled={!p.editable || parentActivated}
-              onChange={(_e, a) => toggle(a)}
+              onChange={(_e, a) => {
+                toggle(a);
+              }}
             />
           </span>
         )}

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -35,14 +35,16 @@ interface DetailsProps {
 }
 
 export function VMDetails(p: DetailsProps): React.ReactElement {
-  const [groupsList, setGroupsList] = React.useState<string[] | any>();
-  const [isoList, setIsoList] = React.useState<IsoFile[] | any>();
+  const [groupsList, setGroupsList] = React.useState<string[] | undefined>();
+  const [isoList, setIsoList] = React.useState<IsoFile[] | undefined>();
   const [vcpuCombinations, setVCPUCombinations] = React.useState<
-    number[] | any
+    number[] | undefined
+  >();
+  const [networksList, setNetworksList] = React.useState<
+    NetworkInfo[] | undefined
   >();
-  const [networksList, setNetworksList] = React.useState<NetworkInfo[] | any>();
   const [networkFiltersList, setNetworkFiltersList] = React.useState<
-    NWFilter[] | any
+    NWFilter[] | undefined
   >();
 
   const load = async () => {
@@ -60,11 +62,11 @@ export function VMDetails(p: DetailsProps): React.ReactElement {
       errMsg="Failed to load the list of ISO files"
       build={() => (
         <VMDetailsInner
-          groupsList={groupsList}
-          isoList={isoList}
-          vcpuCombinations={vcpuCombinations}
-          networksList={networksList}
-          networkFiltersList={networkFiltersList}
+          groupsList={groupsList!}
+          isoList={isoList!}
+          vcpuCombinations={vcpuCombinations!}
+          networksList={networksList!}
+          networkFiltersList={networkFiltersList!}
           {...p}
         />
       )}
@@ -202,7 +204,7 @@ function VMDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
               editable={p.editable}
               label="Group"
               onValueChange={(v) => {
-                p.vm.group = v! as any;
+                p.vm.group = v!;
                 p.onChange?.();
               }}
               value={p.vm.group}
@@ -222,7 +224,11 @@ function VMDetailsTabGeneral(p: DetailsInnerProps): React.ReactElement {
                   : "Add a new group instead of using existing one"
               }
             >
-              <IconButton onClick={() => setAddGroup(!addGroup)}>
+              <IconButton
+                onClick={() => {
+                  setAddGroup(!addGroup);
+                }}
+              >
                 {addGroup ? <ListIcon /> : <AddIcon />}
               </IconButton>
             </Tooltip>

virtweb_frontend/src/widgets/vms/VMScreenshot.tsx

@@ -9,7 +9,7 @@ export function VMScreenshot(p: { vm: VMInfo }): React.ReactElement {
     string | undefined
   >();
 
-  const int = React.useRef<any | undefined>(undefined);
+  const int = React.useRef<NodeJS.Timeout | undefined>(undefined);
 
   React.useEffect(() => {
     const refresh = async () => {
@@ -25,7 +25,9 @@ export function VMScreenshot(p: { vm: VMInfo }): React.ReactElement {
 
     if (int.current === undefined) {
       refresh();
-      int.current = setInterval(() => refresh(), 5000);
+      int.current = setInterval(() => {
+        refresh();
+      }, 5000);
     }
 
     return () => {

virtweb_frontend/src/widgets/vms/VMStatusWidget.tsx

@@ -31,13 +31,19 @@ export function VMStatusWidget(p: {
     }
   };
 
-  const changedAction = () => setState(undefined);
+  const changedAction = () => {
+    setState(undefined);
+  };
 
   React.useEffect(() => {
     refresh();
-    const i = setInterval(() => refresh(), 3000);
+    const i = setInterval(() => {
+      refresh();
+    }, 3000);
 
-    return () => clearInterval(i);
+    return () => {
+      clearInterval(i);
+    };
   });
 
   if (state === undefined)
@@ -59,6 +65,7 @@ export function VMStatusWidget(p: {
             icon={<PersonalVideoIcon />}
             tooltip="Graphical remote control over the VM"
             performAction={async () => navigate(p.vm.VNCURL)}
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
             onExecuted={() => {}}
           />
         )