chore: remove React 16.4's obsolete React imports

docs/src/components/SectionHeader.tsx

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { ReactNode } from 'react';
 import styled from '@emotion/styled';
 import { mq } from '../utils';
 
@@ -95,7 +96,7 @@ const StyledSectionHeaderH2 = styled(StyledSectionHeader)`
 interface SectionHeaderProps {
   level: any;
   title: string;
-  subtitle?: string | React.ReactNode;
+  subtitle?: string | ReactNode;
   dark?: boolean;
 }
 

superset-frontend/.eslintrc.js

@@ -184,6 +184,16 @@ module.exports = {
         'react/no-unused-class-component-methods': 0,
         'import/no-relative-packages': 0,
         'prefer-exponentiation-operator': 0,
+        'react/react-in-jsx-scope': 0,
+        'no-restricted-syntax': [
+          'error',
+          {
+            selector:
+              "ImportDeclaration[source.value='react'] :matches(ImportDefaultSpecifier, ImportNamespaceSpecifier)",
+            message:
+              'Default React import is not required due to automatic JSX runtime in React 16.4',
+          },
+        ],
       },
       settings: {
         'import/resolver': {
@@ -242,6 +252,15 @@ module.exports = {
         'testing-library/no-container': 0,
         'testing-library/prefer-find-by': 0,
         'testing-library/no-manual-cleanup': 0,
+        'no-restricted-syntax': [
+          'error',
+          {
+            selector:
+              "ImportDeclaration[source.value='react'] :matches(ImportDefaultSpecifier, ImportNamespaceSpecifier)",
+            message:
+              'Default React import is not required due to automatic JSX runtime in React 16.4',
+          },
+        ],
       },
     },
     {
@@ -369,6 +388,7 @@ module.exports = {
     'default-case-last': 0,
     'no-promise-executor-return': 0,
     'react/no-unused-class-component-methods': 0,
+    'react/react-in-jsx-scope': 0,
   },
   ignorePatterns,
 };

superset-frontend/.storybook/preview.jsx

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
 import { jsxDecorator } from 'storybook-addon-jsx';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import { combineReducers, createStore, applyMiddleware, compose } from 'redux';

superset-frontend/babel.config.js

@@ -36,16 +36,13 @@ module.exports = {
     ],
     [
       '@babel/preset-react',
-      { development: process.env.BABEL_ENV === 'development' },
-    ],
-    '@babel/preset-typescript',
-    [
-      '@emotion/babel-preset-css-prop',
       {
-        autoLabel: 'dev-only',
-        labelFormat: '[local]',
+        development: process.env.BABEL_ENV === 'development',
+        runtime: 'automatic',
+        importSource: '@emotion/react',
       },
     ],
+    '@babel/preset-typescript',
   ],
   plugins: [
     'lodash',
@@ -58,6 +55,13 @@ module.exports = {
     // only used in packages/superset-ui-core/src/chart/components/reactify.tsx
     ['babel-plugin-typescript-to-proptypes', { loose: true }],
     'react-hot-loader/babel',
+    [
+      '@emotion/babel-plugin',
+      {
+        autoLabel: 'dev-only',
+        labelFormat: '[local]',
+      },
+    ],
   ],
   env: {
     // Setup a different config for tests as they run in node instead of a browser
@@ -74,7 +78,6 @@ module.exports = {
             targets: { node: 'current' },
           },
         ],
-        ['@emotion/babel-preset-css-prop'],
       ],
       plugins: ['babel-plugin-dynamic-import-node'],
     },

superset-frontend/package.json

@@ -80,7 +80,6 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
-    "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.4.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
@@ -222,6 +221,7 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/register": "^7.23.7",
     "@cypress/react": "^5.10.0",
+    "@emotion/babel-plugin": "^11.11.0",
     "@emotion/jest": "^11.3.0",
     "@hot-loader/react-dom": "^16.13.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",

superset-frontend/packages/superset-ui-chart-controls/src/components/CertifiedIconWithTooltip.tsx

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
 import { kebabCase } from 'lodash';
 import { t, useTheme, styled } from '@superset-ui/core';
 import Tooltip from './Tooltip';

superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnOption.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState, ReactNode, useLayoutEffect } from 'react';
+import { useState, ReactNode, useLayoutEffect, RefObject } from 'react';
 import { css, styled, SupersetTheme } from '@superset-ui/core';
 import { Tooltip } from './Tooltip';
 import { ColumnTypeLabel } from './ColumnTypeLabel/ColumnTypeLabel';
@@ -32,7 +32,7 @@ import { SQLPopover } from './SQLPopover';
 export type ColumnOptionProps = {
   column: ColumnMeta;
   showType?: boolean;
-  labelRef?: React.RefObject<any>;
+  labelRef?: RefObject<any>;
 };
 
 const StyleOverrides = styled.span`

superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx

@@ -17,7 +17,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { css, GenericDataType, styled, t } from '@superset-ui/core';
 import { ClockCircleOutlined, QuestionOutlined } from '@ant-design/icons';
 // TODO: move all icons to superset-ui/core

superset-frontend/packages/superset-ui-chart-controls/src/components/ControlHeader.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { t } from '@superset-ui/core';
 import { InfoTooltipWithTrigger } from './InfoTooltipWithTrigger';
 import { Tooltip } from './Tooltip';

superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 import { kebabCase } from 'lodash';
 import { TooltipPlacement } from 'antd/lib/tooltip';
 import { t } from '@superset-ui/core';

superset-frontend/packages/superset-ui-chart-controls/src/components/MetricOption.tsx

@@ -16,7 +16,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState, ReactNode, useLayoutEffect } from 'react';
+import { useState, ReactNode, useLayoutEffect, RefObject } from 'react';
+
 import {
   css,
   styled,
@@ -46,7 +47,7 @@ export interface MetricOptionProps {
   showFormula?: boolean;
   showType?: boolean;
   url?: string;
-  labelRef?: React.RefObject<any>;
+  labelRef?: RefObject<any>;
   shouldShowTooltip?: boolean;
 }
 

superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx

@@ -16,7 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
 import { Popover } from 'antd';
 import type { PopoverProps } from 'antd/lib/popover';
 import AceEditor from 'react-ace';

superset-frontend/packages/superset-ui-chart-controls/src/components/Select.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState, ReactNode } from 'react';
+import { useState, ReactNode } from 'react';
 import AntdSelect, { SelectProps as AntdSelectProps } from 'antd/lib/select';
 
 export const { Option }: any = AntdSelect;

superset-frontend/packages/superset-ui-chart-controls/src/components/Tooltip.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-import React from 'react';
 import { useTheme, css } from '@superset-ui/core';
 import { Tooltip as BaseTooltip } from 'antd';
 import type { TooltipProps } from 'antd/lib/tooltip';

superset-frontend/packages/superset-ui-chart-controls/src/components/labelUtils.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 
 import { css, styled, t } from '@superset-ui/core';
 import { ColumnMeta, Metric } from '@superset-ui/chart-controls';
@@ -60,7 +60,7 @@ const TooltipSection = ({
   </TooltipSectionWrapper>
 );
 
-export const isLabelTruncated = (labelRef?: React.RefObject<any>): boolean =>
+export const isLabelTruncated = (labelRef?: RefObject<any>): boolean =>
   !!(labelRef?.current?.scrollWidth > labelRef?.current?.clientWidth);
 
 export const getColumnLabelText = (column: ColumnMeta): string =>
@@ -81,7 +81,7 @@ export const getColumnTypeTooltipNode = (column: ColumnMeta): ReactNode => {
 
 export const getColumnTooltipNode = (
   column: ColumnMeta,
-  labelRef?: React.RefObject<any>,
+  labelRef?: RefObject<any>,
 ): ReactNode => {
   if (
     (!column.column_name || !column.verbose_name) &&
@@ -110,7 +110,7 @@ type MetricType = Omit<Metric, 'id'> & { label?: string };
 
 export const getMetricTooltipNode = (
   metric: MetricType,
-  labelRef?: React.RefObject<any>,
+  labelRef?: RefObject<any>,
 ): ReactNode => {
   if (
     !metric.verbose_name &&