Merge pull request #359 from TheauW/twartel-use-local-storage

feat: save and load in/from local storage

Author: aldbr

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

@@ -20,6 +20,7 @@ import {
 
 import OutputIcon from "@mui/icons-material/Output";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import SaveIcon from "@mui/icons-material/Save";
 
 import { DashboardGroup } from "../../types/DashboardGroup";
 
@@ -33,11 +34,17 @@ interface ExportDialogProps {
 
 function ExportDialog({ open, onClose, state }: ExportDialogProps) {
   const theme = useTheme();
+
   const handleCopy = () => {
     navigator.clipboard.writeText(state);
     onClose();
   };
 
+  const handleSave = () => {
+    localStorage.setItem("diracx-saved-states", state);
+    onClose();
+  };
+
   return (
     <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
       <DialogTitle>Application State</DialogTitle>
@@ -60,6 +67,13 @@ function ExportDialog({ open, onClose, state }: ExportDialogProps) {
         <Button onClick={onClose} data-testid="cancel-export-button">
           Cancel
         </Button>
+        <Button
+          onClick={handleSave}
+          variant="contained"
+          startIcon={<SaveIcon />}
+        >
+          Save in the browser
+        </Button>
         <Button
           onClick={handleCopy}
           startIcon={<ContentCopyIcon />}

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

@@ -77,6 +77,15 @@ function ImportDialog({ open, onClose, onImport }: ImportDialogProps) {
         <Button onClick={onClose} data-testid="cancel-import-button">
           Cancel
         </Button>
+        <Button
+          onClick={() =>
+            setStateText(localStorage.getItem("diracx-saved-states") || "")
+          }
+          variant="contained"
+          disabled={localStorage.getItem("diracx-saved-states") === null}
+        >
+          Load from browser
+        </Button>
         <Button
           onClick={handleImport}
           variant="contained"

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

@@ -3,3 +3,4 @@ export * from "./oidcConfiguration";
 export * from "./searchParamsUtils";
 export * from "./theme";
 export * from "./utils";
+export * from "./application";