From 025d37e9a2f2f886e6b6e2f62dfb93d32379bee6 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 1 Feb 2019 14:19:53 +0100
Subject: [PATCH 1/5] add button in header

---
 .../PanelOptionsGroup/PanelOptionsGroup.tsx   | 34 ++++++++++++-------
 .../PanelOptionsGroup/_PanelOptionsGroup.scss | 15 +++++++-
 .../ValueMappingsEditor.tsx                   | 14 ++------
 3 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
index 7ce4b8335ff..5378147c741 100644
--- a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
+++ b/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>
   );
 };
diff --git a/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss b/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
index cfc832afa98..34881a72743 100644
--- a/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
+++ b/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;
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
index ca0a6e71f4a..88035087a9a 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
+++ b/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>
     );
   }

From 609129c039e2de5b38aa11f37af1160a35a5e27d Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Fri, 1 Feb 2019 14:23:03 +0100
Subject: [PATCH 2/5] fixing test

---
 .../ValueMappingsEditor.test.tsx              |  2 +-
 .../ValueMappingsEditor.test.tsx.snap         | 76 +++++++------------
 2 files changed, 30 insertions(+), 48 deletions(-)

diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
index bbad3e5a7ca..caa09c9e5ff 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { ValueMappingsEditor, Props } from './ValueMappingsEditor';
-import { MappingType } from '../../types/panel';
+import { MappingType } from '../../types';
 
 const setup = (propOverrides?: object) => {
   const props: Props = {
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap
index 8a465ff88df..7f6a70bd926 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap
@@ -2,55 +2,37 @@
 
 exports[`Render should render component 1`] = `
 <Component
-  title="Value Mappings"
+  onAdd={[Function]}
+  title="Add mapping"
 >
-  <div>
-    <MappingRow
-      key="Ok-0"
-      removeValueMapping={[Function]}
-      updateValueMapping={[Function]}
-      valueMapping={
-        Object {
-          "id": 1,
-          "operator": "",
-          "text": "Ok",
-          "type": 1,
-          "value": "20",
-        }
+  <MappingRow
+    key="Ok-0"
+    removeValueMapping={[Function]}
+    updateValueMapping={[Function]}
+    valueMapping={
+      Object {
+        "id": 1,
+        "operator": "",
+        "text": "Ok",
+        "type": 1,
+        "value": "20",
       }
-    />
-    <MappingRow
-      key="Meh-1"
-      removeValueMapping={[Function]}
-      updateValueMapping={[Function]}
-      valueMapping={
-        Object {
-          "from": "21",
-          "id": 2,
-          "operator": "",
-          "text": "Meh",
-          "to": "30",
-          "type": 2,
-        }
+    }
+  />
+  <MappingRow
+    key="Meh-1"
+    removeValueMapping={[Function]}
+    updateValueMapping={[Function]}
+    valueMapping={
+      Object {
+        "from": "21",
+        "id": 2,
+        "operator": "",
+        "text": "Meh",
+        "to": "30",
+        "type": 2,
       }
-    />
-  </div>
-  <div
-    className="add-mapping-row"
-    onClick={[Function]}
-  >
-    <div
-      className="add-mapping-row-icon"
-    >
-      <i
-        className="fa fa-plus"
-      />
-    </div>
-    <div
-      className="add-mapping-row-label"
-    >
-      Add mapping
-    </div>
-  </div>
+    }
+  />
 </Component>
 `;

From 3be1deea4478e51bb8d6a3bd3a88f7e4b7077995 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 1 Feb 2019 15:19:18 +0100
Subject: [PATCH 3/5] Made some style tweaks

---
 .../PanelOptionsGroup/PanelOptionsGroup.tsx   | 14 ++++----
 .../PanelOptionsGroup/_PanelOptionsGroup.scss | 32 ++++++++++++++++---
 .../ThresholdsEditor/_ThresholdsEditor.scss   | 12 +++----
 .../ValueMappingsEditor.tsx                   |  2 +-
 4 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
index 5378147c741..8516760d6f3 100644
--- a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
+++ b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx
@@ -12,16 +12,18 @@ export const PanelOptionsGroup: FunctionComponent<Props> = props => {
   return (
     <div className="panel-options-group">
       {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 className="panel-options-group__header">
+          <button className="panel-options-group__add-btn" onClick={props.onAdd}>
+            <div className="panel-options-group__add-circle">
+              <i className="fa fa-plus" />
+            </div>
+            <span className="panel-options-group__title">{props.title}</span>
+          </button>
         </div>
       ) : (
         props.title && (
           <div className="panel-options-group__header">
-            {props.title}
+            <span className="panel-options-group__title">{props.title}</span>
             {props.onClose && (
               <button className="btn btn-link" onClick={props.onClose}>
                 <i className="fa fa-remove" />
diff --git a/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss b/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
index 34881a72743..bff77695562 100644
--- a/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
+++ b/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
@@ -7,11 +7,11 @@
 
 .panel-options-group__header {
   padding: 4px 8px;
-  font-size: 1.1rem;
   background: $panel-options-group-header-bg;
   position: relative;
   border-radius: $border-radius $border-radius 0 0;
   display: flex;
+  align-items: center;
 
   .btn {
     position: absolute;
@@ -19,17 +19,41 @@
     top: 0;
   }
 }
-.panel-options-group__add {
-  background-color: $btn-success-bg;
+
+.panel-options-group__add-btn {
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  padding: 0;
+
+  &:hover {
+    .panel-options-group__add-circle {
+      background-color: $btn-success-bg;
+      color: $text-color-strong;
+    }
+  }
+}
+
+.panel-options-group__add-circle {
+  @include gradientBar($btn-success-bg, $btn-success-bg-hl, $text-color);
+
   border-radius: 50px;
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
+  margin-right: 6px;
+
+  i {
+    position: relative;
+    top: 1px;
+  }
 }
+
 .panel-options-group__title {
-  margin-left: 8px;
+  font-size: 1.1rem;
 }
 
 .panel-options-group__body {
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
index 61278321572..eec93f3da6a 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
@@ -5,7 +5,7 @@
 .thresholds-row {
   display: flex;
   flex-direction: row;
-  height: 70px;
+  height: 62px;
 }
 
 .thresholds-row:first-child > .thresholds-row-color-indicator {
@@ -21,21 +21,21 @@
 }
 
 .thresholds-row-add-button {
+  @include buttonBackground($btn-success-bg, $btn-success-bg-hl, $text-color);
+
   align-self: center;
   margin-right: 5px;
-  color: $green;
   height: 24px;
   width: 24px;
-  background-color: $green;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-}
 
-.thresholds-row-add-button > i {
-  color: $white;
+  &:hover {
+    color: $text-color-strong;
+  }
 }
 
 .thresholds-row-color-indicator {
diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
index 88035087a9a..f9646781048 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx
@@ -81,7 +81,7 @@ export class ValueMappingsEditor extends PureComponent<Props, State> {
     const { valueMappings } = this.state;
 
     return (
-      <PanelOptionsGroup title="Add mapping" onAdd={this.addMapping}>
+      <PanelOptionsGroup title="Add value mapping" onAdd={this.addMapping}>
           {valueMappings.length > 0 &&
             valueMappings.map((valueMapping, index) => (
               <MappingRow

From 24ccfb9ccc3d41ade2ba8be65d6da0aa192f8bd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 1 Feb 2019 15:23:32 +0100
Subject: [PATCH 4/5] More style tweaks to panel option group add button

---
 .../src/components/PanelOptionsGroup/_PanelOptionsGroup.scss    | 2 ++
 .../src/components/ThresholdsEditor/_ThresholdsEditor.scss      | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss b/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
index bff77695562..b5b815cf57c 100644
--- a/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
+++ b/packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
@@ -54,6 +54,8 @@
 
 .panel-options-group__title {
   font-size: 1.1rem;
+  position: relative;
+  top: 1px;
 }
 
 .panel-options-group__body {
diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
index eec93f3da6a..200adfbfd75 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
+++ b/packages/grafana-ui/src/components/ThresholdsEditor/_ThresholdsEditor.scss
@@ -1,5 +1,5 @@
 .thresholds {
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 }
 
 .thresholds-row {

From 59dfe794f50c533f8263310382bbf608d59b74e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 1 Feb 2019 15:39:20 +0100
Subject: [PATCH 5/5] updated snapshot

---
 .../__snapshots__/ValueMappingsEditor.test.tsx.snap             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap
index 7f6a70bd926..b0dd7d81840 100644
--- a/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap
+++ b/packages/grafana-ui/src/components/ValueMappingsEditor/__snapshots__/ValueMappingsEditor.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Render should render component 1`] = `
 <Component
   onAdd={[Function]}
-  title="Add mapping"
+  title="Add value mapping"
 >
   <MappingRow
     key="Ok-0"