add placeholders for InputClickToEdit for the new provider table row

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 />

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

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;
+  }  
+}