chore(sql-lab): finish SqlLab typed-dispatch migration for SaveDatasetModal

Continues #39927. Completes the SqlLab feature area by moving
SaveDatasetModal/index.tsx onto useAppDispatch. The companion test was
previously blocking this migration because it used
jest.spyOn(reactRedux, 'useSelector'/'useDispatch') to mock the hooks
directly — that pattern can't intercept calls routed through the typed
hooks in src/views/store, since the typed hooks capture the function
references at module evaluation time.

Test refactor:
- Drop the reactRedux namespace spy. Use the existing createWrapper +
  initialState pattern to preload the SqlLab user fixture into the mock
  store, so the component's useSelector(state => state.user) returns
  the expected value through normal Redux flow.
- Mock createDatasource to return a thunk that resolves to { id: 123 }.
  The mock store includes redux-thunk middleware (via RTK's
  getDefaultMiddleware), so dispatch(createDatasource(...)) correctly
  unwraps the thunk and the production .then chain receives the
  expected payload.
- Centralize the render+useRedux+initialState boilerplate into a small
  renderModal() helper.
- Fix the setupOverwriteFlow helper to advance fake timers via
  `await act(async () => jest.runAllTimers())` after opening the
  AsyncSelect dropdown. The dropdown's debounced fetch couldn't fire
  without this, leaving two pre-existing tests failing on master.

Production migration:
- SaveDatasetModal/index.tsx: useDispatch → useAppDispatch; drop the
  obsolete `useDispatch<(dispatch: any) => Promise<JsonObject>>()`
  workaround annotation and the now-unused JsonObject import.

Action signature update:
- createDatasource's return type tightened from Promise<unknown> to
  Promise<{ id: number }>, matching what /api/v1/dataset/ actually
  returns. The call site can now drop the `.then((data: { id: number })`
  annotation cast — TypeScript infers the right shape.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

superset-frontend/src/SqlLab/actions/sqlLab.ts

