refactor: theme typing, error UX, a11y, lint config, dev hygiene

Quality and hygiene follow-ups across the workspace:

- ThemeProvider: introduce a ThemeMode union with a type-guarded
  sessionStorage read, keep render pure (storage is only written on an
  explicit user toggle), memoize toggleTheme, and derive outlined-input
  border/label colors for both palette modes; Dashboard tests updated
  for the new persistence semantics
- eslint flat configs (components, app, extensions) tightened, notably
  enabling eslint-plugin-jsx-a11y; the intentional autoFocus in the
  drawer rename fields gains documented disable directives
- README refreshed
- lockfile synchronised with the final dependency set

Author: aldbr

README.md

@@ -19,7 +19,7 @@
 - **Developing a DiracX-Web extension?** Go straight to the [:page_facing_up: Extension README](https://diracx.diracgrid.org/en/latest/developer/manage_extension/)
 - **Managing the repository?** Discover tips and tricks in the [:book: Ops Guide](https://diracx.diracgrid.org/en/latest/dev/setup_environment/)
 
-- **Interested in contributing?** Read the [:star: Contributing Document](CONTRIBUTING.md)
+- **Interested in contributing?** Read the [:star: Contributing Document](docs/dev/how-to/contribute-to-web.md)
 
 
 

package-lock.json

@@ -5,6 +5,7 @@ import _import from "eslint-plugin-import";
 import typescriptEslint from "@typescript-eslint/eslint-plugin";
 import react from "eslint-plugin-react";
 import reactHooks from "eslint-plugin-react-hooks";
+import jsxA11y from "eslint-plugin-jsx-a11y";
 import tsParser from "@typescript-eslint/parser";
 import js from "@eslint/js";
 import { FlatCompat } from "@eslint/eslintrc";
@@ -30,6 +31,7 @@ export default [
       "prettier",
     ),
   ),
+  jsxA11y.flatConfigs.recommended,
   {
     plugins: {
       import: fixupPluginRules(_import),
@@ -79,6 +81,19 @@ export default [
           ignoreRestSiblings: true,
         },
       ],
+      "@typescript-eslint/no-restricted-imports": [
+        "error",
+        {
+          paths: [
+            {
+              name: "@mui/icons-material",
+              message:
+                "Import icons individually: import Icon from '@mui/icons-material/Icon'",
+              allowTypeImports: true,
+            },
+          ],
+        },
+      ],
       "no-restricted-properties": [
         "error",
         {

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

@@ -224,6 +224,7 @@ export default function DrawerItem({
             // The rename field only appears in direct response to a user
             // action (context-menu "Rename"), so moving focus into it is
             // the expected behavior, not a focus steal.
+            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             size="small"
           />

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

@@ -143,6 +143,7 @@ export default function DrawerItemGroup({
             // The rename field only appears in direct response to a user
             // action (context-menu "Rename"), so moving focus into it is
             // the expected behavior, not a focus steal.
+            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             size="small"
           />

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

@@ -3,17 +3,18 @@
 import React, { useState, useEffect, use } from "react";
 
 import {
+  Alert,
   Box,
   Typography,
   FormControl,
   InputLabel,
   Select,
   MenuItem,
   Button,
-  Stack,
   Autocomplete,
   TextField,
   SelectChangeEvent,
+  Skeleton,
 } from "@mui/material";
 
 import { useOidc } from "@axa-fr/react-oidc";
@@ -115,10 +116,42 @@ export function LoginForm({
   };
 
   if (isLoading) {
-    return <div>Loading...</div>;
+    return (
+      <Box
+        sx={{
+          ml: { xs: "5%", md: "30%" },
+          mr: { xs: "5%", md: "30%" },
+          pt: "10%",
+        }}
+      >
+        <Box sx={{ display: "flex", justifyContent: "center", pb: "10%" }}>
+          <Skeleton
+            variant="circular"
+            animation="pulse"
+            width={150}
+            height={150}
+          />
+        </Box>
+        <Skeleton
+          variant="rectangular"
+          animation="pulse"
+          height={56}
+          sx={{ mb: 4 }}
+        />
+        <Skeleton
+          variant="rectangular"
+          animation="pulse"
+          height={56}
+          sx={{ mb: 4 }}
+        />
+        <Skeleton variant="rectangular" animation="pulse" height={42} />
+      </Box>
+    );
   }
   if (error) {
-    return <div>An error occurred while fetching metadata.</div>;
+    return (
+      <Alert severity="error">An error occurred while fetching metadata.</Alert>
+    );
   }
   if (!metadata) {
     return <div>No metadata found.</div>;
@@ -207,25 +240,14 @@ export function LoginForm({
                 ))}
               </Select>
             </FormControl>
-            <Stack
-              direction={{ xs: "column", sm: "row" }}
-              spacing={2}
+            <Button
+              variant="contained"
               sx={{ mt: 5, width: "100%" }}
+              onClick={handleConfigurationChanges}
+              data-testid="login-form-button"
             >
-              <Button
-                variant="contained"
-                sx={{
-                  flexGrow: 1,
-                }}
-                onClick={handleConfigurationChanges}
-                data-testid="login-form-button"
-              >
-                Login via your Identity Provider
-              </Button>
-              <Button variant="outlined" onClick={() => {}}>
-                Advanced Options
-              </Button>
-            </Stack>
+              Login via your Identity Provider
+            </Button>
             <Typography
               sx={{ paddingTop: "5%", color: "gray", textAlign: "center" }}
             >

packages/diracx-web-components/src/components/Login/LoginForm.tsx

@@ -8,11 +8,10 @@ import {
   lighten,
   darken,
   alpha,
-  PaletteMode,
   useMediaQuery,
 } from "@mui/material";
 import { cyan, grey, lightGreen } from "@mui/material/colors";
-import { createContext, useMemo, useState } from "react";
+import { createContext, useCallback, useMemo, useState } from "react";
 
 declare module "@mui/material/styles" {
   interface Palette {
@@ -29,13 +28,21 @@ declare module "@mui/material/styles" {
   }
 }
 
+/** The two supported theme modes */
+export type ThemeMode = "light" | "dark";
+
+/** Type guard narrowing an arbitrary stored string to a valid theme mode */
+function isThemeMode(value: string | null): value is ThemeMode {
+  return value === "light" || value === "dark";
+}
+
 /**
  * Theme context type
  * @property theme - the current theme mode
  * @property toggleTheme - function to toggle the theme mode
  */
 type ThemeContextType = {
-  theme: string;
+  theme: ThemeMode;
   toggleTheme: () => void;
 };
 
@@ -58,49 +65,45 @@ export const ThemeContext = createContext<ThemeContextType | undefined>(
  */
 export const ThemeProvider = ({ children }: ThemeProviderProps) => {
   const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const [theme, setTheme] = useState<string | null>(null);
+  const [theme, setTheme] = useState<ThemeMode | null>(null);
   const [prevPrefersDark, setPrevPrefersDark] = useState(prefersDarkMode);
 
-  // Initialize theme from sessionStorage or system preference
+  // Initialize theme from sessionStorage or system preference.
+  // Render is kept pure: storage is only written from the toggle handler,
+  // where it records an explicit user choice.
   if (theme === null) {
     const storedTheme =
       typeof sessionStorage !== "undefined"
         ? sessionStorage.getItem("theme")
         : null;
-    if (storedTheme) {
-      setTheme(storedTheme);
-    } else {
-      const defaultTheme = prefersDarkMode ? "dark" : "light";
-      setTheme(defaultTheme);
-      if (typeof sessionStorage !== "undefined") {
-        sessionStorage.setItem("theme", defaultTheme);
-      }
-    }
+    setTheme(
+      isThemeMode(storedTheme)
+        ? storedTheme
+        : prefersDarkMode
+          ? "dark"
+          : "light",
+    );
   }
 
-  // Update theme when system preference changes
+  // Follow system preference changes unless the user made an explicit choice
   if (prevPrefersDark !== prefersDarkMode) {
     setPrevPrefersDark(prefersDarkMode);
     const storedTheme =
       typeof sessionStorage !== "undefined"
         ? sessionStorage.getItem("theme")
         : null;
-    if (!storedTheme) {
-      const defaultTheme = prefersDarkMode ? "dark" : "light";
-      setTheme(defaultTheme);
-      if (typeof sessionStorage !== "undefined") {
-        sessionStorage.setItem("theme", defaultTheme);
-      }
+    if (!isThemeMode(storedTheme)) {
+      setTheme(prefersDarkMode ? "dark" : "light");
     }
   }
 
-  const toggleTheme = () => {
+  const toggleTheme = useCallback(() => {
     setTheme((prevTheme) => {
-      const newTheme = prevTheme === "light" ? "dark" : "light";
+      const newTheme: ThemeMode = prevTheme === "light" ? "dark" : "light";
       sessionStorage.setItem("theme", newTheme);
       return newTheme;
     });
-  };
+  }, []);
 
   const muiTheme = useMemo(() => {
     if (theme === null) return createTheme();
@@ -130,10 +133,20 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
         ? lighten(tableRowFirstColor, 0.2)
         : darken(tableRowSecondColor, 0.8);
 
+    // Outlined-input border/label colors for the current palette mode.
+    // Light mode keeps the historical grey[200] derivatives; dark mode
+    // mirrors them from grey[800] so borders stay subtle on dark surfaces.
+    const inputBorder = theme === "light" ? grey[200] : grey[800];
+    const inputBorderHover =
+      theme === "light" ? darken(grey[200], 0.2) : lighten(grey[800], 0.2);
+    const inputBorderFocused =
+      theme === "light" ? darken(grey[200], 0.4) : lighten(grey[800], 0.4);
+    const inputTextFocused = theme === "light" ? "black" : "white";
+
     // Create a Material-UI theme based on the current mode
     const muiTheme = createTheme({
       palette: {
-        mode: theme as PaletteMode,
+        mode: theme,
         primary: {
           main: primary,
         },
@@ -243,7 +256,7 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
         styleOverrides: {
           root: {
             "&.Mui-focused": {
-              color: darken(grey[200], 0.4),
+              color: inputBorderFocused,
             },
           },
         },
@@ -252,14 +265,14 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
         styleOverrides: {
           root: {
             "& .MuiOutlinedInput-notchedOutline": {
-              borderColor: grey[200],
+              borderColor: inputBorder,
             },
             "&:hover .MuiOutlinedInput-notchedOutline": {
-              borderColor: darken(grey[200], 0.2),
+              borderColor: inputBorderHover,
             },
             "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-              borderColor: darken(grey[200], 0.4),
-              color: "black",
+              borderColor: inputBorderFocused,
+              color: inputTextFocused,
             },
           },
         },
@@ -363,17 +376,20 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
         defaultProps: { size: "small" },
         styleOverrides: {
           root: {
-            "& .MuiTableRow-root:nth-of-type(odd)": {
+            // Use data-attribute selectors instead of nth-of-type so that
+            // virtualized tables (where DOM order ≠ data order) get stable
+            // alternating row colors.
+            "& .MuiTableRow-root[data-row-parity='odd'] td": {
               backgroundColor: muiTheme.palette.tableRow.odd,
-              "&:hover": {
-                backgroundColor: darken(muiTheme.palette.tableRow.odd, 0.1),
-              },
             },
-            "& .MuiTableRow-root:nth-of-type(even)": {
+            "& .MuiTableRow-root[data-row-parity='odd']:hover td": {
+              backgroundColor: darken(muiTheme.palette.tableRow.odd, 0.1),
+            },
+            "& .MuiTableRow-root[data-row-parity='even'] td": {
               backgroundColor: muiTheme.palette.tableRow.even,
-              "&:hover": {
-                backgroundColor: darken(muiTheme.palette.tableRow.even, 0.1),
-              },
+            },
+            "& .MuiTableRow-root[data-row-parity='even']:hover td": {
+              backgroundColor: darken(muiTheme.palette.tableRow.even, 0.1),
             },
           },
         },
@@ -383,12 +399,17 @@ export const ThemeProvider = ({ children }: ThemeProviderProps) => {
     return muiTheme;
   }, [theme]);
 
-  if (theme === null) {
+  const themeContextValue = useMemo<ThemeContextType | null>(
+    () => (theme === null ? null : { theme, toggleTheme }),
+    [theme, toggleTheme],
+  );
+
+  if (themeContextValue === null) {
     return <div>Loading Theme...</div>;
   }
 
   return (
-    <ThemeContext value={{ theme: theme, toggleTheme }}>
+    <ThemeContext value={themeContextValue}>
       <MUIThemeProvider theme={muiTheme}>
         <CssBaseline />
         {children}