Merge pull request #358 from TheauW/twartel-secure-import-app

feat: handle outdated imported states with automatic structure update

Author: aldbr

docs/developer/create_application.md

@@ -6,7 +6,15 @@ The applicatins created here will be available for DiracX-Web and for all the ex
 
 ### Declare the application
 
-In the file `packages/diracx-web-components/src/components/ApplicationList.ts` you can extend the `applicationList` with your new app. You must provide a name (explicit), the component representing the new app and an icon that will appear in the `Add application` menu. You can also give two functions, `setState` and `getState`, to configure the export and import of your app.
+In the file `packages/diracx-web-components/src/components/ApplicationList.ts` you can extend the `applicationList` with your new app. 
+
+You must provide: 
+- A clear and explicit name
+- The component representing the new app 
+- An icon that will appear in the `Add application` menu
+- An optional function, `validateAndConvertState`, which identifies and corrects the structure of a JSON pasted by the user during import. This function ensures compatibility between versions by transforming the pasted state into a valid, updated version. It should be reviewed and updated in any version that modifies the exported/imported state structure
+
+💡You can look at the type `ApplicationMetadata` for more details
 
 ### Code the application
 

docs/user/list_and_share_applications.md

@@ -97,3 +97,5 @@ When managing multiple instances of the same application, grouping can help you
 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 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. 
+
+**Good to know:** When switching to a new version, the settings you are trying to import may no longer be valid. In this case, a new window will appear, offering to resolve the issue by updating the state copied to your clipboard. This updated version preserves your imported rules as much as possible. 

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

@@ -2,13 +2,16 @@
 
 import { FolderCopy, Monitor } from "@mui/icons-material";
 import ApplicationMetadata from "../types/ApplicationMetadata";
