From 3e82f2bd9b5a34eb0aed31f65b685097275f3c46 Mon Sep 17 00:00:00 2001 From: painyjames Date: Tue, 4 Oct 2022 18:05:13 +0100 Subject: [PATCH 1/2] feat:add feature flag that displays the data pane closes by default --- .../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 a2cb7c8368834..ebc15e774a931 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 bfba9cf980011..4101911da702b 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 1b4436b80eaa9..a27385f51e9b8 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(, { + 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 6d951e83324a0..d4dbe1577d351 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 43567c01c5ea2..e505a8355c5a3 100644 --- a/superset/config.py +++ b/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. From 9179253c9e423aea187ce4a101a7aee5faac6025 Mon Sep 17 00:00:00 2001 From: painyjames Date: Tue, 4 Oct 2022 18:16:21 +0100 Subject: [PATCH 2/2] fix lint --- .../src/explore/components/ExploreChartPanel.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx index d4dbe1577d351..03cda337bb951 100644 --- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx +++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx @@ -149,13 +149,13 @@ const ExploreChartPanel = ({ refreshRate: 300, }); const [splitSizes, setSplitSizes] = useState( - isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT) ? - INITIAL_SIZES + isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT) + ? INITIAL_SIZES : getItem(LocalStorageKeys.chart_split_sizes, INITIAL_SIZES), ); const [showSplite, setShowSplit] = useState( - isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT) ? - false + isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT) + ? false : getItem(LocalStorageKeys.is_datapanel_open, false), );