A few tweaks to bearer auth component

app/ui/components/codemirror/code-editor.js

@@ -557,10 +557,11 @@ class CodeEditor extends PureComponent {
       filter,
       onMouseLeave,
       onClick,
+      className,
       style
     } = this.props;
 
-    const classes = classnames(this.props.className, {
+    const classes = classnames(className, {
       'editor': true,
       'editor--readonly': readOnly
     });
@@ -616,7 +617,7 @@ class CodeEditor extends PureComponent {
 
     return (
       <div className={classes} style={style}>
-        <div className="editor__container input"
+        <div className={classnames('editor__container', 'input', className)}
              style={styles}
              onClick={onClick}
              onMouseLeave={onMouseLeave}>

app/ui/components/codemirror/one-line-editor.js

@@ -1,5 +1,6 @@
 import React, {PureComponent, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
+import classnames from 'classnames';
 import autobind from 'autobind-decorator';
 import CodeEditor from './code-editor';
 import Input from '../base/debounced-input';
@@ -303,7 +304,7 @@ class OneLineEditor extends PureComponent {
           render={render}
           getRenderContext={getRenderContext}
           getAutocompleteConstants={getAutocompleteConstants}
-          className="editor--single-line"
+          className={classnames('editor--single-line', className)}
           defaultValue={defaultValue}
         />
       );

app/ui/components/editors/auth/bearer-auth.js

@@ -11,47 +11,26 @@ class BearerAuth extends PureComponent {
     this._handleChangeProperty = misc.debounce(this._handleChangeProperty, 500);
   }
 
-  _handleChangeProperty (property, value) {
+  _handleChange (token) {
     const {request} = this.props;
-    const authentication = Object.assign({}, request.authentication, {[property]: value});
+    const authentication = Object.assign({}, request.authentication, {token});
     this.props.onChange(authentication);
   }
 
-  _handleToken (value) {
-    this._handleChangeProperty('token', value);
-  }
-
-  renderInputRow (label, property, onChange) {
-    const {handleRender, handleGetRenderContext, request} = this.props;
-    const id = label.replace(/ /g, '-');
-    return (
-      <tr key={id}>
-        <td className="pad-right no-wrap valign-middle">
-          <label htmlFor={id} className="label--small no-pad">{label}</label>
-        </td>
-        <td className="wide">
-          <div className="form-control form-control--underlined no-margin">
-            <OneLineEditor
-              id={id}
-              onChange={onChange}
-              defaultValue={request.authentication[property] || ''}
-              render={handleRender}
-              getRenderContext={handleGetRenderContext}
-            />
-          </div>
-        </td>
-      </tr>
-    );
-  }
-
   render () {
+    const {request, handleRender, handleGetRenderContext} = this.props;
+    const {token} = request.authentication;
+
     return (
-      <div className="pad">
-        <table>
-          <tbody>
-          {this.renderInputRow('Token', 'token', this._handleToken)}
-          </tbody>
-        </table>
+      <div className="form-control form-control--underlined pad no-margin">
+        <OneLineEditor
+          className="no-margin"
+          onChange={this._handleChange}
+          defaultValue={token || ''}
+          render={handleRender}
+          placeholder="token"
+          getRenderContext={handleGetRenderContext}
+        />
       </div>
     );
   }