refactor(wip): Upgrade to React 18

superset-frontend/babel.config.js

@@ -54,7 +54,6 @@ module.exports = {
     ['@babel/plugin-transform-runtime', { corejs: 3 }],
     // 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',
       {

superset-frontend/package.json

@@ -122,7 +122,7 @@
     "@visx/scale": "^3.5.0",
     "@visx/tooltip": "^3.0.0",
     "@visx/xychart": "^3.5.1",
-    "antd": "^5.24.6",
+    "antd": "^5.26.3",
     "chrono-node": "^2.7.8",
     "classnames": "^2.2.5",
     "content-disposition": "^0.5.4",
@@ -164,15 +164,17 @@
     "ol": "^7.5.2",
     "polished": "^4.3.1",
     "prop-types": "^15.8.1",
+    "query-string": "^7.1.3",
     "re-resizable": "^6.10.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
+    "react-ace": "^10.1.0",
     "react-checkbox-tree": "^1.8.0",
     "react-diff-viewer-continued": "^3.4.0",
-    "react-dnd": "^11.1.3",
+    "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^11.1.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
     "react-google-recaptcha": "^3.1.0",
-    "react-hot-loader": "^4.13.1",
     "react-intersection-observer": "^9.16.0",
     "react-json-tree": "^0.20.0",
     "react-lines-ellipsis": "^0.16.1",
@@ -222,10 +224,8 @@
     "@babel/runtime": "^7.28.2",
     "@babel/runtime-corejs3": "^7.28.2",
     "@babel/types": "^7.26.9",
-    "@cypress/react": "^8.0.2",
     "@emotion/babel-plugin": "^11.13.5",
     "@emotion/jest": "^11.13.0",
-    "@hot-loader/react-dom": "^17.0.2",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
     "@mihkeleidast/storybook-addon-source": "^1.0.1",
     "@storybook/addon-actions": "8.1.11",
@@ -240,8 +240,7 @@
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^12.8.3",
     "@types/content-disposition": "^0.5.9",
     "@types/dom-to-image": "^2.6.7",
@@ -251,8 +250,9 @@
     "@types/math-expression-evaluator": "^1.3.3",
     "@types/mousetrap": "^1.6.15",
     "@types/node": "^22.12.0",
-    "@types/react": "^17.0.83",
-    "@types/react-dom": "^17.0.26",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/react-gravatar": "^2.6.14",
     "@types/react-json-tree": "^0.6.11",
     "@types/react-loadable": "^5.5.11",
     "@types/react-redux": "^7.1.10",
@@ -354,6 +354,10 @@
     "npm": "^10.8.1"
   },
   "overrides": {
+    "react-sortable-hoc": {
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0"
+    },
     "core-js": "^3.38.1",
     "d3-color": "^3.1.0",
     "puppeteer": "^22.4.1",

superset-frontend/packages/superset-core/package.json

@@ -16,14 +16,14 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@types/react": "^17.0.83",
+    "@types/react": "^18.2.0",
     "install": "^0.13.0",
     "npm": "^11.1.0",
     "typescript": "^5.0.0"
   },
   "peerDependencies": {
     "antd": "^5.24.6",
-    "react": "^17.0.2"
+    "react": "^18.0.0"
   },
   "scripts": {
     "build": "babel src --out-dir lib --extensions \".ts,.tsx\" && tsc --emitDeclarationOnly",

superset-frontend/packages/superset-ui-chart-controls/package.json

@@ -35,15 +35,14 @@
     "@superset-ui/core": "*",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/jest-dom": "*",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "*",
+    "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "*",
     "ace-builds": "^1.4.14",
     "brace": "^0.11.1",
     "memoize-one": "^5.1.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-ace": "^10.1.0",
-    "react-dom": "^17.0.2"
+    "react-dom": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

superset-frontend/packages/superset-ui-core/package.json

@@ -96,16 +96,15 @@
     "@emotion/styled": "^11.14.1",
     "@testing-library/dom": "^8.20.1",
     "@testing-library/jest-dom": "*",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "*",
+    "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "*",
     "@types/react": "*",
     "@types/react-loadable": "*",
     "@types/react-window": "^1.8.8",
     "@types/tinycolor2": "*",
     "nanoid": "^5.0.9",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-loadable": "^5.5.0",
     "tinycolor2": "*"
   },

superset-frontend/packages/superset-ui-core/src/components/AsyncAceEditor/useJsonValidation.test.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useJsonValidation } from './useJsonValidation';
 
 describe('useJsonValidation', () => {

superset-frontend/packages/superset-ui-core/src/components/AsyncEsmComponent/index.tsx

@@ -19,12 +19,12 @@
 import {
   useEffect,
   useState,
-  RefObject,
   forwardRef,
   ComponentType,
   ForwardRefExoticComponent,
   PropsWithoutRef,
   RefAttributes,
+  ForwardedRef,
 } from 'react';
 
 import { Loading } from '../Loading';
@@ -54,7 +54,7 @@ function DefaultPlaceholder({
  * first (if provided) and re-render once import is complete.
  */
 export function AsyncEsmComponent<
-  P = PlaceholderProps,
+  P = Record<string, unknown>,
   M = ComponentType<P> | { default: ComponentType<P> },
 >(
   /**
@@ -98,8 +98,8 @@ export function AsyncEsmComponent<
   };
 
   const AsyncComponent: AsyncComponent = forwardRef(function AsyncComponent(
-    props: FullProps,
-    ref: RefObject<ComponentType<FullProps>>,
+    props: PropsWithoutRef<FullProps>,
+    ref: ForwardedRef<ComponentType<FullProps>>,
   ) {
     const [loaded, setLoaded] = useState(component !== undefined);
     useEffect(() => {

superset-frontend/packages/superset-ui-core/src/components/Button/types.ts

@@ -24,7 +24,6 @@ import type {
   ButtonVariantType,
   ButtonColorType,
 } from 'antd/es/button';
-import { IconType } from '@superset-ui/core/components/Icons/types';
 import type { TooltipPlacement } from '../Tooltip/types';
 
 export type { AntdButtonProps, ButtonType, ButtonVariantType, ButtonColorType };
@@ -49,5 +48,4 @@ export type ButtonProps = Omit<AntdButtonProps, 'css'> & {
   buttonStyle?: ButtonStyle;
   cta?: boolean;
   showMarginRight?: boolean;
-  icon?: IconType;
 };

superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/DropdownContainer.stories.tsx

@@ -65,7 +65,7 @@ export const Component = (props: DropdownContainerProps) => {
   const [overflowingState, setOverflowingState] = useState<OverflowingState>();
   const containerRef = useRef<DropdownRef>(null);
   const onOverflowingStateChange = useCallback(
-    value => {
+    (value: OverflowingState) => {
       if (!isEqual(overflowingState, value)) {
         setItems(generateItems(value));
         setOverflowingState(value);

superset-frontend/packages/superset-ui-core/src/components/DropdownContainer/types.ts

@@ -17,7 +17,6 @@
  * under the License.
  */
 import type { CSSProperties, ReactElement, RefObject, ReactNode } from 'react';
-import { IconType } from '../Icons';
 
 /**
  * Container item.
@@ -70,7 +69,7 @@ export interface DropdownContainerProps {
   /**
    * Icon of the dropdown trigger.
    */
-  dropdownTriggerIcon?: IconType;
+  dropdownTriggerIcon?: ReactNode;
   /**
    * Text of the dropdown trigger.
    */

superset-frontend/packages/superset-ui-core/src/components/EmptyState/types.ts

@@ -17,7 +17,6 @@
  * under the License.
  */
 import type { ReactNode, SyntheticEvent } from 'react';
-import type { IconType } from '@superset-ui/core/components';
 
 export type EmptyStateSize = 'small' | 'medium' | 'large';
 
@@ -26,7 +25,7 @@ export type EmptyStateProps = {
   description?: ReactNode;
   image?: ReactNode | string;
   buttonText?: ReactNode;
-  buttonIcon?: IconType;
+  buttonIcon?: ReactNode;
   buttonAction?: (event: SyntheticEvent) => void;
   size?: EmptyStateSize;
   children?: ReactNode;

superset-frontend/packages/superset-ui-core/src/components/Form/Form.tsx

@@ -16,17 +16,4 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Form as AntdForm } from 'antd';
-import { FormProps } from './types';
-
-function CustomForm(props: FormProps) {
-  return <AntdForm {...props} />;
-}
-
-export const Form = Object.assign(CustomForm, {
-  useForm: AntdForm.useForm,
-  Item: AntdForm.Item,
-  List: AntdForm.List,
-  ErrorList: AntdForm.ErrorList,
-  Provider: AntdForm.Provider,
-});
+export { Form } from 'antd';

superset-frontend/packages/superset-ui-core/src/components/Form/types.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export type { FormProps, FormInstance, FormItemProps } from 'antd/es/form';
+export type { FormProps, FormInstance, FormItemProps } from 'antd';
 
 export interface LabeledErrorBoundInputProps {
   label?: string;

superset-frontend/packages/superset-ui-core/src/components/ListViewCard/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { styled, useTheme, css } from '@superset-ui/core';
 import { Skeleton } from '../Skeleton';
 import { Card } from '../Card';
@@ -134,7 +134,7 @@ const ThinSkeleton = styled(Skeleton)`
 
 const paragraphConfig = { rows: 1, width: 150 };
 
-const AnchorLink: FC<LinkProps> = ({ to, children }) => (
+const AnchorLink: FC<PropsWithChildren<LinkProps>> = ({ to, children }) => (
   <a href={to}>{children}</a>
 );
 

superset-frontend/packages/superset-ui-core/src/components/ListViewCard/types.ts

@@ -16,7 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import type { ReactNode, ComponentType, ReactElement } from 'react';
+import type {
+  ReactNode,
+  ComponentType,
+  ReactElement,
+  PropsWithChildren,
+} from 'react';
 import type { BackgroundPosition } from './ImageLoader';
 
 export interface LinkProps {
@@ -27,7 +32,7 @@ export interface ListViewCardProps {
   title?: ReactNode;
   subtitle?: ReactNode;
   url?: string;
-  linkComponent?: ComponentType<LinkProps>;
+  linkComponent?: ComponentType<PropsWithChildren<LinkProps>>;
   imgURL?: string | null;
   imgFallbackURL?: string;
   imgPosition?: BackgroundPosition;

superset-frontend/packages/superset-ui-core/src/components/MetadataBar/MetadataBar.tsx

@@ -194,7 +194,7 @@ const MetadataBar = ({ items, tooltipPlacement = 'top' }: MetadataBarProps) => {
   }
 
   const onResize = useCallback(
-    width => {
+    (width: number) => {
       // Calculates the breakpoint width to collapse the bar.
       // The last item does not have a space, so we subtract SPACE_BETWEEN_ITEMS from the total.
       const breakpoint =

superset-frontend/packages/superset-ui-core/src/components/Modal/FormModal.tsx

@@ -54,7 +54,7 @@ export function FormModal({
   }, [onSave, resetForm]);
 
   const handleFormSubmit = useCallback(
-    async values => {
+    async (values: Object) => {
       try {
         setIsSaving(true);
         await formSubmitHandler(values);
@@ -113,7 +113,7 @@ export function FormModal({
         onValuesChange={onFormChange}
         onFieldsChange={onFormChange}
       >
-        {typeof children === 'function' ? children(form) : children}
+        {children}
       </Form>
     </Modal>
   );

superset-frontend/packages/superset-ui-core/src/components/TableCollection/TableCollection.test.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { render, screen } from '@superset-ui/core/spec';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { TableInstance, useTable } from 'react-table';
 import TableCollection from '.';
 

superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx

@@ -33,6 +33,7 @@ import {
   UseResizeColumnsColumnOptions,
   UseResizeColumnsColumnProps,
 } from 'react-table';
+import { ColumnsType } from 'antd/es/table';
 
 import { SortOrder } from '../Table';
 
@@ -87,11 +88,11 @@ export function mapColumns<T extends object>(
   columns: EnhancedColumnInstance<T>[],
   headerGroups: EnhancedHeaderGroup<T>[],
   columnsForWrapText?: string[],
-) {
+): ColumnsType<object> {
   return columns.map(column => {
     const { isSorted, isSortedDesc } = getSortingInfo(headerGroups, column.id);
     return {
-      title: column.Header,
+      title: column.Header as ReactNode,
       dataIndex: column.id?.includes('.') ? column.id.split('.') : column.id,
       hidden: column.hidden,
       key: column.id,
@@ -121,7 +122,7 @@ export function mapColumns<T extends object>(
             column,
           });
         }
-        return val;
+        return String(val);
       },
       className: column.className,
     };

superset-frontend/packages/superset-ui-core/src/components/TruncatedList/index.tsx

@@ -95,8 +95,8 @@ const StyledPlus = styled.span`
 
 export default function TruncatedList<ListItemType>({
   items,
-  renderVisibleItem = item => item,
-  renderTooltipItem = item => item,
+  renderVisibleItem = item => item as ReactNode,
+  renderTooltipItem = item => item as ReactNode,
   getKey = item => item as unknown as Key,
   maxLinks = 20,
 }: TruncatedListProps<ListItemType>) {

superset-frontend/packages/superset-ui-core/src/hooks/useChangeEffect/useChangeEffect.test.ts

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { useChangeEffect } from './useChangeEffect';
 
 test('call callback the first time with undefined and value', () => {