chore(deps): update eslint monorepo to v10 (major)

packages/diracx-web-components/eslint.config.js

@@ -1,65 +1,28 @@
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
-import _import from "eslint-plugin-import";
-import typescriptEslint from "@typescript-eslint/eslint-plugin";
-import react from "eslint-plugin-react";
-import tsParser from "@typescript-eslint/parser";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
+import { fixupConfigRules } from "@eslint/compat";
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import nextTypescript from "eslint-config-next/typescript";
+import prettier from "eslint-config-prettier/flat";
+import storybook from "eslint-plugin-storybook";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 // This config is only for typescript files
 export default [
-  ...fixupConfigRules(
-    compat.extends(
-      "next/core-web-vitals",
-      "plugin:import/recommended",
-      "plugin:import/typescript",
-      "plugin:storybook/recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:react/recommended",
-      "prettier",
-    ),
-  ),
+  // Wrap next configs with fixupConfigRules for ESLint 10 compat
+  // (eslint-plugin-react still uses legacy context.getFilename API)
+  ...fixupConfigRules(nextCoreWebVitals),
+  ...fixupConfigRules(nextTypescript),
+  ...storybook.configs["flat/recommended"],
+  prettier,
   {
-    plugins: {
-      import: fixupPluginRules(_import),
-      "@typescript-eslint": fixupPluginRules(typescriptEslint),
-      react: fixupPluginRules(react),
-    },
-
     languageOptions: {
-      globals: {
-        JSX: "readonly",
-      },
-
-      parser: tsParser,
-      ecmaVersion: 2021,
-      sourceType: "module",
-
       parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
         project: ["./tsconfig.json"],
         tsconfigRootDir: __dirname,
       },
     },
-
-    settings: {
-      react: {
-        version: "detect",
-      },
-    },
-
     rules: {
       "@typescript-eslint/no-deprecated": "warn",
       "@next/next/no-html-link-for-pages": "off", // We don't have pages, it's a library

packages/diracx-web-components/package.json

@@ -50,8 +50,6 @@
     "@babel/preset-typescript": "^7.24.7",
     "@chromatic-com/storybook": "^3.2.4",
     "@eslint/compat": "^2.0.0",
-    "@eslint/eslintrc": "^3.1.0",
-    "@eslint/js": "^9.14.0",
     "@microsoft/api-extractor": "^7.43.7",
     "@storybook/addon-essentials": "^8.6.11",
     "@storybook/addon-interactions": "^8.6.11",
@@ -65,14 +63,11 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^30.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.39.1",
-    "@typescript-eslint/parser": "^8.39.1",
     "babel-jest": "^30.0.0",
     "babel-plugin-module-resolver": "^5.0.2",
-    "eslint": "^9.14.0",
+    "eslint": "^10.0.0",
+    "eslint-config-next": "^16.1.6",
     "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-storybook": "^0.12.0",
     "install": "^0.13.0",
     "jest": "^30.0.0",

packages/diracx-web-components/src/components/DashboardLayout/DrawerItemGroup.tsx

@@ -59,6 +59,17 @@ export default function DrawerItemGroup({
   // State to track whether the user is hovering over the item during a drag operation
   const [hovered, setHovered] = useState(false);
 
+  // Handles expansion of the accordion group
+  const handleChange =
+    (title: string) => (_: React.ChangeEvent<unknown>, isExpanded: boolean) => {
+      // Set the extended state of the accordion group.
+      setUserDashboard((groups) =>
+        groups.map((group) =>
+          group.title === title ? { ...group, extended: isExpanded } : group,
+        ),
+      );
+    };
+
   useEffect(() => {
     if (!dropRef.current) return;
     const dropItem = dropRef.current;
@@ -77,17 +88,6 @@ export default function DrawerItemGroup({
     });
   });
 
-  // Handles expansion of the accordion group
-  const handleChange =
-    (title: string) => (_: React.ChangeEvent<unknown>, isExpanded: boolean) => {
-      // Set the extended state of the accordion group.
-      setUserDashboard((groups) =>
-        groups.map((group) =>
-          group.title === title ? { ...group, extended: isExpanded } : group,
-        ),
-      );
-    };
-
   // Handle renaming of the group
   const handleGroupRename = () => {
     if (renameValue.trim() === "") return;

packages/diracx-web-components/src/components/DashboardLayout/ImportButton.tsx

@@ -11,7 +11,7 @@ import {
   TextField,
 } from "@mui/material";
 import InputIcon from "@mui/icons-material/Input";
-import React, { useState, useContext, useEffect } from "react";
+import React, { useState, useContext } from "react";
 import { ApplicationsContext } from "../../contexts";
 import {
   ApplicationMetadata,
@@ -37,25 +37,24 @@ function ImportDialog({ open, onClose, onImport }: ImportDialogProps) {
   const [stateText, setStateText] = useState("");
   const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
+  const handleClose = () => {
     setStateText("");
     setError(null);
-  }, [open]);
+    onClose();
+  };
 
   const handleImport = () => {
     try {
       const parsedState: ApplicationSettings[] = JSON.parse(stateText);
       onImport(parsedState);
-      onClose();
-      setStateText("");
-      setError(null);
+      handleClose();
     } catch {
       setError("Invalid JSON format");
     }
   };
 
   return (
-    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+    <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth>
       <DialogTitle data-testid="import-menu">
         Import Application State
       </DialogTitle>
@@ -74,7 +73,7 @@ function ImportDialog({ open, onClose, onImport }: ImportDialogProps) {
         />
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} data-testid="cancel-import-button">
+        <Button onClick={handleClose} data-testid="cancel-import-button">
           Cancel
         </Button>
         <Button

packages/diracx-web-components/src/components/JobMonitor/jobDataService.ts

@@ -249,16 +249,16 @@ export function useJobs(
   page: number,
   rowsPerPage: number,
 ) {
+  const urlError = !diracxUrl
+    ? new Error("Invalid URL generated for fetching jobs.")
+    : null;
   const [data, setData] = useState<Job[] | null>(null);
   const [headers, setHeaders] = useState<Headers>(new Headers());
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [error, setError] = useState<Error | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(!urlError);
+  const [error, setError] = useState<Error | null>(urlError);
 
   useEffect(() => {
     if (!diracxUrl) {
-      setData(null);
-      setIsLoading(false);
-      setError(new Error("Invalid URL generated for fetching jobs."));
       return;
     }
 
@@ -291,9 +291,11 @@ export function useJobs(
           setError(null);
         }
       } catch {
-        setData(null);
-        setIsLoading(false);
-        setError(new Error("Failed to fetch jobs"));
+        if (!cancelled) {
+          setData(null);
+          setIsLoading(false);
+          setError(new Error("Failed to fetch jobs"));
+        }
       }
     }
     fetchJobs();

packages/diracx-web-components/src/components/shared/SearchBar/SearchField.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import { useMemo, useRef } from "react";
 
 import { Autocomplete, TextField } from "@mui/material";
 
@@ -72,19 +72,17 @@ export default function SearchField({
     focusedTokenIndex,
     tokenEquations,
   );
-  const [placeholder, setPlaceholder] = useState<string>("");
-
-  useEffect(() => {
-    setPlaceholder(
+  const placeholder = useMemo(
+    () =>
       previousToken
         ? previousToken.nature === SearchBarTokenNature.OPERATOR
           ? "Enter a value"
           : previousToken.nature === SearchBarTokenNature.CATEGORY
             ? "Enter an operator"
             : "Enter a category"
         : "Enter a category",
-    );
-  }, [previousToken]);
+    [previousToken],
+  );
 
   /**
    * Create a new token based on the input value and type.

packages/diracx-web-components/src/components/shared/Sunburst/Sunburst.tsx

@@ -199,6 +199,7 @@ export function Sunburst({
     path
       .on(
         "mouseover",
+        // eslint-disable-next-line react-hooks/unsupported-syntax -- D3 requires `this` for element reference
         function (this: SVGPathElement, event: MouseEvent, p: SunburstNode) {
           mouseOn.call(this, event, p);
         },

packages/diracx-web-components/src/contexts/ThemeProvider.tsx

@@ -12,7 +12,7 @@ import {
   useMediaQuery,
 } from "@mui/material";
 import { cyan, grey, lightGreen } from "@mui/material/colors";
-import { createContext, useEffect, useMemo, useState } from "react";
+import { createContext, useMemo, useState } from "react";
 
 declare module "@mui/material/styles" {
   interface Palette {
@@ -57,19 +57,19 @@ export const ThemeContext = createContext<ThemeContextType | undefined>(
  * ThemeProvider component to provide the theme context to its children
  */
 export const ThemeProvider = ({ children }: ThemeProviderProps) => {
-  const [theme, setTheme] = useState<string>("light");
   const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-
-  useEffect(() => {
+  const [theme, setTheme] = useState<string>(() => {
+    if (typeof sessionStorage === "undefined") {
+      return prefersDarkMode ? "dark" : "light";
+    }
     const storedTheme = sessionStorage.getItem("theme");
     if (storedTheme) {
-      setTheme(storedTheme);
-    } else {
-      const defaultTheme = prefersDarkMode ? "dark" : "light";
-      setTheme(defaultTheme);
-      sessionStorage.setItem("theme", defaultTheme);
+      return storedTheme;
     }
-  }, [prefersDarkMode]);
+    const defaultTheme = prefersDarkMode ? "dark" : "light";
+    sessionStorage.setItem("theme", defaultTheme);
+    return defaultTheme;
+  });
 
   const toggleTheme = () => {
     setTheme((prevTheme) => {

packages/diracx-web-components/src/hooks/utils.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 /**
  * Fetcher function for useSWR
@@ -55,14 +55,15 @@ export async function fetcher<T>(
  * @returns the diracx installation URL
  */
 export function useDiracxUrl() {
-  const [diracxUrl, setDiracxUrl] = useState<string | null>(null);
-
-  useEffect(() => {
-    const backendUrl =
+  const [diracxUrl] = useState<string | null>(() => {
+    if (typeof window === "undefined") {
+      return process.env.NEXT_PUBLIC_DIRACX_URL || null;
+    }
+    return (
       process.env.NEXT_PUBLIC_DIRACX_URL ||
-      `${window.location.protocol}//${window.location.host}`;
-    setDiracxUrl(backendUrl);
-  }, []);
+      `${window.location.protocol}//${window.location.host}`
+    );
+  });
 
   return diracxUrl;
 }

packages/diracx-web/eslint.config.js

@@ -1,45 +1,21 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
-import _import from "eslint-plugin-import";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
-import tsPlugin from "@typescript-eslint/eslint-plugin";
-import tsParser from "@typescript-eslint/parser";
+import { fixupConfigRules } from "@eslint/compat";
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import nextTypescript from "eslint-config-next/typescript";
+import prettier from "eslint-config-prettier/flat";
 import eslintPluginUnusedImports from "eslint-plugin-unused-imports";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all,
-});
-
 // This config is only for typescript files
 export default [
-  ...fixupConfigRules(
-    compat.extends(
-      "next/core-web-vitals",
-      "prettier",
-      "plugin:import/recommended",
-      "plugin:import/typescript",
-    ),
-  ),
+  // Wrap next configs with fixupConfigRules for ESLint 10 compat
+  // (eslint-plugin-react still uses legacy context.getFilename API)
+  ...fixupConfigRules(nextCoreWebVitals),
+  ...fixupConfigRules(nextTypescript),
+  prettier,
   {
     plugins: {
-      import: fixupPluginRules(_import),
-      "@typescript-eslint": tsPlugin,
       "unused-imports": eslintPluginUnusedImports,
     },
 
-    languageOptions: {
-      parser: tsParser,
-      globals: {
-        JSX: "readonly",
-      },
-    },
-
     rules: {
       // Import rules
       "import/order": ["error"],