Clarify labels UI (#2012)

- Clarify language
- Add note about label queries being immutable

Closes #1384

frontend/components/KolideAce/KolideAce.jsx

@@ -25,6 +25,7 @@ class KolideAce extends Component {
     showGutter: PropTypes.bool,
     wrapEnabled: PropTypes.bool,
     wrapperClassName: PropTypes.string,
+    hint: PropTypes.string,
   };
 
   static defaultProps = {
@@ -46,6 +47,16 @@ class KolideAce extends Component {
     );
   }
 
+  renderHint = () => {
+    const { hint } = this.props;
+
+    if (hint) {
+      return <span className={`${baseClass}__hint`}>{hint}</span>;
+    }
+
+    return false;
+  }
+
   render () {
     const {
       error,
@@ -60,7 +71,7 @@ class KolideAce extends Component {
       wrapEnabled,
       wrapperClassName,
     } = this.props;
-    const { renderLabel } = this;
+    const { renderLabel, renderHint } = this;
 
     const wrapperClass = classnames(wrapperClassName, {
       [`${baseClass}__wrapper--error`]: error,
@@ -94,6 +105,7 @@ class KolideAce extends Component {
             exec: handleSubmit,
           }]}
         />
+        {renderHint()}
       </div>
     );
   }

frontend/components/KolideAce/_styles.scss

@@ -22,4 +22,19 @@
       }
     }
   }
+
+  &__hint {
+    font-size: 14px;
+    font-weight: $normal;
+    line-height: 1.57;
+    letter-spacing: 1px;
+    color: $accent-text;
+
+    code {
+      color: $brand;
+      background-color: $accent-light;
+      padding: 2px;
+      font-family: 'SourceCodePro', $monospace;
+    }
+  }
 }

frontend/components/forms/LabelForm/LabelForm.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { noop } from 'lodash';
 
 import Button from 'components/buttons/Button';
 import Dropdown from 'components/forms/fields/Dropdown';
@@ -51,23 +52,28 @@ class LabelForm extends Component {
   render () {
     const { baseError, fields, handleSubmit, isEdit, onCancel } = this.props;
     const { onLoad } = this;
-    const headerText = isEdit ? 'Edit Label' : 'New Label Query';
+    const headerText = isEdit ? 'Edit Label' : 'New Label';
     const saveBtnText = isEdit ? 'Update Label' : 'Save Label';
+    const aceHintText = isEdit ? 'Label queries are immutable. To change the query, delete this label and create a new one.' : '';
 
     return (
       <form className={`${baseClass}__wrapper`} onSubmit={handleSubmit}>
         <h1>{headerText}</h1>
         <KolideAce
           {...fields.query}
+          label="SQL"
           onLoad={onLoad}
           readOnly={isEdit}
           wrapperClassName={`${baseClass}__text-editor-wrapper`}
+          hint={<span>{aceHintText}</span>}
+          handleSubmit={noop}
         />
+
         {baseError && <div className="form__base-error">{baseError}</div>}
         <InputField
           {...fields.name}
           inputClassName={`${baseClass}__label-title`}
-          label="Label title"
+          label="Name"
         />
         <InputField
           {...fields.description}
@@ -107,4 +113,3 @@ export default Form(LabelForm, {
   fields: ['description', 'name', 'platform', 'query'],
   validate,
 });
-

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx

@@ -139,10 +139,10 @@ describe('ManageHostsPage - component', () => {
       expect(page.find('LabelForm').length).toEqual(1);
     });
 
-    it('displays "New Label Query" as the query form header', () => {
+    it('displays "New Label" as the query form header', () => {
       const page = mount(component);
 
-      expect(page.find('LabelForm').text()).toInclude('New Label Query');
+      expect(page.find('LabelForm').text()).toInclude('New Label');
     });
   });