feat(chart): add feature flag that displays the data pane closes by default (#21649)

superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts

@@ -58,6 +58,7 @@ export enum FeatureFlag {
   DASHBOARD_EDIT_CHART_IN_NEW_TAB = 'DASHBOARD_EDIT_CHART_IN_NEW_TAB',
   EMBEDDABLE_CHARTS = 'EMBEDDABLE_CHARTS',
   DRILL_TO_DETAIL = 'DRILL_TO_DETAIL',
+  DATAPANEL_CLOSED_BY_DEFAULT = 'DATAPANEL_CLOSED_BY_DEFAULT',
 }
 export type ScheduleQueriesProps = {
   JSONSCHEMA: {

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

@@ -26,6 +26,7 @@ import React, {
 import { styled, t, useTheme } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import Tabs from 'src/components/Tabs';
+import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import {
   getItem,
   setItem,
@@ -96,11 +97,14 @@ export const DataTablesPane = ({
     samples: false,
   });
   const [panelOpen, setPanelOpen] = useState(
-    getItem(LocalStorageKeys.is_datapanel_open, false),
+    isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT)
+      ? false
+      : getItem(LocalStorageKeys.is_datapanel_open, false),
   );
 
   useEffect(() => {
-    setItem(LocalStorageKeys.is_datapanel_open, panelOpen);
+    if (!isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT))
+      setItem(LocalStorageKeys.is_datapanel_open, panelOpen);
   }, [panelOpen]);
 
   useEffect(() => {

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

@@ -19,12 +19,14 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
+import { FeatureFlag } from 'src/featureFlags';
 import * as copyUtils from 'src/utils/copy';
 import {
   render,
   screen,
   waitForElementToBeRemoved,
 } from 'spec/helpers/testing-library';
+import { setItem, LocalStorageKeys } from 'src/utils/localStorageHelpers';
 import { DataTablesPane } from '..';
 import { createDataTablesPaneProps } from './fixture';
 
@@ -143,4 +145,19 @@ describe('DataTablesPane', () => {
     expect(screen.queryByText('Action')).not.toBeInTheDocument();
     fetchMock.restore();
   });
+
+  test('Displaying the data pane is under featureflag', () => {
+    // @ts-ignore
+    global.featureFlags = {
+      [FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT]: true,
+    };
+    const props = createDataTablesPaneProps(0);
+    setItem(LocalStorageKeys.is_datapanel_open, true);
+    render(<DataTablesPane {...props} />, {
+      useRedux: true,
+    });
+    expect(
+      screen.queryByLabelText('Collapse data panel'),
+    ).not.toBeInTheDocument();
+  });
 });

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

@@ -32,6 +32,7 @@ import {
 import { useResizeDetector } from 'react-resize-detector';
 import { chartPropShape } from 'src/dashboard/util/propShapes';
 import ChartContainer from 'src/components/Chart/ChartContainer';
+import { FeatureFlag, isFeatureEnabled } from 'src/featureFlags';
 import {
   getItem,
   setItem,
@@ -148,10 +149,14 @@ const ExploreChartPanel = ({
     refreshRate: 300,
   });
   const [splitSizes, setSplitSizes] = useState(
-    getItem(LocalStorageKeys.chart_split_sizes, INITIAL_SIZES),
+    isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT)
+      ? INITIAL_SIZES
+      : getItem(LocalStorageKeys.chart_split_sizes, INITIAL_SIZES),
   );
   const [showSplite, setShowSplit] = useState(
-    getItem(LocalStorageKeys.is_datapanel_open, false),
+    isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT)
+      ? false
+      : getItem(LocalStorageKeys.is_datapanel_open, false),
   );
 
   const [showDatasetModal, setShowDatasetModal] = useState(false);

superset/config.py

@@ -463,6 +463,7 @@ DEFAULT_FEATURE_FLAGS: Dict[str, bool] = {
     # Enable sharing charts with embedding
     "EMBEDDABLE_CHARTS": True,
     "DRILL_TO_DETAIL": False,
+    "DATAPANEL_CLOSED_BY_DEFAULT": False,
 }
 
 # Feature flags may also be set via 'SUPERSET_FEATURE_' prefixed environment vars.