fixed ordering changing panel types, fixes issues with loading panel options

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -43,8 +43,8 @@ export class DashboardPanel extends PureComponent<Props, State> {
     this.specialPanels['add-panel'] = this.renderAddPanel.bind(this);
   }
 
-  isSpecial() {
-    return this.specialPanels[this.props.panel.type];
+  isSpecial(pluginId: string) {
+    return this.specialPanels[pluginId];
   }
 
   renderRow() {
@@ -56,38 +56,41 @@ export class DashboardPanel extends PureComponent<Props, State> {
   }
 
   onPluginTypeChanged = (plugin: PanelPlugin) => {
-    this.props.panel.changeType(plugin.id, this.state.angularPanel !== null);
-    this.loadPlugin();
+    this.loadPlugin(plugin.id);
   };
 
-  loadPlugin() {
-    if (this.isSpecial()) {
+  async loadPlugin(pluginId: string) {
+    if (this.isSpecial(pluginId)) {
       return;
     }
 
     const { panel } = this.props;
 
     // handle plugin loading & changing of plugin type
-    if (!this.state.plugin || this.state.plugin.id !== panel.type) {
-      const plugin = config.panels[panel.type] || getPanelPluginNotFound(panel.type);
+    if (!this.state.plugin || this.state.plugin.id !== pluginId) {
+      const plugin = config.panels[pluginId] || getPanelPluginNotFound(pluginId);
+
+      // remember if this is from an angular panel
+      const fromAngularPanel = this.state.angularPanel != null;
+
+      // unmount angular panel
+      this.cleanUpAngularPanel();
 
       if (plugin.exports) {
-        this.cleanUpAngularPanel();
         this.setState({ plugin: plugin });
       } else {
-        importPluginModule(plugin.module).then(pluginExports => {
-          this.cleanUpAngularPanel();
-          // cache plugin exports (saves a promise async cycle next time)
-          plugin.exports = pluginExports;
-          // update panel state
-          this.setState({ plugin: plugin });
-        });
+        plugin.exports = await importPluginModule(plugin.module);
+        this.setState({ plugin: plugin });
+      }
+
+      if (panel.type !== pluginId) {
+        this.props.panel.changeType(pluginId, fromAngularPanel);
       }
     }
   }
 
   componentDidMount() {
-    this.loadPlugin();
+    this.loadPlugin(this.props.panel.type);
   }
 
   componentDidUpdate() {
@@ -140,7 +143,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
     const { panel, dashboard, isFullscreen, isEditing } = this.props;
     const { plugin, angularPanel } = this.state;
 
-    if (this.isSpecial()) {
+    if (this.isSpecial(panel.type)) {
       return this.specialPanels[panel.type]();
     }
 

public/app/features/dashboard/dashgrid/VisualizationTab.tsx

@@ -106,7 +106,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
       template +=
         `
       <div class="form-section" ng-cloak>` +
-        (i > 0 ? `<div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
+        (i > -1 ? `<div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
         `<div class="form-section__body">
           <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
         </div>

public/app/plugins/panel/table/column_options.html

 <div class="edit-tab-content" ng-repeat="style in editor.panel.styles">
-  <p class="column-styles-heading">{{style.pattern || 'New rule'}}</p>
   <div class="section gf-form-group">
     <h5 class="section-heading">Options</h5>
     <div class="gf-form-inline">
@@ -182,9 +181,13 @@
       <i class="fa fa-trash"></i> Remove Rule
     </button>
   </div>
+
+  <hr>
 </div>
+
 <div class="gf-form-button-row">
   <button class="btn btn-inverse" ng-click="editor.addColumnStyle()">
     <i class="fa fa-plus"></i>&nbsp;Add column style
   </button>
 </div>
+

public/sass/_variables.dark.scss

@@ -95,7 +95,7 @@ $headings-color: darken($white, 11%);
 $abbr-border-color: $gray-3 !default;
 $text-muted: $text-color-weak;
 
-$hr-border-color: rgba(0, 0, 0, 0.1) !default;
+$hr-border-color: $dark-4;
 
 // Panel
 // -------------------------

public/sass/components/_form_select_box.scss

@@ -56,7 +56,7 @@ $select-input-bg-disabled: $input-bg-disabled;
   background: $input-bg;
   box-shadow: $menu-dropdown-shadow;
   position: absolute;
-  z-index: 2;
+  z-index: $zindex-dropdown;
   min-width: 100%;
 }