Feat GridLayoutPanel: disable Store button if nothing to store (#3307)

Signed-off-by: sBouzols <[email protected]>

Author: sBouzols

src/components/grid-layout/grid-layout-panel.tsx

@@ -167,6 +167,7 @@ function GridLayoutPanel({ studyUuid, showInSpreadsheet, showGrid, visible }: Re
     const responsiveGridLayoutRef = useRef<any>(null);
     const currentBreakpointRef = useRef<string>('lg');
     const lastModifiedBreakpointRef = useRef<string>('lg'); // Track the last modified breakpoint
+    const [disableStoreButton, setDisableStoreButton] = useState<boolean>(true);
 
     const { snackInfo } = useSnackMessage();
 
@@ -198,6 +199,7 @@ function GridLayoutPanel({ studyUuid, showInSpreadsheet, showGrid, visible }: Re
     const addLayoutItem = useCallback((diagram: Diagram) => {
         lastModifiedBreakpointRef.current = currentBreakpointRef.current;
         setLayouts((currentLayouts) => createLayoutItem(diagram.diagramUuid, currentLayouts));
+        setDisableStoreButton(false);
     }, []);
 
     const removeLayoutItem = useCallback((cardUuid: UUID | string) => {
@@ -212,6 +214,7 @@ function GridLayoutPanel({ studyUuid, showInSpreadsheet, showGrid, visible }: Re
 
             return newLayouts;
         });
+        setDisableStoreButton(false);
     }, []);
 
     const onAddMapCard = useCallback(() => {
@@ -237,6 +240,22 @@ function GridLayoutPanel({ studyUuid, showInSpreadsheet, showGrid, visible }: Re
         onDiagramAlreadyExists,
     });
 
+    const handleUpdateDiagram = useCallback(
+        (diagram: Diagram) => {
+            setDisableStoreButton(false);
+            updateDiagram(diagram);
+        },
+        [updateDiagram]
+    );
+
+    const handleUpdateDiagramPositions = useCallback(
+        (diagramParams: DiagramParams) => {
+            setDisableStoreButton(false);
+            updateDiagramPositions(diagramParams);
+        },
+        [updateDiagramPositions]
+    );
+
     const onRemoveCard = useCallback(
         (diagramUuid: UUID) => {
             removeLayoutItem(diagramUuid);
@@ -369,6 +388,7 @@ function GridLayoutPanel({ studyUuid, showInSpreadsheet, showGrid, visible }: Re
 
             return newLayouts;
         });
+        setDisableStoreButton(false);
     }, []);
 
     /**
@@ -400,6 +420,7 @@ function GridLayoutPanel({ studyUuid, showInSpreadsheet, showGrid, visible }: Re
             lastModifiedBreakpointRef.current = currentBreakpointRef.current;
             // Ensure final order is propagated to all breakpoints
             propagateOrder(layout, currentBreakpointRef.current);
+            setDisableStoreButton(false);
         },
         [propagateOrder]
     );
@@ -411,6 +432,7 @@ function GridLayoutPanel({ studyUuid, showInSpreadsheet, showGrid, visible }: Re
         } else {
             setLayouts(initialLayouts);
         }
+        setDisableStoreButton(true);
     }, []);
     useDiagramsGridLayoutInitialization({ onLoadDiagramLayout });
 
@@ -429,10 +451,15 @@ function GridLayoutPanel({ studyUuid, showInSpreadsheet, showGrid, visible }: Re
         [diagrams, snackInfo]
     );
 
-    const handleGridLayoutSave = useSaveDiagramLayout({ layouts, diagrams });
+    const gridLayoutSave = useSaveDiagramLayout({ layouts, diagrams });
 
     // Debounce the layout save function to avoid excessive calls
-    const debouncedGridLayoutSave = useDebounce(handleGridLayoutSave, 300);
+    const debouncedGridLayoutSave = useDebounce(gridLayoutSave, 300);
+
+    const handleGridLayoutSave = useCallback(() => {
+        setDisableStoreButton(true);
+        debouncedGridLayoutSave();
+    }, [debouncedGridLayoutSave]);
 
     return (
         <Box sx={styles.container}>
@@ -441,7 +468,8 @@ function GridLayoutPanel({ studyUuid, showInSpreadsheet, showGrid, visible }: Re
                 onSearch={showVoltageLevelDiagram}
                 onOpenNetworkAreaDiagram={showGrid}
                 onMap={!isMapCardAdded() ? onAddMapCard : undefined}
-                onLayoutSave={debouncedGridLayoutSave}
+                onLayoutSave={handleGridLayoutSave}
+                disableStore={disableStoreButton}
             />
             <ResponsiveGridLayout
                 ref={responsiveGridLayoutRef} // the provided innerRef prop is bugged (see https://github.com/react-grid-layout/react-grid-layout/issues/1444)
@@ -490,8 +518,8 @@ function GridLayoutPanel({ studyUuid, showInSpreadsheet, showGrid, visible }: Re
                             onClose={() => onRemoveCard(diagram.diagramUuid)}
                             showInSpreadsheet={showInSpreadsheet}
                             createDiagram={createDiagram}
-                            updateDiagram={updateDiagram}
-                            updateDiagramPositions={updateDiagramPositions}
+                            updateDiagram={handleUpdateDiagram}
+                            updateDiagramPositions={handleUpdateDiagramPositions}
                         />
                     );
                 })}

src/components/grid-layout/grid-layout-toolbar.tsx

@@ -41,10 +41,11 @@ interface DiagramGridHeaderProps {
     onOpenNetworkAreaDiagram?: (elementId?: string) => void;
     onLayoutSave: () => void;
     onMap?: () => void;
+    disableStore?: boolean;
 }
 
 export const GridLayoutToolbar = (props: DiagramGridHeaderProps) => {
-    const { onLoad, onSearch, onOpenNetworkAreaDiagram, onMap, onLayoutSave } = props;
+    const { onLoad, onSearch, onOpenNetworkAreaDiagram, onMap, onLayoutSave, disableStore = true } = props;
 
     const intl = useIntl();
 
@@ -85,9 +86,11 @@ export const GridLayoutToolbar = (props: DiagramGridHeaderProps) => {
                 </Box>
                 <Box>
                     <Tooltip title={<FormattedMessage id="StoreButtonTooltip" />}>
-                        <Button onClick={onLayoutSave}>
-                            <FormattedMessage id="StoreDiagramLayout" />
-                        </Button>
+                        <span>
+                            <Button disabled={disableStore} onClick={onLayoutSave}>
+                                <FormattedMessage id="StoreDiagramLayout" />
+                            </Button>
+                        </span>
                     </Tooltip>
                 </Box>
             </Box>