refactor: Upgrade to React 17 (#31961)

superset-frontend/src/SqlLab/actions/sqlLab.test.js

@@ -21,7 +21,6 @@ import fetchMock from 'fetch-mock';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { waitFor } from '@testing-library/react';
-import * as uiCore from '@superset-ui/core';
 import * as actions from 'src/SqlLab/actions/sqlLab';
 import { LOG_EVENT } from 'src/logger/actions';
 import {
@@ -30,7 +29,7 @@ import {
   initialState,
   queryId,
 } from 'src/SqlLab/fixtures';
-import { SupersetClient } from '@superset-ui/core';
+import { SupersetClient, isFeatureEnabled } from '@superset-ui/core';
 import { ADD_TOAST } from 'src/components/MessageToasts/actions';
 import { ToastType } from '../../components/MessageToasts/types';
 
@@ -45,6 +44,11 @@ afterAll(() => {
   jest.resetAllMocks();
 });
 
+jest.mock('@superset-ui/core', () => ({
+  ...jest.requireActual('@superset-ui/core'),
+  isFeatureEnabled: jest.fn(),
+}));
+
 describe('getUpToDateQuery', () => {
   test('should return the up to date query editor state', () => {
     const outOfUpdatedQueryEditor = {
@@ -732,18 +736,14 @@ describe('async actions', () => {
       'glob:**/api/v1/database/*/table_metadata/extra/*';
     fetchMock.get(getExtraTableMetadataEndpoint, {});
 
-    let isFeatureEnabledMock;
-
     beforeEach(() => {
-      isFeatureEnabledMock = jest
-        .spyOn(uiCore, 'isFeatureEnabled')
-        .mockImplementation(
-          feature => feature === 'SQLLAB_BACKEND_PERSISTENCE',
-        );
+      isFeatureEnabled.mockImplementation(
+        feature => feature === 'SQLLAB_BACKEND_PERSISTENCE',
+      );
     });
 
     afterEach(() => {
-      isFeatureEnabledMock.mockRestore();
+      isFeatureEnabled.mockRestore();
     });
 
     afterEach(fetchMock.resetHistory);
@@ -908,11 +908,9 @@ describe('async actions', () => {
       });
       describe('with backend persistence flag off', () => {
         it('does not update the tab state in the backend', () => {
-          const backendPersistenceOffMock = jest
-            .spyOn(uiCore, 'isFeatureEnabled')
-            .mockImplementation(
-              feature => !(feature === 'SQLLAB_BACKEND_PERSISTENCE'),
-            );
+          isFeatureEnabled.mockImplementation(
+            feature => !(feature === 'SQLLAB_BACKEND_PERSISTENCE'),
+          );
 
           const store = mockStore({
             ...initialState,
@@ -926,7 +924,7 @@ describe('async actions', () => {
 
           expect(store.getActions()).toEqual(expectedActions);
           expect(fetchMock.calls(updateTabStateEndpoint)).toHaveLength(0);
-          backendPersistenceOffMock.mockRestore();
+          isFeatureEnabled.mockRestore();
         });
       });
     });

superset-frontend/src/SqlLab/components/QueryHistory/QueryHistory.test.tsx

@@ -17,8 +17,7 @@
  * under the License.
  */
 import fetchMock from 'fetch-mock';
-import * as uiCore from '@superset-ui/core';
-import { FeatureFlag, QueryState } from '@superset-ui/core';
+import { FeatureFlag, isFeatureEnabled, QueryState } from '@superset-ui/core';
 import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import QueryHistory from 'src/SqlLab/components/QueryHistory';
 import { initialState } from 'src/SqlLab/fixtures';
@@ -67,6 +66,13 @@ const fakeApiResult = {
   ],
 };
 
+jest.mock('@superset-ui/core', () => ({
+  ...jest.requireActual('@superset-ui/core'),
+  isFeatureEnabled: jest.fn(),
+}));
+
+const mockedIsFeatureEnabled = isFeatureEnabled as jest.Mock;
+
 const setup = (overrides = {}) => (
   <QueryHistory {...mockedProps} {...overrides} />
 );
@@ -82,11 +88,9 @@ test('Renders an empty state for query history', () => {
 });
 
 test('fetches the query history when the persistence mode is enabled', async () => {
-  const isFeatureEnabledMock = jest
-    .spyOn(uiCore, 'isFeatureEnabled')
-    .mockImplementation(
-      featureFlag => featureFlag === FeatureFlag.SqllabBackendPersistence,
-    );
+  const isFeatureEnabledMock = mockedIsFeatureEnabled.mockImplementation(
+    featureFlag => featureFlag === FeatureFlag.SqllabBackendPersistence,
+  );
 
   const editorQueryApiRoute = `glob:*/api/v1/query/?q=*`;
   fetchMock.get(editorQueryApiRoute, fakeApiResult);

superset-frontend/src/SqlLab/components/ShareSqlLabQuery/ShareSqlLabQuery.test.tsx

@@ -20,9 +20,12 @@ import { FC } from 'react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import fetchMock from 'fetch-mock';
-import * as uiCore from '@superset-ui/core';
 import { Provider } from 'react-redux';
-import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import {
+  supersetTheme,
+  ThemeProvider,
+  isFeatureEnabled,
+} from '@superset-ui/core';
 import { render, screen, act, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
@@ -56,7 +59,13 @@ const mockState = {
   },
 };
 const store = mockStore(mockState);
-let isFeatureEnabledMock: jest.SpyInstance;
+
+jest.mock('@superset-ui/core', () => ({
+  ...jest.requireActual('@superset-ui/core'),
+  isFeatureEnabled: jest.fn(),
+}));
+
+const mockedIsFeatureEnabled = isFeatureEnabled as jest.Mock;
 
 const standardProvider: FC = ({ children }) => (
   <ThemeProvider theme={supersetTheme}>
@@ -110,13 +119,11 @@ describe('ShareSqlLabQuery', () => {
 
   describe('via permalink api', () => {
     beforeAll(() => {
-      isFeatureEnabledMock = jest
-        .spyOn(uiCore, 'isFeatureEnabled')
-        .mockImplementation(() => true);
+      mockedIsFeatureEnabled.mockImplementation(() => true);
     });
 
     afterAll(() => {
-      isFeatureEnabledMock.mockReset();
+      mockedIsFeatureEnabled.mockReset();
     });
 
     it('calls storeQuery() with the query when getCopyUrl() is called', async () => {

superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.tsx

@@ -17,8 +17,12 @@
  * under the License.
  */
 import { FocusEventHandler } from 'react';
-import * as uiCore from '@superset-ui/core';
 import { act } from 'react-dom/test-utils';
+import {
+  isFeatureEnabled,
+  getExtensionsRegistry,
+  FeatureFlag,
+} from '@superset-ui/core';
 import { fireEvent, render, waitFor } from 'spec/helpers/testing-library';
 import fetchMock from 'fetch-mock';
 import reducers from 'spec/helpers/reducerIndex';
@@ -32,7 +36,6 @@ import {
 import SqlEditorLeftBar from 'src/SqlLab/components/SqlEditorLeftBar';
 import ResultSet from 'src/SqlLab/components/ResultSet';
 import { api } from 'src/hooks/apiResources/queryApi';
-import { getExtensionsRegistry, FeatureFlag } from '@superset-ui/core';
 import setupExtensions from 'src/setup/setupExtensions';
 import type { Action, Middleware, Store } from 'redux';
 import SqlEditor, { Props } from '.';
@@ -102,6 +105,12 @@ const mockInitialState = {
   },
 };
 
+jest.mock('@superset-ui/core', () => ({
+  ...jest.requireActual('@superset-ui/core'),
+  isFeatureEnabled: jest.fn(),
+}));
+const mockIsFeatureEnabled = isFeatureEnabled as jest.Mock;
+
 const setup = (props: Props, store: Store) =>
   render(<SqlEditor {...props} />, {
     useRedux: true,
@@ -317,19 +326,13 @@ describe('SqlEditor', () => {
   });
 
   describe('with EstimateQueryCost enabled', () => {
-    let isFeatureEnabledMock: jest.MockInstance<
-      boolean,
-      [feature: FeatureFlag]
-    >;
     beforeEach(() => {
-      isFeatureEnabledMock = jest
-        .spyOn(uiCore, 'isFeatureEnabled')
-        .mockImplementation(
-          featureFlag => featureFlag === uiCore.FeatureFlag.EstimateQueryCost,
-        );
+      mockIsFeatureEnabled.mockImplementation(
+        featureFlag => featureFlag === FeatureFlag.EstimateQueryCost,
+      );
     });
     afterEach(() => {
-      isFeatureEnabledMock.mockClear();
+      mockIsFeatureEnabled.mockClear();
     });
 
     it('sends the catalog and schema to the endpoint', async () => {
@@ -399,20 +402,13 @@ describe('SqlEditor', () => {
   });
 
   describe('with SqllabBackendPersistence enabled', () => {
-    let isFeatureEnabledMock: jest.MockInstance<
-      boolean,
-      [feature: FeatureFlag]
-    >;
     beforeEach(() => {
-      isFeatureEnabledMock = jest
-        .spyOn(uiCore, 'isFeatureEnabled')
-        .mockImplementation(
-          featureFlag =>
-            featureFlag === uiCore.FeatureFlag.SqllabBackendPersistence,
-        );
+      mockIsFeatureEnabled.mockImplementation(
+        featureFlag => featureFlag === FeatureFlag.SqllabBackendPersistence,
+      );
     });
     afterEach(() => {
-      isFeatureEnabledMock.mockClear();
+      mockIsFeatureEnabled.mockClear();
     });
 
     it('should render loading state when its Editor is not loaded', async () => {

superset-frontend/src/SqlLab/components/SqlEditor/index.tsx

@@ -485,20 +485,28 @@ const SqlEditor: FC<Props> = ({
           const cursorPosition = editor.getCursorPosition();
           const totalLine = session.getLength();
           const currentRow = editor.getFirstVisibleRow();
-          let end = editor.find(';', {
+          const semicolonEnd = editor.find(';', {
             backwards: false,
             skipCurrent: true,
-          })?.end;
+          });
+          let end;
+          if (semicolonEnd) {
+            ({ end } = semicolonEnd);
+          }
           if (!end || end.row < cursorPosition.row) {
             end = {
               row: totalLine + 1,
               column: 0,
             };
           }
-          let start = editor.find(';', {
+          const semicolonStart = editor.find(';', {
             backwards: true,
             skipCurrent: true,
-          })?.end;
+          });
+          let start;
+          if (semicolonStart) {
+            start = semicolonStart.end;
+          }
           let currentLine = start?.row;
           if (
             !currentLine ||

superset-frontend/src/SqlLab/components/TableElement/TableElement.test.tsx

@@ -18,12 +18,18 @@
  */
 import { isValidElement } from 'react';
 import fetchMock from 'fetch-mock';
-import * as uiCore from '@superset-ui/core';
-import { FeatureFlag } from '@superset-ui/core';
+import { FeatureFlag, isFeatureEnabled } from '@superset-ui/core';
 import TableElement, { Column } from 'src/SqlLab/components/TableElement';
 import { table, initialState } from 'src/SqlLab/fixtures';
 import { render, waitFor, fireEvent } from 'spec/helpers/testing-library';
 
+jest.mock('@superset-ui/core', () => ({
+  ...jest.requireActual('@superset-ui/core'),
+  isFeatureEnabled: jest.fn(),
+}));
+
+const mockedIsFeatureEnabled = isFeatureEnabled as jest.Mock;
+
 jest.mock('src/components/Loading', () => () => (
   <div data-test="mock-loading" />
 ));
@@ -143,11 +149,9 @@ test('sorts columns', async () => {
 test('removes the table', async () => {
   const updateTableSchemaEndpoint = 'glob:*/tableschemaview/*';
   fetchMock.delete(updateTableSchemaEndpoint, {});
-  const isFeatureEnabledMock = jest
-    .spyOn(uiCore, 'isFeatureEnabled')
-    .mockImplementation(
-      featureFlag => featureFlag === FeatureFlag.SqllabBackendPersistence,
-    );
+  mockedIsFeatureEnabled.mockImplementation(
+    featureFlag => featureFlag === FeatureFlag.SqllabBackendPersistence,
+  );
   const { getAllByTestId, getByText } = render(
     <TableElement {...mockedProps} />,
     {
@@ -163,7 +167,7 @@ test('removes the table', async () => {
   await waitFor(() =>
     expect(fetchMock.calls(updateTableSchemaEndpoint)).toHaveLength(1),
   );
-  isFeatureEnabledMock.mockClear();
+  mockedIsFeatureEnabled.mockClear();
 });
 
 test('fetches table metadata when expanded', async () => {