New query page (#254)

* Sidebar/Layout improvements

* New Query route and page

* Display text editor

* Gradient style longhand

* Slider button component

* Move new query section to component

* Kolide Ace theme

* Styles slider on page

* run query on CMD + Enter

* clicking hosts sends user to homepage

* SaveQueryForm component

* Splits NewQuery component JSX into multiple dumb components

* InputField component

* save query form

* new query

* styleguide

* moves all new query form logic to the new query form

* Kolide theme for osquery tables

frontend/components/forms/fields/InputField/InputField.jsx

@@ -0,0 +1,110 @@
+import React, { Component, PropTypes } from 'react';
+import radium from 'radium';
+import componentStyles from './styles';
+
+class InputField extends Component {
+  static propTypes = {
+    autofocus: PropTypes.bool,
+    error: PropTypes.string,
+    inputWrapperStyles: PropTypes.object,
+    inputOptions: PropTypes.object,
+    label: PropTypes.string,
+    labelStyles: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    placeholder: PropTypes.string,
+    style: PropTypes.object,
+    type: PropTypes.string,
+  };
+
+  static defaultProps = {
+    autofocus: false,
+    inputWrapperStyles: {},
+    inputOptions: {},
+    label: null,
+    labelStyles: {},
+    style: {},
+    type: 'text',
+  };
+
+  constructor (props) {
+    super(props);
+    this.state = { value: null };
+  }
+
+  componentDidMount () {
+    const { autofocus } = this.props;
+    const { input } = this;
+
+    if (autofocus) input.focus();
+
+    return false;
+  }
+
+  onInputChange = (evt) => {
+    evt.preventDefault();
+
+    const { value } = evt.target;
+    const { onChange } = this.props;
+
+    this.setState({ value });
+    return onChange(evt);
+  }
+
+  renderLabel = () => {
+    const { componentLabelStyles } = componentStyles;
+    const { error, label, labelStyles, name } = this.props;
+
+    if (!label) return false;
+
+    return (
+      <label htmlFor={name} style={[componentLabelStyles(error), labelStyles]}>
+        {error || label}
+      </label>
+    );
+  }
+
+  render () {
+    const { error, inputOptions, inputWrapperStyles, name, placeholder, style, type } = this.props;
+    const { inputErrorStyles, inputStyles } = componentStyles;
+    const { value } = this.state;
+    const { onInputChange, renderLabel } = this;
+
+    if (type === 'textarea') {
+      return (
+        <div style={inputWrapperStyles}>
+          {renderLabel()}
+          <textarea
+            name={name}
+            onChange={onInputChange}
+            className="input-with-icon"
+            placeholder={placeholder}
+            ref={(r) => { this.input = r; }}
+            style={[inputStyles(type, value), inputErrorStyles(error), style]}
+            type={type}
+            {...inputOptions}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div style={inputWrapperStyles}>
+        {renderLabel()}
+        <input
+          name={name}
+          onChange={onInputChange}
+          className="input-with-icon"
+          placeholder={placeholder}
+          ref={(r) => { this.input = r; }}
+          style={[inputStyles(type, value), inputErrorStyles(error), style]}
+          type={type}
+          {...inputOptions}
+        />
+      </div>
+    );
+  }
+}
+
+export default radium(InputField);
+

frontend/components/forms/fields/InputField/index.js

@@ -0,0 +1 @@
+export default from './InputField';

frontend/components/forms/fields/InputField/styles.js

@@ -0,0 +1,55 @@
+import styles from '../../../../styles';
+
+const { color, font } = styles;
+
+export default {
+  componentLabelStyles: (error) => {
+    if (!error) return {};
+
+    return {
+      color: color.alert,
+    };
+  },
+  inputErrorStyles: (error) => {
+    if (!error) return {};
+
+    return {
+      borderColor: color.alert,
+    };
+  },
+  inputStyles: (type, value) => {
+    const baseStyles = {
+      borderColor: color.brand,
+      borderRadius: '2px',
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      fontSize: font.base,
+      color: color.accentText,
+      paddingRight: '30px',
+      opacity: '1',
+      textIndent: '1px',
+      position: 'relative',
+      boxSizing: 'border-box',
+      ':focus': {
+        outline: 'none',
+      },
+    };
+
+    if (type === 'password' && value) {
+      return {
+        ...baseStyles,
+        letterSpacing: '7px',
+        color: color.textUltradark,
+      };
+    }
+
+    if (value) {
+      return {
+        ...baseStyles,
+        color: color.textUltradark,
+      };
+    }
+
+    return baseStyles;
+  },
+};