feat: add a few comments

package.json

@@ -14,14 +14,13 @@
     "@axa-fr/react-oidc": "^7.3.3",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.14.1",
-    "@mui/material": "^5.14.1",
-    "@mui/x-data-grid": "^6.11.0",
+    "@mui/icons-material": "^5.14.6",
+    "@mui/material": "^5.14.6",
+    "@mui/x-data-grid": "^6.11.2",
     "@types/node": "20.3.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "autoprefixer": "10.4.14",
-    "eslint-config-next": "13.4.7",
     "next": "13.4.7",
     "postcss": "8.4.24",
     "react": "18.2.0",
@@ -31,6 +30,7 @@
   },
   "devDependencies": {
     "eslint": "^8.47.0",
+    "eslint-config-next": "13.4.7",
     "eslint-config-prettier": "^9.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",

src/app/components/DashboardAppBar.tsx

@@ -21,20 +21,30 @@ import { DiracLogo } from "./DiracLogo";
 import { Dashboard, FolderCopy } from "@mui/icons-material";
 import { LoginButton } from "./LoginButton";
 
+// Sections accessible to the users
 const userSections = {
   Dashboard: { icon: Dashboard, path: "/dashboard" },
   "Job Monitor": { icon: MonitorIcon, path: "/dashboard/jobmonitor" },
   "File Catalog": { icon: FolderCopy, path: "/dashboard/filecatalog" },
 };
 
+/**
+ * Build a side bar on the left containing the available sections as well as a top bar.
+ * The side bar is expected to collapse if displayed on a small screen
+ *
+ * @param props - children
+ * @return an dashboard layout
+ */
 export default function DashboardAppBar(props: Props) {
   const { window } = props;
 
+  /** State management for mobile drawer */
   const [mobileOpen, setMobileOpen] = React.useState(false);
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen);
   };
 
