test: drop jest-fail-on-console

Now that the surfaced React 18 / React 19 deprecation warnings have been fixed at their source, the global fail-on-console no longer adds signal — remove the setup and the dependency. ThemeController.test still installs its own console.warn / console.error spies in beforeEach to assert what the LocalStorageAdapter logs; updated the comment to reflect that they're no longer working around a wrapper.
test(react18): drive reorder drag tests with react-dnd-test-backend
2026-05-15 12:55:08 +00:00 · 2026-05-15 10:35:09 +03:00 · 2026-05-14 21:36:35 +03:00 · 2026-05-14 20:28:10 +03:00 · 2026-05-14 19:28:37 +03:00 · 2026-05-14 19:09:43 +03:00
62 changed files with 563 additions and 396 deletions
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -120,13 +120,13 @@
        "pretty-ms": "^9.3.0",
        "query-string": "9.3.1",
        "re-resizable": "^6.11.2",
-        "react": "^18.2.0",
+        "react": "^18.3.0",
        "react-arborist": "^3.5.0",
        "react-checkbox-tree": "^1.8.0",
        "react-diff-viewer-continued": "^4.2.2",
        "react-dnd": "^11.1.3",
        "react-dnd-html5-backend": "^11.1.3",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.0",
        "react-google-recaptcha": "^3.1.0",
        "react-intersection-observer": "^10.0.3",
        "react-json-tree": "^0.20.0",
@@ -209,8 +209,8 @@
        "@types/json-bigint": "^1.0.4",
        "@types/mousetrap": "^1.6.15",
        "@types/node": "^25.6.0",
-        "@types/react": "^18.2.0",
-        "@types/react-dom": "^18.2.0",
+        "@types/react": "^18.3.0",
+        "@types/react-dom": "^18.3.0",
        "@types/react-loadable": "^5.5.11",
        "@types/react-redux": "^7.1.10",
        "@types/react-resizable": "^3.0.8",
@@ -274,6 +274,7 @@
        "prettier": "3.8.3",
        "prettier-plugin-packagejson": "^3.0.2",
        "process": "^0.11.10",
+        "react-dnd-test-backend": "^11.1.3",
        "react-refresh": "^0.18.0",
        "react-resizable": "^3.1.3",
        "redux-mock-store": "^1.5.4",
@@ -41224,6 +41225,16 @@
        "dnd-core": "^11.1.3"
      }
    },
+    "node_modules/react-dnd-test-backend": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/react-dnd-test-backend/-/react-dnd-test-backend-11.1.3.tgz",
+      "integrity": "sha512-5qFm+NI2GdWIUfiYun0A8Gv0xjbq0NGOPS+f6z3x/3nTuliApjmqcM1lfTgePoz1FDG47ZofF58N8y96If62+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dnd-core": "^11.1.3"
+      }
+    },
    "node_modules/react-docgen": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-7.1.1.tgz",
@@ -50003,8 +50014,8 @@
        "jed": "^1.1.1",
        "lodash": "^4.18.1",
        "nanoid": "^5.0.9",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0",
        "react-loadable": "^5.5.0",
        "tinycolor2": "*"
      }
@@ -50030,9 +50041,9 @@
        "ace-builds": "^1.4.14",
        "brace": "^0.11.1",
        "memoize-one": "^5.1.1",
-        "react": "^18.2.0",
+        "react": "^18.3.0",
        "react-ace": "^10.1.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.3.0"
      }
    },
    "packages/superset-ui-core": {
@@ -50117,8 +50128,8 @@
        "@types/tinycolor2": "*",
        "antd": "^5.26.0",
        "nanoid": "^5.0.9",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0",
        "react-loadable": "^5.5.0",
        "tinycolor2": "*"
      }
@@ -50283,7 +50294,7 @@
        "@emotion/react": "^11.4.1",
        "@superset-ui/chart-controls": "*",
        "@superset-ui/core": "*",
