feat: hide datasource legacy based on featureflag (#11371)

superset-frontend/spec/javascripts/datasource/DatasourceModal_spec.jsx

@@ -29,6 +29,7 @@ import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import waitForComponentToPaint from 'spec/helpers/waitForComponentToPaint';
 import DatasourceModal from 'src/datasource/DatasourceModal';
 import DatasourceEditor from 'src/datasource/DatasourceEditor';
+import * as featureFlags from 'src/featureFlags';
 import mockDatasource from '../../fixtures/mockDatasource';
 
 const mockStore = configureStore([thunk]);
@@ -61,12 +62,19 @@ async function mountAndWait(props = mockedProps) {
 
 describe('DatasourceModal', () => {
   let wrapper;
-
+  let isFeatureEnabledMock;
   beforeEach(async () => {
+    isFeatureEnabledMock = jest
+      .spyOn(featureFlags, 'isFeatureEnabled')
+      .mockReturnValue(true);
     fetchMock.reset();
     wrapper = await mountAndWait();
   });
 
+  afterAll(() => {
+    isFeatureEnabledMock.restore();
+  });
+
   it('renders', () => {
     expect(wrapper.find(DatasourceModal)).toExist();
   });
@@ -98,4 +106,35 @@ describe('DatasourceModal', () => {
       expected,
     ); /* eslint no-underscore-dangle: 0 */
   });
+
+  it('renders a legacy data source btn', () => {
+    expect(
+      wrapper.find('button[data-test="datasource-modal-legacy-edit"]'),
+    ).toExist();
+  });
+});
+
+describe('DatasourceModal without legacy data btn', () => {
+  let wrapper;
+  let isFeatureEnabledMock;
+  beforeEach(async () => {
+    isFeatureEnabledMock = jest
+      .spyOn(featureFlags, 'isFeatureEnabled')
+      .mockReturnValue(false);
+    fetchMock.reset();
+    wrapper = await mountAndWait();
+  });
+
+  afterAll(() => {
+    isFeatureEnabledMock.restore();
+  });
+
+  it('hides legacy data source btn', () => {
+    isFeatureEnabledMock = jest
+      .spyOn(featureFlags, 'isFeatureEnabled')
+      .mockReturnValue(false);
+    expect(
+      wrapper.find('button[data-test="datasource-modal-legacy-edit"]'),
+    ).not.toExist();
+  });
 });

superset-frontend/src/datasource/DatasourceModal.tsx

@@ -22,6 +22,7 @@ import Button from 'src/components/Button';
 import Dialog from 'react-bootstrap-dialog';
 import { styled, t, SupersetClient } from '@superset-ui/core';
 import AsyncEsmComponent from 'src/components/AsyncEsmComponent';
+import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 
 import getClientErrorObject from 'src/utils/getClientErrorObject';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
@@ -185,14 +186,20 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
       </Modal.Body>
       <Modal.Footer>
         <span className="float-left">
-          <Button
-            buttonSize="sm"
-            buttonStyle="default"
-            target="_blank"
-            href={currentDatasource.edit_url || currentDatasource.url}
-          >
-            {t('Use Legacy Datasource Editor')}
-          </Button>
+          {isFeatureEnabled(FeatureFlag.ENABLE_REACT_CRUD_VIEWS) && (
+            <Button
+              buttonSize="sm"
+              buttonStyle="default"
+              data-test="datasource-modal-legacy-edit"
+              className="m-r-5"
+              onClick={() => {
+                window.location.href =
+                  currentDatasource.edit_url || currentDatasource.url;
+              }}
+            >
+              {t('Use Legacy Datasource Editor')}
+            </Button>
+          )}
         </span>
 
         <span className="float-right">
@@ -206,7 +213,11 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
           >
             {t('Save')}
           </Button>
-          <Button buttonSize="sm" onClick={onHide}>
+          <Button
+            data-test="datasource-modal-cancel"
+            buttonSize="sm"
+            onClick={onHide}
+          >
             {t('Cancel')}
           </Button>
           <Dialog ref={dialog} />

superset-frontend/src/featureFlags.ts

@@ -28,6 +28,7 @@ export enum FeatureFlag {
   SQLLAB_BACKEND_PERSISTENCE = 'SQLLAB_BACKEND_PERSISTENCE',
   THUMBNAILS = 'THUMBNAILS',
   LISTVIEWS_DEFAULT_CARD_VIEW = 'LISTVIEWS_DEFAULT_CARD_VIEW',
+  ENABLE_REACT_CRUD_VIEWS = 'ENABLE_REACT_CRUD_VIEWS',
   DISPLAY_MARKDOWN_HTML = 'DISPLAY_MARKDOWN_HTML',
   ESCAPE_MARKDOWN_HTML = 'ESCAPE_MARKDOWN_HTML',
 }

superset/config.py

@@ -313,6 +313,7 @@ DEFAULT_FEATURE_FLAGS: Dict[str, bool] = {
     "TAGGING_SYSTEM": False,
     "SQLLAB_BACKEND_PERSISTENCE": False,
     "LISTVIEWS_DEFAULT_CARD_VIEW": False,
+    "ENABLE_REACT_CRUD_VIEWS": True,
     # When True, this flag allows display of HTML tags in Markdown components
     "DISPLAY_MARKDOWN_HTML": True,
     # When True, this escapes HTML (rather than rendering it) in Markdown components
@@ -850,7 +851,7 @@ DOCUMENTATION_ICON = None  # Recommended size: 16x16
 # Enables the replacement react views for all the FAB views (list, edit, show) with
 # designs introduced in SIP-34: https://github.com/apache/incubator-superset/issues/8976
 # This is a work in progress so not all features available in FAB have been implemented
-ENABLE_REACT_CRUD_VIEWS = True
+ENABLE_REACT_CRUD_VIEWS = DEFAULT_FEATURE_FLAGS["ENABLE_REACT_CRUD_VIEWS"]
 
 # What is the Last N days relative in the time selector to:
 # 'today' means it is midnight (00:00:00) in the local timezone