commit e6a37022ac4bca2bf979971f28f1de2da199c611
author Geido <60598000+geido@users.noreply.github.com> Tue Jul 27 01:32:27 2021 +0200
committer GitHub <noreply@github.com> Mon Jul 26 17:32:27 2021 -0600
tree 21c3fdcf79a8b589e1d4e0eee2ef049216732a03
parent 1297fd91699c137dc828ec99e2365e5d949f651f

fix(Explore): "Customize" tab rendering behavior (#15841)

* Remove getDerivedStateFromProps

* Set loading

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

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 @@
   expandedCustomizeSections: string[];
   querySections: ControlPanelSectionConfig[];
   customizeSections: ControlPanelSectionConfig[];
+  loading: boolean;
 };
 
 const isTimeSection = (section: ControlPanelSectionConfig): boolean =>
@@ -189,6 +190,7 @@
     expandedCustomizeSections,
     querySections,
     customizeSections,
+    loading: false,
   };
 }
 
@@ -206,24 +208,12 @@
       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 @@
     }
   }
 
+  // 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 @@
   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 />;
     }