fix(explore): disable resize bar when the results area is collapsed (#21366)

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
       ) : (

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',
@@ -150,4 +151,16 @@ describe('ChartContainer', () => {
     expect(await screen.findByRole('timer')).toBeInTheDocument();
     expect(screen.queryByText(/cached/i)).not.toBeInTheDocument();
   });
+
+  it('hides gutter when collapsing data panel', async () => {
+    const props = createProps();
+    setItem(LocalStorageKeys.is_datapanel_open, true);
+    const { container } = render(<ChartContainer {...props} />, {
+      useRedux: true,
+    });
+    const gutter = container.querySelector('.gutter');
+    expect(window.getComputedStyle(gutter).display).toBe('block');
+    userEvent.click(screen.getByLabelText('Collapse data panel'));
+    expect(window.getComputedStyle(gutter).display).toBe('none');
+  });
 });