diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.tsx b/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.tsx
index 51fa206b356..2a97d2426a3 100644
--- a/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.tsx
@@ -50,7 +50,7 @@ interface TestDatasource {
   id?: number;
   name: string;
   datasource_name?: string;
-  database: { name: string };
+  database: { id: number; database_name: string; name?: string; backend?: string };
   columns?: Partial<ColumnObject>[];
   type?: DatasourceType;
   main_dttm_col?: string | null;
@@ -63,6 +63,8 @@ interface TestDatasource {
 const mockDatasource: TestDatasource = {
   id: 25,
   database: {
+    id: 1,
+    database_name: 'examples',
     name: 'examples',
   },
   name: 'channels',
@@ -295,7 +297,6 @@ test('Click on Edit dataset', async () => {
 
 test('Edit dataset should be disabled when user is not admin', async () => {
   const props = createProps();
-  // @ts-expect-error
   props.user.roles = {};
   props.datasource.owners = [];
   SupersetClientGet.mockImplementationOnce(
diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl/index.tsx b/superset-frontend/src/explore/components/controls/DatasourceControl/index.tsx
index ebcc0cf6c42..ff93da5a14c 100644
--- a/superset-frontend/src/explore/components/controls/DatasourceControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl/index.tsx
@@ -253,9 +253,11 @@ class DatasourceControl extends PureComponent<DatasourceControlProps, Datasource
   }
 
   onDatasourceSave = (datasource: Datasource) => {
-    this.props.actions.changeDatasource(datasource);
+    // Cast to ExtendedDatasource for the component's internal use
+    this.props.actions.changeDatasource(datasource as ExtendedDatasource);
+    // Cast datasource for getTemporalColumns which expects Dataset | QueryResponse
     const { temporalColumns, defaultTemporalColumn } =
-      getTemporalColumns(datasource);
+      getTemporalColumns(datasource as Parameters<typeof getTemporalColumns>[0]);
     const { columns } = datasource;
     // the current granularity_sqla might not be a temporal column anymore
     const timeCol = this.props.form_data?.granularity_sqla;
@@ -447,7 +449,11 @@ class DatasourceControl extends PureComponent<DatasourceControlProps, Datasource
             modalFooter={
               <ViewQueryModalFooter
                 changeDatasource={this.toggleSaveDatasetModal}
-                datasource={datasource}
+                datasource={{
+                  id: String(datasource.id),
+                  sql: datasource.sql || '',
+                  type: datasource.type,
+                }}
               />
             }
             draggable={false}
@@ -477,7 +483,7 @@ class DatasourceControl extends PureComponent<DatasourceControlProps, Datasource
 
     queryDatasourceMenuItems.push({
       key: SAVE_AS_DATASET,
-      label: t('Save as dataset'),
+      label: <span>{t('Save as dataset')}</span>,
     });
 
     const queryDatasourceMenu = (
@@ -618,4 +624,7 @@ class DatasourceControl extends PureComponent<DatasourceControlProps, Datasource
   }
 }
 
-export default withTheme(DatasourceControl);
+// withTheme injects the theme prop, so we need to cast the component type
+export default withTheme(
+  DatasourceControl as React.ComponentType<Omit<DatasourceControlProps, 'theme'>>,
+);
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx
index b947f69ff75..5401bc715e9 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx
@@ -19,7 +19,7 @@
 import thunk from 'redux-thunk';
 import configureStore from 'redux-mock-store';
 
-import { ensureIsArray, QueryFormData } from '@superset-ui/core';
+import { ensureIsArray, QueryFormData, QueryFormMetric } from '@superset-ui/core';
 import { GenericDataType } from '@apache-superset/core/api/core';
 import { ColumnMeta } from '@superset-ui/chart-controls';
 import {
@@ -166,7 +166,7 @@ test('renders options with adhoc metric', async () => {
     setup({
       formData: {
         ...baseFormData,
-        metrics: [adhocMetric],
+        metrics: [adhocMetric as unknown as QueryFormMetric],
       },
     }),
     {
@@ -205,7 +205,7 @@ test('cannot drop a column that is not part of the simple column selection', ()
       {setup({
         formData: {
           ...baseFormData,
-          metrics: [adhocMetric],
+          metrics: [adhocMetric as unknown as QueryFormMetric],
         },
         columns: [{ column_name: 'order_date' }],
       })}
@@ -335,7 +335,7 @@ describe('when disallow_adhoc_metrics is set', () => {
         {setup({
           formData: {
             ...baseFormData,
-            metrics: [adhocMetric],
+            metrics: [adhocMetric as unknown as QueryFormMetric],
           },
           datasource: {
             ...PLACEHOLDER_DATASOURCE,
@@ -383,7 +383,7 @@ describe('when disallow_adhoc_metrics is set', () => {
         {setup({
           formData: {
             ...baseFormData,
-            metrics: [adhocMetric],
+            metrics: [adhocMetric as unknown as QueryFormMetric],
           },
           datasource: {
             ...PLACEHOLDER_DATASOURCE,