feat: Save datapanel state in local storage (#12996)

* Save datapanel state in local storage

* Export string to a constant

* Move local storage helpers to separate file

* Use helper functions in ExploreViewContainer

superset-frontend/src/explore/components/DataTablesPane.tsx

@@ -24,6 +24,10 @@ import Loading from 'src/components/Loading';
 import TableView, { EmptyWrapperType } from 'src/components/TableView';
 import { getChartDataRequest } from 'src/chart/chartAction';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
+import {
+  getFromLocalStorage,
+  setInLocalStorage,
+} from 'src/utils/localStorageHelpers';
 import {
   CopyToClipboardButton,
   FilterInput,
@@ -44,6 +48,12 @@ const NULLISH_RESULTS_STATE = {
 
 const DATA_TABLE_PAGE_SIZE = 50;
 
+const STORAGE_KEYS = {
+  isOpen: 'is_datapanel_open',
+};
+
+const DATAPANEL_KEY = 'data';
+
 const TableControlsWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -98,7 +108,9 @@ export const DataTablesPane = ({
     [RESULT_TYPES.results]?: boolean;
     [RESULT_TYPES.samples]?: boolean;
   }>(NULLISH_RESULTS_STATE);
-  const [panelOpen, setPanelOpen] = useState(false);
+  const [panelOpen, setPanelOpen] = useState(
+    getFromLocalStorage(STORAGE_KEYS.isOpen, false),
+  );
 
   const getData = useCallback(
     (resultType: string) => {
@@ -140,6 +152,10 @@ export const DataTablesPane = ({
     [queryFormData],
   );
 
+  useEffect(() => {
+    setInLocalStorage(STORAGE_KEYS.isOpen, panelOpen);
+  }, [panelOpen]);
+
   useEffect(() => {
     setIsRequestPending(prevState => ({
       ...prevState,
@@ -244,11 +260,12 @@ export const DataTablesPane = ({
         <Collapse
           accordion
           bordered={false}
+          defaultActiveKey={panelOpen ? DATAPANEL_KEY : undefined}
           onChange={handleCollapseChange}
           bold
           ghost
         >
-          <Collapse.Panel header={t('Data')} key="data">
+          <Collapse.Panel header={t('Data')} key={DATAPANEL_KEY}>
             <Tabs
               fullWidth={false}
               tabBarExtraContent={TableControls}

superset-frontend/src/explore/components/ExploreChartPanel.jsx

@@ -23,6 +23,10 @@ import { styled, useTheme } from '@superset-ui/core';
 import { useResizeDetector } from 'react-resize-detector';
 import { chartPropShape } from 'src/dashboard/util/propShapes';
 import ChartContainer from 'src/chart/ChartContainer';
+import {
+  getFromLocalStorage,
+  setInLocalStorage,
+} from 'src/utils/localStorageHelpers';
 import ConnectedExploreChartHeader from './ExploreChartHeader';
 import { DataTablesPane } from './DataTablesPane';
 
@@ -56,6 +60,10 @@ const GUTTER_SIZE_FACTOR = 1.25;
 const CHART_PANEL_PADDING = 30;
 const HEADER_PADDING = 15;
 
+const STORAGE_KEYS = {
+  sizes: 'chart_split_sizes',
+};
+
 const INITIAL_SIZES = [90, 10];
 const MIN_SIZES = [300, 50];
 const DEFAULT_SOUTH_PANE_HEIGHT_PERCENT = 40;
@@ -114,7 +122,9 @@ const ExploreChartPanel = props => {
     refreshMode: 'debounce',
     refreshRate: 300,
   });
-  const [splitSizes, setSplitSizes] = useState(INITIAL_SIZES);
+  const [splitSizes, setSplitSizes] = useState(
+    getFromLocalStorage(STORAGE_KEYS.sizes, INITIAL_SIZES),
+  );
 
   const calcSectionHeight = useCallback(
     percent => {
@@ -149,6 +159,10 @@ const ExploreChartPanel = props => {
     recalcPanelSizes(splitSizes);
   }, [recalcPanelSizes, splitSizes]);
 
+  useEffect(() => {
+    setInLocalStorage(STORAGE_KEYS.sizes, splitSizes);
+  }, [splitSizes]);
+
   const onDragEnd = sizes => {
     setSplitSizes(sizes);
   };

superset-frontend/src/explore/components/ExploreViewContainer.jsx

@@ -30,6 +30,10 @@ import { Global } from '@emotion/core';
 import { Tooltip } from 'src/common/components/Tooltip';
 import { usePrevious } from 'src/common/hooks/usePrevious';
 import Icon from 'src/components/Icon';
+import {
+  getFromLocalStorage,
+  setInLocalStorage,
+} from 'src/utils/localStorageHelpers';
 import ExploreChartPanel from './ExploreChartPanel';
 import ConnectedControlPanelsContainer from './ControlPanelsContainer';
 import SaveModal from './SaveModal';
@@ -379,20 +383,12 @@ function ExploreViewContainer(props) {
   }
 
   function getSidebarWidths(key) {
-    try {
-      return localStorage.getItem(key) || defaultSidebarsWidth[key];
-    } catch {
-      return defaultSidebarsWidth[key];
-    }
+    return getFromLocalStorage(key, defaultSidebarsWidth[key]);
   }
 
   function setSidebarWidths(key, dimension) {
-    try {
-      const newDimension = Number(getSidebarWidths(key)) + dimension.width;
-      localStorage.setItem(key, newDimension);
-    } catch {
-      // Catch in case localStorage is unavailable
-    }
+    const newDimension = Number(getSidebarWidths(key)) + dimension.width;
+    setInLocalStorage(key, newDimension);
   }
 
   if (props.standalone) {