diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx index 2fd44df9b8..ac48db4718 100644 --- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx +++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx @@ -118,6 +118,7 @@ type ControlPanelsContainerState = { expandedCustomizeSections: string[]; querySections: ControlPanelSectionConfig[]; customizeSections: ControlPanelSectionConfig[]; + loading: boolean; }; const isTimeSection = (section: ControlPanelSectionConfig): boolean => @@ -189,6 +190,7 @@ function getState( expandedCustomizeSections, querySections, customizeSections, + loading: false, }; } @@ -206,24 +208,12 @@ export class ControlPanelsContainer extends React.Component< expandedCustomizeSections: [], querySections: [], customizeSections: [], + loading: false, }; this.renderControl = this.renderControl.bind(this); this.renderControlPanelSection = this.renderControlPanelSection.bind(this); } - static getDerivedStateFromProps( - props: ControlPanelsContainerProps, - state: ControlPanelsContainerState, - ): ControlPanelsContainerState { - // only update the sections, not the expanded/collapsed state - const newState = getState(props); - return { - ...state, - customizeSections: newState.customizeSections, - querySections: newState.querySections, - }; - } - componentDidUpdate(prevProps: ControlPanelsContainerProps) { if ( this.props.form_data.datasource !== prevProps.form_data.datasource || @@ -234,6 +224,17 @@ export class ControlPanelsContainer extends React.Component< } } + // required for an Antd bug that would otherwise malfunction re-rendering + // a collapsed panel after changing the datasource or viz type + UNSAFE_componentWillReceiveProps(nextProps: ControlPanelsContainerProps) { + if ( + this.props.form_data.datasource !== nextProps.form_data.datasource || + this.props.form_data.viz_type !== nextProps.form_data.viz_type + ) { + this.setState({ loading: true }); + } + } + componentDidMount() { this.setState(getState(this.props)); } @@ -382,8 +383,9 @@ export class ControlPanelsContainer extends React.Component< render() { const controlPanelRegistry = getChartControlPanelRegistry(); if ( - !controlPanelRegistry.has(this.props.form_data.viz_type) && - this.context.loading + (!controlPanelRegistry.has(this.props.form_data.viz_type) && + this.context.loading) || + this.state.loading ) { return ; }