Allow multiline mode for input with type text.

This adds a toggle react component which can be used to change text input to textarea and vice versa.

console/src/components/Common/Common.scss

@@ -20,6 +20,15 @@ table thead tr th
   color: #4D4D4D;
   font-weight: 600 !important;
 }
+
+.textareaNoResize {
+  resize: none;
+}
+
+.textareaButtonAlign {
+  margin-top: -8em !important;
+}
+
 .pageSidebar {
   height: calc(100vh - 50px);
   overflow: auto;

console/src/components/Common/Toggler/Toggler.js

@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+
+const styles = require('../Common.scss');
+
+class Toggler extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      input_textarea: 0,
+      input_value: '',
+    };
+
+    this.handleClick = this.handleClick.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    const stateValue = this.state.input_textarea;
+    if (stateValue === 0) {
+      this.setState({ input_textarea: 1 });
+    } else {
+      this.setState({ input_textarea: 0 });
+    }
+  }
+
+  handleChange(e) {
+    const inputVal = e.target.value;
+    this.setState({ input_value: inputVal });
+  }
+
+  render() {
+    return (
+      <span>
+        <label>
+          {this.state.input_textarea === 1 ? (
+            <textarea
+              {...this.props.standardProps}
+              placeholder={this.props.placeholderProp}
+              rows="5"
+              cols="5"
+            />
+          ) : (
+            <input
+              {...this.props.standardProps}
+              placeholder={this.props.placeholderProp}
+            />
+          )}
+        </label>
+        <button
+          className={
+            'btn ' +
+            styles.yellow_button +
+            (this.state.input_textarea === 1
+              ? ' ' + styles.textareaButtonAlign
+              : '')
+          }
+          onClick={this.handleClick}
+        >
+          Toggle
+        </button>
+      </span>
+    );
+  }
+}
+
+export default Toggler;

console/src/components/Services/Data/TableInsertItem/InsertItem.js

@@ -4,6 +4,7 @@ import TableHeader from '../TableCommon/TableHeader';
 import { insertItem, I_RESET } from './InsertActions';
 import { ordinalColSort } from '../utils';
 import { setTable } from '../DataActions';
+import Toggler from '../../../Common/Toggler/Toggler';
 
 class InsertItem extends Component {
   constructor() {
@@ -149,6 +150,15 @@ class InsertItem extends Component {
         );
       }
 
+      if (colType === 'text') {
+        typedInput = (
+          <Toggler
+            standardProps={standardInputProps}
+            placeholderProp={getPlaceholder(colType)}
+          />
+        );
+      }
+
       if (colType === 'json' || colType === 'jsonb') {
         // JSON/JSONB
         typedInput = (