[superset] branch master updated: fix(Explore): "Customize" tab rendering behavior (#15841)

[rusackas]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new e6a3702  fix(Explore): "Customize" tab rendering behavior (#15841)
e6a3702 is described below

commit e6a37022ac4bca2bf979971f28f1de2da199c611
Author: Geido <60598000+ge...@users.noreply.github.com>
AuthorDate: Tue Jul 27 01:32:27 2021 +0200

    fix(Explore): "Customize" tab rendering behavior (#15841)
    
    * Remove getDerivedStateFromProps
    
    * Set loading
---
 .../explore/components/ControlPanelsContainer.tsx  | 32 ++++++++++++----------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git 
a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx 
b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 2fd44df..ac48db4 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 <Loading />;
     }