From d6ed6ebe90a028a37b71288de7dcc2c76f0dbeea Mon Sep 17 00:00:00 2001
From: Kevin Moses <kmoses@hubspot.com>
Date: Wed, 17 Aug 2016 17:20:12 -0400
Subject: [PATCH] Tweaks to tags input

---
 .../app/components/common/modal/FormModal.jsx    | 16 ++++++++++++++--
 .../app/components/requests/RunNowModal.jsx      |  2 +-
 SingularityUI/app/styles/vendorOverrides.styl    |  6 ++++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/SingularityUI/app/components/common/modal/FormModal.jsx b/SingularityUI/app/components/common/modal/FormModal.jsx
index 602f6ae1ed..108d5951e6 100644
--- a/SingularityUI/app/components/common/modal/FormModal.jsx
+++ b/SingularityUI/app/components/common/modal/FormModal.jsx
@@ -164,6 +164,18 @@ export default class FormModal extends React.Component {
     );
   }
 
+  renderTagsInput(props) {
+    const inputProps = _.omit(props, 'className', 'placeholder', 'addTag');
+    return (
+      <div className="input-group">
+        <input type="text" ref="argValue" className="form-control" placeholder="" {...inputProps} />
+        <span className="input-group-btn">
+          <Button bsStyle="success" onClick={() => this.refs.tagsInput.accept()}>+</Button>
+        </span>
+      </div>
+    );
+  }
+
   renderForm() {
     const inputs = this.props.formElements.map((formElement) => {
       const error = this.state.errors[formElement.name];
@@ -239,11 +251,11 @@ export default class FormModal extends React.Component {
               <label style={{display: 'block', width: '100%'}}>
                 {formElement.label}
                 <TagsInput
+                  ref="tagsInput"
                   value={this.state.formState[formElement.name] || []}
                   onChange={(tags) => this.handleFormChange(formElement.name, tags)}
                   addOnBlur={true}
-                  addOnPaste={true}
-                  inputProps={{className: 'form-control input-large', placeholder: ''}}
+                  renderInput={(props) => this.renderTagsInput(props)}
                   renderTag={this.renderTag}
                 />
               </label>
diff --git a/SingularityUI/app/components/requests/RunNowModal.jsx b/SingularityUI/app/components/requests/RunNowModal.jsx
index 317df93f9a..c8996c2a59 100644
--- a/SingularityUI/app/components/requests/RunNowModal.jsx
+++ b/SingularityUI/app/components/requests/RunNowModal.jsx
@@ -69,7 +69,7 @@ class RunNowModal extends Component {
             {
               name: 'commandLineArgs',
               type: FormModal.INPUT_TYPES.TAGS,
-              label: 'Additional command line input: (optional)',
+              label: 'Additional command line arguments: (optional)',
               defaultValue: this.defaultCommandLineArgs()
             },
             {
diff --git a/SingularityUI/app/styles/vendorOverrides.styl b/SingularityUI/app/styles/vendorOverrides.styl
index 13772a6465..7017366455 100644
--- a/SingularityUI/app/styles/vendorOverrides.styl
+++ b/SingularityUI/app/styles/vendorOverrides.styl
@@ -8,3 +8,9 @@ ul
 .react-tagsinput
   border none
   padding 0
+
+.react-tagsinput-tag
+  background-color #F2F9FC
+  border-radius 2px
+  border 1px solid darken(#F2F9FC, 25%)
+  color darken(#F2F9FC, 70%)