From 12f802360c720108fb2069af0716322b14758de8 Mon Sep 17 00:00:00 2001
From: stephenLYZ <750188453@qq.com>
Date: Thu, 8 Sep 2022 09:57:03 +0800
Subject: [PATCH] fix(explore): disable resize bar when the results area is
 collapsed

---
 .../src/explore/components/ExploreChartPanel.jsx     | 10 +++++++++-
 .../explore/components/ExploreChartPanel.test.jsx    | 12 ++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
index 5e97cb4f4f56..6d951e83324a 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
@@ -98,6 +98,7 @@ const Styles = styled.div`
   }
 
   .gutter.gutter-vertical {
+    display: ${({ showSplite }) => (showSplite ? 'block' : 'none')};
     cursor: row-resize;
   }
 
@@ -149,6 +150,9 @@ const ExploreChartPanel = ({
   const [splitSizes, setSplitSizes] = useState(
     getItem(LocalStorageKeys.chart_split_sizes, INITIAL_SIZES),
   );
+  const [showSplite, setShowSplit] = useState(
+    getItem(LocalStorageKeys.is_datapanel_open, false),
+  );
 
   const [showDatasetModal, setShowDatasetModal] = useState(false);
 
@@ -225,6 +229,7 @@ const ExploreChartPanel = ({
       ];
     }
     setSplitSizes(splitSizes);
+    setShowSplit(isOpen);
   }, []);
 
   const renderChart = useCallback(
@@ -411,7 +416,10 @@ const ExploreChartPanel = ({
   }
 
   return (
-    <Styles className="panel panel-default chart-container">
+    <Styles
+      className="panel panel-default chart-container"
+      showSplite={showSplite}
+    >
       {vizType === 'filter_box' ? (
         panelBody
       ) : (
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.test.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.test.jsx
index 63417da86ebf..75ae23499c56 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel.test.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel.test.jsx
@@ -21,6 +21,7 @@ import userEvent from '@testing-library/user-event';
 import { render, screen } from 'spec/helpers/testing-library';
 import { getChartMetadataRegistry, ChartMetadata } from '@superset-ui/core';
 import ChartContainer from 'src/explore/components/ExploreChartPanel';
+import { setItem, LocalStorageKeys } from 'src/utils/localStorageHelpers';
 
 const createProps = (overrides = {}) => ({
   sliceName: 'Trend Line',
@@ -145,4 +146,15 @@ describe('ChartContainer', () => {
     render(<ChartContainer {...props} />, { useRedux: true });
     expect(screen.queryByText('Cached')).not.toBeInTheDocument();
   });
+
+  it('hide gutter when collapse panel', async () => {
+    const props = createProps();
+    setItem(LocalStorageKeys.is_datapanel_open, true);
+    const { container } = render(<ChartContainer {...props} />, {
+      useRedux: true,
+    });
+    userEvent.click(screen.getByLabelText('Collapse data panel'));
+    const gutter = container.querySelector('.gutter');
+    expect(window.getComputedStyle(gutter).display).toBe('none');
+  });
 });