-import JobMonitor from "./JobMonitor/JobMonitor";
+import JobMonitor, {
+  validateAndConvertState as validateAndConvertState_JobMonitor,
+} from "./JobMonitor/JobMonitor";
 
 export const applicationList: ApplicationMetadata[] = [
   {
     name: "Job Monitor",
     component: JobMonitor,
     icon: Monitor,
+    validateAndConvertState: validateAndConvertState_JobMonitor,
   },
   {
     name: "File Catalog",

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

@@ -213,31 +213,40 @@ export default function DashboardDrawer({
    * @param appType - The type of the app to be created.
    */
   const handleAppCreation = (appType: string) => {
-    let group = userDashboard[userDashboard.length - 1];
-    const empty = !group;
-    if (empty) {
-      //create a new group if there is no group
-      group = {
-        title: `Group ${userDashboard.length + 1}`,
-        extended: false,
-        items: [],
-      };
+    const group =
+      userDashboard.length > 0
+        ? userDashboard[userDashboard.length - 1]
+        : {
+            // Create a new group if none exists
+            title: `Group 1`,
+            extended: false,
+            items: [],
+          };
+
+    const empty = userDashboard.length === 0;
+
+    const count = group.items.filter((item) =>
+      item.title.startsWith(appType),
+    ).length;
+
+    let title = `${appType} ${count > 0 ? `${count}` : ""}`;
+    while (group.items.some((app) => app.title === title)) {
+      const match = title.match(/(\d+)$/);
+      const num = match ? parseInt(match[1], 10) + 1 : undefined;
+      title = `${appType} ${num}`;
     }
 
-    const count = userDashboard.reduce(
-      (sum, group) =>
-        sum + group.items.filter((item) => item.type === appType).length,
-      0,
-    );
-
-    const title = count > 0 ? `${appType} ${count + 1}` : `${appType}`;
-
+    let appId = `${appType} 0`;
+    while (
+      userDashboard.some((group) => group.items.some((app) => app.id === appId))
+    ) {
+      const match = appId.match(/(\d+)$/);
+      const num = match ? parseInt(match[1], 10) + 1 : 0;
+      appId = `${appType} ${num}`;
+    }
     const newApp = {
       title,
-      id: `${title}${userDashboard.reduce(
-        (sum, group) => sum + group.items.length,
-        0,
-      )}`,
+      id: appId,
       type: appType,
     };
     group.items.push(newApp);
@@ -407,9 +416,9 @@ export default function DashboardDrawer({
           </Toolbar>
           {/* Map over user app instances and render them as list items in the drawer. */}
           <List>
-            {userDashboard.map((group) => (
+            {userDashboard.map((group, index) => (
               <ListItem
-                key={group.title}
+                key={index}
                 disablePadding
                 onContextMenu={handleContextMenu("group", group.title)}
               >

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

@@ -10,7 +10,7 @@ import {
   useTheme,
   TextField,
 } from "@mui/material";
-import { DragIndicator, SvgIconComponent, Apps } from "@mui/icons-material";
+import { DragIndicator, SvgIconComponent } from "@mui/icons-material";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import {
   draggable,
@@ -72,7 +72,7 @@ export default function DrawerItem({
 
   const [, , appList, appId, setCurrentAppId] = useContext(ApplicationsContext);
   const { icon } = appList.find((app) => app.name === item.type) || {
-    icon: Apps,
+    icon: EggIcon,
   };
 
   useEffect(() => {
@@ -194,7 +194,7 @@ export default function DrawerItem({
         selected={appId === item.id}
       >
         <ListItemIcon>
-          <Icon component={icon ?? EggIcon} />
+          <Icon component={icon} />
         </ListItemIcon>
         {renamingItemId === item.id ? (
           <TextField

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

@@ -119,7 +119,7 @@ export function ExportButton() {
       };
     });
 
-    setSelectedState(JSON.stringify(states, null, 2));
+    setSelectedState(JSON.stringify(states));
     setDialogOpen(true);
     handleClose();
   };

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

@@ -11,24 +11,40 @@ import {
   TextField,
 } from "@mui/material";
 import InputIcon from "@mui/icons-material/Input";
-import React, { useState, useContext, SetStateAction } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import { ApplicationsContext } from "../../contexts";
-import { ApplicationMetadata, DashboardGroup } from "../../types";
+import {
+  ApplicationMetadata,
+  DashboardGroup,
+  ApplicationSettings,
+} from "../../types";
 import { ApplicationState } from "../../types/ApplicationMetadata";
 
 interface ImportDialogProps {
   open: boolean;
   onClose: () => void;
-  onImport: (state: string) => void;
+  onImport: (importedStates: ApplicationSettings[]) => void;
 }
 
+/**
+ * ImportDialog component allows users to import application states in JSON format.
+ * It provides a text area for pasting the state and a button to import it.
+ * @param open - Boolean indicating if the dialog is open.
+ * @param onClose - Function to close the dialog.
+ * @param onImport - Function to handle the import of the state.
+ */
 function ImportDialog({ open, onClose, onImport }: ImportDialogProps) {
   const [stateText, setStateText] = useState("");
   const [error, setError] = useState<string | null>(null);
 
+  useEffect(() => {
+    setStateText("");
+    setError(null);
+  }, [open]);
+
   const handleImport = () => {
     try {
-      const parsedState = JSON.parse(stateText);
+      const parsedState: ApplicationSettings[] = JSON.parse(stateText);
       onImport(parsedState);
       onClose();
       setStateText("");
@@ -74,28 +90,112 @@ function ImportDialog({ open, onClose, onImport }: ImportDialogProps) {
   );
 }
 
+/**
+ * DeprecatedStateDialog component displays a dialog with a list of applications
+ * that have an outdated state format. It allows users to copy the updated state.
+ * @param open - Boolean indicating if the dialog is open.
+ * @param onClose - Function to close the dialog.
+ * @param correctStates - Array of objects containing the old and new state of the applications.
+ */
+function DeprecatedStateDialog({
+  open,
+  onClose,
+  correctStates,
+}: {
+  open: boolean;
+  onClose: () => void;
+  correctStates: {
+    oldSettings: ApplicationSettings;
+    newState: ApplicationState;
+  }[];
+}) {
+  const handleCopy = (app: {
+    oldSettings: ApplicationSettings;
+    newState: ApplicationState;
+  }) => {
+    const formatted = {
+      appType: app.oldSettings.appType,
+      appName: app.oldSettings.appName,
+      state: app.newState,
+    };
+    navigator.clipboard.writeText(JSON.stringify(formatted));
+  };
+
+  const handleCopyAll = () => {
+    const allFormatted = correctStates.map(({ oldSettings, newState }) => ({
+      appType: oldSettings.appType,
+      appName: oldSettings.appName,
+      state: newState,
+    }));
+    navigator.clipboard.writeText(JSON.stringify(allFormatted));
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+      <DialogTitle>Outdated State Format Detected</DialogTitle>
+      <DialogContent>
+        <p>
+          Some imported applications use an outdated format that will soon no
+          longer be supported.
+          <br />
+          Please update them now by copying their updated version.
+        </p>
+
+        <ul>
+          {correctStates.map(({ oldSettings }, index) => (
+            <li key={index} style={{ marginTop: "0.5em" }}>
+              <b>{oldSettings.appName}</b> ({oldSettings.appType}){" "}
+              <Button
+                size="small"
+                onClick={() => handleCopy(correctStates[index])}
+                sx={{ ml: 1 }}
+              >
+                Copy
+              </Button>
+            </li>
+          ))}
+        </ul>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button variant="contained" onClick={handleCopyAll}>
+          Copy All Updated JSON
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
 /**
  * ImportButton component allows users to import the state of applications.
  * It provides a dialog to paste the state in JSON format.
  */
 export function ImportButton() {
   const [dialogOpen, setDialogOpen] = useState(false);
+  const [correctStates, setCorrectStates] = useState<
+    { oldSettings: ApplicationSettings; newState: ApplicationState }[]
+  >([]);
   const [userDashboard, setUserDashboard, appList] =
     useContext(ApplicationsContext);
 
-  const handleImport = (importedState: ApplicationState) => {
-    const states = Array.isArray(importedState)
-      ? importedState
-      : [importedState];
+  const handleImport = (
+    importedStates: ApplicationSettings | ApplicationSettings[],
+  ) => {
+    const states = Array.isArray(importedStates)
+      ? importedStates
+      : [importedStates];
+
+    const count = userDashboard.filter((group) =>
+      group.title.startsWith("Imported Applications"),
+    ).length;
 
-    const id: number = userDashboard.reduce(
-      (acc, group) =>
-        group.title.startsWith("Imported Applications") ? acc + 1 : acc,
-      0,
-    );
+    let title = `Imported Applications${count > 0 ? ` ${count}` : ""}`;
+    while (userDashboard.some((group) => group.title === title)) {
+      title = `Imported Applications ${parseInt(title.split(" ")[2]) + 1}`;
+    }
 
     const newGroup = {
-      title: `Imported Applications${id > 0 ? ` (${id})` : ""}`,
+      title: title,
       extended: true,
       items: [],
     };
@@ -106,14 +206,23 @@ export function ImportButton() {
 
     states.forEach((state) => {
       if (state.state !== "null") {
+        const applicationMetadata = appList.find(
+          (app) => app.name === state.appType,
+        );
         const appId = handleAppCreation(
           state.appType,
           state.appName,
-          appList,
+          applicationMetadata,
           userDashboard,
           setUserDashboard,
         );
-        sessionStorage.setItem(`${appId}_State`, state.state);
+        const [appState, haveChangedState] =
+          applicationMetadata?.validateAndConvertState
+            ? applicationMetadata.validateAndConvertState(state.state)
+            : [state.state, false];
+        if (haveChangedState)
+          correctStates.push({ oldSettings: state, newState: appState });
+        sessionStorage.setItem(`${appId}_State`, appState);
       } else {
         console.warn(`No state to import for app type: ${state.appType}`);
       }
@@ -136,6 +245,12 @@ export function ImportButton() {
         onClose={() => setDialogOpen(false)}
         onImport={handleImport}
       />
+
+      <DeprecatedStateDialog
+        open={correctStates.length > 0}
+        onClose={() => setCorrectStates([])}
+        correctStates={correctStates}
+      />
     </>
   );
 }
@@ -153,24 +268,26 @@ export function ImportButton() {
 function handleAppCreation(
   appType: string,
   appTitle: string,
-  appList: ApplicationMetadata[],
+  applicationMetadata: ApplicationMetadata | undefined,
   userDashboard: DashboardGroup[],
-  setUserDashboard: React.Dispatch<SetStateAction<DashboardGroup[]>>,
+  setUserDashboard: React.Dispatch<React.SetStateAction<DashboardGroup[]>>,
 ): string {
   const group = userDashboard[userDashboard.length - 1];
 
-  const count = userDashboard.reduce(
-    (sum, group) =>
-      sum +
-      group.items.filter((item) => item.title.startsWith(appTitle)).length,
-    0,
-  );
+  const count = group.items.filter((item) =>
+    item.title.startsWith(appTitle),
+  ).length;
 
   const title = count > 0 ? `${appTitle} (${count + 1})` : appTitle;
-  const appId = `${title}${userDashboard.reduce(
-    (sum, group) => sum + group.items.length,
-    0,
-  )}`;
+
+  let appId = `${appType} 0`;
+  while (
+    userDashboard.some((group) => group.items.some((app) => app.id === appId))
+  ) {
+    const match = appId.match(/(\d+)$/);
+    const num = match ? parseInt(match[1], 10) + 1 : 0;
+    appId = `${appType} ${num}`;
+  }
 
   const newApp = {
     title: title,