From 09ba8cd5d36debac5061a5fa3ecfe180b244b0e4 Mon Sep 17 00:00:00 2001
From: ryan <ryantxu@gmail.com>
Date: Tue, 12 Mar 2019 16:35:22 -0700
Subject: [PATCH] make sure the validator is called before setState

---
 .../dashboard/dashgrid/DashboardPanel.tsx     | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
index ef2edd0a13a..fb2b2ab6471 100644
--- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx
@@ -81,37 +81,35 @@ export class DashboardPanel extends PureComponent<Props, State> {
       }
 
       if (plugin.exports) {
+        this.validateOptions(plugin, panel);
         this.setState({ plugin, angularPanel: null });
       } else {
         try {
           plugin.exports = await importPluginModule(plugin.module);
+          this.validateOptions(plugin, panel);
         } catch (e) {
           plugin = getPanelPluginNotFound(pluginId);
         }
 
         this.setState({ plugin, angularPanel: null });
       }
-
-      // Clean the options when switching plugins
-      // ??? is there a better way that will make sure to call componentDidUpdate ???
-      // The panel constructor may have already run
-      const { reactPanel } = plugin.exports;
-      if (reactPanel && reactPanel.optionsValidator) {
-        panel.options = reactPanel.optionsValidator(panel);
-      }
     }
   }
 
+  // This is be called before the plugin constructor, so the initial properties are valid
+  validateOptions = (plugin: PanelPlugin, panel: PanelModel) => {
+    const { reactPanel } = plugin.exports;
+    if (reactPanel && reactPanel.optionsValidator) {
+      panel.options = reactPanel.optionsValidator(panel);
+    }
+  };
+
   componentDidMount() {
     this.loadPlugin(this.props.panel.type);
   }
 
-  componentDidUpdate(prevProps: Props, prevState: State) {
+  componentDidUpdate() {
     if (!this.element || this.state.angularPanel) {
-      const { plugin } = this.state;
-      if (plugin && plugin !== prevState.plugin) {
-        console.log('PLUGIN Changed', plugin);
-      }
       return;
     }