feat: DataTable performances/clarity improvements and beyond

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

@@ -79,6 +79,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/jest.setup.ts

@@ -20,4 +20,21 @@ if (typeof globalThis.PointerEvent === "undefined") {
   };
 }
 
+// Mock layout measurements for @tanstack/react-virtual (jsdom has no layout engine).
+// Only override offsetHeight/offsetWidth — these are the properties the virtualizer
+// uses to determine container size. We do NOT override getBoundingClientRect globally
+// because MUI Popover relies on the native implementation.
+Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+  configurable: true,
+  get() {
+    return 600;
+  },
+});
+Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+  configurable: true,
+  get() {
+    return 800;
+  },
+});
+
 jest.mock("@axa-fr/react-oidc");

packages/diracx-web-components/package.json

@@ -32,13 +32,13 @@
     "@mui/x-charts": "^8.0.0",
     "@mui/x-date-pickers": "^8.0.0",
     "@tanstack/react-table": "^8.20.5",
+    "@tanstack/react-virtual": "^3.13.23",
     "@types/node": "^24.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "dayjs": "^1.11.13",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-virtuoso": "^4.12.3",
     "swr": "^2.2.5"
   },
   "devDependencies": {
@@ -99,6 +99,10 @@
     "./types": {
       "import": "./dist/types/index.js",
       "types": "./dist/types/index.d.ts"
+    },
+    "./services": {
+      "import": "./dist/services/index.js",
+      "types": "./dist/services/index.d.ts"
     }
   },
   "files": [

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

@@ -11,8 +11,8 @@ import {
   Icon,
   IconButton,
 } from "@mui/material";
-import { Close } from "@mui/icons-material";
-import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
+import Close from "@mui/icons-material/Close";
+import { AppListContext } from "../../contexts/ApplicationsProvider";
 
 interface AppDialogProps {
   /** Determines whether the dialog is open or not. */
@@ -34,7 +34,7 @@ export default function AppDialog({
   setAppDialogOpen,
   handleCreateApp,
 }: AppDialogProps) {
-  const applicationList = use(ApplicationsContext)[2];
+  const { appList: applicationList } = use(AppListContext);
   return (
     <Dialog
       open={appDialogOpen}

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

@@ -4,14 +4,11 @@ import { useState } from "react";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
-import { Menu } from "@mui/icons-material";
+import Menu from "@mui/icons-material/Menu";
 import Toolbar from "@mui/material/Toolbar";
 import Stack from "@mui/material/Stack";
 import { Typography, useMediaQuery, useTheme } from "@mui/material";
-import {
-  useApplicationTitle,
-  useApplicationType,
-} from "../../hooks/application";
+import { useCurrentApplication } from "../../hooks/application";
 import { ProfileButton } from "./ProfileButton";
 import { ThemeToggleButton } from "./ThemeToggleButton";
 import DashboardDrawer from "./DashboardDrawer";
@@ -42,8 +39,9 @@ export default function Dashboard({
   logoURL,
   documentationURL,
 }: DashboardProps) {
-  const appTitle = useApplicationTitle();
-  const appType = useApplicationType();
+  const currentApp = useCurrentApplication();
+  const appTitle = currentApp?.title ?? null;
+  const appType = currentApp?.type ?? null;
 
   /** Theme and media query */
   const theme = useTheme();
@@ -92,7 +90,6 @@ export default function Dashboard({
             }}
           >
             <Typography
-              color="text.primary"
               variant={isMobile ? "h6" : "h4"}
               fontWeight={"bold"}
               width={"fit-content"}
@@ -101,6 +98,9 @@ export default function Dashboard({
                 whiteSpace: "nowrap",
                 textOverflow: "ellipsis",
                 paddingLeft: 2,
+                background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent",
               }}
             >
               {appTitle}
@@ -154,7 +154,8 @@ export default function Dashboard({
           flexGrow: 1,
           display: "flex",
           flexDirection: "column",
-          width: { sm: `${drawerWidth}px` },
+          width: { sm: `calc(100% - ${drawerWidth}px)` },
+          minWidth: 0,
         }}
       >
         <Toolbar />