chore: convert chartReducer to TypeScript (#13374)

superset-frontend/src/chart/chartReducer.ts

@@ -18,11 +18,12 @@
  */
 /* eslint camelcase: 0 */
 import { t } from '@superset-ui/core';
+import { ChartState } from 'src/explore/types';
 import { getFormDataFromControls } from 'src/explore/controlUtils';
 import { now } from '../modules/dates';
 import * as actions from './chartAction';
 
-export const chart = {
+export const chart: ChartState = {
   id: 0,
   chartAlert: null,
   chartStatus: 'loading',
@@ -30,14 +31,22 @@ export const chart = {
   chartUpdateEndTime: null,
   chartUpdateStartTime: 0,
   latestQueryFormData: {},
+  sliceFormData: null,
   queryController: null,
   queriesResponse: null,
   triggerQuery: true,
   lastRendered: 0,
 };
 
-export default function chartReducer(charts = {}, action) {
-  const actionHandlers = {
+type ChartActionHandler = (state: ChartState) => ChartState;
+
+type AnyChartAction = Record<string, any>;
+
+export default function chartReducer(
+  charts: Record<string, ChartState> = {},
+  action: AnyChartAction,
+) {
+  const actionHandlers: Record<string, ChartActionHandler> = {
     [actions.ADD_CHART]() {
       return {
         ...chart,
@@ -134,7 +143,7 @@ export default function chartReducer(charts = {}, action) {
       }
       const annotationQuery = {
         ...state.annotationQuery,
-        [action.annotation.name]: action.queryRequest,
+        [action.annotation.name]: action.queryController,
       };
       return {
         ...state,

superset-frontend/src/explore/components/ControlPanelsContainer.tsx

@@ -27,11 +27,6 @@ import {
   QueryFormData,
   DatasourceType,
 } from '@superset-ui/core';
-
-import Tabs from 'src/common/components/Tabs';
-import Collapse from 'src/common/components/Collapse';
-import { PluginContext } from 'src/components/DynamicPlugins';
-import Loading from 'src/components/Loading';
 import {
   ControlPanelSectionConfig,
   ControlState,
@@ -39,11 +34,21 @@ import {
   ExpandedControlItem,
   InfoTooltipWithTrigger,
 } from '@superset-ui/chart-controls';
+
+import Tabs from 'src/common/components/Tabs';
+import Collapse from 'src/common/components/Collapse';
+import { PluginContext } from 'src/components/DynamicPlugins';
+import Loading from 'src/components/Loading';
+
+import { sectionsToRender } from 'src/explore/controlUtils';
+import {
+  ExploreActions,
+  exploreActions,
+} from 'src/explore/actions/exploreActions';
+import { ExplorePageState } from 'src/explore/reducers/getInitialState';
+
 import ControlRow from './ControlRow';
 import Control from './Control';
-import { sectionsToRender } from '../controlUtils';
-import { ExploreActions, exploreActions } from '../actions/exploreActions';
-import { ExploreState } from '../reducers/getInitialState';
 
 export type ControlPanelsContainerProps = {
   actions: ExploreActions;
@@ -312,8 +317,12 @@ class ControlPanelsContainer extends React.Component<ControlPanelsContainerProps
 export { ControlPanelsContainer };
 
 export default connect(
-  function mapStateToProps({ explore }: ExploreState) {
+  function mapStateToProps(state: ExplorePageState) {
+    const { explore, charts } = state;
+    const chartKey = Object.keys(charts)[0];
+    const chart = charts[chartKey];
     return {
+      chart,
       isDatasourceMetaLoading: explore.isDatasourceMetaLoading,
       controls: explore.controls,
       exploreState: explore,

superset-frontend/src/explore/reducers/getInitialState.ts

@@ -23,17 +23,17 @@ import {
   JsonObject,
   QueryFormData,
 } from '@superset-ui/core';
-import { Slice } from 'src/types/Chart';
+import { ControlStateMapping } from '@superset-ui/chart-controls';
 import { CommonBootstrapData } from 'src/types/bootstrapTypes';
-
 import getToastsFromPyFlashMessages from 'src/messageToasts/utils/getToastsFromPyFlashMessages';
+
+import { ChartState, Slice } from 'src/explore/types';
 import { getChartKey } from 'src/explore/exploreUtils';
 import { getControlsState } from 'src/explore/store';
 import {
   getFormDataFromControls,
   applyMapStateToPropsToControl,
 } from 'src/explore/controlUtils';
-import { ControlStateMapping } from '@superset-ui/chart-controls';
 
 export interface ExlorePageBootstrapData extends JsonObject {
   can_add: boolean;
@@ -91,22 +91,24 @@ export default function getInitialState(
     : null;
 
   const chartKey: number = getChartKey(bootstrapData);
+  const chart: ChartState = {
+    id: chartKey,
+    chartAlert: null,
+    chartStatus: null,
+    chartStackTrace: null,
+    chartUpdateEndTime: null,
+    chartUpdateStartTime: 0,
+    latestQueryFormData: getFormDataFromControls(exploreState.controls),
+    sliceFormData,
+    queryController: null,
+    queriesResponse: null,
+    triggerQuery: false,
+    lastRendered: 0,
+  };
 
   return {
     charts: {
-      [chartKey]: {
-        id: chartKey,
-        chartAlert: null,
-        chartStatus: null,
-        chartUpdateEndTime: null,
-        chartUpdateStartTime: 0,
-        latestQueryFormData: getFormDataFromControls(exploreState.controls),
-        sliceFormData,
-        queryController: null,
-        queriesResponse: null,
-        triggerQuery: false,
-        lastRendered: 0,
-      },
+      [chartKey]: chart,
     },
     saveModal: {
       dashboards: [],
@@ -120,4 +122,4 @@ export default function getInitialState(
   };
 }
 
-export type ExploreState = ReturnType<typeof getInitialState>;
+export type ExplorePageState = ReturnType<typeof getInitialState>;

superset-frontend/src/explore/types.ts

@@ -0,0 +1,47 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { QueryData, QueryFormData, AnnotationData } from '@superset-ui/core';
+
+export { Slice, Chart } from 'src/types/Chart';
+
+export type ChartStatus =
+  | 'loading'
+  | 'rendered'
+  | 'failed'
+  | 'stopped'
+  | 'success';
+
+export interface ChartState {
+  id: number;
+  annotationData?: AnnotationData;
+  annotationError?: Record<string, string>;
+  annotationQuery?: Record<string, AbortController>;
+  chartAlert: string | null;
+  chartStatus: ChartStatus | null;
+  chartStackTrace?: string | null;
+  chartUpdateEndTime: number | null;
+  chartUpdateStartTime: number;
+  lastRendered: number;
+  latestQueryFormData: Partial<QueryFormData>;
+  sliceFormData: QueryFormData | null;
+  queryController: AbortController | null;
+  queriesResponse: QueryData | null;
+  triggerQuery: boolean;
+  asyncJobId?: string;
+}