+  /** State management for selected section in the drawer */
   const [selectedIndex, setSelectedIndex] = React.useState(true);
   const handleListItemClick = (
     event: React.MouseEvent<HTMLDivElement, MouseEvent>,
@@ -43,8 +53,10 @@ export default function DashboardAppBar(props: Props) {
     setSelectedIndex(index);
   };
 
+  /** Drawer width */
   const drawerWidth = 240;
 
+  /** Drawer component: a logo, a list of sections and a link to the documentation */
   const drawer = (
     <div>
       <Toolbar>
@@ -56,7 +68,7 @@ export default function DashboardAppBar(props: Props) {
             <ListItemButton
               component={NextLink}
               href={userSections[title]["path"]}
-              selected={selectedIndex == index}
+              selected={selectedIndex === index}
               onClick={(event) => handleListItemClick(event, index)}
             >
               <ListItemIcon>
@@ -87,6 +99,7 @@ export default function DashboardAppBar(props: Props) {
   const container =
     window !== undefined ? () => window().document.body : undefined;
 
+  /** Return an App bar embedding the drawer */
   return (
     <Box sx={{ display: "flex" }}>
       <CssBaseline />

src/app/components/DiracLogo.tsx

@@ -1,6 +1,10 @@
 import NextLink from "next/link";
 import Image from "next/image";
 
+/**
+ * Logo of the DIRAC interware redirecting to the root page
+ * @returns a NextLink embedding an Image
+ */
 export function DiracLogo() {
   return (
     <>

src/app/components/JobDataGrid.tsx

@@ -1,18 +1,23 @@
-'use client'
-import { DataGrid } from '@mui/x-data-grid';
+"use client";
+import { DataGrid } from "@mui/x-data-grid";
 
+/**
+ * Table of jobs
+ * @param props  - rows and columns to display
+ * @returns a DataGrid displaying details about jobs
+ */
 export function JobDataGrid(props) {
   return (
     <DataGrid
       rows={props.rows}
       columns={props.columns}
-        initialState={{
-          pagination: {
-            paginationModel: { page: 0, pageSize: 5 },
-          },
-        }}
-        pageSizeOptions={[5, 10, 50, 100, 500, 1000]}
-        checkboxSelection
+      initialState={{
+        pagination: {
+          paginationModel: { page: 0, pageSize: 5 },
+        },
+      }}
+      pageSizeOptions={[5, 10, 50, 100, 500, 1000]}
+      checkboxSelection
     />
   );
-};
+}

src/app/components/LoginButton.tsx

@@ -3,6 +3,10 @@ import { Avatar, Button } from "@mui/material";
 import { deepOrange } from "@mui/material/colors";
 import NextLink from "next/link";
 
+/**
+ * Login/Logout button, expected to vary whether the user is connected
+ * @returns a Button
+ */
 export function LoginButton() {
   const { accessToken, accessTokenPayload } = useOidcAccessToken();
 

src/app/components/OIDCUtils.tsx

@@ -1,32 +1,24 @@
 "use client";
-import { useRouter } from "next/navigation";
-import {
-  OidcProvider,
-  OidcSecure,
-  useOidcAccessToken,
-} from "@axa-fr/react-oidc";
-
+import { OidcProvider, OidcSecure } from "@axa-fr/react-oidc";
+
+/**
+ * Wrapper around the react-oidc OidcProvider component
+ * Needed because OidcProvider cannot be directly called from a server file
+ * @param props - configuration of the OIDC provider
+ * @returns the wrapper around OidcProvider
+ */
 export function OIDCProvider(props: Props) {
   const onEvent = (configurationName: string, eventName: string, data: any) => {
     console.log(`oidc:${configurationName}:${eventName}`, data);
   };
 
-  // const withCustomHistory = () => {
-
-  //  const router = useRouter();
-
-  //  return {
-  //    replaceState: (url: string) => {
-  //      router.replace({
-  //        pathname: url,
-  //      }).then(() => {
-  //        window.dispatchEvent(new Event('popstate'));
-  //      });
-  //    },
-  //  };
-  // };
   const withCustomHistory = () => {
-    return { replaceState: (url: string) => (window.location.href = url) };
+    return {
+      replaceState: (url: string) => {
+        // Cannot use router.replace() because the code is not adapted to NextJS 13 yet
+        window.location.href = url;
+      },
+    };
   };
 
   return (
@@ -42,40 +34,16 @@ export function OIDCProvider(props: Props) {
   );
 }
 
+/**
+ * Wrapper around the react-oidc OidcSecure component
+ * Needed because OidcProvider cannot be directly called from a server file
+ * @param props - configuration of the OIDC provider
+ * @returns the wrapper around OidcProvider
+ */
 export function OIDCSecure({ children }) {
   return (
     <>
       <OidcSecure>{children}</OidcSecure>
     </>
   );
 }
-
-export function OIDCAccessToken() {
-  const { accessToken, accessTokenPayload } = useOidcAccessToken();
-
-  if (!accessToken) {
-    return <p>You are not authenticated</p>;
-  }
-
-  return (
-    <div className="card text-white bg-info mb-3">
-      <div className="card-body">
-        <h5 className="card-title">Access Token</h5>
-        <p className="card-text">Access Token: {JSON.stringify(accessToken)}</p>
-        {accessTokenPayload != null && (
-          <p className="card-text">
-            Access Token Payload: {JSON.stringify(accessTokenPayload)}
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function OIDCProfile() {
-  return (
-    <div className="container mt-3">
-      <OIDCAccessToken />
-    </div>
-  );
-}

src/app/components/ShowcaseAppBar.tsx

@@ -11,6 +11,11 @@ import { DiracLogo } from "./DiracLogo";
 import { LoginButton } from "./LoginButton";
 import { Stack } from "@mui/material";
 
+/**
+ * Controls the response due to a scrolling
+ * @param props - children
+ * @returns an elevation of the children component
+ */
 function ElevationScroll(props: Props) {
   const { children } = props;
 
@@ -24,6 +29,11 @@ function ElevationScroll(props: Props) {
   });
 }
 
+/**
+ * Build the showcase content with an AppBar
+ * @param props - children
+ * @returns showcase content
+ */
 export default function ShowcaseAppBar(props: Props) {
   const Item = styled(Paper)(({ theme }) => ({
     backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",