Expose add botton when text_list is empty

The issue is that when a text_list is empty
there is nothing to render including 'add'
and 'delete' buttons. We should provide the
possibility to add items when the list is empty.

Change-Id: I991ec3a885a6462f4a8afd7f96591fd7ec82a0b4
Closes-Bug: #1613614

static/tests/unit/text_list_control.js

@@ -146,3 +146,47 @@ suite('Text_list Control', () => {
     );
   });
 });
+
+suite('Text_list Control allow empty', () => {
+  setup(() => {
+    var renderControl = function(value, error) {
+      return ReactTestUtils.renderIntoDocument(
+        <customControls.text_list
+          type='text_list'
+          name='some_name'
+          value={value}
+          label='Some label'
+          description='Some description'
+          disabled={false}
+          onChange={sinon.spy()}
+          error={error || null}
+          min={0}
+          max={4}
+        />
+      );
+    };
+    control1 = renderControl([]);
+  });
+
+  test('Test empty control render', () => {
+    assert.equal(
+      ReactTestUtils.scryRenderedDOMComponentsWithTag(control1, 'input').length,
+      0,
+      'Text inputs are not rendered'
+    );
+
+    var checkInputButtons = function(control, addFieldButtonsAmount, removeFieldButtonsAmount) {
+      assert.equal(
+        ReactTestUtils.scryRenderedDOMComponentsWithClass(control, 'btn-add-field').length,
+        addFieldButtonsAmount,
+        'Add Field buttons amount: ' + addFieldButtonsAmount
+      );
+      assert.equal(
+        ReactTestUtils.scryRenderedDOMComponentsWithClass(control1, 'btn-remove-field').length,
+        removeFieldButtonsAmount,
+        'Remove Field buttons amount: ' + removeFieldButtonsAmount
+      );
+    };
+    checkInputButtons(control1, 1, 0);
+  });
+});

static/views/custom_controls.js

@@ -239,7 +239,7 @@ customControls.text_list = customControls.textarea_list = React.createClass({
   getDefaultProps() {
     return {
       type: 'text_list',
-      min: 1,
+      min: 0,
       max: null,
       tooltipIcon: 'glyphicon-warning-sign',
       tooltipPlacement: 'right'
@@ -353,9 +353,11 @@ customControls.text_list = customControls.textarea_list = React.createClass({
   render() {
     return this.renderWrapper([
       this.renderLabel(),
-      <div key='field-list' className='field-list'>
-        {_.map(this.props.value, this.renderInput)}
-      </div>,
+      this.props.value.length === 0 ?
+        this.renderMultipleInputControls(-1) :
+        <div key='field-list' className='field-list'>
+          {_.map(this.props.value, this.renderInput)}
+        </div>,
       this.renderDescription()
     ]);
   }