From 89b83662a3ebb9b175a39617186961bcf432169a Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Sun, 5 May 2024 13:17:20 +0200 Subject: [PATCH 01/16] chore: Migration of AnnotationLayerControl index.js to TypeScript --- .../{index.jsx => index.tsx} | 149 +++++++++++++----- 1 file changed, 109 insertions(+), 40 deletions(-) rename superset-frontend/src/explore/components/controls/AnnotationLayerControl/{index.jsx => index.tsx} (70%) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx similarity index 70% rename from superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx rename to superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index f70557170c0d8..90890fa5c9800 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -17,15 +17,28 @@ * under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import { List } from 'src/components'; import { connect } from 'react-redux'; -import { t, withTheme } from '@superset-ui/core'; -import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; +import { + HandlerFunction, + JsonObject, + Payload, + QueryFormData, + SupersetTheme, + t, + withTheme, +} from '@superset-ui/core'; +import { + ControlStateMapping, + Dataset, + InfoTooltipWithTrigger, +} from '@superset-ui/chart-controls'; import AsyncEsmComponent from 'src/components/AsyncEsmComponent'; import { getChartKey } from 'src/explore/exploreUtils'; import { runAnnotationQuery } from 'src/components/Chart/chartAction'; import CustomListItem from 'src/explore/components/controls/CustomListItem'; +import { ChartState } from 'src/explore/types'; +import { Slice } from '@reduxjs/toolkit'; import ControlPopover, { getSectionContainerElement, } from '../ControlPopover/ControlPopover'; @@ -36,20 +49,53 @@ const AnnotationLayer = AsyncEsmComponent( () =>
, ); -const propTypes = { - colorScheme: PropTypes.string.isRequired, - annotationError: PropTypes.object, - annotationQuery: PropTypes.object, - vizType: PropTypes.string, +export interface Annotation { + name: string; + show?: boolean; + annotation: any; + timeout: any; + key: any; + formData?: any; + isDashboardRequest?: boolean; + force?: boolean; +} - validationErrors: PropTypes.array, - name: PropTypes.string.isRequired, - actions: PropTypes.object, - value: PropTypes.arrayOf(PropTypes.object), - onChange: PropTypes.func, - refreshAnnotationData: PropTypes.func, -}; +export interface Props { + colorScheme: string; + annotationError: Record; + annotationQuery: Record; + vizType: string; + validationErrors: JsonObject[]; + name: string; + actions: { + setControlValue: HandlerFunction; + }; + value: Annotation[]; + onChange: (annotations: Annotation[]) => void; + refreshAnnotationData: (payload: Payload) => void; + theme: SupersetTheme; +} +export interface PopoverState { + popoverVisible: Record; + addedAnnotationIndex: number | null; +} +export interface Explore { + can_add: boolean; + can_download: boolean; + can_overwrite: boolean; + isDatasourceMetaLoading: boolean; + isStarred: boolean; + triggerRender: boolean; + datasource: Dataset; + controls: ControlStateMapping; + form_data: QueryFormData; + slice: Slice; + controlsTransferred: string[]; + standalone: boolean; + force: boolean; + common: JsonObject; +} const defaultProps = { vizType: '', value: [], @@ -57,9 +103,10 @@ const defaultProps = { annotationQuery: {}, onChange: () => {}, }; +class AnnotationLayerControl extends React.PureComponent { + static defaultProps = defaultProps; -class AnnotationLayerControl extends React.PureComponent { - constructor(props) { + constructor(props: Props) { super(props); this.state = { popoverVisible: {}, @@ -75,7 +122,7 @@ class AnnotationLayerControl extends React.PureComponent { AnnotationLayer.preload(); } - UNSAFE_componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps: Props) { const { name, annotationError, validationErrors, value } = nextProps; if (Object.keys(annotationError).length && !validationErrors.length) { this.props.actions.setControlValue( @@ -89,7 +136,10 @@ class AnnotationLayerControl extends React.PureComponent { } } - addAnnotationLayer(originalAnnotation, newAnnotation) { + addAnnotationLayer = ( + originalAnnotation: Annotation, + newAnnotation: Annotation, + ) => { let annotations = this.props.value; if (annotations.includes(originalAnnotation)) { annotations = annotations.map(anno => @@ -106,15 +156,15 @@ class AnnotationLayerControl extends React.PureComponent { }); this.props.onChange(annotations); - } + }; - handleVisibleChange(visible, popoverKey) { + handleVisibleChange = (visible: boolean, popoverKey: number | string) => { this.setState(prevState => ({ popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible }, })); - } + }; - removeAnnotationLayer(annotation) { + removeAnnotationLayer(annotation: Annotation) { const annotations = this.props.value.filter(anno => anno !== annotation); // So scrollbar doesnt get stuck on hidden const element = getSectionContainerElement(); @@ -124,7 +174,11 @@ class AnnotationLayerControl extends React.PureComponent { this.props.onChange(annotations); } - renderPopover(popoverKey, annotation, error) { + renderPopover = ( + popoverKey: number | string, + annotation: Annotation, + error: string, + ) => { const id = annotation?.name || '_new'; return ( @@ -134,7 +188,7 @@ class AnnotationLayerControl extends React.PureComponent { error={error} colorScheme={this.props.colorScheme} vizType={this.props.vizType} - addAnnotationLayer={newAnnotation => + addAnnotationLayer={(newAnnotation: Annotation) => this.addAnnotationLayer(annotation, newAnnotation) } removeAnnotationLayer={() => this.removeAnnotationLayer(annotation)} @@ -145,9 +199,9 @@ class AnnotationLayerControl extends React.PureComponent { />
); - } + }; - renderInfo(anno) { + renderInfo(anno: Annotation) { const { annotationError, annotationQuery, theme } = this.props; if (annotationQuery[anno.name]) { return ( @@ -175,7 +229,7 @@ class AnnotationLayerControl extends React.PureComponent { render() { const { addedAnnotationIndex } = this.state; - const addedAnnotation = this.props.value[addedAnnotationIndex]; + const addedAnnotation = this.props.value[addedAnnotationIndex!]; const annotations = this.props.value.map((anno, i) => ( ; +}) { const chartKey = getChartKey(explore); - const chart = charts[chartKey] || charts[0] || {}; + + const defaultChartState: Partial = { + annotationError: {}, + annotationQuery: {}, + }; + + const chart = + chartKey && charts[chartKey] ? charts[chartKey] : defaultChartState; return { - // eslint-disable-next-line camelcase colorScheme: explore.controls?.color_scheme?.value, - annotationError: chart.annotationError, - annotationQuery: chart.annotationQuery, - vizType: explore.controls.viz_type.value, + annotationError: chart.annotationError ?? {}, + annotationQuery: chart.annotationQuery ?? {}, + vizType: explore.controls?.viz_type.value, }; } -function mapDispatchToProps(dispatch) { +function mapDispatchToProps(dispatch: any) { return { - refreshAnnotationData: annotationObj => + refreshAnnotationData: (annotationObj: Annotation) => dispatch(runAnnotationQuery(annotationObj)), }; } From b054a21976ae4a93c3d96184f2ef947c018bc5bb Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Wed, 8 May 2024 23:55:19 +0200 Subject: [PATCH 02/16] Reuses the ExplorePageState[explore] interface and removes the Explore interface --- .../controls/AnnotationLayerControl/index.tsx | 21 +++---------------- 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index 90890fa5c9800..d8946508b918e 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -37,7 +37,7 @@ import AsyncEsmComponent from 'src/components/AsyncEsmComponent'; import { getChartKey } from 'src/explore/exploreUtils'; import { runAnnotationQuery } from 'src/components/Chart/chartAction'; import CustomListItem from 'src/explore/components/controls/CustomListItem'; -import { ChartState } from 'src/explore/types'; +import { ChartState, ExplorePageState } from 'src/explore/types'; import { Slice } from '@reduxjs/toolkit'; import ControlPopover, { getSectionContainerElement, @@ -80,22 +80,7 @@ export interface PopoverState { popoverVisible: Record; addedAnnotationIndex: number | null; } -export interface Explore { - can_add: boolean; - can_download: boolean; - can_overwrite: boolean; - isDatasourceMetaLoading: boolean; - isStarred: boolean; - triggerRender: boolean; - datasource: Dataset; - controls: ControlStateMapping; - form_data: QueryFormData; - slice: Slice; - controlsTransferred: string[]; - standalone: boolean; - force: boolean; - common: JsonObject; -} + const defaultProps = { vizType: '', value: [], @@ -299,7 +284,7 @@ function mapStateToProps({ charts: { [key: string]: ChartState; }; - explore: Partial; + explore: Partial; }) { const chartKey = getChartKey(explore); From fc2005c7b92f8ece765c67adafd6dc931a6b41d9 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com> Date: Thu, 9 May 2024 23:28:52 +0200 Subject: [PATCH 03/16] Update index.tsx Co-authored-by: JUST.in DO IT --- .../components/controls/AnnotationLayerControl/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index d8946508b918e..11861b095ee8b 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -214,7 +214,7 @@ class AnnotationLayerControl extends React.PureComponent { render() { const { addedAnnotationIndex } = this.state; - const addedAnnotation = this.props.value[addedAnnotationIndex!]; + const addedAnnotation = this.props.value[addedAnnotationIndex]; const annotations = this.props.value.map((anno, i) => ( Date: Thu, 9 May 2024 23:29:51 +0200 Subject: [PATCH 04/16] Update index.tsx Co-authored-by: JUST.in DO IT --- .../components/controls/AnnotationLayerControl/index.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index 11861b095ee8b..fc1fa0e88ceec 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -280,12 +280,7 @@ class AnnotationLayerControl extends React.PureComponent { function mapStateToProps({ charts, explore, -}: { - charts: { - [key: string]: ChartState; - }; - explore: Partial; -}) { +}: Pick) { const chartKey = getChartKey(explore); const defaultChartState: Partial = { From cea4b2e95b1d4123bded3688198d80f16c72dccc Mon Sep 17 00:00:00 2001 From: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com> Date: Thu, 9 May 2024 23:30:14 +0200 Subject: [PATCH 05/16] Update index.tsx Co-authored-by: JUST.in DO IT --- .../components/controls/AnnotationLayerControl/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index fc1fa0e88ceec..a34773aabf241 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -161,7 +161,7 @@ class AnnotationLayerControl extends React.PureComponent { renderPopover = ( popoverKey: number | string, - annotation: Annotation, + annotation: Annotation | undefined, error: string, ) => { const id = annotation?.name || '_new'; From 0dbcd64bf7ece5a7c8160a5de1a39d8ad5832b8b Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Sun, 5 May 2024 13:17:20 +0200 Subject: [PATCH 06/16] chore: Migration of AnnotationLayerControl index.js to TypeScript --- .../{index.jsx => index.tsx} | 149 +++++++++++++----- 1 file changed, 109 insertions(+), 40 deletions(-) rename superset-frontend/src/explore/components/controls/AnnotationLayerControl/{index.jsx => index.tsx} (70%) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx similarity index 70% rename from superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx rename to superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index f70557170c0d8..90890fa5c9800 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -17,15 +17,28 @@ * under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import { List } from 'src/components'; import { connect } from 'react-redux'; -import { t, withTheme } from '@superset-ui/core'; -import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; +import { + HandlerFunction, + JsonObject, + Payload, + QueryFormData, + SupersetTheme, + t, + withTheme, +} from '@superset-ui/core'; +import { + ControlStateMapping, + Dataset, + InfoTooltipWithTrigger, +} from '@superset-ui/chart-controls'; import AsyncEsmComponent from 'src/components/AsyncEsmComponent'; import { getChartKey } from 'src/explore/exploreUtils'; import { runAnnotationQuery } from 'src/components/Chart/chartAction'; import CustomListItem from 'src/explore/components/controls/CustomListItem'; +import { ChartState } from 'src/explore/types'; +import { Slice } from '@reduxjs/toolkit'; import ControlPopover, { getSectionContainerElement, } from '../ControlPopover/ControlPopover'; @@ -36,20 +49,53 @@ const AnnotationLayer = AsyncEsmComponent( () =>
, ); -const propTypes = { - colorScheme: PropTypes.string.isRequired, - annotationError: PropTypes.object, - annotationQuery: PropTypes.object, - vizType: PropTypes.string, +export interface Annotation { + name: string; + show?: boolean; + annotation: any; + timeout: any; + key: any; + formData?: any; + isDashboardRequest?: boolean; + force?: boolean; +} - validationErrors: PropTypes.array, - name: PropTypes.string.isRequired, - actions: PropTypes.object, - value: PropTypes.arrayOf(PropTypes.object), - onChange: PropTypes.func, - refreshAnnotationData: PropTypes.func, -}; +export interface Props { + colorScheme: string; + annotationError: Record; + annotationQuery: Record; + vizType: string; + validationErrors: JsonObject[]; + name: string; + actions: { + setControlValue: HandlerFunction; + }; + value: Annotation[]; + onChange: (annotations: Annotation[]) => void; + refreshAnnotationData: (payload: Payload) => void; + theme: SupersetTheme; +} +export interface PopoverState { + popoverVisible: Record; + addedAnnotationIndex: number | null; +} +export interface Explore { + can_add: boolean; + can_download: boolean; + can_overwrite: boolean; + isDatasourceMetaLoading: boolean; + isStarred: boolean; + triggerRender: boolean; + datasource: Dataset; + controls: ControlStateMapping; + form_data: QueryFormData; + slice: Slice; + controlsTransferred: string[]; + standalone: boolean; + force: boolean; + common: JsonObject; +} const defaultProps = { vizType: '', value: [], @@ -57,9 +103,10 @@ const defaultProps = { annotationQuery: {}, onChange: () => {}, }; +class AnnotationLayerControl extends React.PureComponent { + static defaultProps = defaultProps; -class AnnotationLayerControl extends React.PureComponent { - constructor(props) { + constructor(props: Props) { super(props); this.state = { popoverVisible: {}, @@ -75,7 +122,7 @@ class AnnotationLayerControl extends React.PureComponent { AnnotationLayer.preload(); } - UNSAFE_componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps: Props) { const { name, annotationError, validationErrors, value } = nextProps; if (Object.keys(annotationError).length && !validationErrors.length) { this.props.actions.setControlValue( @@ -89,7 +136,10 @@ class AnnotationLayerControl extends React.PureComponent { } } - addAnnotationLayer(originalAnnotation, newAnnotation) { + addAnnotationLayer = ( + originalAnnotation: Annotation, + newAnnotation: Annotation, + ) => { let annotations = this.props.value; if (annotations.includes(originalAnnotation)) { annotations = annotations.map(anno => @@ -106,15 +156,15 @@ class AnnotationLayerControl extends React.PureComponent { }); this.props.onChange(annotations); - } + }; - handleVisibleChange(visible, popoverKey) { + handleVisibleChange = (visible: boolean, popoverKey: number | string) => { this.setState(prevState => ({ popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible }, })); - } + }; - removeAnnotationLayer(annotation) { + removeAnnotationLayer(annotation: Annotation) { const annotations = this.props.value.filter(anno => anno !== annotation); // So scrollbar doesnt get stuck on hidden const element = getSectionContainerElement(); @@ -124,7 +174,11 @@ class AnnotationLayerControl extends React.PureComponent { this.props.onChange(annotations); } - renderPopover(popoverKey, annotation, error) { + renderPopover = ( + popoverKey: number | string, + annotation: Annotation, + error: string, + ) => { const id = annotation?.name || '_new'; return ( @@ -134,7 +188,7 @@ class AnnotationLayerControl extends React.PureComponent { error={error} colorScheme={this.props.colorScheme} vizType={this.props.vizType} - addAnnotationLayer={newAnnotation => + addAnnotationLayer={(newAnnotation: Annotation) => this.addAnnotationLayer(annotation, newAnnotation) } removeAnnotationLayer={() => this.removeAnnotationLayer(annotation)} @@ -145,9 +199,9 @@ class AnnotationLayerControl extends React.PureComponent { />
); - } + }; - renderInfo(anno) { + renderInfo(anno: Annotation) { const { annotationError, annotationQuery, theme } = this.props; if (annotationQuery[anno.name]) { return ( @@ -175,7 +229,7 @@ class AnnotationLayerControl extends React.PureComponent { render() { const { addedAnnotationIndex } = this.state; - const addedAnnotation = this.props.value[addedAnnotationIndex]; + const addedAnnotation = this.props.value[addedAnnotationIndex!]; const annotations = this.props.value.map((anno, i) => ( ; +}) { const chartKey = getChartKey(explore); - const chart = charts[chartKey] || charts[0] || {}; + + const defaultChartState: Partial = { + annotationError: {}, + annotationQuery: {}, + }; + + const chart = + chartKey && charts[chartKey] ? charts[chartKey] : defaultChartState; return { - // eslint-disable-next-line camelcase colorScheme: explore.controls?.color_scheme?.value, - annotationError: chart.annotationError, - annotationQuery: chart.annotationQuery, - vizType: explore.controls.viz_type.value, + annotationError: chart.annotationError ?? {}, + annotationQuery: chart.annotationQuery ?? {}, + vizType: explore.controls?.viz_type.value, }; } -function mapDispatchToProps(dispatch) { +function mapDispatchToProps(dispatch: any) { return { - refreshAnnotationData: annotationObj => + refreshAnnotationData: (annotationObj: Annotation) => dispatch(runAnnotationQuery(annotationObj)), }; } From 3948773f6cf9e03ff1bda62ae45648140792a99f Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Wed, 8 May 2024 23:55:19 +0200 Subject: [PATCH 07/16] Reuses the ExplorePageState[explore] interface and removes the Explore interface --- .../controls/AnnotationLayerControl/index.tsx | 21 +++---------------- 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index 90890fa5c9800..d8946508b918e 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -37,7 +37,7 @@ import AsyncEsmComponent from 'src/components/AsyncEsmComponent'; import { getChartKey } from 'src/explore/exploreUtils'; import { runAnnotationQuery } from 'src/components/Chart/chartAction'; import CustomListItem from 'src/explore/components/controls/CustomListItem'; -import { ChartState } from 'src/explore/types'; +import { ChartState, ExplorePageState } from 'src/explore/types'; import { Slice } from '@reduxjs/toolkit'; import ControlPopover, { getSectionContainerElement, @@ -80,22 +80,7 @@ export interface PopoverState { popoverVisible: Record; addedAnnotationIndex: number | null; } -export interface Explore { - can_add: boolean; - can_download: boolean; - can_overwrite: boolean; - isDatasourceMetaLoading: boolean; - isStarred: boolean; - triggerRender: boolean; - datasource: Dataset; - controls: ControlStateMapping; - form_data: QueryFormData; - slice: Slice; - controlsTransferred: string[]; - standalone: boolean; - force: boolean; - common: JsonObject; -} + const defaultProps = { vizType: '', value: [], @@ -299,7 +284,7 @@ function mapStateToProps({ charts: { [key: string]: ChartState; }; - explore: Partial; + explore: Partial; }) { const chartKey = getChartKey(explore); From e8be58d0b69bf232485e073ab431e610f6c60662 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com> Date: Thu, 9 May 2024 23:28:52 +0200 Subject: [PATCH 08/16] Update index.tsx Co-authored-by: JUST.in DO IT --- .../components/controls/AnnotationLayerControl/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index d8946508b918e..11861b095ee8b 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -214,7 +214,7 @@ class AnnotationLayerControl extends React.PureComponent { render() { const { addedAnnotationIndex } = this.state; - const addedAnnotation = this.props.value[addedAnnotationIndex!]; + const addedAnnotation = this.props.value[addedAnnotationIndex]; const annotations = this.props.value.map((anno, i) => ( Date: Thu, 9 May 2024 23:29:51 +0200 Subject: [PATCH 09/16] Update index.tsx Co-authored-by: JUST.in DO IT --- .../components/controls/AnnotationLayerControl/index.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index 11861b095ee8b..fc1fa0e88ceec 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -280,12 +280,7 @@ class AnnotationLayerControl extends React.PureComponent { function mapStateToProps({ charts, explore, -}: { - charts: { - [key: string]: ChartState; - }; - explore: Partial; -}) { +}: Pick) { const chartKey = getChartKey(explore); const defaultChartState: Partial = { From fe2077dda02442ab295f6cbd414d38ea2a55819c Mon Sep 17 00:00:00 2001 From: Enzo Martellucci <52219496+EnxDev@users.noreply.github.com> Date: Thu, 9 May 2024 23:30:14 +0200 Subject: [PATCH 10/16] Update index.tsx Co-authored-by: JUST.in DO IT --- .../components/controls/AnnotationLayerControl/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index fc1fa0e88ceec..a34773aabf241 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -161,7 +161,7 @@ class AnnotationLayerControl extends React.PureComponent { renderPopover = ( popoverKey: number | string, - annotation: Annotation, + annotation: Annotation | undefined, error: string, ) => { const id = annotation?.name || '_new'; From ff3fb2eedbabdd0d42e4ec03502cf3bfdca8e1a5 Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Tue, 4 Jun 2024 15:56:25 +0200 Subject: [PATCH 11/16] Removes unused included types --- .../components/controls/AnnotationLayerControl/index.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index a34773aabf241..fad09df7cfa1f 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -23,22 +23,16 @@ import { HandlerFunction, JsonObject, Payload, - QueryFormData, SupersetTheme, t, withTheme, } from '@superset-ui/core'; -import { - ControlStateMapping, - Dataset, - InfoTooltipWithTrigger, -} from '@superset-ui/chart-controls'; +import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls'; import AsyncEsmComponent from 'src/components/AsyncEsmComponent'; import { getChartKey } from 'src/explore/exploreUtils'; import { runAnnotationQuery } from 'src/components/Chart/chartAction'; import CustomListItem from 'src/explore/components/controls/CustomListItem'; import { ChartState, ExplorePageState } from 'src/explore/types'; -import { Slice } from '@reduxjs/toolkit'; import ControlPopover, { getSectionContainerElement, } from '../ControlPopover/ControlPopover'; From 317567ebfd66e91f7efada9c1ab21f205e9cfa2a Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Thu, 6 Jun 2024 18:56:11 +0200 Subject: [PATCH 12/16] Removes any types from Annotation type --- .../controls/AnnotationLayerControl/index.tsx | 81 ++++++++++--------- 1 file changed, 41 insertions(+), 40 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index fad09df7cfa1f..ea6b031f8be8b 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -46,9 +46,9 @@ const AnnotationLayer = AsyncEsmComponent( export interface Annotation { name: string; show?: boolean; - annotation: any; - timeout: any; - key: any; + annotation: string; + timeout: Date; + key: string; formData?: any; isDashboardRequest?: boolean; force?: boolean; @@ -80,7 +80,7 @@ const defaultProps = { value: [], annotationError: {}, annotationQuery: {}, - onChange: () => {}, + onChange: () => { }, }; class AnnotationLayerControl extends React.PureComponent { static defaultProps = defaultProps; @@ -125,7 +125,7 @@ class AnnotationLayerControl extends React.PureComponent { anno === originalAnnotation ? newAnnotation : anno, ); } else { - annotations = [...annotations, newAnnotation]; + annotations = [ ...annotations, newAnnotation ]; this.setState({ addedAnnotationIndex: annotations.length - 1 }); } @@ -139,11 +139,11 @@ class AnnotationLayerControl extends React.PureComponent { handleVisibleChange = (visible: boolean, popoverKey: number | string) => { this.setState(prevState => ({ - popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible }, + popoverVisible: { ...prevState.popoverVisible, [ popoverKey ]: visible }, })); }; - removeAnnotationLayer(annotation: Annotation) { + removeAnnotationLayer(annotation: Annotation | undefined) { const annotations = this.props.value.filter(anno => anno !== annotation); // So scrollbar doesnt get stuck on hidden const element = getSectionContainerElement(); @@ -155,7 +155,7 @@ class AnnotationLayerControl extends React.PureComponent { renderPopover = ( popoverKey: number | string, - annotation: Annotation | undefined, + annotation: Annotation, error: string, ) => { const id = annotation?.name || '_new'; @@ -163,7 +163,7 @@ class AnnotationLayerControl extends React.PureComponent { return (
{ renderInfo(anno: Annotation) { const { annotationError, annotationQuery, theme } = this.props; - if (annotationQuery[anno.name]) { + if (annotationQuery[ anno.name ]) { return ( { /> ); } - if (annotationError[anno.name]) { + if (annotationError[ anno.name ]) { return ( ); } @@ -208,8 +208,7 @@ class AnnotationLayerControl extends React.PureComponent { render() { const { addedAnnotationIndex } = this.state; - const addedAnnotation = this.props.value[addedAnnotationIndex]; - + const addedAnnotation = addedAnnotationIndex ? this.props.value[ addedAnnotationIndex ] : null; const annotations = this.props.value.map((anno, i) => ( { content={this.renderPopover( i, anno, - this.props.annotationError[anno.name], + this.props.annotationError[ anno.name ], )} - visible={this.state.popoverVisible[i]} + visible={this.state.popoverVisible[ i ]} onVisibleChange={visible => this.handleVisibleChange(visible, i)} > @@ -235,34 +234,36 @@ class AnnotationLayerControl extends React.PureComponent { )); - const addLayerPopoverKey = 'add'; return (
({ borderRadius: theme.gridUnit })}> {annotations} - - this.handleVisibleChange(visible, addLayerPopoverKey) - } - > - - {' '} -   {t('Add annotation layer')} - - + {addedAnnotation && ( + + this.handleVisibleChange(visible, addLayerPopoverKey) + } + > + + {' '} +   {t('Add annotation layer')} + + + )} +
); @@ -283,7 +284,7 @@ function mapStateToProps({ }; const chart = - chartKey && charts[chartKey] ? charts[chartKey] : defaultChartState; + chartKey && charts[ chartKey ] ? charts[ chartKey ] : defaultChartState; return { colorScheme: explore.controls?.color_scheme?.value, From aa3049f0c6336a6a6698e5f0ae2deb0bfce46c8f Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Fri, 28 Jun 2024 17:25:47 +0200 Subject: [PATCH 13/16] cleanup --- .../components/controls/AnnotationLayerControl/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index 8332b28efd66d..0c1432176f6c0 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -18,6 +18,7 @@ */ import { List } from 'src/components'; import { connect } from 'react-redux'; +import { PureComponent } from 'react'; import { HandlerFunction, JsonObject, @@ -81,11 +82,10 @@ const defaultProps = { annotationQuery: {}, onChange: () => { }, }; -class AnnotationLayerControl extends React.PureComponent { +class AnnotationLayerControl extends PureComponent { static defaultProps = defaultProps; -class AnnotationLayerControl extends React.PureComponent { - constructor(props) { + constructor(props: Props) { super(props); this.state = { popoverVisible: {}, From a9f919045a009811d97211ee98f5432ac532327b Mon Sep 17 00:00:00 2001 From: Enzo Martellucci Date: Fri, 28 Jun 2024 17:33:01 +0200 Subject: [PATCH 14/16] Linted --- .../controls/AnnotationLayerControl/index.tsx | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index 0c1432176f6c0..4d2b1ad048dd0 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -80,7 +80,7 @@ const defaultProps = { value: [], annotationError: {}, annotationQuery: {}, - onChange: () => { }, + onChange: () => {}, }; class AnnotationLayerControl extends PureComponent { static defaultProps = defaultProps; @@ -125,7 +125,7 @@ class AnnotationLayerControl extends PureComponent { anno === originalAnnotation ? newAnnotation : anno, ); } else { - annotations = [ ...annotations, newAnnotation ]; + annotations = [...annotations, newAnnotation]; this.setState({ addedAnnotationIndex: annotations.length - 1 }); } @@ -139,7 +139,7 @@ class AnnotationLayerControl extends PureComponent { handleVisibleChange = (visible: boolean, popoverKey: number | string) => { this.setState(prevState => ({ - popoverVisible: { ...prevState.popoverVisible, [ popoverKey ]: visible }, + popoverVisible: { ...prevState.popoverVisible, [popoverKey]: visible }, })); }; @@ -182,7 +182,7 @@ class AnnotationLayerControl extends PureComponent { renderInfo(anno: Annotation) { const { annotationError, annotationQuery, theme } = this.props; - if (annotationQuery[ anno.name ]) { + if (annotationQuery[anno.name]) { return ( { /> ); } - if (annotationError[ anno.name ]) { + if (annotationError[anno.name]) { return ( ); } @@ -208,7 +208,9 @@ class AnnotationLayerControl extends PureComponent { render() { const { addedAnnotationIndex } = this.state; - const addedAnnotation = addedAnnotationIndex ? this.props.value[ addedAnnotationIndex ] : null; + const addedAnnotation = addedAnnotationIndex + ? this.props.value[addedAnnotationIndex] + : null; const annotations = this.props.value.map((anno, i) => ( { content={this.renderPopover( i, anno, - this.props.annotationError[ anno.name ], + this.props.annotationError[anno.name], )} - visible={this.state.popoverVisible[ i ]} + visible={this.state.popoverVisible[i]} onVisibleChange={visible => this.handleVisibleChange(visible, i)} > @@ -248,7 +250,7 @@ class AnnotationLayerControl extends PureComponent { '', )} title={t('Add annotation layer')} - visible={this.state.popoverVisible[ addLayerPopoverKey ]} + visible={this.state.popoverVisible[addLayerPopoverKey]} destroyTooltipOnHide onVisibleChange={visible => this.handleVisibleChange(visible, addLayerPopoverKey) @@ -263,7 +265,6 @@ class AnnotationLayerControl extends PureComponent { )} -
); @@ -284,7 +285,7 @@ function mapStateToProps({ }; const chart = - chartKey && charts[ chartKey ] ? charts[ chartKey ] : defaultChartState; + chartKey && charts[chartKey] ? charts[chartKey] : defaultChartState; return { colorScheme: explore.controls?.color_scheme?.value, From 79e9c7ab1e542bb06477fe1fda035b3346a6f6fd Mon Sep 17 00:00:00 2001 From: Diego Pucci Date: Wed, 25 Sep 2024 15:48:39 +0200 Subject: [PATCH 15/16] fix(Ts): Fix types --- .../src/components/Chart/chartAction.js | 2 +- .../controls/AnnotationLayerControl/index.tsx | 56 ++++++++++--------- 2 files changed, 31 insertions(+), 27 deletions(-) diff --git a/superset-frontend/src/components/Chart/chartAction.js b/superset-frontend/src/components/Chart/chartAction.js index 8a9124818424f..f7008c9de37ba 100644 --- a/superset-frontend/src/components/Chart/chartAction.js +++ b/superset-frontend/src/components/Chart/chartAction.js @@ -249,7 +249,7 @@ export async function getChartDataRequest({ export function runAnnotationQuery({ annotation, timeout, - formData = null, + formData, key, isDashboardRequest = false, force = false, diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index 4d2b1ad048dd0..38a91f1cdbc0c 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react-prefer-function-component/react-prefer-function-component */ /** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -23,6 +24,7 @@ import { HandlerFunction, JsonObject, Payload, + QueryFormData, SupersetTheme, t, withTheme, @@ -33,6 +35,8 @@ import { getChartKey } from 'src/explore/exploreUtils'; import { runAnnotationQuery } from 'src/components/Chart/chartAction'; import CustomListItem from 'src/explore/components/controls/CustomListItem'; import { ChartState, ExplorePageState } from 'src/explore/types'; +import { AnyAction } from 'redux'; +import { ThunkDispatch } from 'redux-thunk'; import ControlPopover, { getSectionContainerElement, } from '../ControlPopover/ControlPopover'; @@ -49,7 +53,7 @@ export interface Annotation { annotation: string; timeout: Date; key: string; - formData?: any; + formData: QueryFormData | null; isDashboardRequest?: boolean; force?: boolean; } @@ -241,30 +245,28 @@ class AnnotationLayerControl extends PureComponent {
({ borderRadius: theme.gridUnit })}> {annotations} - {addedAnnotation && ( - - this.handleVisibleChange(visible, addLayerPopoverKey) - } - > - - {' '} -   {t('Add annotation layer')} - - - )} + + this.handleVisibleChange(visible, addLayerPopoverKey) + } + > + + {' '} +   {t('Add annotation layer')} + +
); @@ -295,7 +297,9 @@ function mapStateToProps({ }; } -function mapDispatchToProps(dispatch: any) { +function mapDispatchToProps( + dispatch: ThunkDispatch, +) { return { refreshAnnotationData: (annotationObj: Annotation) => dispatch(runAnnotationQuery(annotationObj)), From 9f5f56d17c8cf9301893ae7f6b2d06a927795cca Mon Sep 17 00:00:00 2001 From: Diego Pucci Date: Wed, 25 Sep 2024 16:17:19 +0200 Subject: [PATCH 16/16] fix(Annotation): Fix duplicate annotation creation --- .../controls/AnnotationLayerControl/index.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx index 38a91f1cdbc0c..7b77319c6d099 100644 --- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx +++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react-prefer-function-component/react-prefer-function-component */ /** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file @@ -120,11 +119,11 @@ class AnnotationLayerControl extends PureComponent { } addAnnotationLayer = ( - originalAnnotation: Annotation, + originalAnnotation: Annotation | null, newAnnotation: Annotation, ) => { let annotations = this.props.value; - if (annotations.includes(originalAnnotation)) { + if (originalAnnotation && annotations.includes(originalAnnotation)) { annotations = annotations.map(anno => anno === originalAnnotation ? newAnnotation : anno, ); @@ -147,7 +146,7 @@ class AnnotationLayerControl extends PureComponent { })); }; - removeAnnotationLayer(annotation: Annotation | undefined) { + removeAnnotationLayer(annotation: Annotation | null) { const annotations = this.props.value.filter(anno => anno !== annotation); // So scrollbar doesnt get stuck on hidden const element = getSectionContainerElement(); @@ -159,7 +158,7 @@ class AnnotationLayerControl extends PureComponent { renderPopover = ( popoverKey: number | string, - annotation: Annotation, + annotation: Annotation | null, error: string, ) => { const id = annotation?.name || '_new'; @@ -212,9 +211,10 @@ class AnnotationLayerControl extends PureComponent { render() { const { addedAnnotationIndex } = this.state; - const addedAnnotation = addedAnnotationIndex - ? this.props.value[addedAnnotationIndex] - : null; + const addedAnnotation = + addedAnnotationIndex !== null + ? this.props.value[addedAnnotationIndex] + : null; const annotations = this.props.value.map((anno, i) => ( { )); const addLayerPopoverKey = 'add'; + return (
({ borderRadius: theme.gridUnit })}> @@ -290,6 +291,7 @@ function mapStateToProps({ chartKey && charts[chartKey] ? charts[chartKey] : defaultChartState; return { + // eslint-disable-next-line camelcase colorScheme: explore.controls?.color_scheme?.value, annotationError: chart.annotationError ?? {}, annotationQuery: chart.annotationQuery ?? {},