[superset] 27/38: chore(explore): Save Resizable width to localStorage (#12593)

[vi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

villebro pushed a commit to branch 1.0
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 522f466b237d616e98ceb7f6b15fe255ff8d324a
Author: Nikola Gigić <ni...@gmail.com>
AuthorDate: Mon Jan 25 05:30:09 2021 +0100

    chore(explore): Save Resizable width to localStorage (#12593)
---
 .../explore/components/ExploreViewContainer.jsx    | 47 ++++++++++++++++++++--
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
index 5ea90a2..990373a 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer.jsx
@@ -169,6 +169,16 @@ function ExploreViewContainer(props) {
     ? `${props.forcedHeight}px`
     : `${windowSize.height - navHeight}px`;
 
+  const storageKeys = {
+    controlsWidth: 'controls_width',
+    dataSourceWidth: 'datasource_width',
+  };
+
+  const defaultSidebarsWidth = {
+    controls_width: 320,
+    datasource_width: 300,
+  };
+
   function addHistory({ isReplace = false, title } = {}) {
     const payload = { ...props.form_data };
     const longUrl = getExploreLongUrl(
@@ -368,6 +378,23 @@ function ExploreViewContainer(props) {
     );
   }
 
+  function getSidebarWidths(key) {
+    try {
+      return localStorage.getItem(key) || defaultSidebarsWidth[key];
+    } catch {
+      return 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
+    }
+  }
+
   if (props.standalone) {
     return renderChartContainer();
   }
@@ -407,8 +434,14 @@ function ExploreViewContainer(props) {
         />
       )}
       <Resizable
-        defaultSize={{ width: 300, height: '100%' }}
-        minWidth={300}
+        onResizeStop={(evt, direction, ref, d) =>
+          setSidebarWidths(storageKeys.dataSourceWidth, d)
+        }
+        defaultSize={{
+          width: getSidebarWidths(storageKeys.dataSourceWidth),
+          height: '100%',
+        }}
+        minWidth={defaultSidebarsWidth[storageKeys.dataSourceWidth]}
         maxWidth="33%"
         enable={{ right: true }}
         className={
@@ -459,8 +492,14 @@ function ExploreViewContainer(props) {
         </div>
       ) : null}
       <Resizable
-        defaultSize={{ width: 320, height: '100%' }}
-        minWidth={320}
+        onResizeStop={(evt, direction, ref, d) =>
+          setSidebarWidths(storageKeys.controlsWidth, d)
+        }
+        defaultSize={{
+          width: getSidebarWidths(storageKeys.controlsWidth),
+          height: '100%',
+        }}
+        minWidth={defaultSidebarsWidth[storageKeys.controlsWidth]}
         maxWidth="33%"
         enable={{ right: true }}
         className="col-sm-3 explore-column controls-column"