Fix org link & filtering by passing whole org object around

Does not fix the double-click bug introduced in c8f1cf1, which
is probably due to an unloaded curry on first click.

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

@@ -15,8 +15,8 @@ class ChronografUsersTable extends Component {
     super(props)
   }
 
-  handleChooseFilter = filterString => () => {
-    this.props.onFilterUsers({name: filterString})
+  handleChooseFilter = organization => () => {
+    this.props.onFilterUsers({organization})
   }
 
   // currentOrg is a role object that contains the organization id being updated

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

@@ -9,8 +9,12 @@ class UsersTableHeader extends Component {
     super(props)
   }
 
+  handleChooseFilter = () => organization => {
+    this.props.onFilterUsers({organization})
+  }
+
   render() {
-    const {onFilterUsers, organizations, organizationName} = this.props
+    const {organizations, organizationName} = this.props
 
     return (
       <div className="panel-heading u-flex u-ai-center u-jc-space-between">
@@ -30,7 +34,7 @@ class UsersTableHeader extends Component {
                 text: org.name,
               }))}
               selected={organizationName}
-              onChoose={onFilterUsers}
+              onChoose={this.handleChooseFilter()}
               buttonSize="btn-md"
               className="dropdown-220"
             />

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

@@ -4,6 +4,7 @@ import Dropdown from 'shared/components/Dropdown'
 
 import {
   DEFAULT_ORG_NAME,
+  DEFAULT_ORG_ID,
   NO_ORG,
   MEMBER_ROLE,
 } from 'src/admin/constants/dummyUsers'
@@ -42,27 +43,37 @@ const UsersTableOrgCell = ({
     )
   }
 
-  return (
-    <td style={{width: colOrg}}>
-      {user.roles
-        .filter(role => {
-          return !(role.organizationName === DEFAULT_ORG_NAME)
-        })
-        .map((role, i) =>
-          <span key={i} className="chronograf-user--org">
-            <a href="#" onClick={onChooseFilter(role.organizationName)}>
-              {role.organizationName}
-            </a>
-          </span>
-        )}
-    </td>
-  )
+  return organizations.length
+    ? <td style={{width: colOrg}}>
+        {user.roles
+          .filter(role => {
+            return !(role.organization === DEFAULT_ORG_ID)
+          })
+          .map((role, i) => {
+            const org = organizations.find(o => o.id === role.organization)
+            return (
+              <span key={i} className="chronograf-user--org">
+                <a href="#" onClick={onChooseFilter(org)}>
+                  {org.name}
+                </a>
+              </span>
+            )
+          })}
+      </td>
+    : null
 }
 