-        "react": "^18.2.0"
+        "react": "^18.3.0"
      }
    },
    "plugins/legacy-plugin-chart-calendar/node_modules/d3-array": {
@@ -50344,7 +50355,7 @@
        "@apache-superset/core": "*",
        "@superset-ui/chart-controls": "*",
        "@superset-ui/core": "*",
-        "react": "^18.2.0"
+        "react": "^18.3.0"
      }
    },
    "plugins/legacy-plugin-chart-country-map/node_modules/d3-array": {
@@ -50372,7 +50383,7 @@
        "@apache-superset/core": "*",
        "@superset-ui/chart-controls": "*",
        "@superset-ui/core": "*",
-        "react": "^18.2.0"
+        "react": "^18.3.0"
      }
    },
    "plugins/legacy-plugin-chart-horizon/node_modules/d3-array": {
@@ -50406,7 +50417,7 @@
        "@apache-superset/core": "*",
        "@superset-ui/chart-controls": "*",
        "@superset-ui/core": "*",
-        "react": "^18.2.0"
+        "react": "^18.3.0"
      }
    },
    "plugins/legacy-plugin-chart-parallel-coordinates": {
@@ -50421,7 +50432,7 @@
        "@apache-superset/core": "*",
        "@superset-ui/chart-controls": "*",
        "@superset-ui/core": "*",
-        "react": "^18.2.0"
+        "react": "^18.3.0"
      }
    },
    "plugins/legacy-plugin-chart-partition": {
@@ -50439,8 +50450,8 @@
        "@superset-ui/core": "*",
        "@testing-library/jest-dom": "*",
        "@testing-library/react": "^14.0.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0"
      }
    },
    "plugins/legacy-plugin-chart-rose": {
@@ -50457,7 +50468,7 @@
        "@emotion/react": "^11.4.1",
        "@superset-ui/chart-controls": "*",
        "@superset-ui/core": "*",
-        "react": "^18.2.0"
+        "react": "^18.3.0"
      }
    },
    "plugins/legacy-plugin-chart-world-map": {
@@ -50475,7 +50486,7 @@
        "@apache-superset/core": "*",
        "@superset-ui/chart-controls": "*",
        "@superset-ui/core": "*",
-        "react": "^18.2.0"
+        "react": "^18.3.0"
      }
    },
    "plugins/legacy-plugin-chart-world-map/node_modules/d3-array": {
@@ -50562,7 +50573,7 @@
        "@superset-ui/chart-controls": "*",
        "@superset-ui/core": "*",
        "dayjs": "^1.11.19",
-        "react": "^18.2.0"
+        "react": "^18.3.0"
      }
    },
    "plugins/plugin-chart-ag-grid-table": {
@@ -50590,8 +50601,8 @@
        "@testing-library/react": "^14.0.0",
        "@testing-library/user-event": "*",
        "@types/react": "*",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0"
      }
    },
    "plugins/plugin-chart-ag-grid-table/node_modules/d3-array": {
@@ -50635,8 +50646,8 @@
        "geostyler-wfs-parser": "^3.0.1",
        "ol": "^10.8.0",
        "polished": "*",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0"
      }
    },
    "plugins/plugin-chart-echarts": {
@@ -50658,7 +50669,7 @@
        "dayjs": "^1.11.19",
        "echarts": "*",
        "memoize-one": "*",
-        "react": "^18.2.0"
+        "react": "^18.3.0"
      }
    },
    "plugins/plugin-chart-echarts/node_modules/acorn": {
@@ -50716,9 +50727,9 @@
        "dayjs": "^1.11.19",
        "handlebars": "^4.7.8",
        "lodash": "^4.18.1",
-        "react": "^18.2.0",
+        "react": "^18.3.0",
        "react-ace": "^10.1.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.3.0"
      }
    },
    "plugins/plugin-chart-handlebars/node_modules/just-handlebars-helpers": {
@@ -50749,8 +50760,8 @@
        "@superset-ui/core": "*",
        "lodash": "^4.18.1",
        "prop-types": "*",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0"
      }
    },
    "plugins/plugin-chart-point-cluster-map": {
@@ -50768,8 +50779,8 @@
        "@apache-superset/core": "*",
        "@superset-ui/chart-controls": "*",
        "@superset-ui/core": "*",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0"
      }
    },
    "plugins/plugin-chart-point-cluster-map/node_modules/react-map-gl": {
@@ -50822,8 +50833,8 @@
        "@testing-library/user-event": "*",
        "@types/react": "*",
        "match-sorter": "^8.2.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0"
      }
    },
    "plugins/plugin-chart-table/node_modules/d3-array": {
@@ -50862,7 +50873,7 @@
        "@superset-ui/core": "*",
        "@types/lodash": "*",
        "@types/react": "*",
-        "react": "^18.2.0"
+        "react": "^18.3.0"
      }
    },
    "plugins/plugin-chart-word-cloud/node_modules/@types/d3-scale": {
@@ -50893,7 +50904,7 @@
        "@deck.gl/extensions": "~9.2.9",
        "@deck.gl/geo-layers": "~9.2.5",
        "@deck.gl/layers": "~9.2.5",
-        "@deck.gl/mapbox": "^9.3.2",
+        "@deck.gl/mapbox": "~9.3.2",
        "@deck.gl/mesh-layers": "~9.2.5",
        "@luma.gl/constants": "~9.2.5",
        "@luma.gl/core": "~9.2.5",
@@ -50931,8 +50942,8 @@
        "@superset-ui/core": "*",
        "dayjs": "^1.11.19",
        "mapbox-gl": ">=1.0.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0"
      },
      "peerDependenciesMeta": {
        "mapbox-gl": {
--- a/superset-frontend/package.json
+++ b/superset-frontend/package.json
@@ -109,20 +109,20 @@
    "@emotion/cache": "^11.4.0",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.1",
+    "@fontsource/fira-code": "^5.2.7",
    "@fontsource/ibm-plex-mono": "^5.2.7",
+    "@fontsource/inter": "^5.2.8",
    "@googleapis/sheets": "^13.0.1",
+    "@great-expectations/jsonforms-antd-renderers": "^2.2.10",
+    "@jsonforms/core": "^3.7.0",
+    "@jsonforms/react": "^3.7.0",
+    "@jsonforms/vanilla-renderers": "^3.7.0",
    "@luma.gl/constants": "~9.2.5",
    "@luma.gl/core": "~9.2.5",
    "@luma.gl/engine": "~9.2.5",
    "@luma.gl/gltf": "~9.2.5",
    "@luma.gl/shadertools": "~9.2.5",
    "@luma.gl/webgl": "~9.2.5",
-    "@fontsource/fira-code": "^5.2.7",
-    "@fontsource/inter": "^5.2.8",
-    "@great-expectations/jsonforms-antd-renderers": "^2.2.10",
-    "@jsonforms/core": "^3.7.0",
-    "@jsonforms/react": "^3.7.0",
-    "@jsonforms/vanilla-renderers": "^3.7.0",
    "@reduxjs/toolkit": "^1.9.3",
    "@rjsf/antd": "^5.24.13",
    "@rjsf/core": "^5.24.13",
@@ -140,16 +140,16 @@
    "@superset-ui/legacy-plugin-chart-partition": "file:./plugins/legacy-plugin-chart-partition",
    "@superset-ui/legacy-plugin-chart-rose": "file:./plugins/legacy-plugin-chart-rose",
    "@superset-ui/legacy-plugin-chart-world-map": "file:./plugins/legacy-plugin-chart-world-map",
-    "@superset-ui/preset-chart-deckgl": "file:./plugins/preset-chart-deckgl",
    "@superset-ui/legacy-preset-chart-nvd3": "file:./plugins/legacy-preset-chart-nvd3",
    "@superset-ui/plugin-chart-ag-grid-table": "file:./plugins/plugin-chart-ag-grid-table",
    "@superset-ui/plugin-chart-cartodiagram": "file:./plugins/plugin-chart-cartodiagram",
    "@superset-ui/plugin-chart-echarts": "file:./plugins/plugin-chart-echarts",
-    "@superset-ui/plugin-chart-point-cluster-map": "file:./plugins/plugin-chart-point-cluster-map",
    "@superset-ui/plugin-chart-handlebars": "file:./plugins/plugin-chart-handlebars",
    "@superset-ui/plugin-chart-pivot-table": "file:./plugins/plugin-chart-pivot-table",
+    "@superset-ui/plugin-chart-point-cluster-map": "file:./plugins/plugin-chart-point-cluster-map",
    "@superset-ui/plugin-chart-table": "file:./plugins/plugin-chart-table",
    "@superset-ui/plugin-chart-word-cloud": "file:./plugins/plugin-chart-word-cloud",
+    "@superset-ui/preset-chart-deckgl": "file:./plugins/preset-chart-deckgl",
    "@superset-ui/switchboard": "file:./packages/superset-ui-switchboard",
    "@types/d3-format": "^3.0.1",
    "@types/d3-selection": "^3.0.11",
@@ -201,13 +201,13 @@
    "pretty-ms": "^9.3.0",
    "query-string": "9.3.1",
    "re-resizable": "^6.11.2",
-    "react": "^18.2.0",
+    "react": "^18.3.0",
    "react-arborist": "^3.5.0",
    "react-checkbox-tree": "^1.8.0",
    "react-diff-viewer-continued": "^4.2.2",
    "react-dnd": "^11.1.3",
    "react-dnd-html5-backend": "^11.1.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.0",
    "react-google-recaptcha": "^3.1.0",
    "react-intersection-observer": "^10.0.3",
    "react-json-tree": "^0.20.0",
@@ -290,8 +290,8 @@
    "@types/json-bigint": "^1.0.4",
    "@types/mousetrap": "^1.6.15",
    "@types/node": "^25.6.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
    "@types/react-loadable": "^5.5.11",
    "@types/react-redux": "^7.1.10",
    "@types/react-resizable": "^3.0.8",
@@ -355,6 +355,7 @@
    "prettier": "3.8.3",
    "prettier-plugin-packagejson": "^3.0.2",
    "process": "^0.11.10",
+    "react-dnd-test-backend": "^11.1.3",
    "react-refresh": "^0.18.0",
    "react-resizable": "^3.1.3",
    "redux-mock-store": "^1.5.4",
--- a/superset-frontend/packages/superset-core/package.json
+++ b/superset-frontend/packages/superset-core/package.json
@@ -97,8 +97,8 @@
    "@fontsource/ibm-plex-mono": "^5.2.7",
    "@fontsource/inter": "^5.2.6",
    "nanoid": "^5.0.9",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
    "react-loadable": "^5.5.0",
    "tinycolor2": "*",
    "lodash": "^4.18.1",
--- a/superset-frontend/packages/superset-core/src/utils/logging.test.ts
+++ b/superset-frontend/packages/superset-core/src/utils/logging.test.ts
@@ -50,20 +50,24 @@ test('should pipe to `console` methods', () => {
 });

 test('should use noop functions when console unavailable', () => {
+  const originalConsole = window.console;
  Object.assign(window, { console: undefined });
-  const { logging } = require('@apache-superset/core/utils');
+  try {
+    const { logging } = require('@apache-superset/core/utils');

-  expect(() => {
-    logging.debug();
-    logging.log();
-    logging.info();
-    logging.warn('warn');
-    logging.error('error');
-    logging.trace();
-    logging.table([
-      [1, 2],
-      [3, 4],
-    ]);
-  }).not.toThrow();
-  Object.assign(window, { console });
+    expect(() => {
+      logging.debug();
+      logging.log();
+      logging.info();
+      logging.warn('warn');
+      logging.error('error');
+      logging.trace();
+      logging.table([
+        [1, 2],
+        [3, 4],
+      ]);
+    }).not.toThrow();
+  } finally {
+    Object.assign(window, { console: originalConsole });
+  }
 });
--- a/superset-frontend/packages/superset-ui-chart-controls/package.json
+++ b/superset-frontend/packages/superset-ui-chart-controls/package.json
@@ -40,9 +40,9 @@
    "ace-builds": "^1.4.14",
    "brace": "^0.11.1",
    "memoize-one": "^5.1.1",
-    "react": "^18.2.0",
+    "react": "^18.3.0",
    "react-ace": "^10.1.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.3.0"
  },
  "publishConfig": {
    "access": "public"
--- a/superset-frontend/packages/superset-ui-core/package.json
+++ b/superset-frontend/packages/superset-ui-core/package.json
@@ -101,8 +101,8 @@
    "@types/tinycolor2": "*",
    "antd": "^5.26.0",
    "nanoid": "^5.0.9",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
    "react-loadable": "^5.5.0",
    "tinycolor2": "*"
  },
--- a/superset-frontend/packages/superset-ui-core/src/components/Avatar/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Avatar/index.tsx
@@ -17,15 +17,16 @@
 * under the License.
 */

+import { forwardRef } from 'react';
 import { Avatar as AntdAvatar } from 'antd';
 import type { AvatarProps, GroupProps as AvatarGroupProps } from './types';

-export function Avatar(props: AvatarProps) {
-  return <AntdAvatar {...props} />;
-}
+export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => (
+  <AntdAvatar ref={ref} {...props} />
+));

-export function AvatarGroup(props: AvatarGroupProps) {
-  return <AntdAvatar.Group {...props} />;
-}
+export const AvatarGroup = (props: AvatarGroupProps) => (
+  <AntdAvatar.Group {...props} />
+);

 export type { AvatarProps, AvatarGroupProps };
--- a/superset-frontend/packages/superset-ui-core/src/components/Button/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Button/index.tsx
@@ -16,7 +16,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { Children, ReactElement, Fragment } from 'react';
+import { Children, ReactElement, Fragment, forwardRef, Ref } from 'react';
 import cx from 'classnames';
 import { Button as AntdButton } from 'antd';
 import { useTheme } from '@apache-superset/core/theme';
@@ -100,7 +100,7 @@ const BUTTON_STYLE_MAP: Record<
  link: { type: 'link' },
 };

