feat: Remember info panel width and count across browser sessions (parse-community#3031)

Author: mtrezza

src/dashboard/Data/Browser/DataBrowser.react.js

@@ -26,6 +26,8 @@ const AGGREGATION_PANEL_AUTO_LOAD_FIRST_ROW = 'aggregationPanelAutoLoadFirstRow'
 const AGGREGATION_PANEL_SYNC_SCROLL = 'aggregationPanelSyncScroll';
 const AGGREGATION_PANEL_BATCH_NAVIGATE = 'aggregationPanelBatchNavigate';
 const AGGREGATION_PANEL_SHOW_CHECKBOX = 'aggregationPanelShowCheckbox';
+const AGGREGATION_PANEL_WIDTH = 'aggregationPanelWidth';
+const AGGREGATION_PANEL_COUNT = 'aggregationPanelCount';
 
 function formatValueForCopy(value, type) {
   if (value === undefined) {
@@ -98,6 +100,10 @@ export default class DataBrowser extends React.Component {
       window.localStorage?.getItem(AGGREGATION_PANEL_BATCH_NAVIGATE) !== 'false';
     const storedShowPanelCheckbox =
       window.localStorage?.getItem(AGGREGATION_PANEL_SHOW_CHECKBOX) !== 'false';
+    const storedPanelWidth = window.localStorage?.getItem(AGGREGATION_PANEL_WIDTH);
+    const parsedPanelWidth = storedPanelWidth ? parseInt(storedPanelWidth, 10) : 300;
+    const storedPanelCount = window.localStorage?.getItem(AGGREGATION_PANEL_COUNT);
+    const parsedPanelCount = storedPanelCount ? parseInt(storedPanelCount, 10) : 1;
     const hasAggregation =
       props.classwiseCloudFunctions?.[
         `${props.app.applicationId}${props.appName}`
@@ -117,7 +123,7 @@ export default class DataBrowser extends React.Component {
       firstSelectedCell: null,
       selectedData: [],
       prevClassName: props.className,
-      panelWidth: 300,
+      panelWidth: parsedPanelWidth,
       isResizing: false,
       maxWidth: window.innerWidth - 300,
       showAggregatedData: true,
@@ -131,7 +137,7 @@ export default class DataBrowser extends React.Component {
       prefetchCache: {},
       selectionHistory: [],
       displayedObjectIds: [], // Array of object IDs currently displayed in the panel
-      panelCount: 1, // Number of panels to display
+      panelCount: parsedPanelCount, // Number of panels to display
       multiPanelData: {}, // Object mapping objectId to panel data
       _objectsToFetch: [], // Temporary field for async fetch handling
       loadingObjectIds: new Set(),
@@ -358,6 +364,7 @@ export default class DataBrowser extends React.Component {
       isResizing: false,
       panelWidth: size.width,
     });
+    window.localStorage?.setItem(AGGREGATION_PANEL_WIDTH, size.width);
   }
 
   handleResizeDiv(event, { size }) {
@@ -1148,6 +1155,8 @@ export default class DataBrowser extends React.Component {
         multiPanelData: currentObjectData,
         panelWidth: limitedWidth,
       });
+      window.localStorage?.setItem(AGGREGATION_PANEL_COUNT, newPanelCount);
+      window.localStorage?.setItem(AGGREGATION_PANEL_WIDTH, limitedWidth);
 
       // Fetch missing data asynchronously
       objectsToFetch.forEach((objectId, i) => {
@@ -1169,6 +1178,9 @@ export default class DataBrowser extends React.Component {
 
       const newWidth = (prevState.panelWidth / prevState.panelCount) * newPanelCount;
 
+      window.localStorage?.setItem(AGGREGATION_PANEL_COUNT, newPanelCount);
+      window.localStorage?.setItem(AGGREGATION_PANEL_WIDTH, newWidth);
+
       return {
         panelCount: newPanelCount,
         displayedObjectIds: newDisplayedObjectIds,