improve dropdown pane connetion to tab toolbar

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

@@ -78,7 +78,6 @@ export class DataSourcePicker extends PureComponent<Props, State> {
     return (
       <>
         <div className="cta-form__bar">
-          <div className="cta-form__bar-header">Select data source</div>
           {this.renderFilters()}
           <div className="gf-form--grow" />
         </div>

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

@@ -51,8 +51,8 @@ export class EditorTabBody extends PureComponent<Props, State> {
   renderButton(view: EditorToolBarView) {
     return (
       <div className="nav-buttons" key={view.title}>
-        <button className="btn navbar-button">
-          <i className={view.icon} /> {view.title}
+        <button className="btn navbar-button" onClick={() => this.onToggleToolBarView(view)}>
+          {view.icon && <i className={view.icon} />} {view.title}
         </button>
       </div>
     );
@@ -62,7 +62,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
     return (
       <div className="editor-toolbar-view">
         <button className="editor-toolbar-view__close" onClick={this.onCloseOpenView}>
-          <i className="fa fa-remove" />
+          <i className="fa fa-chevron-up" />
         </button>
         {view.render()}
       </div>

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

@@ -55,18 +55,17 @@ export class QueriesTab extends PureComponent<Props> {
 
     const queryInspector = {
       title: 'Query Inspector',
-      icon: 'fa fa-lightbulb-o',
       render: () => <h2>hello</h2>,
     };
 
     const dsHelp = {
-      title: 'Help',
+      title: '',
       icon: 'fa fa-question',
       render: () => <h2>hello</h2>,
     };
 
     return (
-      <EditorTabBody main={currentDataSource} toolbarItems={[dsHelp, queryInspector]}>
+      <EditorTabBody main={currentDataSource} toolbarItems={[queryInspector, dsHelp]}>
         <div ref={element => (this.element = element)} style={{ width: '100%' }} />
       </EditorTabBody>
     );

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

@@ -36,12 +36,14 @@ export class VisualizationTab extends PureComponent<Props> {
   };
 
   render() {
-    const { plugin, onTypeChanged } = this.props;
+    const { plugin } = this.props;
 
     const panelSelection = {
       title: plugin.name,
       imgSrc: plugin.info.logos.small,
       render: () => {
+        // the needs to be scoped inside this closure
+        const { plugin, onTypeChanged } = this.props;
         return <VizTypePicker current={plugin} onTypeChanged={onTypeChanged} />;
       },
     };

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

@@ -81,7 +81,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
     return (
       <>
         <div className="cta-form__bar">
-          <div className="cta-form__bar-header">Select visualization</div>
           {this.renderFilters()}
           <div className="gf-form--grow" />
         </div>

public/sass/components/_viz_editor.scss

@@ -85,9 +85,7 @@
   }
 
   &--selected {
-    .viz-picker__item-name {
-      color: $text-color;
-    }
+    box-shadow: 0 0 12px #ff4d00;
   }
 }
 
@@ -171,10 +169,12 @@
   display: flex;
   align-content: center;
   align-items: center;
-  background: linear-gradient(90deg, #292a2d, black);
-  padding: 7px 30px 7px 20px;
+  background: $page-header-bg;
   box-shadow: 0 0 20px black;
+  padding: 7px 30px 7px 20px;
   cursor: pointer;
+  position: relative;
+  z-index: 1;
 }
 
 .edit-section__selected {
@@ -208,14 +208,15 @@
 }
 
 .panel-editor-tabs {
-  z-index: 1;
+  position: relative;
+  z-index: 2;
   box-shadow: $page-header-shadow;
   border-bottom: 1px solid $page-header-border-color;
   padding: 0 $dashboard-padding;
   @include clearfix();
 
   .active.gf-tabs-link {
-    background: #242427;
+    background: $input-label-bg;
   }
 }
 
@@ -231,6 +232,7 @@
   i {
     font-size: 120%;
   }
+
   &:hover {
     color: $text-color-strong;
   }
@@ -238,11 +240,10 @@
 
 .editor-toolbar-view {
   position: relative;
-  padding: 10px 20px;
+  padding: 20px 20px;
   background-color: $empty-list-cta-bg;
-  border-top: 3px solid $orange;
-  margin: 0 100px;
-  margin-bottom: 20px;
+  top: -45px;
+  margin: 0 30px 20px 0px;
 }
 
 .editor-toolbar-view__close {
@@ -250,8 +251,8 @@
   padding: 4px 8px 4px 9px;
   border: none;
   position: absolute;
-  right: 9px;
-  top: 7px;
+  right: 15px;
+  top: 20px;
   font-size: $font-size-md;
 
   &:hover {