-const {arrayOf, func, shape} = PropTypes
+const {arrayOf, func, shape, string} = PropTypes
 
 UsersTableOrgCell.propTypes = {
-  user: shape(),
+  user: shape({
+    roles: arrayOf(
+      shape({
+        name: string.isRequired,
+        organization: string.isRequired,
+      })
+    ),
+  }),
   organizations: arrayOf(shape()),
   onChangeUserOrg: func.isRequired,
   onChooseFilter: func.isRequired,

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

@@ -2,7 +2,7 @@ import React, {PropTypes} from 'react'
 
 import Dropdown from 'shared/components/Dropdown'
 
-import {DEFAULT_ORG_NAME, USER_ROLES} from 'src/admin/constants/dummyUsers'
+import {DEFAULT_ORG_ID, USER_ROLES} from 'src/admin/constants/dummyUsers'
 import {USERS_TABLE} from 'src/admin/constants/chronografTableSizing'
 
 const UsersTableRoleCell = ({user, onChangeUserRole}) => {
@@ -21,7 +21,7 @@ const UsersTableRoleCell = ({user, onChangeUserRole}) => {
     <td style={{width: colRole}}>
       {user.roles
         .filter(role => {
-          return !(role.organizationName === DEFAULT_ORG_NAME)
+          return !(role.organization === DEFAULT_ORG_ID)
         })
         .map((role, i) =>
           <Dropdown
@@ -41,10 +41,17 @@ const UsersTableRoleCell = ({user, onChangeUserRole}) => {
   )
 }
 
-const {func, shape} = PropTypes
+const {arrayOf, func, shape, string} = PropTypes
 
 UsersTableRoleCell.propTypes = {
-  user: shape(),
+  user: shape({
+    roles: arrayOf(
+      shape({
+        name: string.isRequired,
+        organization: string.isRequired,
+      })
+    ),
+  }),
   onChangeUserRole: func.isRequired,
 }
 

ui/src/admin/containers/AdminChronografPage.js

@@ -30,7 +30,7 @@ class AdminChronografPage extends Component {
 
     this.state = {
       // TODO: pass around organization object instead of just name
-      organizationName: this.props.currentOrganization.name,
+      organization: this.props.currentOrganization,
       selectedUsers: [],
       filteredUsers: this.props.users,
       showManageOverlay: false,
@@ -43,7 +43,7 @@ class AdminChronografPage extends Component {
     const {users, currentOrganization} = nextProps
 
     this.handleFilterUsers({
-      name: currentOrganization.name,
+      organization: currentOrganization,
       users,
     })
   }
@@ -68,26 +68,26 @@ class AdminChronografPage extends Component {
     this.setState({showManageOverlay: false, showCreateUserOverlay: false})
   }
 
-  handleFilterUsers = ({users, name}) => {
+  handleFilterUsers = ({users, organization}) => {
     const nextUsers = users || this.props.users
-    const nextOrganizationName = name || this.props.currentOrganization.name
+    const nextOrganization = organization || this.props.currentOrganization
 
     const filteredUsers =
-      nextOrganizationName === DEFAULT_ORG_NAME
+      nextOrganization.name === DEFAULT_ORG_NAME
         ? nextUsers
         : nextUsers.filter(
             user =>
-              nextOrganizationName === NO_ORG
+              nextOrganization.name === NO_ORG
                 ? user.roles.length === 1 // Filter out if user is only part of Default Org
                 : user.roles.find(
-                    role => role.organizationName === nextOrganizationName
+                    role => role.organization === nextOrganization.id
                   )
           )
     this.setState({
       filteredUsers,
-      organizationName: nextOrganizationName,
+      organization: nextOrganization,
       selectedUsers:
-        nextOrganizationName === DEFAULT_ORG_NAME
+        nextOrganization.name === DEFAULT_ORG_NAME
           ? this.state.selectedUsers
           : [],
     })
@@ -205,7 +205,7 @@ class AdminChronografPage extends Component {
   render() {
     const {users, organizations} = this.props
     const {
-      organizationName,
+      organization,
       selectedUsers,
       filteredUsers,
       showManageOverlay,
@@ -228,13 +228,13 @@ class AdminChronografPage extends Component {
                   <div className="col-xs-12">
                     <div className="panel panel-minimal">
                       <UsersTableHeader
-                        organizationName={organizationName}
+                        organizationName={organization.name}
                         organizations={organizations}
                         onFilterUsers={this.handleFilterUsers}
                       />
                       <BatchActionsBar
                         numUsersSelected={numUsersSelected}
-                        organizationName={organizationName}
+                        organizationName={organization.name}
                         organizations={organizations}
                         onDeleteUsers={this.handleBatchDeleteUsers}
                         onAddUsersToOrg={this.handleBatchAddUsersToOrg}
@@ -246,11 +246,11 @@ class AdminChronografPage extends Component {
                       <div className="panel-body chronograf-admin-table--panel">
                         <Authorized
                           requiredRole={SUPERADMIN_ROLE}
-                          propsOverride={{organizationName}}
+                          propsOverride={{organizationName: organization.name}}
                         >
                           <UsersTable
                             filteredUsers={filteredUsers} // TODO: change to users upon separating Orgs & Users views
-                            organizationName={organizationName}
+                            organizationName={organization.name}
                             organizations={organizations}
                             onFilterUsers={this.handleFilterUsers}
                             onToggleUserSelected={this.handleToggleUserSelected}