chore(frontend): migrate SqlLab and explore JS/JSX files to TypeScript (#36760)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnMetricSelect.tsx

@@ -333,7 +333,8 @@ function DndColumnMetricSelect(props: DndColumnMetricSelectProps) {
           <MetricDefinitionValue
             key={`metric-${idx}`}
             index={idx}
-            option={item}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            option={item as any}
             onMetricEdit={(changedMetric: Metric | AdhocMetric) => {
               const newValues = [...coercedValue];
               if (changedMetric instanceof AdhocMetric) {
@@ -344,10 +345,14 @@ function DndColumnMetricSelect(props: DndColumnMetricSelectProps) {
               onChange(multi ? newValues : newValues[0]);
             }}
             onRemoveMetric={onClickClose}
-            columns={columns}
-            savedMetrics={savedMetrics}
-            savedMetricsOptions={savedMetrics}
-            datasource={datasource}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            columns={columns as any}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            savedMetrics={savedMetrics as any}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            savedMetricsOptions={savedMetrics as any}
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            datasource={datasource as any}
             onMoveLabel={onShiftOptions}
             onDropLabel={() => {}}
             type={`${DndItemType.AdhocMetricOption}_${name}_${label}`}

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.tsx

@@ -16,12 +16,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useCallback, useState } from 'react';
+import { ChangeEvent, useCallback, useState } from 'react';
 import { t } from '@superset-ui/core';
 import { styled, useTheme } from '@apache-superset/core/ui';
 import { Input, Tooltip } from '@superset-ui/core/components';
 import { Icons } from '@superset-ui/core/components/Icons';
 
+interface DndColumnSelectPopoverTitleProps {
+  title: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  isEditDisabled: boolean;
+  hasCustomLabel: boolean;
+}
+
 const StyledInput = styled(Input)`
   border-radius: ${({ theme }) => theme.borderRadius};
   height: 26px;
@@ -34,7 +41,7 @@ export const DndColumnSelectPopoverTitle = ({
   onChange,
   isEditDisabled,
   hasCustomLabel,
-}) => {
+}: DndColumnSelectPopoverTitleProps) => {
   const theme = useTheme();
   const [isHovered, setIsHovered] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx

@@ -19,7 +19,11 @@
 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 +170,7 @@ test('renders options with adhoc metric', async () => {
     setup({
       formData: {
         ...baseFormData,
-        metrics: [adhocMetric],
+        metrics: [adhocMetric as unknown as QueryFormMetric],
       },
     }),
     {
@@ -205,7 +209,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 +339,7 @@ describe('when disallow_adhoc_metrics is set', () => {
         {setup({
           formData: {
             ...baseFormData,
-            metrics: [adhocMetric],
+            metrics: [adhocMetric as unknown as QueryFormMetric],
           },
           datasource: {
             ...PLACEHOLDER_DATASOURCE,
@@ -383,7 +387,7 @@ describe('when disallow_adhoc_metrics is set', () => {
         {setup({
           formData: {
             ...baseFormData,
-            metrics: [adhocMetric],
+            metrics: [adhocMetric as unknown as QueryFormMetric],
           },
           datasource: {
             ...PLACEHOLDER_DATASOURCE,

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx

@@ -89,10 +89,15 @@ const coerceMetrics = (
         col => col.column_name === metric.column.column_name,
       );
       if (column) {
-        return new AdhocMetric({ ...metric, column });
+        // Cast entire config object to handle type mismatch between @superset-ui/core and local types
+        return new AdhocMetric({
+          ...(metric as unknown as Record<string, unknown>),
+          column,
+        } as Record<string, unknown>);
       }
     }
-    return new AdhocMetric(metric);
+    // Cast to unknown first to handle type mismatch between @superset-ui/core and local AdhocMetric
+    return new AdhocMetric(metric as unknown as Record<string, unknown>);
   });
 };
 
@@ -200,7 +205,11 @@ const DndMetricSelect = (props: any) => {
 
   const onMetricEdit = useCallback(
     (changedMetric: Metric | AdhocMetric, oldMetric: Metric | AdhocMetric) => {
-      if (oldMetric instanceof AdhocMetric && oldMetric.equals(changedMetric)) {
+      if (
+        oldMetric instanceof AdhocMetric &&
+        changedMetric instanceof AdhocMetric &&
+        oldMetric.equals(changedMetric)
+      ) {
         return;
       }
       const newValue = value.map(value => {
@@ -273,7 +282,8 @@ const DndMetricSelect = (props: any) => {
       <MetricDefinitionValue
         key={index}
         index={index}
-        option={option}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        option={option as any}
         onMetricEdit={onMetricEdit}
         onRemoveMetric={onRemoveMetric}
         columns={props.columns}
@@ -343,9 +353,10 @@ const DndMetricSelect = (props: any) => {
       droppedItem.type === DndItemType.Column
     ) {
       const itemValue = droppedItem.value as ColumnMeta;
-      const config: Partial<AdhocMetric> = {
+      // Cast config to handle ColumnMeta/ColumnType mismatch
+      const config = {
         column: itemValue,
-      };
+      } as Partial<AdhocMetric>;
       if (itemValue.type_generic === GenericDataType.Numeric) {
         config.aggregate = AGGREGATES.SUM;
       } else if (