feat(fe): upgrade superset-frontend to Typescript v5 (#31979)

Signed-off-by: hainenber <dotronghai96@gmail.com>
Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

superset-frontend/src/explore/controlUtils/getControlState.ts

@@ -170,7 +170,7 @@ export function getAllControlsState(
   state: ControlPanelState | null,
   formData: QueryFormData,
 ) {
-  const controlsState = {};
+  const controlsState: Record<string, ControlState<any> | null> = {};
   getSectionsToRender(vizType, datasourceType).forEach(section =>
     section.controlSetRows.forEach(fieldsetRow =>
       fieldsetRow.forEach((field: CustomControlItem) => {

superset-frontend/src/explore/controlUtils/getFormDataFromControls.ts

@@ -16,13 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { QueryFormData } from '@superset-ui/core';
+import { JsonValue, QueryFormData } from '@superset-ui/core';
 import { ControlStateMapping } from '@superset-ui/chart-controls';
 
 export function getFormDataFromControls(
   controlsState: ControlStateMapping,
 ): QueryFormData {
-  const formData = {};
+  const formData: Record<string, JsonValue | undefined> = {};
   Object.keys(controlsState).forEach(controlName => {
     const control = controlsState[controlName];
     formData[controlName] = control.value;

superset-frontend/src/explore/controlUtils/getFormDataWithDashboardContext.ts

@@ -84,13 +84,14 @@ const mergeFilterBoxToFormData = (
     __time_grain: 'time_grain_sqla',
     __granularity: 'granularity',
   };
-  const appliedTimeExtras = {};
+  const appliedTimeExtras: Record<string, any> = {};
 
   const filterBoxData: JsonObject = {};
   ensureIsArray(dashboardFormData.extra_filters).forEach(filter => {
-    if (dateColumns[filter.col]) {
+    if (dateColumns[filter.col as keyof typeof dateColumns]) {
       if (filter.val !== NO_TIME_RANGE) {
-        filterBoxData[dateColumns[filter.col]] = filter.val;
+        filterBoxData[dateColumns[filter.col as keyof typeof dateColumns]] =
+          filter.val;
         appliedTimeExtras[filter.col] = filter.val;
       }
     } else {

superset-frontend/src/explore/controlUtils/getSectionsToRender.ts

@@ -23,6 +23,7 @@ import {
 } from '@superset-ui/core';
 import {
   ControlPanelConfig,
+  ControlPanelSectionConfig,
   expandControlConfig,
   isControlPanelSectionConfig,
 } from '@superset-ui/chart-controls';
@@ -38,7 +39,12 @@ const getMemoizedSectionsToRender = memoizeOne(
     } = controlPanelConfig;
 
     // default control panel sections
-    const sections = { ...SECTIONS };
+    const sections: Record<
+      string,
+      | ControlPanelSectionConfig
+      | ControlPanelSectionConfig[]
+      | Partial<ControlPanelSectionConfig>
+    > = { ...SECTIONS };
 
     // apply section overrides
     Object.entries(sectionOverrides).forEach(([section, overrides]) => {
@@ -60,7 +66,7 @@ const getMemoizedSectionsToRender = memoizeOne(
       ? ['granularity']
       : ['granularity_sqla', 'time_grain_sqla'];
 
-    return [datasourceAndVizType]
+    return [datasourceAndVizType as ControlPanelSectionConfig]
       .concat(controlPanelSections.filter(isControlPanelSectionConfig))
       .map(section => {
         const { controlSetRows } = section;

superset-frontend/src/explore/controlUtils/standardizedFormData.test.ts

@@ -313,7 +313,9 @@ describe('should collect control values and create SFD', () => {
     const { formData } = sfd.transform('target_viz', sourceMockStore);
     Object.entries(publicControlsFormData).forEach(([key, value]) => {
       expect(formData).toHaveProperty(key);
-      expect(value).toEqual(publicControlsFormData[key]);
+      expect(value).toEqual(
+        publicControlsFormData[key as keyof typeof publicControlsFormData],
+      );
     });
     expect(formData.columns).toEqual([
       'c1',

superset-frontend/src/explore/controlUtils/standardizedFormData.ts

@@ -203,7 +203,7 @@ export class StandardizedFormData {
      * 7. to refresh validator message
      * */
     const latestFormData = this.getLatestFormData(targetVizType);
-    const publicFormData = {};
+    const publicFormData: Record<string, any> = {};
     publicControls.forEach(key => {
       if (key in exploreState.form_data) {
         publicFormData[key] = exploreState.form_data[key];