-export function Button(props: ButtonProps) {
+function ButtonInner(props: ButtonProps, ref: Ref<HTMLElement>) {
  const {
    tooltip,
    placement,
@@ -160,6 +160,7 @@ export function Button(props: ButtonProps) {

  const button = (
    <AntdButton
+      ref={ref as Ref<HTMLButtonElement & HTMLAnchorElement>}
      href={disabled ? undefined : href}
      disabled={disabled}
      type={antdType}
@@ -235,4 +236,6 @@ export function Button(props: ButtonProps) {
  return button;
 }

+export const Button = forwardRef<HTMLElement, ButtonProps>(ButtonInner);
+
 export type { ButtonProps, OnClickHandler };
--- a/superset-frontend/packages/superset-ui-core/src/components/DropdownButton/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/DropdownButton/index.tsx
@@ -75,7 +75,10 @@ export const DropdownButton = ({
        id={`${kebabCase(tooltip)}-tooltip`}
        title={tooltip}
      >
-        {button}
+        {/* antd Dropdown.Button is a plain function component without
+            forwardRef; wrap in a span so the Tooltip can attach a ref to a
+            real DOM node and skip the findDOMNode fallback. */}
+        <span>{button}</span>
      </Tooltip>
    );
  }
--- a/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/index.tsx
@@ -240,7 +240,10 @@ export function EditableTitle({
              t("You don't have the rights to alter this title.")
        }
      >
-        {titleComponent}
+        {/* Wrap in span so the Tooltip can attach a ref to a DOM element.
+            antd's Input.TextArea forwards a non-DOM imperative handle, which
+            triggers a React 18 findDOMNode deprecation warning. */}
+        <span>{titleComponent}</span>
      </Tooltip>
    );
  }
--- a/superset-frontend/packages/superset-ui-core/src/components/IconTooltip/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/IconTooltip/index.tsx
@@ -16,47 +16,54 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+import { forwardRef } from 'react';
 import { Tooltip } from '../Tooltip';
 import { Button } from '../Button';
 import type { IconTooltipProps } from './types';

-export const IconTooltip = ({
-  children = null,
-  className = '',
-  onClick = () => undefined,
-  placement = 'top',
-  style = {},
-  tooltip = null,
-  mouseEnterDelay = 0.3,
-  mouseLeaveDelay = 0.15,
-}: IconTooltipProps) => {
-  const iconTooltip = (
-    <Button
-      onClick={onClick}
-      style={{
-        padding: 0,
-        ...style,
-      }}
-      buttonStyle="link"
-      className={`IconTooltip ${className}`}
-    >
-      {children}
-    </Button>
-  );
-  if (tooltip) {
-    return (
-      <Tooltip
-        id="tooltip"
-        title={tooltip}
-        placement={placement}
-        mouseEnterDelay={mouseEnterDelay}
-        mouseLeaveDelay={mouseLeaveDelay}
+export const IconTooltip = forwardRef<HTMLElement, IconTooltipProps>(
+  (
+    {
+      children = null,
+      className = '',
+      onClick = () => undefined,
+      placement = 'top',
+      style = {},
+      tooltip = null,
+      mouseEnterDelay = 0.3,
+      mouseLeaveDelay = 0.15,
+    },
+    ref,
+  ) => {
+    const iconTooltip = (
+      <Button
+        ref={ref}
+        onClick={onClick}
+        style={{
+          padding: 0,
+          ...style,
+        }}
+        buttonStyle="link"
+        className={`IconTooltip ${className}`}
      >
-        {iconTooltip}
-      </Tooltip>
+        {children}
+      </Button>
    );
-  }
-  return iconTooltip;
-};
+    if (tooltip) {
+      return (
+        <Tooltip
+          id="tooltip"
+          title={tooltip}
+          placement={placement}
+          mouseEnterDelay={mouseEnterDelay}
+          mouseLeaveDelay={mouseLeaveDelay}
+        >
+          {iconTooltip}
+        </Tooltip>
+      );
+    }
+    return iconTooltip;
+  },
+);

 export type { IconTooltipProps };
--- a/superset-frontend/packages/superset-ui-core/src/components/Icons/AntdEnhanced.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Icons/AntdEnhanced.tsx
@@ -165,7 +165,7 @@ import {
  SlackOutlined,
  ApiOutlined,
 } from '@ant-design/icons';
-import { FC } from 'react';
+import { ForwardRefExoticComponent, RefAttributes, forwardRef } from 'react';
 import { IconType } from './types';
 import { BaseIconComponent } from './BaseIcon';

@@ -323,19 +323,25 @@ type AntdIconNames = keyof typeof AntdIcons;

 export const antdEnhancedIcons: Record<
  AntdIconNames,
-  FC<IconType>
+  ForwardRefExoticComponent<IconType & RefAttributes<HTMLSpanElement>>
 > = Object.keys(AntdIcons)
  .filter(key => !EXCLUDED_ICONS.some(excluded => key.includes(excluded)))
  .reduce(
    (acc, key) => {
-      acc[key as AntdIconNames] = (props: IconType) => (
-        <BaseIconComponent
-          component={AntdIcons[key as AntdIconNames]}
-          fileName={key}
-          {...props}
-        />
+      acc[key as AntdIconNames] = forwardRef<HTMLSpanElement, IconType>(
+        (props, ref) => (
+          <BaseIconComponent
+            ref={ref}
+            component={AntdIcons[key as AntdIconNames]}
+            fileName={key}
+            {...props}
+          />
+        ),
      );
      return acc;
    },
-    {} as Record<AntdIconNames, FC<IconType>>,
+    {} as Record<
+      AntdIconNames,
+      ForwardRefExoticComponent<IconType & RefAttributes<HTMLSpanElement>>
+    >,
  );
--- a/superset-frontend/packages/superset-ui-core/src/components/Icons/AsyncIcon.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Icons/AsyncIcon.tsx
@@ -17,12 +17,12 @@
 * under the License.
 */

-import { FC, SVGProps, useEffect, useRef, useState } from 'react';
+import { FC, SVGProps, forwardRef, useEffect, useRef, useState } from 'react';
 import TransparentIcon from './svgs/transparent.svg';
 import { IconType } from './types';
 import { BaseIconComponent } from './BaseIcon';

-const AsyncIcon = (props: IconType) => {
+const AsyncIcon = forwardRef<HTMLSpanElement, IconType>((props, ref) => {
  const [, setLoaded] = useState(false);
  const ImportedSVG = useRef<FC<SVGProps<SVGSVGElement>>>();
  const { fileName, customIcons, iconSize, iconColor, viewBox, ...restProps } =
@@ -46,6 +46,7 @@ const AsyncIcon = (props: IconType) => {

  return (
    <BaseIconComponent
+      ref={ref}
      component={ImportedSVG.current || TransparentIcon}
      fileName={fileName}
      customIcons={customIcons}
@@ -55,6 +56,6 @@ const AsyncIcon = (props: IconType) => {
      {...restProps}
    />
  );
-};
+});

 export default AsyncIcon;
--- a/superset-frontend/packages/superset-ui-core/src/components/Icons/BaseIcon.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Icons/BaseIcon.tsx
@@ -17,6 +17,7 @@
 * under the License.
 */

+import { forwardRef, type ComponentType } from 'react';
 import { css, useTheme, getFontSize } from '@apache-superset/core/theme';
 import { AntdIconType, BaseIconProps, CustomIconType, IconType } from './types';

@@ -35,65 +36,78 @@ const genAriaLabel = (fileName: string) => {
  return name.toLowerCase();
 };

-export const BaseIconComponent: React.FC<
+export const BaseIconComponent = forwardRef<
+  HTMLSpanElement | SVGSVGElement,
  BaseIconProps & Omit<IconType, 'component'>
-> = ({
-  component: Component,
-  iconColor,
-  iconSize,
-  viewBox,
-  customIcons,
-  fileName,
-  ...rest
-}) => {
-  const theme = useTheme();
-  const whatRole = rest?.onClick ? 'button' : 'img';
-  const ariaLabel = genAriaLabel(fileName || '');
-  const style = {
-    color: iconColor,
-    fontSize: iconSize
-      ? `${getFontSize(theme, iconSize)}px`
-      : `${theme.fontSize}px`,
-    cursor: rest?.onClick ? 'pointer' : undefined,
-  };
+>(
+  (
+    {
+      component: Component,
+      iconColor,
+      iconSize,
+      viewBox,
+      customIcons,
+      fileName,
+      ...rest
+    },
+    ref,
+  ) => {
+    const theme = useTheme();
+    const whatRole = rest?.onClick ? 'button' : 'img';
+    const ariaLabel = genAriaLabel(fileName || '');
+    const style = {
+      color: iconColor,
+      fontSize: iconSize
+        ? `${getFontSize(theme, iconSize)}px`
+        : `${theme.fontSize}px`,
+      cursor: rest?.onClick ? 'pointer' : undefined,
+    };

-  return customIcons ? (
-    <span
-      role={whatRole}
-      aria-label={ariaLabel}
-      data-test={ariaLabel}
-      css={[
-        css`
-          display: inline-flex;
-          align-items: center;
-          line-height: 0;
-          vertical-align: middle;
-        `,
-      ]}
-    >
-      <Component
-        viewBox={viewBox || '0 0 24 24'}
+    const AntdComponent = Component as ComponentType<
+      Record<string, unknown> & {
+        ref?: React.Ref<HTMLSpanElement | SVGSVGElement>;
+      }
+    >;
+    return customIcons ? (
+      <span
+        ref={ref as React.Ref<HTMLSpanElement>}
+        role={whatRole}
+        aria-label={ariaLabel}
+        data-test={ariaLabel}
+        css={[
+          css`
+            display: inline-flex;
+            align-items: center;
+            line-height: 0;
+            vertical-align: middle;
+          `,
+        ]}
+      >
+        <Component
+          viewBox={viewBox || '0 0 24 24'}
+          style={style}
+          width={
+            iconSize
+              ? `${getFontSize(theme, iconSize) || theme.fontSize}px`
+              : `${theme.fontSize}px`
+          }
+          height={
+            iconSize
+              ? `${getFontSize(theme, iconSize) || theme.fontSize}px`
+              : `${theme.fontSize}px`
+          }
+          {...(rest as CustomIconType)}
+        />
+      </span>
+    ) : (
+      <AntdComponent
+        ref={ref}
+        role={whatRole}
        style={style}
-        width={
-          iconSize
-            ? `${getFontSize(theme, iconSize) || theme.fontSize}px`
-            : `${theme.fontSize}px`
-        }
-        height={
-          iconSize
-            ? `${getFontSize(theme, iconSize) || theme.fontSize}px`
-            : `${theme.fontSize}px`
-        }
-        {...(rest as CustomIconType)}
+        aria-label={ariaLabel}
+        data-test={ariaLabel}
+        {...(rest as AntdIconType)}
      />
-    </span>
-  ) : (
-    <Component
-      role={whatRole}
-      style={style}
-      aria-label={ariaLabel}
-      data-test={ariaLabel}
-      {...(rest as AntdIconType)}
-    />
-  );
-};
+    );
+  },
+);
--- a/superset-frontend/packages/superset-ui-core/src/components/Icons/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Icons/index.tsx
@@ -17,12 +17,16 @@
 * under the License.
 */

-import { FC } from 'react';
+import { ForwardRefExoticComponent, RefAttributes, forwardRef } from 'react';
 import { antdEnhancedIcons } from './AntdEnhanced';
 import AsyncIcon from './AsyncIcon';

 import type { IconType } from './types';

+type IconComponent = ForwardRefExoticComponent<
+  IconType & RefAttributes<HTMLSpanElement>
+>;
+
 /**
 * Filename is going to be inferred from the icon name.
 * i.e. BigNumberChartTile => assets/images/icons/big_number_chart_tile
@@ -58,15 +62,17 @@ const customIcons = [
  'Undo',
 ] as const;

-type CustomIconType = Record<(typeof customIcons)[number], FC<IconType>>;
+type CustomIconType = Record<(typeof customIcons)[number], IconComponent>;

 const iconOverrides: CustomIconType = {} as CustomIconType;
 customIcons.forEach(customIcon => {
  const fileName = customIcon
    .replace(/([a-z0-9])([A-Z])/g, '$1_$2')
    .toLowerCase();
-  iconOverrides[customIcon] = (props: IconType) => (
-    <AsyncIcon customIcons fileName={fileName} {...props} />
+  iconOverrides[customIcon] = forwardRef<HTMLSpanElement, IconType>(
+    (props, ref) => (
+      <AsyncIcon ref={ref} customIcons fileName={fileName} {...props} />
+    ),
  );
 });

@@ -74,7 +80,7 @@ export type IconNameType =
  | keyof typeof antdEnhancedIcons
  | keyof typeof iconOverrides;

-type IconComponentType = Record<IconNameType, FC<IconType>>;
+type IconComponentType = Record<IconNameType, IconComponent>;

 export const Icons: IconComponentType = {
  ...antdEnhancedIcons,
--- a/superset-frontend/packages/superset-ui-core/src/components/Label/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Label/index.tsx
@@ -16,6 +16,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+import { forwardRef } from 'react';
 import { Tag } from '@superset-ui/core/components/Tag';
 import { css } from '@emotion/react';
 import { useTheme, getColorVariants } from '@apache-superset/core/theme';
@@ -23,7 +24,7 @@ import { DatasetTypeLabel } from './reusable/DatasetTypeLabel';
 import { PublishedLabel } from './reusable/PublishedLabel';
 import type { LabelProps } from './types';

-export function Label(props: LabelProps) {
+export const Label = forwardRef<HTMLSpanElement, LabelProps>((props, ref) => {
  const theme = useTheme();
  // Use Ant Design's motion duration instead of deprecated transitionTiming
  const {
@@ -71,6 +72,7 @@ export function Label(props: LabelProps) {

  return (
    <Tag
+      ref={ref}
      onClick={onClick}
      role={onClick ? 'button' : undefined}
      style={style}
@@ -81,6 +83,6 @@ export function Label(props: LabelProps) {
      {children}
    </Tag>
  );
-}
+});
 export { DatasetTypeLabel, PublishedLabel };
 export type { LabelType } from './types';
--- a/superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.tsx
@@ -357,6 +357,9 @@ const CustomModal = ({
            disabled={!draggable || dragDisabled}
            bounds={bounds}
            onStart={(event, uiData) => onDragStart(event, uiData)}
+            // Pass nodeRef so react-draggable does not fall back to
+            // ReactDOM.findDOMNode (deprecated in React 18+ Strict Mode).
+            nodeRef={draggableRef}
            {...draggableConfig}
          >
            {resizable ? (
--- a/superset-frontend/packages/superset-ui-core/src/components/Popover/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Popover/index.tsx
@@ -16,11 +16,15 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+import { forwardRef } from 'react';
 import { Popover as AntdPopover } from 'antd';
 import { PopoverProps as AntdPopoverProps } from 'antd/es/popover';
+import type { TooltipRef } from 'antd/es/tooltip';

 export interface PopoverProps extends AntdPopoverProps {
  forceRender?: boolean;
 }

-export const Popover = (props: PopoverProps) => <AntdPopover {...props} />;
+export const Popover = forwardRef<TooltipRef, PopoverProps>((props, ref) => (
+  <AntdPopover ref={ref} {...props} />
+));
--- a/superset-frontend/packages/superset-ui-core/src/components/RefreshLabel/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/RefreshLabel/index.tsx
@@ -16,10 +16,9 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { MouseEventHandler, forwardRef } from 'react';
+import { MouseEventHandler } from 'react';
 import { SupersetTheme } from '@apache-superset/core/theme';
 import { Icons } from '@superset-ui/core/components/Icons';
-import type { IconType } from '@superset-ui/core/components/Icons/types';
 import { Tooltip } from '../Tooltip';

 export interface RefreshLabelProps {
@@ -32,25 +31,19 @@ const RefreshLabel = ({
  onClick,
  tooltipContent,
  disabled,
-}: RefreshLabelProps) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const IconWithoutRef = forwardRef((props: IconType, ref: any) => (
-    <Icons.SyncOutlined iconSize="l" {...props} />
-  ));
-
-  return (
-    <Tooltip title={tooltipContent}>
-      <IconWithoutRef
-        role="button"
-        onClick={disabled ? undefined : onClick}
-        css={(theme: SupersetTheme) => ({
-          cursor: 'pointer',
-          color: theme.colorIcon,
-          '&:hover': { color: theme.colorPrimary },
-        })}
-      />
-    </Tooltip>
-  );
-};
+}: RefreshLabelProps) => (
+  <Tooltip title={tooltipContent}>
+    <Icons.SyncOutlined
+      iconSize="l"
+      role="button"
+      onClick={disabled ? undefined : onClick}
+      css={(theme: SupersetTheme) => ({
+        cursor: 'pointer',
+        color: theme.colorIcon,
+        '&:hover': { color: theme.colorPrimary },
+      })}
+    />
+  </Tooltip>
+);

 export default RefreshLabel;
--- a/superset-frontend/packages/superset-ui-core/src/components/Tooltip/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Tooltip/index.tsx
@@ -16,17 +16,22 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+import { forwardRef } from 'react';
 import { Tooltip as AntdTooltip } from 'antd';
+import type { TooltipRef } from 'antd/es/tooltip';

 import type { TooltipProps, TooltipPlacement } from './types';

-export const Tooltip = ({ overlayStyle, ...props }: TooltipProps) => (
-  <AntdTooltip
-    styles={{
-      body: { overflow: 'hidden', textOverflow: 'ellipsis' },
-      root: overlayStyle ?? {},
-    }}
-    {...props}
-  />
+export const Tooltip = forwardRef<TooltipRef, TooltipProps>(
+  ({ overlayStyle, ...props }, ref) => (
+    <AntdTooltip
+      ref={ref}
+      styles={{
+        body: { overflow: 'hidden', textOverflow: 'ellipsis' },
+        root: overlayStyle ?? {},
+      }}
+      {...props}
+    />
+  ),
 );
 export type { TooltipProps, TooltipPlacement };
--- a/superset-frontend/plugins/legacy-plugin-chart-calendar/package.json
+++ b/superset-frontend/plugins/legacy-plugin-chart-calendar/package.json
@@ -33,7 +33,7 @@
    "@superset-ui/chart-controls": "*",
    "@superset-ui/core": "*",
    "@apache-superset/core": "*",
-    "react": "^18.2.0"
+    "react": "^18.3.0"
  },
  "publishConfig": {
    "access": "public"
--- a/superset-frontend/plugins/legacy-plugin-chart-country-map/package.json
+++ b/superset-frontend/plugins/legacy-plugin-chart-country-map/package.json
@@ -34,6 +34,6 @@
    "@apache-superset/core": "*",
    "@superset-ui/chart-controls": "*",
    "@superset-ui/core": "*",
-    "react": "^18.2.0"
+    "react": "^18.3.0"
  }
 }
--- a/superset-frontend/plugins/legacy-plugin-chart-horizon/package.json
+++ b/superset-frontend/plugins/legacy-plugin-chart-horizon/package.json
@@ -31,7 +31,7 @@
    "@superset-ui/chart-controls": "*",
    "@superset-ui/core": "*",
    "@apache-superset/core": "*",
-    "react": "^18.2.0"
+    "react": "^18.3.0"
  },
  "publishConfig": {
    "access": "public"
--- a/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/package.json
+++ b/superset-frontend/plugins/legacy-plugin-chart-paired-t-test/package.json
@@ -31,7 +31,7 @@
    "@superset-ui/chart-controls": "*",
    "@superset-ui/core": "*",
    "@apache-superset/core": "*",
-    "react": "^18.2.0"
+    "react": "^18.3.0"
  },
  "publishConfig": {
    "access": "public"
--- a/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/package.json
+++ b/superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/package.json
@@ -36,6 +36,6 @@
    "@superset-ui/chart-controls": "*",
    "@superset-ui/core": "*",
    "@apache-superset/core": "*",
-    "react": "^18.2.0"
+    "react": "^18.3.0"
  }
 }
--- a/superset-frontend/plugins/legacy-plugin-chart-partition/package.json
+++ b/superset-frontend/plugins/legacy-plugin-chart-partition/package.json
@@ -33,8 +33,8 @@
    "@apache-superset/core": "*",
    "@testing-library/jest-dom": "*",
    "@testing-library/react": "^14.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
  },
  "publishConfig": {
    "access": "public"
--- a/superset-frontend/plugins/legacy-plugin-chart-rose/package.json
+++ b/superset-frontend/plugins/legacy-plugin-chart-rose/package.json
@@ -32,7 +32,7 @@
    "@superset-ui/chart-controls": "*",
    "@superset-ui/core": "*",
    "@apache-superset/core": "*",
-    "react": "^18.2.0"
+    "react": "^18.3.0"
  },
  "publishConfig": {
    "access": "public"
--- a/superset-frontend/plugins/legacy-plugin-chart-world-map/package.json
+++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/package.json
@@ -39,6 +39,6 @@
    "@superset-ui/chart-controls": "*",
    "@superset-ui/core": "*",
    "@apache-superset/core": "*",
-    "react": "^18.2.0"
+    "react": "^18.3.0"
  }
 }
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/package.json
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/package.json
@@ -43,6 +43,6 @@
    "@superset-ui/chart-controls": "*",
    "@superset-ui/core": "*",
    "dayjs": "^1.11.19",
-    "react": "^18.2.0"
+    "react": "^18.3.0"
  }
 }
--- a/superset-frontend/plugins/plugin-chart-ag-grid-table/package.json
+++ b/superset-frontend/plugins/plugin-chart-ag-grid-table/package.json
@@ -44,8 +44,8 @@
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "*",
    "@types/react": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
  },
  "publishConfig": {
    "access": "public"
--- a/superset-frontend/plugins/plugin-chart-cartodiagram/package.json
+++ b/superset-frontend/plugins/plugin-chart-cartodiagram/package.json
@@ -47,7 +47,7 @@
    "geostyler-wfs-parser": "^3.0.1",
    "ol": "^10.8.0",
    "polished": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
  }
 }
--- a/superset-frontend/plugins/plugin-chart-echarts/package.json
+++ b/superset-frontend/plugins/plugin-chart-echarts/package.json
@@ -38,7 +38,7 @@
    "dayjs": "^1.11.19",
    "echarts": "*",
    "memoize-one": "*",
-    "react": "^18.2.0"
+    "react": "^18.3.0"
  },
  "publishConfig": {
    "access": "public"
--- a/superset-frontend/plugins/plugin-chart-handlebars/package.json
+++ b/superset-frontend/plugins/plugin-chart-handlebars/package.json
@@ -39,9 +39,9 @@
    "handlebars": "^4.7.8",
    "lodash": "^4.18.1",
    "dayjs": "^1.11.19",
-    "react": "^18.2.0",
+    "react": "^18.3.0",
    "react-ace": "^10.1.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.3.0"
  },
  "devDependencies": {
    "@types/jest": "^30.0.0",
--- a/superset-frontend/plugins/plugin-chart-pivot-table/package.json
+++ b/superset-frontend/plugins/plugin-chart-pivot-table/package.json
@@ -33,8 +33,8 @@
    "@superset-ui/core": "*",
    "lodash": "^4.18.1",
    "prop-types": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
  },
  "devDependencies": {
    "@babel/types": "^7.29.0",
--- a/superset-frontend/plugins/plugin-chart-point-cluster-map/package.json
+++ b/superset-frontend/plugins/plugin-chart-point-cluster-map/package.json
@@ -36,8 +36,8 @@
    "@apache-superset/core": "*",
    "@superset-ui/chart-controls": "*",
    "@superset-ui/core": "*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
  },
  "publishConfig": {
    "access": "public"
--- a/superset-frontend/plugins/plugin-chart-table/package.json
+++ b/superset-frontend/plugins/plugin-chart-table/package.json
@@ -45,8 +45,8 @@
    "@testing-library/user-event": "*",
    "@types/react": "*",
    "match-sorter": "^8.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
  },
  "publishConfig": {
    "access": "public"
--- a/superset-frontend/plugins/plugin-chart-word-cloud/package.json
+++ b/superset-frontend/plugins/plugin-chart-word-cloud/package.json
@@ -39,7 +39,7 @@
    "@superset-ui/core": "*",
    "@types/lodash": "*",
    "@types/react": "*",
-    "react": "^18.2.0"
+    "react": "^18.3.0"
  },
  "devDependencies": {
    "@types/d3-cloud": "^1.2.9"
--- a/superset-frontend/plugins/preset-chart-deckgl/package.json
+++ b/superset-frontend/plugins/preset-chart-deckgl/package.json
@@ -67,8 +67,8 @@
    "@superset-ui/core": "*",
    "dayjs": "^1.11.19",
    "mapbox-gl": ">=1.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
  },
  "peerDependenciesMeta": {
    "mapbox-gl": {
--- a/superset-frontend/spec/helpers/shim.tsx
+++ b/superset-frontend/spec/helpers/shim.tsx
@@ -16,7 +16,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { AriaAttributes } from 'react';
+import { AriaAttributes, Ref } from 'react';
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import jQuery from 'jquery';
@@ -98,31 +98,39 @@ jest.mock('rehype-raw', () => () => jest.fn());
 // Tests should override this when needed
 jest.mock('@superset-ui/core/components/Icons/AsyncIcon', () => ({
  __esModule: true,
-  default: ({
-    fileName,
-    role,
-    'aria-label': ariaLabel,
-    onClick,
-    ...rest
-  }: {
-    fileName: string;
-    role?: string;
-    'aria-label'?: AriaAttributes['aria-label'];
-    onClick?: () => void;
-  }) => {
-    // Simple mock that provides the essential attributes for testing
-    const label = ariaLabel || fileName?.replace(/_/g, '-').toLowerCase() || '';
-    return (
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-      <span
-        role={role || (onClick ? 'button' : 'img')}
-        aria-label={label}
-        data-test={label}
-        onClick={onClick}
-        {...rest}
-      />
-    );
-  },
+  // eslint-disable-next-line global-require
+  default: require('react').forwardRef(
+    (
+      {
+        fileName,
+        role,
+        'aria-label': ariaLabel,
+        onClick,
+        ...rest
+      }: {
+        fileName: string;
+        role?: string;
+        'aria-label'?: AriaAttributes['aria-label'];
+        onClick?: () => void;
+      },
+      ref: Ref<HTMLSpanElement>,
+    ) => {
+      // Simple mock that provides the essential attributes for testing
+      const label =
+        ariaLabel || fileName?.replace(/_/g, '-').toLowerCase() || '';
+      return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <span
+          ref={ref}
+          role={role || (onClick ? 'button' : 'img')}
+          aria-label={label}
+          data-test={label}
+          onClick={onClick}
+          {...rest}
+        />
+      );
+    },
+  ),
  StyledIcon: ({
    component: Component,
    role,
--- a/superset-frontend/spec/helpers/testing-library.tsx
+++ b/superset-frontend/spec/helpers/testing-library.tsx
@@ -37,6 +37,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { TestBackend } from 'react-dnd-test-backend';
 import reducerIndex from 'spec/helpers/reducerIndex';
 import { QueryParamProvider } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
@@ -46,7 +47,11 @@ import userEvent from '@testing-library/user-event';

 type Options = Omit<RenderOptions, 'queries'> & {
  useRedux?: boolean;
-  useDnd?: boolean;
+  // `true` -> HTML5Backend (default; matches browser).
+  // `'test'` -> TestBackend, drive drags programmatically via
+  // `react-dnd-test-backend` `getInstance()` — avoids the jsdom
+  // HTML5-drag-event / preventDefault / zero-rect gaps.
+  useDnd?: boolean | 'test';
  useQueryParams?: boolean;
  useRouter?: boolean;
  useTheme?: boolean;
@@ -97,8 +102,9 @@ export function createWrapper(options?: Options) {
    }

    if (useDnd) {
+      const backend = useDnd === 'test' ? TestBackend : HTML5Backend;
      // @ts-expect-error react-dnd types not updated for React 18
-      result = <DndProvider backend={HTML5Backend}>{result}</DndProvider>;
+      result = <DndProvider backend={backend}>{result}</DndProvider>;
    }

    if (useRedux || store) {
--- a/superset-frontend/src/SqlLab/components/QueryAutoRefresh/QueryAutoRefresh.test.tsx
+++ b/superset-frontend/src/SqlLab/components/QueryAutoRefresh/QueryAutoRefresh.test.tsx
@@ -16,7 +16,7 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 import { QueryState } from '@superset-ui/core';
 import fetchMock from 'fetch-mock';
 import configureStore from 'redux-mock-store';
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -189,15 +189,19 @@ const SqlEditorLeftBar = ({ queryEditorId }: SqlEditorLeftBarProps) => {
        placement="bottomLeft"
        trigger="click"
      >
-        <DatabaseSelector
-          key={`db-selector-${db ? db.id : 'no-db'}:${catalog ?? 'no-catalog'}:${
-            schema ?? 'no-schema'
-          }`}
-          {...dbSelectorProps}
-          emptyState={<EmptyState />}
-          sqlLabMode
-          onOpenModal={openSelectorModal}
-        />
+        {/* Wrap in a span so the Popover can attach a ref without relying
+            on findDOMNode (deprecated in React 18+). */}
+        <span>
+          <DatabaseSelector
+            key={`db-selector-${db ? db.id : 'no-db'}:${catalog ?? 'no-catalog'}:${
+              schema ?? 'no-schema'
+            }`}
+            {...dbSelectorProps}
+            emptyState={<EmptyState />}
+            sqlLabMode
+            onOpenModal={openSelectorModal}
+          />
+        </span>
      </Popover>
      <StyledDivider />
      <TableExploreTree queryEditorId={activeQEId} />
--- a/superset-frontend/src/components/CopyToClipboard/index.tsx
+++ b/superset-frontend/src/components/CopyToClipboard/index.tsx
@@ -98,7 +98,10 @@ class CopyToClip extends Component<CopyToClipboardProps> {
            trigger={['hover']}
            arrow={{ pointAtCenter: true }}
          >
-            {this.getDecoratedCopyNode()}
+            {/* Wrap in a span so antd Tooltip has a real DOM ref target;
+                avoids findDOMNode fallback when copyNode is a function
+                component without forwardRef. */}
+            <span>{this.getDecoratedCopyNode()}</span>
          </Tooltip>
        ) : (
          this.getDecoratedCopyNode()
--- a/superset-frontend/src/components/GenericLink/index.tsx
+++ b/superset-frontend/src/components/GenericLink/index.tsx
@@ -17,21 +17,20 @@
 * under the License.
 */

-import { PropsWithoutRef, RefAttributes } from 'react';
+import { forwardRef, PropsWithoutRef, Ref, RefAttributes } from 'react';
 import { Link, LinkProps } from 'react-router-dom';
 import { isUrlExternal, parseUrl } from 'src/utils/urlUtils';

-export const GenericLink = <S,>({
-  to,
-  component,
-  replace,
-  innerRef,
-  children,
-  ...rest
-}: PropsWithoutRef<LinkProps<S>> & RefAttributes<HTMLAnchorElement>) => {
+type GenericLinkProps<S> = PropsWithoutRef<LinkProps<S>> &
+  RefAttributes<HTMLAnchorElement>;
+
+const GenericLinkInner = <S,>(
+  { to, component, replace, innerRef, children, ...rest }: GenericLinkProps<S>,
+  ref: Ref<HTMLAnchorElement>,
+) => {
  if (typeof to === 'string' && isUrlExternal(to)) {
    return (
-      <a data-test="external-link" href={parseUrl(to)} {...rest}>
+      <a ref={ref} data-test="external-link" href={parseUrl(to)} {...rest}>
        {children}
      </a>
    );
@@ -42,10 +41,14 @@ export const GenericLink = <S,>({
      to={to}
      component={component}
      replace={replace}
-      innerRef={innerRef}
+      innerRef={innerRef ?? ref}
      {...rest}
    >
      {children}
    </Link>
  );
 };
+
+export const GenericLink = forwardRef(GenericLinkInner) as <S>(
+  props: GenericLinkProps<S> & { ref?: Ref<HTMLAnchorElement> },
+) => ReturnType<typeof GenericLinkInner>;
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.tsx
@@ -193,52 +193,57 @@ export default function getControlItemsMap({
              t('Populate "Default value" to enable this control')
            }
          >
-            <StyledRowFormItem
-              expanded={expanded}
-              key={controlItem.name}
-              name={['filters', filterId, 'controlValues', controlItem.name]}
-              initialValue={initialValue}
-              valuePropName="checked"
-              colon={false}
-            >
-              <Checkbox
-                disabled={controlItem.config.affectsDataMask && disabled}
-                onChange={checked => {
-                  if (controlItem.config.requiredFirst) {
-                    setNativeFilterFieldValues(form, filterId, {
-                      requiredFirst: {
-                        ...formFilter?.requiredFirst,
-                        [controlItem.name]: checked,
-                      },
-                    });
-                  }
-                  if (controlItem.config.resetConfig) {
-                    setNativeFilterFieldValues(form, filterId, {
-                      defaultDataMask: null,
-                    });
-                  }
-                  formChanged();
-                  forceUpdate();
-                }}
+            {/* Wrap in span so antd Tooltip can attach a ref without
+                relying on findDOMNode (deprecated in React 18+). */}
+            <span>
+              <StyledRowFormItem
+                expanded={expanded}
+                key={controlItem.name}
+                name={['filters', filterId, 'controlValues', controlItem.name]}
+                initialValue={initialValue}
+                valuePropName="checked"
+                colon={false}
              >
-                <>
-                  {typeof controlItem.config.label === 'function'
-                    ? (controlItem.config.label as Function)()
-                    : controlItem.config.label}
-                  &nbsp;
-                  {controlItem.config.description && (
-                    <InfoTooltip
-                      placement="top"
-                      tooltip={
-                        typeof controlItem.config.description === 'function'
-                          ? (controlItem.config.description as Function)()
-                          : (controlItem.config.description as React.ReactNode)
-                      }
-                    />
-                  )}
-                </>
-              </Checkbox>
-            </StyledRowFormItem>
+                <Checkbox
+                  disabled={controlItem.config.affectsDataMask && disabled}
+                  onChange={checked => {
+                    if (controlItem.config.requiredFirst) {
+                      setNativeFilterFieldValues(form, filterId, {
+                        requiredFirst: {
+                          ...formFilter?.requiredFirst,
+                          [controlItem.name]: checked,
+                        },
+                      });
+                    }
+                    if (controlItem.config.resetConfig) {
+                      setNativeFilterFieldValues(form, filterId, {
+                        defaultDataMask: null,
+                      });
+                    }
+                    formChanged();
+                    forceUpdate();
+                  }}
+                >
+                  <>
+                    {typeof controlItem.config.label === 'function'
+                      ? (controlItem.config.label as Function)()
+                      : controlItem.config.label}
+                    &nbsp;
+                    {controlItem.config.description && (
+                      <InfoTooltip
+                        placement="top"
+                        tooltip={
+                          typeof controlItem.config.description === 'function'
+                            ? (controlItem.config.description as Function)()
+                            : (controlItem.config
+                                .description as React.ReactNode)
+                        }
+                      />
+                    )}
+                  </>
+                </Checkbox>
+              </StyledRowFormItem>
+            </span>
          </Tooltip>
        </>
      );
--- a/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/CollectionControl/index.tsx
@@ -188,7 +188,9 @@ function CollectionControl({
  // Two items can collide when keyAccessor returns falsy and the index
  // fallback is used — breaking dnd-kit reordering and React reconciliation.
  // Assign a stable nanoid per item ref when no key is available.
-  const generatedIdsRef = useRef<WeakMap<CollectionItem, string>>(new WeakMap());
+  const generatedIdsRef = useRef<WeakMap<CollectionItem, string>>(
+    new WeakMap(),
+  );
  const itemIds = useMemo(
    () =>
      value.map(item => {
--- a/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointPopoverTrigger.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorBreakpointsControl/ColorBreakpointPopoverTrigger.tsx
@@ -54,7 +54,9 @@ const ColorBreakpointsPopoverTrigger = ({
      onOpenChange={setVisibility}
      destroyOnHidden
    >
-      {props.children}
+      {/* Wrap in span so the Popover can attach a ref without relying
+          on findDOMNode (deprecated in React 18+). */}
+      <span>{props.children}</span>
    </ControlPopover>
  );
 };
--- a/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverTrigger.tsx
+++ b/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverTrigger.tsx
@@ -52,7 +52,9 @@ const ContourPopoverTrigger = ({
      onOpenChange={setVisibility}
      destroyOnHidden
    >
-      {props.children}
+      {/* Wrap in span so the Popover can attach a ref without relying
+          on findDOMNode (deprecated in React 18+). */}
+      <span>{props.children}</span>
    </ControlPopover>
  );
 };
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -369,16 +369,21 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
      overlayClassName="time-range-popover"
    >
      <Tooltip placement="top" title={tooltipTitle}>
-        <DateLabel
-          name={name}
-          aria-labelledby={`filter-name-${props.name}`}
-          aria-describedby={`date-label-${props.name}`}
-          label={actualTimeRange}
-          isActive={show}
-          isPlaceholder={actualTimeRange === NO_TIME_RANGE}
-          data-test={DateFilterTestKey.PopoverOverlay}
-          ref={labelRef}
-        />
+        {/* Wrap in a span so the Popover gets a stable DOM ref target;
+            DateLabel forwards its ref to an inner span used for measuring
+            text truncation, which would otherwise become the popover's
+            positioning anchor in React 18. */}
+        <span data-test={DateFilterTestKey.PopoverOverlay}>
+          <DateLabel
+            name={name}
+            aria-labelledby={`filter-name-${props.name}`}
+            aria-describedby={`date-label-${props.name}`}
+            label={actualTimeRange}
+            isActive={show}
+            isPlaceholder={actualTimeRange === NO_TIME_RANGE}
+            ref={labelRef}
+          />
+        </span>
      </Tooltip>
    </ControlPopover>
  );
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopoverTrigger.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopoverTrigger.tsx
@@ -201,7 +201,9 @@ const ColumnSelectPopoverTriggerInner = ({
        title={popoverTitle}
        destroyOnHidden
      >
-        {children}
+        {/* Wrap in span so the Popover can attach a ref without relying
+            on findDOMNode (deprecated in React 18+). */}
+        <span>{children}</span>
      </ControlPopover>
    </>
  );
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnMetricSelect.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnMetricSelect.test.tsx
@@ -16,6 +16,8 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+import { act } from 'react';
+import { getInstance as getTestBackend } from 'react-dnd-test-backend';
 import {
  fireEvent,
  render,
@@ -211,7 +213,9 @@ test('can drop only selected metrics', () => {
 test('can drag and reorder items', async () => {
  const values = ['column_a', 'metric_a', 'column_b'];
  render(<DndColumnMetricSelect {...defaultProps} value={values} multi />, {
-    useDnd: true,
+    // TestBackend bypasses the HTML5 drag-event pipeline (which jsdom
+    // doesn't fully implement) and lets us drive drags via simulate* calls.
+    useDnd: 'test',
    useRedux: true,
  });

@@ -224,10 +228,24 @@ test('can drag and reorder items', async () => {
  expect(within(firstItem).getByText('column_a')).toBeVisible();
  expect(within(lastItem).getByText('Column B')).toBeVisible();

-  fireEvent.dragStart(firstItem);
-  fireEvent.dragEnter(lastItem);
-  fireEvent.dragOver(lastItem);
-  fireEvent.drop(lastItem);
+  const sourceId = firstItem
+    .querySelector('[data-drag-source-id]')!
+    .getAttribute('data-drag-source-id')!;
+  const targetId = lastItem
+    .querySelector('[data-drop-target-id]')!
+    .getAttribute('data-drop-target-id')!;
+  const backend = getTestBackend()!;
+  act(() => {
+    backend.simulateBeginDrag([sourceId]);
+    // Pass a clientOffset past the hover midpoint so OptionWrapper.hover /
+    // OptionControls.hover fire the reorder instead of bailing on the
+    // jsdom zero-rect.
+    backend.simulateHover([targetId], {
+      clientOffset: { x: 0, y: 100 },
+    } as any);
+    backend.simulateDrop();
+    backend.simulateEndDrag();
+  });

  expect(container).toBeInTheDocument();
 });
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx
@@ -16,6 +16,8 @@
 * specific language governing permissions and limitations
 * under the License.
 */
+import { act } from 'react';
+import { getInstance as getTestBackend } from 'react-dnd-test-backend';
 import {
  fireEvent,
  render,
@@ -314,7 +316,9 @@ test('update adhoc metric name when column label in dataset changes', () => {
 test('can drag metrics', async () => {
  const metricValues = ['metric_a', 'metric_b', adhocMetricB];
  render(<DndMetricSelect {...defaultProps} value={metricValues} multi />, {
-    useDnd: true,
+    // TestBackend bypasses the HTML5 drag-event pipeline (which jsdom
+    // doesn't fully implement) and lets us drive drags via simulate* calls.
+    useDnd: 'test',
    useRedux: true,
  });

@@ -332,10 +336,23 @@ test('can drag metrics', async () => {
  fireEvent.mouseOver(within(firstMetric).getByText('metric_a'));
  expect(await screen.findByText('Metric name')).toBeInTheDocument();

-  fireEvent.dragStart(firstMetric);
-  fireEvent.dragEnter(lastMetric);
-  fireEvent.dragOver(lastMetric);
-  fireEvent.drop(lastMetric);
+  const sourceId = firstMetric
+    .querySelector('[data-drag-source-id]')!
+    .getAttribute('data-drag-source-id')!;
+  const targetId = lastMetric
+    .querySelector('[data-drop-target-id]')!
+    .getAttribute('data-drop-target-id')!;
+  const backend = getTestBackend()!;
+  act(() => {
+    backend.simulateBeginDrag([sourceId]);
+    // Pass a clientOffset past the hover midpoint so OptionControls.hover
+    // fires onMoveLabel instead of bailing on the jsdom zero-rect.
+    backend.simulateHover([targetId], {
+      clientOffset: { x: 0, y: 100 },
+    } as any);
+    backend.simulateDrop();
+    backend.simulateEndDrag();
+  });

  expect(within(firstMetric).getByText('SUM(Column B)')).toBeVisible();
  expect(within(lastMetric).getByText('metric_a')).toBeVisible();
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/OptionWrapper.tsx
@@ -67,18 +67,24 @@ export default function OptionWrapper(
  const ref = useRef<HTMLDivElement>(null);
  const labelRef = useRef<HTMLDivElement>(null);

-  const [{ isDragging }, drag] = useDrag({
+  const [{ isDragging, dragSourceId }, drag] = useDrag({
    item: {
      type,
      dragIndex: index,
    },
    collect: (monitor: DragSourceMonitor) => ({
      isDragging: monitor.isDragging(),
+      // Exposed via `data-drag-source-id` so tests using react-dnd-test-backend
+      // can drive drags programmatically without DOM-event simulation.
+      dragSourceId: monitor.getHandlerId(),
    }),
  });

-  const [, drop] = useDrop({
+  const [{ dropTargetId }, drop] = useDrop({
    accept: type,
+    collect: (monitor: DropTargetMonitor) => ({
+      dropTargetId: monitor.getHandlerId(),
+    }),

    hover: (item: OptionItemInterface, monitor: DropTargetMonitor) => {
      if (!ref.current) {
@@ -182,7 +188,12 @@ export default function OptionWrapper(
  drag(drop(ref));

  return (
-    <DragContainer ref={ref} {...rest}>
+    <DragContainer
+      ref={ref}
+      data-drag-source-id={dragSourceId ?? undefined}
+      data-drop-target-id={dropTargetId ?? undefined}
+      {...rest}
+    >
      <Option
        index={index}
        clickClose={clickClose}
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/index.tsx
@@ -112,7 +112,9 @@ class AdhocFilterPopoverTrigger extends PureComponent<
        onOpenChange={togglePopover}
        destroyOnHidden
      >
-        {this.props.children}
+        {/* Wrap in span so the Popover can attach a ref without relying
+            on findDOMNode (deprecated in React 18+). */}
+        <span>{this.props.children}</span>
      </ControlPopover>
    );
  }
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx
@@ -274,7 +274,9 @@ class AdhocMetricPopoverTrigger extends PureComponent<
          title={popoverTitle}
          destroyOnHidden
        >
-          {this.props.children}
+          {/* Wrap in span so the Popover can attach a ref without relying
+              on findDOMNode (deprecated in React 18+). */}
+          <span>{this.props.children}</span>
        </ControlPopover>
      </>
    );
--- a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.tsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.tsx
@@ -32,13 +32,6 @@ import MetricDefinitionValue from './MetricDefinitionValue';
 import AdhocMetric from './AdhocMetric';
 import AdhocMetricPopoverTrigger from './AdhocMetricPopoverTrigger';

-const defaultProps = {
-  onChange: () => {},
-  clearable: true,
-  savedMetrics: [],
-  columns: [],
-};
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function getOptionsForSavedMetrics(
  savedMetrics: any,
@@ -122,11 +115,11 @@ export interface MetricsControlProps {
 }

 const MetricsControl = ({
-  onChange,
+  onChange = () => {},
  multi,
  value: propsValue,
-  columns,
-  savedMetrics,
+  columns = [],
+  savedMetrics = [],
  datasource,
  ...props
 }: MetricsControlProps) => {
@@ -351,6 +344,4 @@ const MetricsControl = ({
  );
 };

-MetricsControl.defaultProps = defaultProps;
-
 export default MetricsControl;
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -275,8 +275,11 @@ export const OptionControlLabel = ({
  const ref = useRef<HTMLDivElement>(null);
  const labelRef = useRef<HTMLDivElement>(null);
  const hasMetricName = savedMetric?.metric_name;
-  const [, drop] = useDrop({
+  const [{ dropTargetId }, drop] = useDrop({
    accept: type,
+    collect: (monitor: DropTargetMonitor) => ({
+      dropTargetId: monitor.getHandlerId(),
+    }),
    drop() {
      if (!multi) {
        return;
@@ -328,7 +331,7 @@ export const OptionControlLabel = ({
      item.dragIndex = hoverIndex;
    },
  });
-  const [{ isDragging }, drag] = useDrag({
+  const [{ isDragging, dragSourceId }, drag] = useDrag({
    item: {
      type,
      dragIndex: index,
@@ -336,6 +339,9 @@ export const OptionControlLabel = ({
    },
    collect: monitor => ({
      isDragging: monitor.isDragging(),
+      // Exposed via `data-drag-source-id` so tests using react-dnd-test-backend
+      // can drive drags programmatically without DOM-event simulation.
+      dragSourceId: monitor.getHandlerId(),
    }),
  });

@@ -424,5 +430,13 @@ export const OptionControlLabel = ({
  );

  drag(drop(ref));
-  return <DragContainer ref={ref}>{getOptionControlContent()}</DragContainer>;
+  return (
+    <DragContainer
+      ref={ref}
+      data-drag-source-id={dragSourceId ?? undefined}
+      data-drop-target-id={dropTargetId ?? undefined}
+    >
+      {getOptionControlContent()}
+    </DragContainer>
+  );
 };
--- a/superset-frontend/src/features/home/ChartTable.test.tsx
+++ b/superset-frontend/src/features/home/ChartTable.test.tsx
@@ -24,7 +24,7 @@ import {
 } from 'spec/helpers/testing-library';
 import { VizType } from '@superset-ui/core';
 import fetchMock from 'fetch-mock';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 import handleResourceExport from 'src/utils/export';
 import { LocalStorageKeys } from 'src/utils/localStorageHelpers';
 import ChartTable from './ChartTable';
--- a/superset-frontend/src/theme/tests/ThemeController.test.ts
+++ b/superset-frontend/src/theme/tests/ThemeController.test.ts
@@ -111,12 +111,15 @@ const createController = (
    ...options,
  });

-// Shared console spies
-const consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
-const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+// Shared console spies — re-installed in beforeEach so each test starts
+// with a fresh call count and a clean implementation.
+let consoleSpy: jest.SpyInstance;
+let consoleErrorSpy: jest.SpyInstance;

 beforeEach(() => {
  jest.clearAllMocks();
+  consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+  consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();

  // Setup DOM environment
  Object.defineProperty(window, 'localStorage', {
--- a/superset/db_engine_specs/lint_metadata.py
+++ b/superset/db_engine_specs/lint_metadata.py
@@ -454,7 +454,7 @@ def print_report(reports: list[MetadataReport], verbose: bool = False) -> None:
    print("=" * 60)

    all_fields = {**REQUIRED_FIELDS, **RECOMMENDED_FIELDS, **OPTIONAL_FIELDS}
-    field_counts: dict[str, int] = {f: 0 for f in all_fields}
+    field_counts: dict[str, int] = dict.fromkeys(all_fields, 0)

    for r in reports:
        for field in r.present_fields:
--- a/superset/reports/notifications/email.py
+++ b/superset/reports/notifications/email.py
@@ -59,7 +59,7 @@ ALLOWED_TAGS = {
    "ul",
 }.union(TABLE_TAGS)

-ALLOWED_TABLE_ATTRIBUTES = {tag: TABLE_ATTRIBUTES for tag in TABLE_TAGS}
+ALLOWED_TABLE_ATTRIBUTES = dict.fromkeys(TABLE_TAGS, TABLE_ATTRIBUTES)
 ALLOWED_ATTRIBUTES = {
    "a": {"href", "title"},
    "abbr": {"title"},
--- a/superset/reports/notifications/slack_mixin.py
+++ b/superset/reports/notifications/slack_mixin.py
@@ -94,7 +94,7 @@ class SlackMixin:
        # need to truncate the data
        for i in range(len(df) - 1):
            truncated_df = df[: i + 1].fillna("")
-            truncated_row = pd.Series({k: "..." for k in df.columns})
+            truncated_row = pd.Series(dict.fromkeys(df.columns, "..."))
            truncated_df = pd.concat(
                [truncated_df, truncated_row.to_frame().T], ignore_index=True
            )
@@ -104,7 +104,7 @@ class SlackMixin:
            if len(message) > MAXIMUM_MESSAGE_SIZE:
                # Decrement i and build a message that is under the limit
                truncated_df = df[:i].fillna("")
-                truncated_row = pd.Series({k: "..." for k in df.columns})
+                truncated_row = pd.Series(dict.fromkeys(df.columns, "..."))
                truncated_df = pd.concat(
                    [truncated_df, truncated_row.to_frame().T], ignore_index=True
                )
Author	SHA1	Message	Date
Mehmet Salih Yavuz	5e64af51a8	test: drop jest-fail-on-console Now that the surfaced React 18 / React 19 deprecation warnings have been fixed at their source, the global fail-on-console no longer adds signal — remove the setup and the dependency. ThemeController.test still installs its own console.warn / console.error spies in beforeEach to assert what the LocalStorageAdapter logs; updated the comment to reflect that they're no longer working around a wrapper.	2026-05-15 10:35:09 +03:00
Mehmet Salih Yavuz	cd01d1d433	test(react18): drive reorder drag tests with react-dnd-test-backend Replace the test.skip with a real fix. The two failing tests (DndMetricSelect > "can drag metrics" and DndColumnMetricSelect > "can drag and reorder items") drove drags via fireEvent.dragStart/dragOver/drop, which under React 18 + react-dnd@^11 raced the redux dispatch and tripped `Cannot call hover while not dragging`. Switch the test wrapper to support `useDnd: 'test'` (TestBackend) and have the two tests drive the drag via the backend's programmatic simulateBeginDrag/simulateHover/simulateDrop API. Sidesteps the jsdom HTML5-event/preventDefault/zero-rect gaps entirely; this is the pattern react-dnd itself recommends for tests. Expose `data-drag-source-id` / `data-drop-target-id` from OptionWrapper and OptionControls (sourced from `monitor.getHandlerId()` in the collect fn) so the tests can hand the backend the right handler IDs without hardcoding "S1"/"T4". No runtime change otherwise.	2026-05-14 21:36:35 +03:00
Mehmet Salih Yavuz	84178bf4e3	docs(react18): expand TODO on skipped drag tests with three fix paths The previous skip just said "upgrade react-dnd". After actually testing the upgrade locally I confirmed two things: 1. react-dnd@16 alone does fix the original "Cannot call hover while not dragging" Invariant — but v14+ requires `type` at the top level of every `useDrag` call (DatasourcePanelDragOption, OptionWrapper, OptionControls, and the dashboard legacy `DragSource` HOC sites), which is a bigger migration than belongs in a React-version bump. 2. Even with the upgrade, these specific tests still fail at a second hurdle: OptionWrapper.hover compares `monitor.getClientOffset` against `getBoundingClientRect`, both of which jsdom returns as zeroes/null, so the in-place reorder never fires. Replace the one-line "upgrade react-dnd" TODO with the three concrete paths (library bump, react-dnd-test-backend in spec/helpers, or local DOM mocks) so the follow-up is actionable without re-doing the investigation.	2026-05-14 20:28:10 +03:00
Mehmet Salih Yavuz	daf78c9374	test(react18): silence jest/no-disabled-tests on the skipped drag tests oxlint's jest/no-disabled-tests fires on the two `test.skip` calls added in the previous commit. Add a targeted eslint-disable-next-line so the skip stays explicit (TODO points at the react-dnd upgrade) without breaking lint.	2026-05-14 19:28:37 +03:00
Mehmet Salih Yavuz	705653f3ba	test(react18): skip 2 reorder-within-list drag tests pending react-dnd upgrade react-dnd@^11.1.3 is 5 majors behind current. Under React 18 the dragStart redux dispatch from react-dnd-html5-backend@11 doesn't reach `monitor.isDragging()` before the next fireEvent, so drag tests that combine useDrag + useDrop on the same element raise "Cannot call hover while not dragging" at drop. Pure source-only drag tests in these same files still pass. Skip the two affected tests with a TODO so the rest of the suite stays green; the proper fix is upgrading react-dnd to v14+ (full React 18 support), which is out of scope for this bump.	2026-05-14 19:09:43 +03:00
Mehmet Salih Yavuz	c6442adde1	fix(react18): resolve lint and findDOMNode/console-spy test failures Lint / type errors: - antd v5 doesn't re-export TooltipRef at the top level; import it from antd/es/tooltip in Tooltip and Popover wrappers. - AntdAvatar.Group is a plain React.FC and rejects refs — drop forwardRef on the AvatarGroup wrapper. - BaseIcon forwardRef target straddled HTMLSpanElement and SVGSVGElement; widen the ref type and cast the antd Icon branch to bypass the intersection. Test failures from console / DOM behaviour change in React 18: - ThemeController: re-spy console.warn/error in beforeEach so the jest-fail-on-console wrapper doesn't replace the spy each test. - logging.test: restore window.console in a finally so the failOnConsole afterEach can read console[methodName]. - QueryAutoRefresh / ChartTable: import `act` from `react` instead of the deprecated `react-dom/test-utils`. - CopyToClipboard: wrap the cloneElement copy node in a span so antd Tooltip has a real DOM ref target. - GenericLink: convert to forwardRef so it can be a Tooltip trigger. - DateFilterLabel: wrap the DateLabel trigger in a span — DateLabel forwards its ref to an inner span, which would otherwise become the popover's positioning anchor under React 18. - getControlItemsMap: wrap StyledRowFormItem inside the Tooltip in a span so antd doesn't fall back to findDOMNode. - SqlEditorLeftBar: wrap DatabaseSelector inside the Popover in a span for the same reason. - IconTooltip: forwardRef so it can be used as a tooltip / popover trigger child. Also pick up pre-commit auto-fixes (ruff PERF -> dict.fromkeys, prettier formatting) so pre-commit passes cleanly on CI.	2026-05-14 18:27:13 +03:00
Mehmet Salih Yavuz	bf4840dea1	fix(react18): forwardRef Popover wrapper, wrap explore popover trigger children in span - Popover (superset-ui-core): forward refs to antd Popover so consumers that pass it as a trigger child can attach a DOM ref without triggering findDOMNode. - Explore popover triggers (ColorBreakpoint, Contour, DndColumnSelect, AdhocFilter): the popover children are arbitrary user nodes which are often function components without forwardRef. Wrapping them in a span gives antd's resize observer a real DOM ref to attach, eliminating the React 18 deprecation warning.	2026-05-14 16:23:33 +03:00
Mehmet Salih Yavuz	f80000102b	fix(react18): forwardRef Avatar/AvatarGroup, wrap DropdownButton in span - Avatar / AvatarGroup: antd Avatar.Group children pass through a resize observer, so the wrappers need to support refs to skip the findDOMNode fallback. - DropdownButton: antd Dropdown.Button is a plain function component, so the Tooltip wrapping it cannot attach a ref. Wrap in a span so the resize observer attaches to a real DOM node.	2026-05-14 16:13:46 +03:00
Mehmet Salih Yavuz	f67bd7eadf	fix(react18): silence findDOMNode / defaultProps deprecations from popovers and modal - Modal: pass nodeRef to react-draggable so it stops falling back to ReactDOM.findDOMNode (deprecated in React 18). - MetricsControl: replace the static MetricsControl.defaultProps assignment with destructured parameter defaults (React 18 deprecates defaultProps on function components). - AdhocMetricPopoverTrigger: wrap the popover trigger child in a span so antd Popover's resize observer can attach a ref to a real DOM node, avoiding the findDOMNode fallback path.	2026-05-14 15:59:51 +03:00
Mehmet Salih Yavuz	bcea2c2668	fix(react18): forwardRef on superset-ui-core wrappers used as tooltip/dropdown triggers React 18.3 promotes findDOMNode to a deprecation warning. rc-resize-observer (inside antd Tooltip/Dropdown) falls back to findDOMNode when its child does not support refs. Without forwardRef on Button, Label, Tooltip, BaseIconComponent, AsyncIcon, the antd-generated Icons (antdEnhancedIcons + iconOverrides), and the AsyncIcon jest mock, every Tooltip/Dropdown wrapping these would emit the warning and fail jest-fail-on-console. EditableTitle wraps antd Input.TextArea in a Tooltip. TextArea's imperative ref returns { resizableTextArea, focus, blur } (not a DOM node), so the resize observer's findDOMNode-fallback fires anyway; wrap in a span to attach a real DOM ref. Also drop the empty IconWithoutRef helper in RefreshLabel that was wrapping an icon in forwardRef without forwarding the ref.	2026-05-14 15:48:24 +03:00
Mehmet Salih Yavuz	8cfbf24b81	chore(deps): bump react to ^18.3.0	2026-05-11 11:23:40 +03:00