From e6a37022ac4bca2bf979971f28f1de2da199c611 Mon Sep 17 00:00:00 2001
From: Geido <60598000+geido@users.noreply.github.com>
Date: Tue, 27 Jul 2021 01:32:27 +0200
Subject: [PATCH] fix(Explore): "Customize" tab rendering behavior (#15841)

* Remove getDerivedStateFromProps

* Set loading
---
 .../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 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 <Loading />;
     }