Merge pull request #357 from TheauW/twartel-clear-url

fix: remove the dashboard from the url and remove the BaseApp

Author: aldbr

docs/user/list_and_share_applications.md

@@ -94,6 +94,6 @@ When managing multiple instances of the same application, grouping can help you
 
 ### Share and import the settings of an application
 
-1. **Share**: You can share the status of an app by clicking on the share button in the top-right corner of the screen. After clicking, you can select which group and app you want to share and then copy a text corresponding to the states of the selected applications.
+1. **Share**: You can export the status of an app by clicking on the share button in the top-right corner of the screen. After clicking, you can select which group and app you want to share and then copy a text corresponding to the states of the selected applications.
 
-2. **Import**: Next to the share button you can find the import button. You can paste into the window opened by the button the text corresponding to one or multiple shared apps. This will create a new group named *Imported App* with the imported applications and their settings. 
+2. **Import**: Next to the export button you can find the import button. You can paste into the window opened by the button the text corresponding to one or multiple shared apps. This will create a new group named *Imported App* with the imported applications and their settings. 

package-lock.json

@@ -35,7 +35,6 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "dayjs": "^1.11.13",
-    "jsoncrush": "^1.1.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-virtuoso": "^4.12.3",

packages/diracx-web-components/package.json

@@ -1,12 +1,10 @@
 "use client";
 
-import { Dashboard, FolderCopy, Monitor } from "@mui/icons-material";
+import { FolderCopy, Monitor } from "@mui/icons-material";
 import ApplicationMetadata from "../types/ApplicationMetadata";
 import JobMonitor from "./JobMonitor/JobMonitor";