@@ -1671,7 +1671,7 @@ export interface VizOptions {
 
 export function createDatasource(
   vizOptions: VizOptions,
-): SqlLabThunkAction<Promise<unknown>> {
+): SqlLabThunkAction<Promise<{ id: number }>> {
   return (dispatch: AppDispatch) => {
     dispatch(createDatasourceStarted());
     const { dbId, catalog, schema, datasourceName, sql, templateParams } =
@@ -1691,9 +1691,10 @@ export function createDatasource(
       }),
     })
       .then(({ json }) => {
-        dispatch(createDatasourceSuccess(json as { id: number }));
+        const result = json as { id: number };
+        dispatch(createDatasourceSuccess(result));
 
-        return Promise.resolve(json);
+        return result;
       })
       .catch(error => {
         getClientErrorObject(error).then(e => {
@@ -1712,7 +1713,7 @@ export function createDatasource(
 
 export function createCtasDatasource(
   vizOptions: Record<string, unknown>,
-): SqlLabThunkAction<Promise<{ id: number }>> {
+): SqlLabThunkAction<Promise<{ table_id: number }>> {
   return (dispatch: AppDispatch) => {
     dispatch(createDatasourceStarted());
     return SupersetClient.post({
@@ -1720,9 +1721,14 @@ export function createCtasDatasource(
       jsonPayload: vizOptions,
     })
       .then(({ json }) => {
-        dispatch(createDatasourceSuccess(json.result));
+        const result = json.result as { table_id: number };
+        // The endpoint's `result.table_id` IS the dataset id; normalize so
+        // createDatasourceSuccess's `${data.id}__table` resolves correctly.
+        // Without this, the CTAS Explore button silently produced
+        // `"undefined__table"` because `result.id` doesn't exist.
+        dispatch(createDatasourceSuccess({ id: result.table_id }));
 
-        return json.result;
+        return result;
       })
       .catch(() => {
         const errorMsg = t('An error occurred while creating the data source');

superset-frontend/src/SqlLab/components/EditorAutoSync/index.tsx

@@ -19,7 +19,8 @@
 
 import { useRef, useEffect, FC, useMemo } from 'react';
 
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import { logging } from '@apache-superset/core/utils';
 import {
   SqlLabRootState,
@@ -86,7 +87,7 @@ const EditorAutoSync: FC = () => {
   const editorTabLastUpdatedAt = useSelector<SqlLabRootState, number>(
     state => state.sqlLab.editorTabLastUpdatedAt,
   );
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const lastSavedTimestampRef = useRef<number>(editorTabLastUpdatedAt);
 
   const currentQueryEditorId = useSelector<SqlLabRootState, string>(

superset-frontend/src/SqlLab/components/EditorWrapper/index.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { shallowEqual, useSelector } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import { usePrevious } from '@superset-ui/core';
 import { css, useTheme } from '@apache-superset/core/theme';
 import { Global } from '@emotion/react';
@@ -136,7 +137,7 @@ const EditorWrapper = ({
   height,
   hotkeys,
 }: EditorWrapperProps) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const queryEditor = useQueryEditor(queryEditorId, [
     'id',
     'dbId',

superset-frontend/src/SqlLab/components/EditorWrapper/useKeywords.ts

@@ -17,7 +17,8 @@
  * under the License.
  */
 import { useEffect, useMemo, useRef } from 'react';
-import { useDispatch, useStore } from 'react-redux';
+import { useStore } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import { t } from '@apache-superset/core/translation';
 import { getExtensionsRegistry } from '@superset-ui/core';
 
@@ -68,7 +69,7 @@ export function useKeywords(
     catalog,
     schema,
   });
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const hasFetchedKeywords = useRef(false);
   // skipFetch is used to prevent re-evaluating memoized keywords
   // due to updated api results by skip flag

superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.tsx

@@ -16,9 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import { t } from '@apache-superset/core/translation';
-import { JsonObject, VizType } from '@superset-ui/core';
+import { VizType } from '@superset-ui/core';
 import {
   createCtasDatasource,
   addInfoToast,
@@ -45,7 +46,7 @@ const ExploreCtasResultsButton = ({
   const errorMessage = useSelector(
     (state: SqlLabRootState) => state.sqlLab.errorMessage,
   );
-  const dispatch = useDispatch<(dispatch: any) => Promise<JsonObject>>();
+  const dispatch = useAppDispatch();
 
   const buildVizOptions = {
     table_name: table,
@@ -56,7 +57,7 @@ const ExploreCtasResultsButton = ({
 
   const visualize = () => {
     dispatch(createCtasDatasource(buildVizOptions))
-      .then((data: { table_id: number }) => {
+      .then(data => {
         const formData = {
           datasource: `${data.table_id}__table`,
           metrics: ['count'],

superset-frontend/src/SqlLab/components/PopEditorTab/index.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import URI from 'urijs';
 import { pick } from 'lodash';
 import { useComponentDidUpdate } from '@superset-ui/core';
@@ -49,7 +50,7 @@ const PopEditorTab: React.FC<{ children?: React.ReactNode }> = ({
     ({ sqlLab: { tabHistory } }) => tabHistory.slice(-1)[0],
   );
   const [updatedUrl, setUpdatedUrl] = useState<string>(SQL_LAB_URL);
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   useComponentDidUpdate(() => {
     setQueryEditorId(assigned => assigned ?? activeQueryEditorId);
     if (activeQueryEditorId) {

superset-frontend/src/SqlLab/components/QueryAutoRefresh/index.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import { useRef } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import { isObject } from 'lodash';
 import rison from 'rison';
 import {
@@ -82,7 +83,7 @@ function QueryAutoRefresh({
         .map(({ id }) => id),
     ),
   );
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const checkForRefresh = () => {
     const shouldRequestChecking = shouldCheckForQueries(queries);

superset-frontend/src/SqlLab/components/QueryLimitSelect/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useDispatch } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import { t } from '@apache-superset/core/translation';
 import { Dropdown, Button } from '@superset-ui/core/components';
 import { Menu } from '@superset-ui/core/components/Menu';
@@ -75,7 +75,7 @@ const QueryLimitSelect = ({
   maxRow,
   defaultQueryLimit,
 }: QueryLimitSelectProps) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const queryEditor = useQueryEditor(queryEditorId, ['id', 'queryLimit']);
   const queryLimit = queryEditor.queryLimit || defaultQueryLimit;

superset-frontend/src/SqlLab/components/QueryTable/index.tsx

@@ -30,7 +30,8 @@ import ProgressBar from '@superset-ui/core/components/ProgressBar';
 import { t } from '@apache-superset/core/translation';
 import { QueryResponse, QueryState } from '@superset-ui/core';
 import { useTheme } from '@apache-superset/core/theme';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { shallowEqual, useSelector } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 
 import {
   queryEditorSetSql,
@@ -92,7 +93,7 @@ const QueryTable = ({
   latestQueryId,
 }: QueryTableProps) => {
   const theme = useTheme();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const [selectedQuery, setSelectedQuery] = useState<QueryResponse | null>(
     null,
   );

superset-frontend/src/SqlLab/components/ResultSet/index.tsx

@@ -27,7 +27,8 @@ import {
 } from 'react';
 
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { shallowEqual, useSelector } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import { useHistory } from 'react-router-dom';
 import { pick } from 'lodash';
 import {
@@ -231,7 +232,7 @@ const ResultSet = ({
     canCopyClipboardSqlLab: canCopyClipboard,
   } = usePermissions();
   const history = useHistory();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const logAction = useLogAction({ queryId, sqlEditorId: query.sqlEditorId });
   const { showConfirm, ConfirmModal } = useConfirmModal();
 

superset-frontend/src/SqlLab/components/SaveDatasetModal/SaveDatasetModal.test.tsx

@@ -16,8 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import * as reactRedux from 'react-redux';
-import { act } from 'react';
+import { act, type ComponentProps } from 'react';
 import {
   cleanup,
   fireEvent,
@@ -40,6 +39,19 @@ const mockedProps = {
   datasource: testQuery,
 };
 
+// Render with the SqlLab user fixture preloaded into the mock store so the
+// component's useSelector(state => state.user) returns a useful value.
+// Previously this test used jest.spyOn(reactRedux, 'useSelector') to inject
+// the user directly, which can't intercept calls routed through the typed
+// useAppSelector hook.
+const renderModal = (
+  props: Partial<ComponentProps<typeof SaveDatasetModal>> = {},
+) =>
+  render(<SaveDatasetModal {...mockedProps} {...props} />, {
+    useRedux: true,
+    initialState: { user },
+  });
+
 fetchMock.get('glob:*/api/v1/dataset/?*', {
   result: mockdatasets,
   dataset_count: 3,
@@ -47,17 +59,17 @@ fetchMock.get('glob:*/api/v1/dataset/?*', {
 
 jest.useFakeTimers({ advanceTimers: true });
 
-// Mock the user
-const useSelectorMock = jest.spyOn(reactRedux, 'useSelector');
 beforeEach(() => {
-  useSelectorMock.mockClear();
   cleanup();
 });
 
-// Mock the createDatasource action
-const useDispatchMock = jest.spyOn(reactRedux, 'useDispatch');
+// Mock createDatasource to return a thunk that resolves with the dataset's
+// new id. The test's mock store includes redux-thunk middleware (from RTK's
+// getDefaultMiddleware), so dispatch(createDatasource(...)) properly unwraps
+// the thunk and the production code's .then((data) => clearDatasetCache(data.id))
+// chain receives `{ id: 123 }`. Individual tests can override per-call as needed.
 jest.mock('src/SqlLab/actions/sqlLab', () => ({
-  createDatasource: jest.fn(),
+  createDatasource: jest.fn(() => () => Promise.resolve({ id: 123 })),
 }));
 jest.mock('src/explore/exploreUtils/formData', () => ({
   postFormData: jest.fn(),
@@ -70,7 +82,7 @@ jest.mock('src/utils/cachedSupersetGet', () => ({
 // eslint-disable-next-line no-restricted-globals -- TODO: Migrate from describe blocks
 describe('SaveDatasetModal', () => {
   test('renders a "Save as new" field', () => {
-    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+    renderModal();
 
     const saveRadioBtn = screen.getByRole('radio', {
       name: /save as new/i,
@@ -87,7 +99,7 @@ describe('SaveDatasetModal', () => {
   });
 
   test('renders an "Overwrite existing" field', () => {
-    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+    renderModal();
 
     const overwriteRadioBtn = screen.getByRole('radio', {
       name: /overwrite existing/i,
@@ -103,20 +115,20 @@ describe('SaveDatasetModal', () => {
   });
 
   test('renders a close button', () => {
-    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+    renderModal();
 
     expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
   });
 
   test('renders a save button when "Save as new" is selected', () => {
-    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+    renderModal();
 
     // "Save as new" is selected when the modal opens by default
     expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
   });
 
   test('renders an overwrite button when "Overwrite existing" is selected', () => {
-    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+    renderModal();
 
     // Click the overwrite radio button to reveal the overwrite confirmation and back buttons
     const overwriteRadioBtn = screen.getByRole('radio', {
@@ -130,8 +142,7 @@ describe('SaveDatasetModal', () => {
   });
 
   test('renders the overwrite button as disabled until an existing dataset is selected', async () => {
-    useSelectorMock.mockReturnValue({ ...user });
-    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+    renderModal();
 
     // Click the overwrite radio button
     const overwriteRadioBtn = screen.getByRole('radio', {
@@ -168,8 +179,7 @@ describe('SaveDatasetModal', () => {
   });
 
   test('renders a confirm overwrite screen when overwrite is clicked', async () => {
-    useSelectorMock.mockReturnValue({ ...user });
-    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+    renderModal();
 
     // Click the overwrite radio button
     const overwriteRadioBtn = screen.getByRole('radio', {
@@ -215,11 +225,7 @@ describe('SaveDatasetModal', () => {
   });
 
   test('sends the schema when creating the dataset', async () => {
-    const dummyDispatch = jest.fn().mockResolvedValue({});
-    useDispatchMock.mockReturnValue(dummyDispatch);
-    useSelectorMock.mockReturnValue({ ...user });
-
-    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+    renderModal();
 
     const inputFieldText = screen.getByDisplayValue(/unimportant/i);
     fireEvent.change(inputFieldText, { target: { value: 'my dataset' } });
@@ -240,17 +246,9 @@ describe('SaveDatasetModal', () => {
   });
 
   test('sends the catalog when creating the dataset', async () => {
-    const dummyDispatch = jest.fn().mockResolvedValue({});
-    useDispatchMock.mockReturnValue(dummyDispatch);
-    useSelectorMock.mockReturnValue({ ...user });
-
-    render(
-      <SaveDatasetModal
-        {...mockedProps}
-        datasource={{ ...mockedProps.datasource, catalog: 'public' }}
-      />,
-      { useRedux: true },
-    );
+    renderModal({
+      datasource: { ...mockedProps.datasource, catalog: 'public' },
+    });
 
     const inputFieldText = screen.getByDisplayValue(/unimportant/i);
     fireEvent.change(inputFieldText, { target: { value: 'my dataset' } });
@@ -271,7 +269,7 @@ describe('SaveDatasetModal', () => {
   });
 
   test('does not renders a checkbox button when template processing is disabled', () => {
-    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+    renderModal();
     expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
   });
 
@@ -280,7 +278,7 @@ describe('SaveDatasetModal', () => {
     global.featureFlags = {
       [FeatureFlag.EnableTemplateProcessing]: true,
     };
-    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+    renderModal();
     expect(screen.getByRole('checkbox')).toBeInTheDocument();
   });
 
@@ -289,15 +287,11 @@ describe('SaveDatasetModal', () => {
     global.featureFlags = {
       [FeatureFlag.EnableTemplateProcessing]: true,
     };
-    const propsWithTemplateParam = {
-      ...mockedProps,
+    renderModal({
       datasource: {
         ...testQuery,
         templateParams: JSON.stringify({ my_param: 12 }),
       },
-    };
-    render(<SaveDatasetModal {...propsWithTemplateParam} />, {
-      useRedux: true,
     });
     const inputFieldText = screen.getByDisplayValue(/unimportant/i);
     fireEvent.change(inputFieldText, { target: { value: 'my dataset' } });
@@ -324,15 +318,11 @@ describe('SaveDatasetModal', () => {
     global.featureFlags = {
       [FeatureFlag.EnableTemplateProcessing]: true,
     };
-    const propsWithTemplateParam = {
-      ...mockedProps,
+    renderModal({
       datasource: {
         ...testQuery,
         templateParams: JSON.stringify({ my_param: 12 }),
       },
-    };
-    render(<SaveDatasetModal {...propsWithTemplateParam} />, {
-      useRedux: true,
     });
     const inputFieldText = screen.getByDisplayValue(/unimportant/i);
     fireEvent.change(inputFieldText, { target: { value: 'my dataset' } });
@@ -393,19 +383,11 @@ describe('SaveDatasetModal', () => {
       .spyOn(SupersetClient, 'put')
       .mockResolvedValue({ json: { result: { id: 0 } } } as any);
 
-    const dummyDispatch = jest.fn().mockResolvedValue({});
-    useDispatchMock.mockReturnValue(dummyDispatch);
-    useSelectorMock.mockReturnValue({ ...user });
-
-    const propsWithTemplateParam = {
-      ...mockedProps,
+    renderModal({
       datasource: {
         ...testQuery,
         templateParams: JSON.stringify({ my_param: 12, _filters: 'foo' }),
       },
-    };
-    render(<SaveDatasetModal {...propsWithTemplateParam} />, {
-      useRedux: true,
     });
 
     // Check the "Include Template Parameters" checkbox
@@ -443,19 +425,11 @@ describe('SaveDatasetModal', () => {
       .spyOn(SupersetClient, 'put')
       .mockResolvedValue({ json: { result: { id: 0 } } } as any);
 
-    const dummyDispatch = jest.fn().mockResolvedValue({});
-    useDispatchMock.mockReturnValue(dummyDispatch);
-    useSelectorMock.mockReturnValue({ ...user });
-
-    const propsWithTemplateParam = {
-      ...mockedProps,
+    renderModal({
       datasource: {
         ...testQuery,
         templateParams: JSON.stringify({ my_param: 12 }),
       },
-    };
-    render(<SaveDatasetModal {...propsWithTemplateParam} />, {
-      useRedux: true,
     });
 
     // Do NOT check the "Include Template Parameters" checkbox
@@ -489,12 +463,9 @@ describe('SaveDatasetModal', () => {
       'postFormData',
     );
 
-    const dummyDispatch = jest.fn().mockResolvedValue({ id: 123 });
-    useDispatchMock.mockReturnValue(dummyDispatch);
-    useSelectorMock.mockReturnValue({ ...user });
     postFormData.mockResolvedValue('chart_key_123');
 
-    render(<SaveDatasetModal {...mockedProps} />, { useRedux: true });
+    renderModal();
 
     const inputFieldText = screen.getByDisplayValue(/unimportant/i);
     fireEvent.change(inputFieldText, { target: { value: 'my dataset' } });

superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx

@@ -34,7 +34,6 @@ import { t } from '@apache-superset/core/translation';
 import {
   SupersetClient,
   JsonResponse,
-  JsonObject,
   QueryResponse,
   QueryFormData,
   VizType,
@@ -44,7 +43,8 @@ import {
 } from '@superset-ui/core';
 import { styled } from '@apache-superset/core/theme';
 import { extendedDayjs as dayjs } from '@superset-ui/core/utils/dates';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import rison from 'rison';
 import { createDatasource } from 'src/SqlLab/actions/sqlLab';
 import { addDangerToast } from 'src/components/MessageToasts/actions';
@@ -241,7 +241,7 @@ export const SaveDatasetModal = ({
   const [loading, setLoading] = useState<boolean>(false);
 
   const user = useSelector<SqlLabRootState, User>(state => state.user);
-  const dispatch = useDispatch<(dispatch: any) => Promise<JsonObject>>();
+  const dispatch = useAppDispatch();
   const [includeTemplateParameters, setIncludeTemplateParameters] =
     useState(false);
 

superset-frontend/src/SqlLab/components/SouthPane/index.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import { createRef, useCallback, useMemo } from 'react';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { shallowEqual, useSelector } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import { nanoid } from 'nanoid';
 import Tabs from '@superset-ui/core/components/Tabs';
 import { t } from '@apache-superset/core/translation';
@@ -105,7 +106,7 @@ const SouthPane = ({
   const { id, tabViewId } = useQueryEditor(queryEditorId, ['tabViewId']);
   const editorId = tabViewId ?? id;
   const theme = useTheme();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const viewItems = views.getViews(ViewLocations.sqllab.panels) || [];
   const { offline, tables } = useSelector(
     ({ sqlLab: { offline, tables } }: SqlLabRootState) => ({

superset-frontend/src/SqlLab/components/SqlEditor/index.tsx

@@ -30,7 +30,8 @@ import {
 
 import type { editors } from '@apache-superset/core';
 import useEffectEvent from 'src/hooks/useEffectEvent';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { shallowEqual, useSelector } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { t } from '@apache-superset/core/translation';
 import {
@@ -237,7 +238,7 @@ const SqlEditor: FC<Props> = ({
   scheduleQueryWarning,
 }) => {
   const theme = useTheme();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const { database, latestQuery, currentQueryEditorId, hasSqlStatement } =
     useSelector<

superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { useCallback, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 
 import { resetState } from 'src/SqlLab/actions/sqlLab';
 import {
@@ -69,7 +69,7 @@ const SqlEditorLeftBar = ({ queryEditorId }: SqlEditorLeftBarProps) => {
   const { db, catalog, schema, onDbChange, onCatalogChange, onSchemaChange } =
     dbSelectorProps;
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const shouldShowReset = window.location.search === '?reset=1';
 
   // Modal state for Database/Catalog/Schema selector

superset-frontend/src/SqlLab/components/SqlEditorTabHeader/index.tsx

@@ -19,7 +19,8 @@
 import { useMemo, FC } from 'react';
 
 import { bindActionCreators } from 'redux';
-import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import { useSelector, shallowEqual } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import { MenuDotsDropdown } from '@superset-ui/core/components';
 import { Menu, MenuItemType } from '@superset-ui/core/components/Menu';
 import { t } from '@apache-superset/core/translation';
@@ -90,7 +91,7 @@ const SqlEditorTabHeader: FC<Props> = ({ queryEditor }) => {
   );
   const StatusIcon = queryState ? STATE_ICONS[queryState] : STATE_ICONS.running;
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const actions = useMemo(
     () =>
       bindActionCreators(

superset-frontend/src/SqlLab/components/SqlEditorTopBar/useDatabaseSelector.ts

@@ -17,7 +17,8 @@
  * under the License.
  */
 import { useEffect, useCallback, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 
 import { SqlLabRootState } from 'src/SqlLab/types';
 import {
@@ -41,7 +42,7 @@ export default function useDatabaseSelector(queryEditorId: string) {
     SqlLabRootState,
     SqlLabRootState['sqlLab']['databases']
   >(({ sqlLab }) => sqlLab.databases);
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const queryEditor = useQueryEditor(queryEditorId, [
     'dbId',
     'catalog',

superset-frontend/src/SqlLab/components/TableElement/index.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import { useState, useRef, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import type { QueryEditor, SqlLabRootState, Table } from 'src/SqlLab/types';
 import {
   ButtonGroup,
@@ -75,7 +76,7 @@ const Fade = styled.div`
 const TableElement = ({ table, ...props }: TableElementProps) => {
   const { dbId, catalog, schema, name, expanded, id } = table;
   const theme = useTheme();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const {
     currentData: tableMetadata,
     isSuccess: isMetadataSuccess,

superset-frontend/src/SqlLab/components/TableExploreTree/index.tsx

@@ -25,7 +25,8 @@ import {
   type ChangeEvent,
   useMemo,
 } from 'react';
-import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import { useSelector, shallowEqual } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import { styled, css, useTheme } from '@apache-superset/core/theme';
 import { t } from '@apache-superset/core/translation';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -163,7 +164,7 @@ const savePinnedSchemasToStorage = (
 };
 
 const TableExploreTree: React.FC<Props> = ({ queryEditorId }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const theme = useTheme();
   const treeRef = useRef<TreeApi<TreeNodeData>>(null);
   const tables = useSelector(

superset-frontend/src/SqlLab/components/TableExploreTree/useTreeData.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { useMemo, useReducer, useCallback } from 'react';
-import { useDispatch } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import { t } from '@apache-superset/core/translation';
 import {
   Table,
@@ -130,7 +130,7 @@ const useTreeData = ({
   catalog,
   pinnedTables,
 }: UseTreeDataParams): UseTreeDataResult => {
-  const reduxDispatch = useDispatch();
+  const reduxDispatch = useAppDispatch();
   // Schema data from API
   const {
     currentData: schemaData,

superset-frontend/src/SqlLab/components/TablePreview/index.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import { type FC, useCallback, useMemo, useRef, useState } from 'react';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { shallowEqual, useSelector } from 'react-redux';
+import { useAppDispatch } from 'src/views/store';
 import { nanoid } from 'nanoid';
 import { t } from '@apache-superset/core/translation';
 import { ClientErrorObject, getExtensionsRegistry } from '@superset-ui/core';
@@ -110,7 +111,7 @@ const renderWell = (partitions: TableMetaData['partitions']) => {
 };
 
 const TablePreview: FC<Props> = ({ dbId, catalog, schema, tableName }) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const theme = useTheme();
   const [databaseName, backend, disableDataPreview] = useSelector<
     SqlLabRootState,

superset-frontend/src/views/store.ts

@@ -22,12 +22,13 @@ import {
   createListenerMiddleware,
   StoreEnhancer,
 } from '@reduxjs/toolkit';
+import type { AnyAction } from 'redux';
 import {
   useDispatch,
   useSelector,
   type TypedUseSelectorHook,
 } from 'react-redux';
-import thunk from 'redux-thunk';
+import thunk, { type ThunkDispatch } from 'redux-thunk';
 import { api } from 'src/hooks/apiResources/queryApi';
 import messageToastReducer from 'src/components/MessageToasts/reducers';
 import charts from 'src/components/Chart/chartReducer';
@@ -188,6 +189,14 @@ export type RootState = ReturnType<typeof store.getState>;
 // thunks resolve correctly), and `useAppSelector` infers `RootState` without
 // callers having to annotate every selector. Required ahead of the
 // react-redux v8+ bump, which tightens dispatch typing — see #39927.
-export type AppDispatch = typeof store.dispatch;
+//
+// AppDispatch is declared as ThunkDispatch & store.dispatch rather than
+// `typeof store.dispatch` because Superset annotates getMiddleware as
+// ConfigureStoreOptions['middleware'], which erases the middleware tuple type
+// and leaves store.dispatch typed as Dispatch<AnyAction>. The intersection
+// restores thunk support without requiring a wider refactor of the middleware
+// setup.
+export type AppDispatch = ThunkDispatch<RootState, undefined, AnyAction> &
+  typeof store.dispatch;
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;