From 8dff94b7f8c5afe368979aa3279b65b8b97a568c Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Mon, 12 Feb 2018 14:52:32 -0800
Subject: [PATCH] add placeholders for InputClickToEdit for the new provider
 table row

---
 .../components/chronograf/ProvidersTableRowNew.js      |  2 ++
 ui/src/shared/components/InputClickToEdit.js           | 10 +++++++---
 ui/src/style/components/input-click-to-edit.scss       | 10 ++++++++++
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/ui/src/admin/components/chronograf/ProvidersTableRowNew.js b/ui/src/admin/components/chronograf/ProvidersTableRowNew.js
index a8212248d..a86e0ba9f 100644
--- a/ui/src/admin/components/chronograf/ProvidersTableRowNew.js
+++ b/ui/src/admin/components/chronograf/ProvidersTableRowNew.js
@@ -62,12 +62,14 @@ class ProvidersTableRowNew extends Component {
           wrapperClass="fancytable--td provider--provider"
           onUpdate={this.handleChangeProvider}
           tabIndex={rowIndex}
+          placeholder="google"
         />
         <InputClickToEdit
           value={providerOrganization}
           wrapperClass="fancytable--td provider--providerorg"
           onUpdate={this.handleChangeProviderOrg}
           tabIndex={rowIndex}
+          placeholder="*"
         />
         <div className="fancytable--td provider--arrow">
           <span />
diff --git a/ui/src/shared/components/InputClickToEdit.js b/ui/src/shared/components/InputClickToEdit.js
index c26029916..478ca57c4 100644
--- a/ui/src/shared/components/InputClickToEdit.js
+++ b/ui/src/shared/components/InputClickToEdit.js
@@ -46,7 +46,9 @@ class InputClickToEdit extends Component {
 
   render() {
     const {isEditing, value} = this.state
-    const {wrapperClass, disabled, tabIndex} = this.props
+    const {wrapperClass, disabled, tabIndex, placeholder} = this.props
+
+    const divStyle = value ? 'input-cte' : 'input-cte__empty'
 
     return disabled
       ? <div className={wrapperClass}>
@@ -66,14 +68,15 @@ class InputClickToEdit extends Component {
                 onFocus={this.handleFocus}
                 ref={r => (this.inputRef = r)}
                 tabIndex={tabIndex}
+                placeholder={placeholder}
               />
             : <div
-                className="input-cte"
+                className={divStyle}
                 onClick={this.handleInputClick}
                 onFocus={this.handleInputClick}
                 tabIndex={tabIndex}
               >
-                {value}
+                {value || placeholder}
                 <span className="icon pencil" />
               </div>}
         </div>
@@ -88,6 +91,7 @@ InputClickToEdit.propTypes = {
   onUpdate: func.isRequired,
   disabled: bool,
   tabIndex: number,
+  placeholder: string,
 }
 
 export default InputClickToEdit
diff --git a/ui/src/style/components/input-click-to-edit.scss b/ui/src/style/components/input-click-to-edit.scss
index 3e036347f..75ce1eccf 100644
--- a/ui/src/style/components/input-click-to-edit.scss
+++ b/ui/src/style/components/input-click-to-edit.scss
@@ -51,3 +51,13 @@
   font-style: italic;
   color: $g9-mountain;
 }
+
+.input-cte__empty {
+  @extend .input-cte;
+  font-style: italic;
+  color: $g9-mountain;
+
+  &:hover {
+    color: $g9-mountain;
+  }  
+}
\ No newline at end of file