feat(style): make the code more consistent

packages/diracx-web-components/.eslintrc.json

@@ -17,7 +17,46 @@
     "import/no-useless-path-segments": ["error"],
     "import/no-unresolved": ["off"],
     "react/prop-types": "off",
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "react/destructuring-assignment": ["error", "always"],
+    "no-restricted-properties": [
+      "error",
+      {
+        "object": "React",
+        "property": "useCallback",
+        "message": "Please import 'useCallback' directly from 'react' instead of 'React.useCallback'."
+      },
+      {
+        "object": "React",
+        "property": "useContext",
+        "message": "Please import 'useContext' directly from 'react' instead of 'React.useContext'."
+      },
+      {
+        "object": "React",
+        "property": "useEffect",
+        "message": "Please import 'useEffect' directly from 'react' instead of 'React.useEffect'."
+      },
+      {
+        "object": "React",
+        "property": "useMemo",
+        "message": "Please import 'useMemo' directly from 'react' instead of 'React.useMemo'."
+      },
+      {
+        "object": "React",
+        "property": "useReducer",
+        "message": "Please import 'useReducer' directly from 'react' instead of 'React.useReducer'."
+      },
+      {
+        "object": "React",
+        "property": "useRef",
+        "message": "Please import 'useRef' directly from 'react' instead of 'React.useRef'."
+      },
+      {
+        "object": "React",
+        "property": "useState",
+        "message": "Please import 'useState' directly from 'react' instead of 'React.useState'."
+      }
+    ]
   },
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState, useContext } from "react";
 import {
   Dialog,
   DialogTitle,
@@ -12,6 +12,15 @@ import {
 import { Close, SvgIconComponent } from "@mui/icons-material";
 import { ApplicationsContext } from "@/contexts/ApplicationsProvider";
 
+interface AppDialogProps {
+  /** Determines whether the dialog is open or not. */
+  appDialogOpen: boolean;
+  /** Function to set the open state of the dialog. */
+  setAppDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  /** Function to handle the creation of a new application. */
+  handleCreateApp: (name: string, icon: SvgIconComponent) => void;
+}
+
 /**
  * Renders a dialog component for creating a new application.
  *
@@ -22,16 +31,9 @@ export default function AppDialog({
   appDialogOpen,
   setAppDialogOpen,
   handleCreateApp,
-}: {
-  /** Determines whether the dialog is open or not. */
-  appDialogOpen: boolean;
-  /** Function to set the open state of the dialog. */
-  setAppDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  /** Function to handle the creation of a new application. */
-  handleCreateApp: (name: string, icon: SvgIconComponent) => void;
-}) {
-  const [appType, setAppType] = React.useState("");
-  const applicationList = React.useContext(ApplicationsContext)[2];
+}: AppDialogProps) {
+  const [appType, setAppType] = useState("");
+  const applicationList = useContext(ApplicationsContext)[2];
   return (
     <Dialog
       open={appDialogOpen}

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Dashboard as DashboardIcon } from "@mui/icons-material";
@@ -23,9 +23,7 @@ const meta = {
   },
   decorators: [
     (Story) => {
-      const [userDashboard, setUserDashboard] = React.useState<
-        DashboardGroup[]
-      >([
+      const [userDashboard, setUserDashboard] = useState<DashboardGroup[]>([
         {
           title: "Group Title",
           extended: true,

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

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import { useState } from "react";
 import AppBar from "@mui/material/AppBar";
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
@@ -28,9 +28,11 @@ interface DashboardProps {
  * @param props - children, drawerWidth, logoURL
  * @return an dashboard layout
  */
-export default function Dashboard(props: DashboardProps) {
-  const { children, drawerWidth = 240, logoURL } = props;
-
+export default function Dashboard({
+  children,
+  drawerWidth = 240,
+  logoURL,
+}: DashboardProps) {
   const appTitle = useApplicationTitle();
   const appType = useApplicationType();
 
@@ -39,7 +41,7 @@ export default function Dashboard(props: DashboardProps) {
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   /** State management for mobile drawer */
-  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen);
   };

packages/diracx-web-components/components/DashboardLayout/DashboardDrawer.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Box } from "@mui/material";
@@ -19,9 +19,7 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => {
-      const [userDashboard, setUserDashboard] = React.useState<
-        DashboardGroup[]
-      >([
+      const [userDashboard, setUserDashboard] = useState<DashboardGroup[]>([
         {
           title: "Group Title",
           extended: true,

packages/diracx-web-components/components/DashboardLayout/DashboardDrawer.tsx

@@ -15,12 +15,7 @@ import {
   useTheme,
 } from "@mui/material";
 import { MenuBook, Add, SvgIconComponent } from "@mui/icons-material";
-import React, {
-  ReactEventHandler,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import DrawerItemGroup from "./DrawerItemGroup";
@@ -36,7 +31,7 @@ interface DashboardDrawerProps {
   /** The width of the drawer. */
   width: number;
   /** The function to handle the drawer toggle. */
-  handleDrawerToggle: ReactEventHandler;
+  handleDrawerToggle: React.ReactEventHandler;
   /** The URL for the logo image. */
   logoURL?: string;
 }
@@ -48,16 +43,22 @@ interface DashboardDrawerProps {
  * @param {DashboardDrawerProps} props - The props for the DashboardDrawer component.
  * @returns {JSX.Element} The rendered DashboardDrawer component.
  */
-export default function DashboardDrawer(props: DashboardDrawerProps) {
+export default function DashboardDrawer({
+  variant,
+  mobileOpen,
+  width,
+  handleDrawerToggle,
+  logoURL = "/DIRAC-logo.png",
+}: DashboardDrawerProps) {
   // Determine the container for the Drawer based on whether the window object exists.
   const container =
     window !== undefined ? () => window.document.body : undefined;
   // Check if the drawer is in "temporary" mode.
-  const isTemporary = props.variant === "temporary";
+  const isTemporary = variant === "temporary";
   // Whether the modal for Application Creation is open
   const [appDialogOpen, setAppDialogOpen] = useState(false);
 
-  const [contextMenu, setContextMenu] = React.useState<{
+  const [contextMenu, setContextMenu] = useState<{
     mouseX: number;
     mouseY: number;
   } | null>(null);
@@ -67,19 +68,15 @@ export default function DashboardDrawer(props: DashboardDrawerProps) {
     id: string | null;
   }>({ type: null, id: null });
 
-  const [popAnchorEl, setPopAnchorEl] = React.useState<HTMLElement | null>(
-    null,
-  );
+  const [popAnchorEl, setPopAnchorEl] = useState<HTMLElement | null>(null);
   const [renamingItemId, setRenamingItemId] = useState<string | null>(null);
   const [renamingGroupId, setRenamingGroupId] = useState<string | null>(null);
-  const [renameValue, setRenameValue] = React.useState("");
+  const [renameValue, setRenameValue] = useState("");
 
   // Define the applications that are accessible to users.
   // Each application has an associated icon and path.
   const [userDashboard, setUserDashboard] = useContext(ApplicationsContext);
 
-  const logoURL = props.logoURL || "/DIRAC-logo.png";
-
   const theme = useTheme();
 
   useEffect(() => {
@@ -360,20 +357,20 @@ export default function DashboardDrawer(props: DashboardDrawerProps) {
     <>
       <Drawer
         container={isTemporary ? container : undefined}
-        variant={props.variant}
-        open={isTemporary ? props.mobileOpen : true}
-        onClose={props.handleDrawerToggle}
+        variant={variant}
+        open={isTemporary ? mobileOpen : true}
+        onClose={handleDrawerToggle}
         sx={{
           display: {
             xs: isTemporary ? "block" : "none",
             sm: isTemporary ? "none" : "block",
           },
           "& .MuiDrawer-paper": {
             boxSizing: "border-box",
-            width: props.width,
+            width: width,
           },
         }}
-        data-testid={`drawer-${props.variant}`}
+        data-testid={`drawer-${variant}`}
         onContextMenu={handleContextMenu()}
       >
         <div

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import {
   ListItemButton,
@@ -26,21 +26,7 @@ import { useSearchParamsUtils } from "@/hooks/searchParamsUtils";
 import { useApplicationId } from "@/hooks/application";
 import { DashboardGroup } from "@/types";
 
-/**
- * Represents a drawer item component.
- *
- * @returns The rendered JSX for the drawer item.
- */
-export default function DrawerItem({
-  item: { title, id, icon },
-  index,
-  groupTitle,
-  renamingItemId,
-  setRenamingItemId,
-  renameValue,
-  setRenameValue,
-  setUserDashboard,
-}: {
+interface DrawerItemProps {
   /** The item object containing the title, id, and icon. */
   item: { title: string; id: string; icon: React.ComponentType };
   /** The index of the item. */
@@ -57,11 +43,27 @@ export default function DrawerItem({
   setRenameValue: React.Dispatch<React.SetStateAction<string>>;
   /** The function to set the user dashboard state. */
   setUserDashboard: React.Dispatch<React.SetStateAction<DashboardGroup[]>>;
-}) {
+}
+
+/**
+ * Represents a drawer item component.
+ *
+ * @returns The rendered JSX for the drawer item.
+ */
+export default function DrawerItem({
+  item: { title, id, icon },
+  index,
+  groupTitle,
+  renamingItemId,
+  setRenamingItemId,
+  renameValue,
+  setRenameValue,
+  setUserDashboard,
+}: DrawerItemProps) {
   // Ref to use for the draggable element
-  const dragRef = React.useRef(null);
+  const dragRef = useRef(null);
   // Ref to use for the handle of the draggable element, must be a child of the draggable element
-  const handleRef = React.useRef(null);
+  const handleRef = useRef(null);
   const theme = useTheme();
   const { setParam } = useSearchParamsUtils();
   // Represents the closest edge to the mouse cursor

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

@@ -6,29 +6,12 @@ import {
   TextField,
 } from "@mui/material";
 import { ExpandMore, Apps } from "@mui/icons-material";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import DrawerItem from "./DrawerItem";
 import { DashboardGroup } from "@/types/DashboardGroup";
 
-/**
- * Represents a group of items in a drawer.
- *
- * @component
- * @param {Object} props - The component props.
- * @returns {JSX.Element} The rendered DrawerItemGroup component.
- */
-export default function DrawerItemGroup({
-  group: { title, extended: expanded, items },
-  setUserDashboard,
-  handleContextMenu,
-  renamingGroupId,
-  setRenamingGroupId,
-  renamingItemId,
-  setRenamingItemId,
-  renameValue,
-  setRenameValue,
-}: {
+interface DrawerItemGroupProps {
   /** The group object containing the title, expanded state, and items. */
   group: DashboardGroup;
   /** The function to set the user dashboard state. */
@@ -50,11 +33,30 @@ export default function DrawerItemGroup({
   renameValue: string;
   /** The function to set the rename input value. */
   setRenameValue: React.Dispatch<React.SetStateAction<string>>;
-}) {
+}
+
+/**
+ * Represents a group of items in a drawer.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @returns {JSX.Element} The rendered DrawerItemGroup component.
+ */
+export default function DrawerItemGroup({
+  group: { title, extended: expanded, items },
+  setUserDashboard,
+  handleContextMenu,
+  renamingGroupId,
+  setRenamingGroupId,
+  renamingItemId,
+  setRenamingItemId,
+  renameValue,
+  setRenameValue,
+}: DrawerItemGroupProps) {
   // Ref to use for the drag and drop target
-  const dropRef = React.useRef(null);
+  const dropRef = useRef(null);
   // State to track whether the user is hovering over the item during a drag operation
-  const [hovered, setHovered] = React.useState(false);
+  const [hovered, setHovered] = useState(false);
 
   useEffect(() => {
     if (!dropRef.current) return;

packages/diracx-web-components/components/DashboardLayout/ProfileButton.tsx

@@ -27,7 +27,7 @@ import {
   Typography,
   useTheme,
 } from "@mui/material";
-import React from "react";
+import React, { useState } from "react";
 import { useOIDCContext } from "@/hooks/oidcConfiguration";
 
 /**
@@ -41,7 +41,7 @@ export function ProfileButton() {
   const { accessTokenPayload } = useOidcAccessToken(configuration?.scope);
   const { logout, isAuthenticated } = useOidc(configuration?.scope);
 
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {