refactored panel-option-section into react component

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

@@ -1,6 +1,10 @@
+// Libraries
 import React, { PureComponent } from 'react';
+
+// Components
 import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
+import { PanelOptionSection } from './PanelOptionSection';
 
 interface Props {
   children: JSX.Element;
@@ -89,15 +93,9 @@ export class EditorTabBody extends PureComponent<Props, State> {
 
   renderOpenView(view: EditorToolBarView) {
     return (
-      <div className="panel-option-section">
+      <PanelOptionSection title={view.title || view.heading} onClose={this.onCloseOpenView}>
-        <div className="panel-option-section__header">
+        {view.render()}
-          {view.title || view.heading}
+      </PanelOptionSection>
-          <button className="btn btn-link" onClick={this.onCloseOpenView}>
-            <i className="fa fa-remove" />
-          </button>
-        </div>
-        <div className="panel-option-section__body">{view.render(this.onCloseOpenView)}</div>
-      </div>
     );
   }
 

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

@@ -0,0 +1,26 @@
+// Libraries
+import React, { SFC } from 'react';
+
+interface Props {
+  title?: string;
+  onClose?: () => void;
+  children: JSX.Element | JSX.Element[];
+}
+
+export const PanelOptionSection: SFC<Props> = props => {
+  return (
+    <div className="panel-option-section">
+      {props.title && (
+        <div className="panel-option-section__header">
+          {props.title}
+          {props.onClose && (
+            <button className="btn btn-link" onClick={props.onClose}>
+              <i className="fa fa-remove" />
+            </button>
+          )}
+        </div>
+      )}
+      <div className="panel-option-section__body">{props.children}</div>
+    </div>
+  );
+};

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

@@ -10,6 +10,7 @@ import { DataSourcePicker } from './DataSourcePicker';
 import { QueryInspector } from './QueryInspector';
 import { QueryOptions } from './QueryOptions';
 import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab';
+import { PanelOptionSection } from './PanelOptionSection';
 
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -256,37 +257,31 @@ export class QueriesTab extends PureComponent<Props, State> {
     return (
       <EditorTabBody heading="Queries" renderToolbar={this.renderToolbar} toolbarItems={[queryInspector, dsHelp]}>
         <>
-          <div className="panel-option-section">
+          <PanelOptionSection>
-          {/*<div className="panel-option-section__header">Queries</div>*/}
+            <div className="query-editor-rows gf-form-group">
-            <div className="panel-option-section__body">
+              <div ref={element => (this.element = element)} />
-              <div className="query-editor-rows gf-form-group">
-                <div ref={element => (this.element = element)} />
 
-                <div className="gf-form-query">
+              <div className="gf-form-query">
-                  <div className="gf-form gf-form-query-letter-cell">
+                <div className="gf-form gf-form-query-letter-cell">
-                    <label className="gf-form-label">
+                  <label className="gf-form-label">
-                      <span className="gf-form-query-letter-cell-carret muted">
+                    <span className="gf-form-query-letter-cell-carret muted">
-                        <i className="fa fa-caret-down" />
+                      <i className="fa fa-caret-down" />
-                      </span>
+                    </span>
-                      <span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
+                    <span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
-                    </label>
+                  </label>
-                    {!isAddingMixed && (
+                  {!isAddingMixed && (
-                      <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
+                    <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
-                        Add Query
+                      Add Query
-                      </button>
+                    </button>
-                    )}
+                  )}
-                    {isAddingMixed && this.renderMixedPicker()}
+                  {isAddingMixed && this.renderMixedPicker()}
-                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          </PanelOptionSection>
-          <div className="panel-option-section">
+          <PanelOptionSection>
-          {/*<div className="panel-option-section__header">Options</div>*/}
+            <QueryOptions panel={panel} datasource={currentDS} />
-            <div className="panel-option-section__body">
+          </PanelOptionSection>
-              <QueryOptions panel={panel} datasource={currentDS} />
-            </div>
-          </div>
         </>
       </EditorTabBody>
     );

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

@@ -8,6 +8,7 @@ import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoa
 import { EditorTabBody } from './EditorTabBody';
 import { VizTypePicker } from './VizTypePicker';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
+import { PanelOptionSection } from './PanelOptionSection';
 
 // Types
 import { PanelModel } from '../panel_model';
@@ -59,11 +60,15 @@ export class VisualizationTab extends PureComponent<Props, State> {
       return <div ref={element => (this.element = element)} />;
     }
 
-    if (PanelOptions) {
+    return (
-      return <PanelOptions options={this.getPanelDefaultOptions()} onChange={this.onPanelOptionsChanged} />;
+      <PanelOptionSection>
-    } else {
+        {PanelOptions ? (
-      return <p>Visualization has no options</p>;
+          <PanelOptions options={this.getPanelDefaultOptions()} onChange={this.onPanelOptionsChanged} />
-    }
+        ) : (
+          <p>Visualization has no options</p>
+        )}
+      </PanelOptionSection>
+    );
   }
 
   componentDidMount() {

public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap

@@ -12,17 +12,17 @@ exports[`Render should render alpha info text 1`] = `
       <form
         onSubmit={[Function]}
       >
+        <div
+          className="grafana-info-box"
+        >
+          This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes.
+        </div>
         <BasicSettings
           dataSourceName="gdev-cloudwatch"
           isDefault={false}
           onDefaultChange={[Function]}
           onNameChange={[Function]}
         />
-        <div
-          className="grafana-info-box"
-        >
-          This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes.
-        </div>
         <PluginSettings
           dataSource={
             Object {
@@ -111,17 +111,17 @@ exports[`Render should render beta info text 1`] = `
       <form
         onSubmit={[Function]}
       >
+        <div
+          className="grafana-info-box"
+        >
+          This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features.
+        </div>
         <BasicSettings
           dataSourceName="gdev-cloudwatch"
           isDefault={false}
           onDefaultChange={[Function]}
           onNameChange={[Function]}
         />
-        <div
-          className="grafana-info-box"
-        >
-          This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features.
-        </div>
         <PluginSettings
           dataSource={
             Object {
@@ -304,17 +304,17 @@ exports[`Render should render is ready only message 1`] = `
       <form
         onSubmit={[Function]}
       >
+        <div
+          className="grafana-info-box span8"
+        >
+          This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+        </div>
         <BasicSettings
           dataSourceName="gdev-cloudwatch"
           isDefault={false}
           onDefaultChange={[Function]}
           onNameChange={[Function]}
         />
-        <div
-          className="grafana-info-box span8"
-        >
-          This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
-        </div>
         <PluginSettings
           dataSource={
             Object {