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

* change input to textarea and use autosize on them * fix some tests
hashicorp · Aug 14, 2019 · 0bf1dad · 0bf1dad
1 parent d158f26
commit 0bf1dad
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 7 deletions.
diff --git a/ui/lib/core/addon/components/string-list.js b/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) {

diff --git a/ui/lib/core/addon/templates/components/string-list.hbs b/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)

diff --git a/ui/tests/acceptance/settings/configure-secret-backends/pki/section-urls-test.js b/ui/tests/acceptance/settings/configure-secret-backends/pki/section-urls-test.js
@@ -20,15 +20,15 @@ module('Acceptance | settings/configure/secrets/pki/urls', function(hooks) {
 
     await page.form.fields
       .objectAt(0)
-      .input('foo')
+      .textarea('foo')
       .change();
     await page.form.submit();
 
     assert.ok(page.form.hasError, 'shows error on invalid input');
 
     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.');

diff --git a/ui/tests/integration/components/form-field-test.js b/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');

diff --git a/ui/tests/pages/components/form-field.js b/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]'),

diff --git a/ui/tests/pages/secrets/backend/pki/edit-role.js b/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) {