-import BaseApp from "./BaseApp/BaseApp";
 
 export const applicationList: ApplicationMetadata[] = [
-  { name: "Base Application", component: BaseApp, icon: Dashboard },
   {
     name: "Job Monitor",
     component: JobMonitor,

packages/diracx-web-components/src/components/ApplicationList.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useContext } from "react";
+import { useContext } from "react";
 import {
   Dialog,
   DialogTitle,
@@ -11,7 +11,7 @@ import {
   Icon,
   IconButton,
 } from "@mui/material";
-import { Close, SvgIconComponent } from "@mui/icons-material";
+import { Close } from "@mui/icons-material";
 import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
 
 interface AppDialogProps {
@@ -20,7 +20,7 @@ interface AppDialogProps {
   /** 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;
+  handleCreateApp: (name: string) => void;
 }
 
 /**
@@ -34,31 +34,12 @@ export default function AppDialog({
   setAppDialogOpen,
   handleCreateApp,
 }: AppDialogProps) {
-  const [appType, setAppType] = useState("");
   const applicationList = useContext(ApplicationsContext)[2];
   return (
     <Dialog
       open={appDialogOpen}
       onClose={() => setAppDialogOpen(false)}
       aria-labelledby="application-dialog-label"
-      PaperProps={{
-        component: "form",
-        onSubmit: (event: React.FormEvent<HTMLFormElement>) => {
-          event.preventDefault();
-
-          const icon = applicationList.find(
-            (app) => app.name === appType,
-          )?.icon;
-          if (!icon) {
-            console.error("Icon not found for application type", appType);
-            return;
-          }
-
-          handleCreateApp(appType, icon);
-
-          setAppDialogOpen(false);
-        },
-      }}
       fullWidth
       maxWidth="sm"
     >
@@ -90,9 +71,10 @@ export default function AppDialog({
                 fullWidth
                 variant="outlined"
                 onClick={() => {
-                  setAppType(app.name);
+                  handleCreateApp(app.name);
+                  setAppDialogOpen(false);
                 }}
-                type="submit"
+                data-testid="create-application-button"
               >
                 <Icon component={app.icon} sx={{ mr: 1 }} />
                 {app.name}

packages/diracx-web-components/src/components/BaseApp/BaseApp.tsx

@@ -16,7 +16,7 @@ import {
   Toolbar,
   useTheme,
 } from "@mui/material";
-import { MenuBook, Add, SvgIconComponent } from "@mui/icons-material";
+import { MenuBook, Add } from "@mui/icons-material";
 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";
@@ -80,7 +80,8 @@ export default function DashboardDrawer({
 
   // Define the applications that are accessible to users.
   // Each application has an associated icon and path.
-  const [userDashboard, setUserDashboard] = useContext(ApplicationsContext);
+  const [userDashboard, setUserDashboard, , , setCurrentAppId] =
+    useContext(ApplicationsContext);
 
   const theme = useTheme();
 
@@ -210,9 +211,8 @@ export default function DashboardDrawer({
    * Handles the creation of a new app in the dashboard drawer.
    *
    * @param appType - The type of the app to be created.
-   * @param icon - The icon component for the app.
    */
-  const handleAppCreation = (appType: string, icon: SvgIconComponent) => {
+  const handleAppCreation = (appType: string) => {
     let group = userDashboard[userDashboard.length - 1];
     const empty = !group;
     if (empty) {
@@ -224,14 +224,13 @@ export default function DashboardDrawer({
       };
     }
 
-    let title = `${appType} ${userDashboard.reduce(
+    const count = userDashboard.reduce(
       (sum, group) =>
         sum + group.items.filter((item) => item.type === appType).length,
-      1,
-    )}`;
-    while (group.items.some((item) => item.title === title)) {
-      title = `${appType} ${parseInt(title.split(" ")[1]) + 1}`;
-    }
+      0,
+    );
+
+    const title = count > 0 ? `${appType} ${count + 1}` : `${appType}`;
 
     const newApp = {
       title,
@@ -240,7 +239,6 @@ export default function DashboardDrawer({
         0,
       )}`,
       type: appType,
-      icon: icon,
     };
     group.items.push(newApp);
     if (empty) {
@@ -250,6 +248,7 @@ export default function DashboardDrawer({
         userDashboard.map((g) => (g.title === group.title ? group : g)),
       );
     }
+    setCurrentAppId(newApp.id);
   };
 
   let isContextStateStable = true;

packages/diracx-web-components/src/components/BaseApp/index.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import {
   ListItemButton,
@@ -10,7 +10,7 @@ import {
   useTheme,
   TextField,
 } from "@mui/material";
-import { DragIndicator, SvgIconComponent } from "@mui/icons-material";
+import { DragIndicator, SvgIconComponent, Apps } from "@mui/icons-material";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import {
   draggable,
@@ -25,8 +25,7 @@ import {
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
 import EggIcon from "@mui/icons-material/Egg";
 import { ThemeProvider } from "../../contexts/ThemeProvider";
-import { useSearchParamsUtils } from "../../hooks/searchParamsUtils";
-import { useApplicationId } from "../../hooks/application";
+import { ApplicationsContext } from "../../contexts/ApplicationsProvider";
 import { DashboardGroup, DashboardItem } from "../../types";
 
 interface DrawerItemProps {
@@ -68,11 +67,13 @@ export default function DrawerItem({
   // Ref to use for the handle of the draggable element, must be a child of the draggable element
   const handleRef = useRef(null);
   const theme = useTheme();
-  const { setParam } = useSearchParamsUtils();
   // Represents the closest edge to the mouse cursor
   const [closestEdge, setClosestEdge] = useState<Edge | null>(null);
 
-  const appId = useApplicationId();
+  const [, , appList, appId, setCurrentAppId] = useContext(ApplicationsContext);
+  const { icon } = appList.find((app) => app.name === item.type) || {
+    icon: Apps,
+  };
 
   useEffect(() => {
     if (!dragRef.current || !handleRef.current) return;
@@ -101,7 +102,7 @@ export default function DrawerItem({
                       width: source.element.getBoundingClientRect().width,
                     }}
                   >
-                    <ItemPreview title={item.title} icon={item.icon} />
+                    <ItemPreview title={item.title} icon={icon} />
                   </div>
                 </ThemeProvider>,
               );
@@ -187,13 +188,13 @@ export default function DrawerItem({
       <ListItemButton
         disableGutters
         key={item.title}
-        onClick={() => setParam("appId", item.id)}
+        onClick={() => setCurrentAppId(item.id)}
         sx={{ pl: 2, borderRadius: 2, pr: 1 }}
         ref={dragRef}
         selected={appId === item.id}
       >
         <ListItemIcon>
-          <Icon component={item.icon ?? EggIcon} />
+          <Icon component={icon ?? EggIcon} />
         </ListItemIcon>
         {renamingItemId === item.id ? (
           <TextField

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

@@ -144,7 +144,11 @@ export function ImportButton() {
  * Handles the creation of a new app in the dashboard drawer.
  *
  * @param appType - The type of the app to be created.
- * @param icon - The icon component for the app.
+ * @param appTitle - The title of the app to be created.
+ * @param appList - The list of applications with their metadata.
+ * @param userDashboard - The current state of the user's dashboard.
+ * @param setUserDashboard - The function to update the user's dashboard state.
+ * @returns The ID of the newly created app.
  */
 function handleAppCreation(
   appType: string,
@@ -172,7 +176,6 @@ function handleAppCreation(
     title: title,
     id: appId,
     type: appType,
-    icon: appList.find((app) => app.name === appType)?.icon || null,
   };
   group.items.push(newApp);
   setUserDashboard((userDashboard) =>