Fix styles of text_list setting with empty value

* fixed Add Value button margins
* fixed description layout
* DNS nameservers min=1 limit restored

Partial-Bug: #1613614

Change-Id: Idc175e3f629674e764a3921ef2f85e3278131cba
(cherry picked from commit c16a8d46e0)

static/styles/main.less

@@ -1461,17 +1461,18 @@ input[type=range] {
 
   .field-list {
     float: left;
+    width: 352px;
     > div {
       float: none;
       input, textarea {
         margin-bottom: @base-indent / 2;
+        margin-right: @base-indent;
       }
       &:last-child input,  &:last-child textarea {
         margin-bottom: 0;
       }
       .field-controls {
         float: left;
-        padding-left: @base-indent;
         .btn {
           padding: 0;
           margin: 7px 0 5px;

static/translations/core.json

@@ -68,6 +68,9 @@
                 "file": {
                     "placeholder": "No file selected"
                 },
+                "text_list": {
+                    "add_value": "Add Value"
+                },
                 "selected_options": "__count__ selected",
                 "select_all": "Select All",
                 "find_options_placeholder": "type option name..."

static/views/cluster_page_tabs/network_tab.js

@@ -1423,7 +1423,11 @@ var NetworkingL3Parameters = React.createClass({
           <div className='network-description'>
             {i18n(networkTabNS + 'networking_parameters.dns_servers_description')}
           </div>
-          <customControls.text_list max={5} {...this.composeProps('dns_nameservers', true)} />
+          <customControls.text_list
+            min={1}
+            max={5}
+            {...this.composeProps('dns_nameservers', true)}
+          />
         </div>
       </div>
     );

static/views/custom_controls.js

@@ -267,23 +267,25 @@ customControls.text_list = customControls.textarea_list = React.createClass({
     return this.changeField(index);
   }, 200, {leading: true}),
   renderMultipleInputControls(index) {
+    var {value, max, min, disabled} = this.props;
     return (
       <div className='field-controls'>
-        {(!this.props.max || this.props.value.length < this.props.max) &&
+        {(!max || value.length < max) &&
           <button
             ref={'add' + index}
             className='btn btn-link btn-add-field'
-            disabled={this.props.disabled}
+            disabled={disabled}
             onClick={() => this.changeField(index, 'add')}
           >
             <i className='glyphicon glyphicon-plus-sign' />
+            {value.length === 0 && i18n('controls.text_list.add_value')}
           </button>
         }
-        {this.props.value.length > this.props.min &&
+        {value.length > min &&
           <button
             ref={'remove' + index}
             className='btn btn-link btn-remove-field'
-            disabled={this.props.disabled}
+            disabled={disabled}
             onClick={() => this.changeField(index, 'remove')}
           >
             <i className='glyphicon glyphicon-minus-sign' />
@@ -353,11 +355,13 @@ customControls.text_list = customControls.textarea_list = React.createClass({
   render() {
     return this.renderWrapper([
       this.renderLabel(),
-      this.props.value.length === 0 ?
+      <div key='field-list' className='field-list'>
-        this.renderMultipleInputControls(-1) :
+        {this.props.value.length === 0 ?
-        <div key='field-list' className='field-list'>
+          <div>{this.renderMultipleInputControls(-1)}</div>
-          {_.map(this.props.value, this.renderInput)}
+        :
-        </div>,
+          _.map(this.props.value, this.renderInput)
+        }
+      </div>,
       this.renderDescription()
     ]);
   }