feat(chart): add feature flag that displays the data pane closed by default

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 @@ def _try_json_readsha(filepath: str, length: int) -> Optional[str]:
  # 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.