Add MultiSelectDropdown to UsersTable

ui/src/admin/components/EmptyRow.js

@@ -0,0 +1,19 @@
+import React, {PropTypes} from 'react'
+
+const EmptyRow = ({tableName}) => (
+  <tr className="table-empty-state">
+    <th colSpan="5">
+      <p>You don&#39;t have any {tableName},<br/>why not create one?</p>
+    </th>
+  </tr>
+)
+
+const {
+  string,
+} = PropTypes
+
+EmptyRow.propTypes = {
+  tableName: string.isRequired,
+}
+
+export default EmptyRow

ui/src/admin/components/UserRow.js

@@ -0,0 +1,50 @@
+import React, {PropTypes} from 'react'
+import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
+
+const UserRow = ({user: {name, roles, permissions}}) => (
+  <tr>
+    <td>{name}</td>
+    <td>
+      {
+        roles && roles.length &&
+        <MultiSelectDropdown
+          items={roles.map((role) => role.name)}
+          selectedItems={[]}
+          label={'Select Roles'}
+          onApply={() => console.log('onApply')}
+        />
+      }
+    </td>
+    <td>
+      {
+        permissions && permissions.length &&
+        <MultiSelectDropdown
+          items={permissions.map((perm) => perm.name)}
+          selectedItems={[]}
+          label={'Select Permissions'}
+          onApply={() => console.log('onApply')}
+        />
+      }
+    </td>
+  </tr>
+)
+
+const {
+  arrayOf,
+  shape,
+  string,
+} = PropTypes
+
+UserRow.propTypes = {
+  user: shape({
+    name: string,
+    roles: arrayOf(shape({
+      name: string,
+    })),
+    permissions: arrayOf(shape({
+      name: string,
+    })),
+  }).isRequired,
+}
+
+export default UserRow

ui/src/admin/components/UsersTable.js

@@ -1,4 +1,6 @@
 import React, {PropTypes} from 'react'
+import UserRow from 'src/admin/components/UserRow'
+import EmptyRow from 'src/admin/components/EmptyRow'
 
 const UsersTable = ({users}) => (
   <div className="panel panel-minimal">
@@ -13,19 +15,10 @@ const UsersTable = ({users}) => (
         </thead>
         <tbody>
           {
-            users.length ? users.map((user) => (
-              <tr key={user.name}>
-                <td>{user.name}</td>
-                <td>{user.roles && user.roles.map((r) => r.name).join(', ')}</td>
-                <td>{user.permissions && user.permissions.map((p) => p.scope).join(', ')}</td>
-              </tr>
-            )) : (() => (
-              <tr className="table-empty-state">
-                <th colSpan="5">
-                  <p>You don&#39;t have any Users,<br/>why not create one?</p>
-                </th>
-              </tr>
-            ))()
+            users.length ?
+              users.map((user) =>
+                <UserRow key={user.name} user={user} />
+              ) : <EmptyRow tableName={'Users'} />
           }
         </tbody>
       </table>