From 0fe452ec26bdbf6fab1b280e01252b902076743b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 17 Dec 2018 15:38:51 +0100
Subject: [PATCH] Minor react graph panel refactorings and fixes

---
 public/app/core/components/Switch/Switch.tsx  |  2 +-
 .../app/plugins/panel/graph2/GraphOptions.tsx | 29 +++++++------------
 2 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/public/app/core/components/Switch/Switch.tsx b/public/app/core/components/Switch/Switch.tsx
index 5cb7617c89c..d53a3d68878 100644
--- a/public/app/core/components/Switch/Switch.tsx
+++ b/public/app/core/components/Switch/Switch.tsx
@@ -32,7 +32,7 @@ export class Switch extends PureComponent<Props, State> {
     const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
 
     return (
-      <label htmlFor={labelId} className="gf-form-switch-container">
+      <label htmlFor={labelId} className="gf-form gf-form-switch-container">
         {label && <div className={labelClassName}>{label}</div>}
         <div className={switchClassName}>
           <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
diff --git a/public/app/plugins/panel/graph2/GraphOptions.tsx b/public/app/plugins/panel/graph2/GraphOptions.tsx
index 2272cdc7aef..e87c03da634 100644
--- a/public/app/plugins/panel/graph2/GraphOptions.tsx
+++ b/public/app/plugins/panel/graph2/GraphOptions.tsx
@@ -27,26 +27,17 @@ export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
 
     return (
       <div>
-        <div className="form-option-box">
-          <div className="form-option-box__header">Display Options</div>
-          <div className="section gf-form-group">
-            <h5 className="section-heading">Draw Modes</h5>
-            <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
-            <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
-            <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
-          </div>
-          <div className="section gf-form-group">
-            <h5 className="section-heading">Test Options</h5>
-            <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
-            <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
-            <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
-          </div>
+        <div className="section gf-form-group">
+          <h5 className="section-heading">Draw Modes</h5>
+          <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
+          <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
+          <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
         </div>
-        <div className="form-option-box">
-          <div className="form-option-box__header">Axes</div>
-        </div>
-        <div className="form-option-box">
-          <div className="form-option-box__header">Thresholds</div>
+        <div className="section gf-form-group">
+          <h5 className="section-heading">Test Options</h5>
+          <Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
+          <Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
+          <Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
         </div>
       </div>
     );