styles the dropdown component (#271)

* styles the dropdown component

* Updates Dropdown component to behave like other form fields

frontend/components/forms/fields/Dropdown/Dropdown.jsx

@@ -6,7 +6,6 @@ import componentStyles from './styles';
 class Dropdown extends Component {
   static propTypes = {
     containerStyles: PropTypes.object,
-    fieldName: PropTypes.string,
     options: PropTypes.arrayOf(PropTypes.shape({
       text: PropTypes.string,
       value: PropTypes.string,
@@ -19,12 +18,11 @@ class Dropdown extends Component {
   };
 
   onOptionClick = (evt) => {
-    const { target: { value } } = evt;
-    const { fieldName, onSelect } = this.props;
+    evt.preventDefault();
 
-    onSelect({
-      [fieldName]: value,
-    });
+    const { onSelect } = this.props;
+
+    onSelect(evt);
 
     return false;
   }
@@ -46,11 +44,13 @@ class Dropdown extends Component {
     const { selectWrapperStyles } = componentStyles;
 
     return (
-      <select style={[selectWrapperStyles, containerStyles]} onChange={onOptionClick}>
-        {options.map(option => {
-          return renderOption(option);
-        })}
-      </select>
+      <div className="kolide-dropdown-wrapper">
+        <select className="kolide-dropdown" style={[selectWrapperStyles, containerStyles]} onChange={onOptionClick}>
+          {options.map(option => {
+            return renderOption(option);
+          })}
+        </select>
+      </div>
     );
   }
 }

frontend/components/forms/queries/SaveQueryForm/SaveQueryForm.jsx

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import radium from 'radium';
 import componentStyles from './styles';
 import Button from '../../../buttons/Button';
+import Dropdown from '../../fields/Dropdown';
 import InputField from '../../fields/InputField';
 import validatePresence from '../../validators/validate_presence';
 
@@ -54,7 +55,6 @@ class SaveQueryForm extends Component {
   onFieldChange = (fieldName) => {
     return ({ target }) => {
       const { errors, formData } = this.state;
-
       this.setState({
         errors: {
           ...errors,
@@ -160,11 +160,7 @@ class SaveQueryForm extends Component {
   renderMoreOptionsFormFields = () => {
     const {
       errors,
-      formData: {
-        duration,
-        platforms,
-        hosts,
-      },
+      formData: { hosts },
       showMoreOptions,
     } = this.state;
     const {
@@ -200,16 +196,12 @@ class SaveQueryForm extends Component {
         <div style={formSectionStyles}>
           <div>
             <label htmlFor="duration" style={labelStyles}>Query Duration</label>
-            <select
+            <Dropdown
               key="duration"
-              name="duration"
-              value={duration}
-              onChange={onFieldChange('duration')}
-              style={dropdownInputStyles}
-            >
-              <option value="short">Short</option>
-              <option value="long">Long</option>
-            </select>
+              options={[{ text: 'Short', value: 'short' }, { text: 'Long', value: 'long' }]}
+              onSelect={onFieldChange('duration')}
+              containerStyles={dropdownInputStyles}
+            />
           </div>
           <small style={helpTextStyles}>
             Individual hosts are not always online. A longer duration will return more complete results. You can view results of any in-progress query at any time.
@@ -218,16 +210,12 @@ class SaveQueryForm extends Component {
         <div style={formSectionStyles}>
           <div>
             <label htmlFor="platforms" style={labelStyles}>Query Platform</label>
-            <select
+            <Dropdown
               key="platforms"
-              name="platforms"
-              value={platforms}
-              onChange={onFieldChange('platforms')}
-              style={dropdownInputStyles}
-            >
-              <option value="all">ALL PLATFORMS</option>
-              <option value="none">NO PLATFORMS</option>
-            </select>
+              options={[{ text: 'ALL PLATFORMS', value: 'all' }, { text: 'NO PLATFORMS', value: 'none' }]}
+              onSelect={onFieldChange('platforms')}
+              containerStyles={dropdownInputStyles}
+            />
           </div>
           <small style={helpTextStyles}>
             Specifying a platform allows you to restrict the query from running on a certain platform (even on hosts specifically targeted that do not match).

frontend/pages/Admin/UserManagementPage/UserBlock/UserBlock.jsx

@@ -7,6 +7,7 @@ import EditUserForm from '../../../../components/forms/Admin/EditUserForm';
 
 class UserBlock extends Component {
   static propTypes = {
+    onEditUser: PropTypes.func,
     onSelect: PropTypes.func,
     user: PropTypes.object,
   };
@@ -49,23 +50,20 @@ class UserBlock extends Component {
   }
 
   onEditUserFormSubmit = (updatedUser) => {
-    const { user, onSelect } = this.props;
-    const formData = {
-      user_actions: 'edit_user',
-      updated_user: updatedUser,
-    };
+    const { user, onEditUser } = this.props;
 
     this.setState({
       isEdit: false,
     });
 
-    return onSelect(user, formData);
+    return onEditUser(user, updatedUser);
   }
 
-  onUserActionSelect = (formData) => {
+  onUserActionSelect = ({ target }) => {
     const { onSelect, user } = this.props;
+    const { value: action } = target;
 
-    if (formData.user_actions === 'modify_details') {
+    if (action === 'modify_details') {
       this.setState({
         isEdit: true,
       });
@@ -73,7 +71,7 @@ class UserBlock extends Component {
       return false;
     }
 
-    return onSelect(user, formData);
+    return onSelect(user, action);
   }
 
   render () {
@@ -125,7 +123,6 @@ class UserBlock extends Component {
           <p style={userPositionStyles}>{position}</p>
           <p style={userEmailStyles}>{email}</p>
           <Dropdown
-            fieldName="user_actions"
             options={userActionOptions}
             initialOption={{ text: 'Actions...' }}
             onSelect={this.onUserActionSelect}

frontend/pages/Admin/UserManagementPage/UserManagementPage.jsx

@@ -32,12 +32,12 @@ class UserManagementPage extends Component {
     return false;
   }
 
-  onUserActionSelect = (user, formData) => {
+  onUserActionSelect = (user, action) => {
     const { dispatch } = this.props;
     const { update } = userActions;
 
-    if (formData.user_actions) {
-      switch (formData.user_actions) {
+    if (action) {
+      switch (action) {
         case 'demote_user':
           return dispatch(update(user, { admin: false }))
             .then(() => {
@@ -63,11 +63,6 @@ class UserManagementPage extends Component {
             .then(() => {
               return dispatch(renderFlash('success', 'User forced to reset password', update(user, { force_password_reset: false })));
             });
-        case 'edit_user':
-          return dispatch(update(user, formData.updated_user))
-            .then(() => {
-              return dispatch(renderFlash('success', 'User updated', update(user, user)));
-            });
         default:
           return false;
       }
@@ -76,6 +71,18 @@ class UserManagementPage extends Component {
     return false;
   }
 
+  onEditUser = (user, updatedUser) => {
+    const { dispatch } = this.props;
+    const { update } = userActions;
+
+    return dispatch(update(user, updatedUser))
+      .then(() => {
+        return dispatch(
+          renderFlash('success', 'User updated', update(user, user))
+        );
+      });
+  }
+
   onInviteUserSubmit = (formData) => {
     console.log('user invited', formData);
     return this.toggleInviteUserModal();
@@ -98,11 +105,12 @@ class UserManagementPage extends Component {
   }
 
   renderUserBlock = (user) => {
-    const { onUserActionSelect } = this;
+    const { onEditUser, onUserActionSelect } = this;
 
     return (
       <UserBlock
         key={user.email}
+        onEditUser={onEditUser}
         onSelect={onUserActionSelect}
         user={user}
       />

frontend/styles/stylesheets/forms.scss

@@ -2,7 +2,6 @@
    color: #A8B1CD;
    opacity: 1;
 }
-
 .Select.target-select {
   .Select-control {
     padding-bottom: 5px;
@@ -26,3 +25,40 @@
     color: #A8B1CD;
   }
 }
+.kolide-dropdown {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 1px solid #AE6DDf;
+  border-radius: 2px;
+  color: #858495;
+  font-size: 14px;
+  height: 30px;
+  text-indent: 4px;
+  text-transform: uppercase;
+  width: 100%;
+  background-color: #FFFFFF;
+}
+.kolide-dropdown-wrapper {
+  height: 30px;
+  position: relative;
+  :focus {
+    outline: none;
+  }
+  &:after {
+    content: '';
+    display: block;
+    width: 30px;
+    height: 29px;
+    background: url('/assets/images/down-arrow.png') no-repeat;
+    background-color: #AE6DDF;
+    background-position: center;
+    background-size: 15px;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+    pointer-events: none;
+    position: absolute;
+    top: 1px;
+    right: 0;
+  }
+}