add button in header

packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx

@@ -1,26 +1,36 @@
 // Libraries
-import React, { SFC } from 'react';
+import React, { FunctionComponent } from 'react';
 
 interface Props {
   title?: string;
   onClose?: () => void;
-  children: JSX.Element | JSX.Element[];
+  children: JSX.Element | JSX.Element[] | boolean;
+  onAdd?: () => void;
 }
 
-export const PanelOptionsGroup: SFC<Props> = props => {
+export const PanelOptionsGroup: FunctionComponent<Props> = props => {
   return (
     <div className="panel-options-group">
-      {props.title && (
-        <div className="panel-options-group__header">
-          {props.title}
-          {props.onClose && (
-            <button className="btn btn-link" onClick={props.onClose}>
-              <i className="fa fa-remove" />
-            </button>
-          )}
+      {props.onAdd ? (
+        <div className="panel-options-group__header" style={{ cursor: 'pointer' }} onClick={props.onAdd}>
+          <div className="panel-options-group__add">
+            <i className="fa fa-plus" />
+          </div>
+          <span className="panel-options-group__title">{props.title}</span>
         </div>
+      ) : (
+        props.title && (
+          <div className="panel-options-group__header">
+            {props.title}
+            {props.onClose && (
+              <button className="btn btn-link" onClick={props.onClose}>
+                <i className="fa fa-remove" />
+              </button>
+            )}
+          </div>
+        )
       )}
-      <div className="panel-options-group__body">{props.children}</div>
+      {props.children && <div className="panel-options-group__body">{props.children}</div>}
     </div>
   );
 };

packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss

@@ -11,13 +11,26 @@
   background: $panel-options-group-header-bg;
   position: relative;
   border-radius: $border-radius $border-radius 0 0;
+  display: flex;
 
   .btn {
     position: absolute;
     right: 0;
-    top: 0px;
+    top: 0;
   }
 }
+.panel-options-group__add {
+  background-color: $btn-success-bg;
+  border-radius: 50px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.panel-options-group__title {
+  margin-left: 8px;
+}
 
 .panel-options-group__body {
   padding: 20px;

packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 
 import MappingRow from './MappingRow';
-import { MappingType, ValueMapping } from '../../types/panel';
-import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
+import { MappingType, ValueMapping } from '../../types';
+import { PanelOptionsGroup } from '..';
 
 export interface Props {
   valueMappings: ValueMapping[];
@@ -81,8 +81,7 @@ export class ValueMappingsEditor extends PureComponent<Props, State> {
     const { valueMappings } = this.state;
 
     return (
-      <PanelOptionsGroup title="Value Mappings">
-        <div>
+      <PanelOptionsGroup title="Add mapping" onAdd={this.addMapping}>
           {valueMappings.length > 0 &&
             valueMappings.map((valueMapping, index) => (
               <MappingRow
@@ -92,13 +91,6 @@ export class ValueMappingsEditor extends PureComponent<Props, State> {
                 removeValueMapping={() => this.onRemoveMapping(valueMapping.id)}
               />
             ))}
-        </div>
-        <div className="add-mapping-row" onClick={this.addMapping}>
-          <div className="add-mapping-row-icon">
-            <i className="fa fa-plus" />
-          </div>
-          <div className="add-mapping-row-label">Add mapping</div>
-        </div>
       </PanelOptionsGroup>
     );
   }