From 0f1a9a4d9268841eace576258bc65f03988aff3a Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Tue, 22 Aug 2017 13:51:30 -0700
Subject: [PATCH] Make input SFC

---
 ui/src/dashboards/components/AxesOptions.js   | 39 ++++++++-----------
 .../components/DisplayOptionsInput.js         | 28 +++++++++++++
 2 files changed, 44 insertions(+), 23 deletions(-)
 create mode 100644 ui/src/data_explorer/components/DisplayOptionsInput.js

diff --git a/ui/src/dashboards/components/AxesOptions.js b/ui/src/dashboards/components/AxesOptions.js
index a232212269..c2fb4c8137 100644
--- a/ui/src/dashboards/components/AxesOptions.js
+++ b/ui/src/dashboards/components/AxesOptions.js
@@ -1,6 +1,7 @@
 import React, {PropTypes} from 'react'
 
 import OptIn from 'shared/components/OptIn'
+import Input from 'src/data_explorer/components/DisplayOptionsInput'
 
 const AxesOptions = ({
   axes: {y: {bounds, label, prefix, suffix, base, defaultYLabel}},
@@ -43,30 +44,22 @@ const AxesOptions = ({
             type="number"
           />
         </div>
+        <Input
+          name="prefix"
+          id="prefix"
+          value={prefix}
+          labelText="Y-Value's Prefix"
+          onChange={onSetPrefixSuffix}
+        />
+        <Input
+          name="suffix"
+          id="suffix"
+          value={suffix}
+          labelText="Y-Value's Suffix"
+          onChange={onSetPrefixSuffix}
+        />
         <div className="form-group col-sm-6">
-          <label htmlFor="prefix">Y-Value's Prefix</label>
-          <input
-            className="form-control input-sm"
-            type="text"
-            name="prefix"
-            id="prefix"
-            value={prefix}
-            onChange={onSetPrefixSuffix}
-          />
-        </div>
-        <div className="form-group col-sm-6">
-          <label htmlFor="prefix">Y-Value's Suffix</label>
-          <input
-            className="form-control input-sm"
-            type="text"
-            name="suffix"
-            id="suffix"
-            value={suffix}
-            onChange={onSetPrefixSuffix}
-          />
-        </div>
-        <div className="form-group col-sm-6">
-          <label>Labels Format</label>
+          <label>Y-Value Format</label>
           <ul className="nav nav-tablist nav-tablist-sm">
             <li
               className={base === '10' ? 'active' : ''}
diff --git a/ui/src/data_explorer/components/DisplayOptionsInput.js b/ui/src/data_explorer/components/DisplayOptionsInput.js
new file mode 100644
index 0000000000..c52be9ffae
--- /dev/null
+++ b/ui/src/data_explorer/components/DisplayOptionsInput.js
@@ -0,0 +1,28 @@
+import React, {PropTypes} from 'react'
+
+const DisplayOptionsInput = ({id, name, value, onChange, labelText}) =>
+  <div className="form-group col-sm-6">
+    <label htmlFor={name}>
+      {labelText}
+    </label>
+    <input
+      className="form-control input-sm"
+      type="text"
+      name={name}
+      id={id}
+      value={value}
+      onChange={onChange}
+    />
+  </div>
+
+const {func, string} = PropTypes
+
+DisplayOptionsInput.propTypes = {
+  name: string.isRequired,
+  id: string.isRequired,
+  value: string.isRequired,
+  onChange: func.isRequired,
+  labelText: string,
+}
+
+export default DisplayOptionsInput