chore: remove React 16.4's obsolete React imports (#28571)

Signed-off-by: hainenber <dotronghai96@gmail.com>

superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx

@@ -16,14 +16,16 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, {
+import {
   useCallback,
   useRef,
   ReactNode,
   HTMLProps,
   MutableRefObject,
   CSSProperties,
+  DragEvent,
 } from 'react';
+
 import {
   useTable,
   usePagination,
@@ -223,7 +225,7 @@ export default typedMemo(function DataTable<D extends object>({
 
   let columnBeingDragged = -1;
 
-  const onDragStart = (e: React.DragEvent) => {
+  const onDragStart = (e: DragEvent) => {
     const el = e.target as HTMLTableCellElement;
     columnBeingDragged = allColumns.findIndex(
       col => col.id === el.dataset.columnName,
@@ -231,7 +233,7 @@ export default typedMemo(function DataTable<D extends object>({
     e.dataTransfer.setData('text/plain', `${columnBeingDragged}`);
   };
 
-  const onDrop = (e: React.DragEvent) => {
+  const onDrop = (e: DragEvent) => {
     const el = e.target as HTMLTableCellElement;
     const newPosition = allColumns.findIndex(
       col => col.id === el.dataset.columnName,

superset-frontend/plugins/plugin-chart-table/src/DataTable/components/GlobalFilter.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { ComponentType, ChangeEventHandler } from 'react';
+import { memo, ComponentType, ChangeEventHandler } from 'react';
 import { Row, FilterValue } from 'react-table';
 import useAsyncState from '../utils/useAsyncState';
 
@@ -49,7 +49,7 @@ function DefaultSearchInput({ count, value, onChange }: SearchInputProps) {
   );
 }
 
-export default (React.memo as <T>(fn: T) => T)(function GlobalFilter<
+export default (memo as <T>(fn: T) => T)(function GlobalFilter<
   D extends object,
 >({
   preGlobalFilteredRows,

superset-frontend/plugins/plugin-chart-table/src/DataTable/components/Pagination.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { CSSProperties, forwardRef } from 'react';
+import { CSSProperties, forwardRef, memo, Ref } from 'react';
 
 export interface PaginationProps {
   pageCount: number; // number of pages
@@ -71,7 +71,7 @@ export function generatePageItems(
   return items;
 }
 
-export default React.memo(
+export default memo(
   forwardRef(function Pagination(
     {
       style,
@@ -80,7 +80,7 @@ export default React.memo(
       maxPageItemCount = 9,
       onPageChange,
     }: PaginationProps,
-    ref: React.Ref<HTMLDivElement>,
+    ref: Ref<HTMLDivElement>,
   ) {
     const pageItems = generatePageItems(
       pageCount,

superset-frontend/plugins/plugin-chart-table/src/DataTable/components/SelectPageSize.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import { memo } from 'react';
 import { t } from '@superset-ui/core';
 import { formatSelectOptions } from '@superset-ui/chart-controls';
 
@@ -70,7 +70,7 @@ function getOptionValue(x: SizeOption) {
   return Array.isArray(x) ? x[0] : x;
 }
 
-export default React.memo(function SelectPageSize({
+export default memo(function SelectPageSize({
   total,
   options: sizeOptions,
   current: currentSize,

superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx

@@ -16,7 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, {
+import {
+  Children,
+  cloneElement,
   useRef,
   useMemo,
   useLayoutEffect,
@@ -130,7 +132,7 @@ function StickyWrap({
   let tbody: Tbody | undefined;
   let tfoot: Tfoot | undefined;
 
-  React.Children.forEach(table.props.children, node => {
+  Children.forEach(table.props.children, node => {
     if (!node) {
       return;
     }
@@ -148,7 +150,7 @@ function StickyWrap({
     );
   }
   const columnCount = useMemo(() => {
-    const headerRows = React.Children.toArray(
+    const headerRows = Children.toArray(
       thead?.props.children,
     ).pop() as TrWithTh;
     return headerRows.props.children.length;
@@ -218,8 +220,8 @@ function StickyWrap({
   let bodyTable: ReactElement | undefined;
 
   if (needSizer) {
-    const theadWithRef = React.cloneElement(thead, { ref: theadRef });
-    const tfootWithRef = tfoot && React.cloneElement(tfoot, { ref: tfootRef });
+    const theadWithRef = cloneElement(thead, { ref: theadRef });
+    const tfootWithRef = tfoot && cloneElement(tfoot, { ref: tfootRef });
     sizerTable = (
       <div
         key="sizer"
@@ -231,7 +233,7 @@ function StickyWrap({
         }}
         role="presentation"
       >
-        {React.cloneElement(
+        {cloneElement(
           table,
           { role: 'presentation' },
           theadWithRef,
@@ -265,8 +267,8 @@ function StickyWrap({
         }}
         role="presentation"
       >
-        {React.cloneElement(
-          React.cloneElement(table, { role: 'presentation' }),
+        {cloneElement(
+          cloneElement(table, { role: 'presentation' }),
           mergeStyleProp(table, fixedTableLayout),
           colgroup,
           thead,
@@ -285,8 +287,8 @@ function StickyWrap({
         }}
         role="presentation"
       >
-        {React.cloneElement(
-          React.cloneElement(table, { role: 'presentation' }),
+        {cloneElement(
+          cloneElement(table, { role: 'presentation' }),
           mergeStyleProp(table, fixedTableLayout),
           colgroup,
           tfoot,
@@ -315,8 +317,8 @@ function StickyWrap({
         onScroll={sticky.hasHorizontalScroll ? onScroll : undefined}
         role="presentation"
       >
-        {React.cloneElement(
-          React.cloneElement(table, { role: 'presentation' }),
+        {cloneElement(
+          cloneElement(table, { role: 'presentation' }),
           mergeStyleProp(table, fixedTableLayout),
           colgroup,
           tbody,

superset-frontend/plugins/plugin-chart-table/src/DataTable/types/react-table.d.ts

@@ -42,6 +42,7 @@ import {
   HeaderProps,
   TableFooterProps,
 } from 'react-table';
+import { DragEvent } from 'react';
 
 import {
   UseStickyState,
@@ -81,14 +82,14 @@ declare module 'react-table' {
 
   // Typing from @types/react-table is incomplete
   interface TableSortByToggleProps {
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     title?: string;
-    onClick?: React.MouseEventHandler;
+    onClick?: MouseEventHandler;
   }
 
   interface TableRearrangeColumnsProps {
-    onDragStart: (e: React.DragEvent) => void;
-    onDrop: (e: React.DragEvent) => void;
+    onDragStart: (e: DragEvent) => void;
+    onDrop: (e: DragEvent) => void;
   }
 
   export interface ColumnInterface<D extends object>