From ebd75366c0c7acd6d4619996c4f209b51af518e2 Mon Sep 17 00:00:00 2001
From: Victor Arbues <victor.arbues@digital.hmrc.gov.uk>
Date: Wed, 5 Oct 2022 08:34:03 +0100
Subject: [PATCH] feat(chart): add feature flag that displays the data pane
 closes by default (#21649)

---
 .../superset-ui-core/src/utils/featureFlags.ts  |  1 +
 .../DataTablesPane/DataTablesPane.tsx           |  8 ++++++--
 .../DataTablesPane/test/DataTablesPane.test.tsx | 17 +++++++++++++++++
 .../explore/components/ExploreChartPanel.jsx    |  9 +++++++--
 superset/config.py                              |  1 +
 5 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts b/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts
index a2cb7c836..ebc15e774 100644
--- a/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts
+++ b/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: {
diff --git a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
index bfba9cf98..4101911da 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
+++ b/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(() => {
diff --git a/superset-frontend/src/explore/components/DataTablesPane/test/DataTablesPane.test.tsx b/superset-frontend/src/explore/components/DataTablesPane/test/DataTablesPane.test.tsx
index 1b4436b80..a27385f51 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/test/DataTablesPane.test.tsx
+++ b/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();
+  });
 });
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
index 6d951e833..03cda337b 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx
+++ b/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);
diff --git a/superset/config.py b/superset/config.py
index 43567c01c..e505a8355 100644
--- a/superset/config.py
+++ b/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.