feat: clean the URL and save the dashboard in the sessionStorage

Author: TheauW

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

@@ -10,7 +10,7 @@ import {
   useTheme,
   TextField,
 } from "@mui/material";
-import { DragIndicator } from "@mui/icons-material";
+import { DragIndicator, Apps } from "@mui/icons-material";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import {
   draggable,
@@ -28,8 +28,8 @@ import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
 import { DashboardGroup } from "../../types";
 
 interface DrawerItemProps {
-  /** The item object containing the title, id, and icon. */
-  item: { title: string; id: string; icon: React.ComponentType };
+  /** The item object containing the title, id, and the appType. */
+  item: { title: string; id: string; type: string };
   /** The index of the item. */
   index: number;
   /** The title of the group. */
@@ -52,7 +52,7 @@ interface DrawerItemProps {
  * @returns The rendered JSX for the drawer item.
  */
 export default function DrawerItem({
-  item: { title, id, icon },
+  item: { title, id, type },
   index,
   groupTitle,
   renamingItemId,
@@ -69,7 +69,10 @@ export default function DrawerItem({
   // Represents the closest edge to the mouse cursor
   const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
 
-  const [, , , appId, setCurrentAppId] = useContext(ApplicationsContext);
+  const [, , appList, appId, setCurrentAppId] = useContext(ApplicationsContext);
+  const { icon } = appList.find((app) => app.name === type) || {
+    icon: Apps,
+  };
 
   useEffect(() => {
     if (!dragRef.current || !handleRef.current) return;
@@ -184,7 +187,7 @@ export default function DrawerItem({
       <ListItemButton
         disableGutters
         key={title}
-        onClick={() => setCurrentAppId(id)} //setParam("appId", id)}
+        onClick={() => setCurrentAppId(id)}
         sx={{ pl: 2, borderRadius: 2, pr: 1 }}
         ref={dragRef}
         selected={appId === id}

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

@@ -6,7 +6,7 @@ import {
   AccordionSummary,
   TextField,
 } from "@mui/material";
-import { ExpandMore, Apps } from "@mui/icons-material";
+import { ExpandMore } from "@mui/icons-material";
 import React, { useEffect, useRef, useState } from "react";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { DashboardGroup } from "../../types/DashboardGroup";
@@ -139,20 +139,22 @@ export default function DrawerItemGroup({
       </AccordionSummary>
       {/* Accordion details */}
       <AccordionDetails>
-        {items.map(({ title: itemTitle, id, icon }, index) => (
-          <div onContextMenu={handleContextMenu("item", id)} key={id}>
-            <DrawerItem
-              item={{ title: itemTitle, id, icon: icon || Apps }}
-              index={index}
-              groupTitle={title}
-              renamingItemId={renamingItemId}
-              setRenamingItemId={setRenamingItemId}
-              renameValue={renameValue}
-              setRenameValue={setRenameValue}
-              setUserDashboard={setUserDashboard}
-            />
-          </div>
-        ))}
+        {items.map(({ title: itemTitle, id, type }, index) => {
+          return (
+            <div onContextMenu={handleContextMenu("item", id)} key={id}>
+              <DrawerItem
+                item={{ title: itemTitle, id, type }}
+                index={index}
+                groupTitle={title}
+                renamingItemId={renamingItemId}
+                setRenamingItemId={setRenamingItemId}
+                renameValue={renameValue}
+                setRenameValue={setRenameValue}
+                setUserDashboard={setUserDashboard}
+              />
+            </div>
+          );
+        })}
       </AccordionDetails>
     </Accordion>
   );

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

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import FormControl from "@mui/material/FormControl";
@@ -15,6 +15,8 @@ import { useOidc } from "@axa-fr/react-oidc";
 import { useMetadata, Metadata } from "../../hooks/metadata";
 import { useOIDCContext } from "../../hooks/oidcConfiguration";
 
+import { useSearchParamsUtils } from "../../hooks/searchParamsUtils";
+import { NavigationContext } from "../../contexts/NavigationProvider";
 import { useDiracxUrl } from "../../hooks";
 
 interface LoginFormProps {
@@ -37,6 +39,9 @@ export function LoginForm({
   const { configuration, setConfiguration } = useOIDCContext();
   const { isAuthenticated, login } = useOidc(configuration?.scope);
 
+  const { getParam } = useSearchParamsUtils();
+  const { setPath } = useContext(NavigationContext);
+
   // Login if not authenticated
   useEffect(() => {
     if (configuration && configuration.scope && isAuthenticated === false) {
@@ -45,18 +50,18 @@ export function LoginForm({
     }
   }, [configuration, isAuthenticated, login]);
 
-  // useEffect(() => {
-  //   // Redirect to dashboard if already authenticated
-  //   if (isAuthenticated) {
-  //     const redirect = getParam("redirect");
-  //     console.log("Redirecting to:", redirect);
-  //     if (redirect) {
-  //       setPath(redirect);
-  //     } else {
-  //       setPath("/");
-  //     }
-  //   }
-  // }, [getParam, isAuthenticated, setPath]);
+  useEffect(() => {
+    // Redirect to dashboard if already authenticated
+    if (isAuthenticated) {
+      const redirect = getParam("redirect");
+      console.log("Redirecting to:", redirect);
+      if (redirect) {
+        setPath(redirect);
+      } else {
+        setPath("/");
+      }
+    }
+  }, [getParam, isAuthenticated, setPath]);
 
   // Get default group
   const getDefaultGroup = (

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

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { createContext, useEffect, useState } from "react";
-import { Monitor } from "@mui/icons-material";
 import { applicationList } from "../components/ApplicationList";
 import { DashboardGroup } from "../types/DashboardGroup";
 import ApplicationMetadata from "../types/ApplicationMetadata";
@@ -36,7 +35,14 @@ export const ApplicationsProvider = ({
   appList = applicationList,
   defaultUserDashboard,
 }: ApplicationsProviderProps) => {
-  const [userDashboard, setUserDashboard] = useState<DashboardGroup[]>([]);
+  const loadedDashboard = sessionStorage.getItem("savedDashboard");
+  const parsedDashboard: DashboardGroup[] = loadedDashboard
+    ? JSON.parse(loadedDashboard)
+    : null;
+
+  const [userDashboard, setUserDashboard] = useState<DashboardGroup[]>(
+    parsedDashboard || [],
+  );
 
   const [currentAppId, setCurrentAppId] = useState<string>("");
 
@@ -53,14 +59,18 @@ export const ApplicationsProvider = ({
               title: "My Jobs",
               type: "Job Monitor",
               id: "JobMonitor0",
-              icon: Monitor,
             },
           ],
         },
       ],
     );
   }, [appList, defaultUserDashboard]);
 
+  // Save the dashboard in session storage
+  useEffect(() => {
+    sessionStorage.setItem("savedDashboard", JSON.stringify(userDashboard));
+  }, [userDashboard]);
+
   return (
     <ApplicationsContext.Provider
       value={[

packages/diracx-web-components/src/types/DashboardItem.ts

@@ -1,13 +1,11 @@
 "use client";
 
-import { SvgIconComponent } from "@mui/icons-material";
 import { InternalFilter } from "./Filter";
 
 // Define the type for the Dashboard Item state
 export interface DashboardItem {
   title: string;
   type: string;
   id: string;
-  icon: SvgIconComponent | null;
   data?: InternalFilter[];
 }