Move Create User button closer to Users Table

ui/src/admin/components/chronograf/PageHeader.js

@@ -1,9 +1,9 @@
 import React, {PropTypes} from 'react'
 
 import SourceIndicator from 'shared/components/SourceIndicator'
-import Authorized, {ADMIN_ROLE, SUPERADMIN_ROLE} from 'src/auth/Authorized'
+import Authorized, {SUPERADMIN_ROLE} from 'src/auth/Authorized'
 
-const PageHeader = ({onShowManageOrgsOverlay, onShowCreateUserOverlay}) =>
+const PageHeader = ({onShowManageOrgsOverlay}) =>
   <div className="page-header">
     <div className="page-header__container">
       <div className="page-header__left">
@@ -11,15 +11,6 @@ const PageHeader = ({onShowManageOrgsOverlay, onShowCreateUserOverlay}) =>
       </div>
       <div className="page-header__right">
         <SourceIndicator />
-        <Authorized requiredRole={ADMIN_ROLE}>
-          <button
-            className="btn btn-primary btn-sm"
-            onClick={onShowCreateUserOverlay}
-          >
-            <span className="icon plus" />
-            Create User
-          </button>
-        </Authorized>
         <Authorized requiredRole={SUPERADMIN_ROLE}>
           <button
             className="btn btn-primary btn-sm"
@@ -37,7 +28,6 @@ const {func} = PropTypes
 
 PageHeader.propTypes = {
   onShowManageOrgsOverlay: func.isRequired,
-  onShowCreateUserOverlay: func.isRequired,
 }
 
 export default PageHeader

ui/src/admin/components/chronograf/UsersTableHeader.js

@@ -1,6 +1,6 @@
 import React, {Component, PropTypes} from 'react'
 
-import Authorized, {SUPERADMIN_ROLE} from 'src/auth/Authorized'
+import Authorized, {ADMIN_ROLE, SUPERADMIN_ROLE} from 'src/auth/Authorized'
 
 import Dropdown from 'shared/components/Dropdown'
 
@@ -14,7 +14,11 @@ class UsersTableHeader extends Component {
   }
 
   render() {
-    const {organizations, organizationName} = this.props
+    const {
+      organizations,
+      organizationName,
+      onShowCreateUserOverlay,
+    } = this.props
 
     return (
       <div className="panel-heading u-flex u-ai-center u-jc-space-between">
@@ -35,11 +39,20 @@ class UsersTableHeader extends Component {
               }))}
               selected={organizationName}
               onChoose={this.handleChooseFilter()}
-              buttonSize="btn-md"
+              buttonSize="btn-sm"
               className="dropdown-220"
             />
           </div>
         </Authorized>
+        <Authorized requiredRole={ADMIN_ROLE}>
+          <button
+            className="btn btn-primary btn-sm"
+            onClick={onShowCreateUserOverlay}
+          >
+            <span className="icon plus" />
+            Create User
+          </button>
+        </Authorized>
       </div>
     )
   }
@@ -51,6 +64,7 @@ UsersTableHeader.propTypes = {
   organizationName: string.isRequired,
   organizations: arrayOf(shape),
   onFilterUsers: func.isRequired,
+  onShowCreateUserOverlay: func.isRequired,
 }
 
 export default UsersTableHeader

ui/src/admin/containers/AdminChronografPage.js

@@ -256,7 +256,6 @@ class AdminChronografPage extends Component {
       <div className="page">
         <PageHeader
           onShowManageOrgsOverlay={this.handleShowManageOrgsOverlay}
-          onShowCreateUserOverlay={this.handleShowCreateUserOverlay}
         />
 
         <FancyScrollbar className="page-contents">
@@ -269,6 +268,9 @@ class AdminChronografPage extends Component {
                         organizationName={organization.name}
                         organizations={organizations}
                         onFilterUsers={this.handleFilterUsers}
+                        onShowCreateUserOverlay={
+                          this.handleShowCreateUserOverlay
+                        }
                       />
                       <BatchActionsBar
                         numUsersSelected={selectedUsers.length}