Option to allow multiline values in form-key-value (rancher/rancher#4317)

app/components/form-key-value/component.js

@@ -63,6 +63,7 @@ export default Ember.Component.extend({
   valuePlaceholder: 'Value',
   allowEmptyValue: false,
   addInitialEmptyRow: false,
+  allowMultilineValue: true,
 
   ary: null,
   asMap: null,

app/components/form-key-value/template.hbs

@@ -10,19 +10,23 @@
     </tr>
     {{#each ary as |row|}}
       <tr>
-        <td data-title="Key">
+        <td class="valign-top" data-title="Key">
           {{input-paste pasted="pastedLabels" class="form-control input-sm key" type="text" value=row.key placeholder=keyPlaceholder}}
         </td>
 
-        <td class="text-center">
+        <td class="valign-top text-center">
           <p class="form-control-static input-sm">=</p>
         </td>
 
-        <td data-title="Value">
-          {{input class="form-control input-sm value" type="text" value=row.value placeholder=valuePlaceholder}}
+        <td class="valign-top" data-title="Value">
+          {{#if allowMultilineValue}}
+            {{textarea-autogrow class="form-control input-sm value" value=row.value placeholder=valuePlaceholder}}
+          {{else}}
+            {{input class="form-control input-sm value" type="text" value=row.value placeholder=valuePlaceholder}}
+          {{/if}}
         </td>
 
-        <td class="text-right">
+        <td class="valign-top text-right">
           <button class="btn btn-primary btn-sm" {{action "remove" row}}><i class="icon icon-minus"/></button>
         </td>
       </tr>

app/components/textarea-autogrow/component.js

@@ -2,14 +2,15 @@ import Ember from 'ember';
 import { isGecko } from 'ui/utils/platform';
 
 export default Ember.TextArea.extend({
-  tagName: 'textarea',
   text: null,
-  classNames: [],
-  paddingAndBorder: null,
-  minHeight: 43,
+  minHeight: 0,
   maxHeight: 200,
 
+  tagName: 'textarea',
+  classNames: ['no-resize'],
+
   didInsertElement() {
+    this.set('minHeight', ( this.get('isSmall') ? 31 : 43));
     this.autoSize();
 
     this.$().on('paste', () => {
@@ -21,6 +22,10 @@ export default Ember.TextArea.extend({
     this.autoSize();
   },
 
+  isSmall: function() {
+    return this.$().hasClass('input-sm');
+  }.property(),
+
   autoSize() {
     let el = this.element;
     let $el = $(el);
@@ -29,7 +34,7 @@ export default Ember.TextArea.extend({
       $el.css('height', '1px');
 
       let border = parseInt($el.css('borderTopWidth'),10)||0 + parseInt($el.css('borderBottomWidth'),10)||0;
-      let magic = ( isGecko ? 1 : 2); // Sigh, but it's wrong without magic fudge
+      let magic = (this.get('isSmall') ? -2 : 0) + ( isGecko ? 1 : 2); // Sigh, but it's wrong without magic fudge
       let neu = Math.max(this.get('minHeight'), Math.min(el.scrollHeight + border + magic, this.get('maxHeight')));
 
       $el.css('overflowY', (el.scrollHeight > neu ? 'auto' : 'hidden'));

app/styles/layout/_layout.scss

@@ -29,10 +29,22 @@ B {
   background-color : $midGray;
 }
 
-
 .inline-block {
   display : inline-block;
 }
+
+.valign-top {
+  vertical-align: top;
+}
+
+.valign-middle {
+  vertical-align: middle;
+}
+
+.valign-bottom {
+  vertical-align: bottom;
+}
+
 /**********
 * Articles (above the page info/warnings)
 **********/