change input to textarea and use autosize on them (#7254)

* change input to textarea and use autosize on them

* fix some tests

ui/lib/core/addon/components/string-list.js

@@ -1,6 +1,7 @@
 import ArrayProxy from '@ember/array/proxy';
 import Component from '@ember/component';
 import { set, computed } from '@ember/object';
+import autosize from 'autosize';
 import layout from '../templates/components/string-list';
 
 export default Component.extend({
@@ -85,6 +86,16 @@ export default Component.extend({
     this.send('addInput');
   },
 
+  didInsertElement() {
+    this._super(...arguments);
+    autosize(this.element.querySelector('textarea'));
+  },
+
+  didUpdate() {
+    this._super(...arguments);
+    autosize.update(this.element.querySelector('textarea'));
+  },
+
   setType() {
     const list = this.inputList;
     if (!list) {

ui/lib/core/addon/templates/components/string-list.hbs

@@ -12,9 +12,8 @@
 {{#each inputList as |data index|}}
   <div class="field is-grouped" data-test-string-list-row="{{index}}">
     <div class="control is-expanded">
-      {{input
+      {{textarea
         data-test-string-list-input=index
-        type="text"
         class="input"
         value=data.value
         name=(concat elementId "-" index)

ui/tests/acceptance/settings/configure-secret-backends/pki/section-urls-test.js

@@ -20,7 +20,7 @@ module('Acceptance | settings/configure/secrets/pki/urls', function(hooks) {
 
     await page.form.fields
       .objectAt(0)
-      .input('foo')
+      .textarea('foo')
       .change();
     await page.form.submit();
 
@@ -28,7 +28,7 @@ module('Acceptance | settings/configure/secrets/pki/urls', function(hooks) {
 
     await page.form.fields
       .objectAt(0)
-      .input('foo.example.com')
+      .textarea('foo.example.com')
       .change();
     await page.form.submit();
     assert.equal(page.lastMessage, 'The urls config for this backend has been updated.');

ui/tests/integration/components/form-field-test.js

@@ -123,7 +123,7 @@ module('Integration | Component | form field', function(hooks) {
 
     await component.fields
       .objectAt(0)
-      .input('array')
+      .textarea('array')
       .change();
     assert.deepEqual(model.get('foo'), ['array'], 'sets the value on the model');
     assert.deepEqual(spy.args[0], ['foo', ['array']], 'onChange called with correct args');

ui/tests/pages/components/form-field.js

@@ -32,7 +32,7 @@ export default {
     input: fillable('input'),
     select: fillable('select'),
     textarea: fillable('textarea'),
-    change: triggerable('keyup', 'input'),
+    change: triggerable('keyup', '.input'),
     inputValue: value('input'),
     textareaValue: value('textarea'),
     inputChecked: attribute('checked', 'input[type=checkbox]'),

ui/tests/pages/secrets/backend/pki/edit-role.js

@@ -9,7 +9,7 @@ export default create({
   toggleOptions: clickable('[data-test-toggle-group="Options"]'),
   name: fillable('[data-test-input="name"]'),
   allowAnyName: clickable('[data-test-input="allowAnyName"]'),
-  allowedDomains: fillable('[data-test-input="allowedDomains"] input'),
+  allowedDomains: fillable('[data-test-input="allowedDomains"] .input'),
   save: clickable('[data-test-role-create]'),
 
   createRole(name, allowedDomains) {