WIP Implement batch actions functionality

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

@@ -0,0 +1,86 @@
+import React, {PropTypes} from 'react'
+
+import Dropdown from 'shared/components/Dropdown'
+
+import {DEFAULT_ORG, NO_ORG, USER_ROLES} from 'src/admin/constants/dummyUsers'
+
+const BatchActionsBar = ({
+  onDeleteUsers,
+  onAddOrgs,
+  onRemoveOrgs,
+  onChangeRoles,
+  numUsersSelected,
+  organizationName,
+  organizations,
+}) => {
+  const showWhenAllUsers = organizationName === DEFAULT_ORG
+  const showWhenNotAllUser = organizationName !== DEFAULT_ORG
+
+  const sanitizedOrgs = organizations
+    .filter(org => {
+      return !(org.name === DEFAULT_ORG || org.name === NO_ORG)
+    })
+    .map(org => ({
+      ...org,
+      text: org.name,
+    }))
+
+  return (
+    <div className="chronograf-admin-table--batch">
+      <p className="chronograf-admin-table--num-selected">
+        {numUsersSelected} User{numUsersSelected === 1 ? ' ' : 's '}Selected
+      </p>
+      {numUsersSelected > 0
+        ? <div className="chronograf-admin-table--batch-actions">
+            <div className="btn btn-sm btn-danger" onClick={onDeleteUsers}>
+              Delete
+            </div>
+            {showWhenAllUsers
+              ? <Dropdown
+                  items={sanitizedOrgs}
+                  selected={'Add to Organization'}
+                  onChoose={onAddOrgs}
+                  buttonColor="btn-primary"
+                  className="dropdown-200"
+                />
+              : null}
+            {showWhenAllUsers
+              ? <Dropdown
+                  items={sanitizedOrgs}
+                  selected={'Remove from Organization'}
+                  onChoose={onRemoveOrgs}
+                  buttonColor="btn-primary"
+                  className="dropdown-200"
+                />
+              : null}
+            {showWhenNotAllUser
+              ? <Dropdown
+                  items={USER_ROLES.map(role => ({
+                    ...role,
+                    text: role.name,
+                  }))}
+                  selected={'Change Role'}
+                  onChoose={onChangeRoles}
+                  buttonColor="btn-primary"
+                  className="dropdown-140"
+                />
+              : null}
+          </div>
+        : null}
+    </div>
+  )
+}
+
+const {arrayOf, func, number, shape, string} = PropTypes
+
+BatchActionsBar.propTypes = {
+  onDeleteUsers: func.isRequired,
+  onAddOrgs: func.isRequired,
+  onRemoveOrgs: func.isRequired,
+  onChangeRoles: func.isRequired,
+  organizations: arrayOf(shape),
+  numUsersSelected: number.isRequired,
+  organizationName: string.isRequired,
+}
+
+export default BatchActionsBar

ui/src/admin/constants/dummyUsers.js

@@ -112,6 +112,12 @@ export const DUMMY_USERS = [
   },
 ]
 
+export const USER_ROLES = [
+  {name: 'None'},
+  {name: 'Viewer'},
+  {name: 'Editor'},
+  {name: 'Admin'},
+]
 export const DEFAULT_ORG = 'All Users'
 export const NO_ORG = 'None'
 

ui/src/admin/containers/AdminChronografPage.js

@@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react'
 
 import SourceIndicator from 'shared/components/SourceIndicator'
 import AllUsersTable from 'src/admin/components/chronograf/AllUsersTable'
+import BatchActionsBar from 'src/admin/components/chronograf/BatchActionsBar'
 import Dropdown from 'shared/components/Dropdown'
 
 import FancyScrollbar from 'shared/components/FancyScrollbar'
@@ -78,6 +79,21 @@ class AdminChronografPage extends Component {
     }
   }
 
+  handleBatchDeleteUsers = () => {
+    console.log('Delete Users')
+  }
+
+  handleBatchRemoveOrgFromUsers = arg => {
+    console.log(arg)
+  }
+
+  handleBatchAddOrgToUsers = arg => {
+    console.log(arg)
+  }
+  handleBatchChangeUsersRole = arg => {
+    console.log(arg)
+  }
+
   render() {
     const {users, organizations} = this.props
     const {organizationName, selectedUsers, filteredUsers} = this.state
@@ -129,14 +145,15 @@ class AdminChronografPage extends Component {
                           </div>
                         </div>
                       </div>
-                      <div className="chronograf-admin-table--batch-actions">
-                        <p className="chronograf-admin-table--num-selected">
-                          {numUsersSelected} User{numUsersSelected === 1 ? ' ' : 's '}Selected
-                        </p>
-                        {numUsersSelected > 0
-                          ? <div className="btn btn-sm btn-danger">Delete</div>
-                          : null}
-                      </div>
+                      <BatchActionsBar
+                        numUsersSelected={numUsersSelected}
+                        organizationName={organizationName}
+                        organizations={organizations}
+                        onDeleteUsers={this.handleBatchDeleteUsers}
+                        onAddOrgs={this.handleBatchAddOrgToUsers}
+                        onRemoveOrgs={this.handleBatchRemoveOrgFromUsers}
+                        onChangeRoles={this.handleBatchChangeUsersRole}
+                      />
                       <div className="panel-body chronograf-admin-table--panel">
                         <AllUsersTable
                           filteredUsers={filteredUsers}

ui/src/style/pages/admin.scss

@@ -258,13 +258,22 @@ table.table.chronograf-admin-table tbody tr td.chronograf-admin-table--selectabl
   border-top-right-radius: 0;
   padding-top: 11px;
 }
-.chronograf-admin-table--batch-actions {
+.chronograf-admin-table--batch {
   border-radius: 5px 5px 0 0;
   background-color: $g4-onyx;
   padding: 11px 38px;
   display: flex;
   align-items: center;
 }
+.chronograf-admin-table--batch-actions {
+  display: flex;
+  align-items: center;
+
+  > .dropdown,
+  > .btn {
+    margin-left: 4px;
+  }
+}
 .chronograf-admin-table--num-selected {
   @include no-user-select();
   margin: 0px 11px 0 0;