chore: upgrade babel (#16885)

* upgrade babel versions

* upgrade babel eslint parser

* fix test

superset-frontend/.eslintrc.js

@@ -23,7 +23,7 @@ module.exports = {
     'prettier/react',
     'plugin:react-hooks/recommended',
   ],
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaFeatures: {
       experimentalObjectRestSpread: true,

superset-frontend/package.json

@@ -186,17 +186,18 @@
     "use-query-params": "^1.1.9"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
-    "@babel/compat-data": "^7.12.7",
-    "@babel/core": "^7.12.10",
-    "@babel/node": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
+    "@babel/cli": "^7.15.7",
+    "@babel/compat-data": "^7.15.0",
+    "@babel/core": "^7.15.5",
+    "@babel/eslint-parser": "^7.15.7",
+    "@babel/node": "^7.15.4",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
-    "@babel/register": "^7.12.10",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/register": "^7.15.3",
     "@emotion/jest": "^11.3.0",
     "@hot-loader/react-dom": "^16.13.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
@@ -245,7 +246,6 @@
     "@types/yargs": "12 - 15",
     "@typescript-eslint/eslint-plugin": "^4.1.0",
     "@typescript-eslint/parser": "^4.1.0",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",

superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { Preset } from '@superset-ui/core';
-import { render, cleanup, screen, act } from 'spec/helpers/testing-library';
+import { render, cleanup, screen, waitFor } from 'spec/helpers/testing-library';
 import { Provider } from 'react-redux';
 import {
   getMockStore,
@@ -64,8 +64,6 @@ const getTestId = testWithId<string>(VIZ_TYPE_CONTROL_TEST_ID, true);
  * wrapped in act(). This sufficiently act-ifies whatever side effects are going
  * on and prevents those warnings.
  */
-const waitForEffects = () =>
-  act(() => new Promise(resolve => setTimeout(resolve, 0)));
 
 describe('VizTypeControl', () => {
   new MainPreset().register();
@@ -79,7 +77,7 @@ describe('VizTypeControl', () => {
     isModalOpenInit: true,
   } as const;
 
-  const renderWrapper = async (
+  const renderWrapper = (
     props = newVizTypeControlProps,
     state: object = stateWithoutNativeFilters,
   ) => {
@@ -92,7 +90,6 @@ describe('VizTypeControl', () => {
         </DynamicPluginProvider>
       </Provider>,
     );
-    await waitForEffects();
   };
 
   afterEach(() => {
@@ -101,26 +98,26 @@ describe('VizTypeControl', () => {
   });
 
   it('Search visualization type', async () => {
-    await renderWrapper();
+    renderWrapper();
 
     const visualizations = screen.getByTestId(getTestId('viz-row'));
 
     userEvent.click(screen.getByRole('button', { name: 'ballot All charts' }));
 
+    await waitFor(() => {
       expect(visualizations).toHaveTextContent(/Time-series Table/);
-
-    const searchInputText = 'time series';
+    });
 
     // search
     userEvent.type(
       screen.getByTestId(getTestId('search-input')),
-      searchInputText,
+      'time series',
     );
-    await waitForEffects();
-
+    await waitFor(() => {
       expect(visualizations).toHaveTextContent(/Time-series Table/);
       expect(visualizations).toHaveTextContent(/Time-series Chart/);
       expect(visualizations).toHaveTextContent(/Mixed Time-Series/);
       expect(visualizations).not.toHaveTextContent(/Line Chart/);
     });
   });
+});