From 108884c337b960687bf5079cb79b8b379571d46d Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Thu, 2 Mar 2017 16:30:59 -0800
Subject: [PATCH] Add MultiSelectDropdown to UsersTable

---
 ui/src/admin/components/EmptyRow.js   | 19 ++++++++++
 ui/src/admin/components/UserRow.js    | 50 +++++++++++++++++++++++++++
 ui/src/admin/components/UsersTable.js | 19 ++++------
 3 files changed, 75 insertions(+), 13 deletions(-)
 create mode 100644 ui/src/admin/components/EmptyRow.js
 create mode 100644 ui/src/admin/components/UserRow.js

diff --git a/ui/src/admin/components/EmptyRow.js b/ui/src/admin/components/EmptyRow.js
new file mode 100644
index 000000000..402e4eb4c
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/ui/src/admin/components/UserRow.js b/ui/src/admin/components/UserRow.js
new file mode 100644
index 000000000..7b9ccfafc
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/ui/src/admin/components/UsersTable.js b/ui/src/admin/components/UsersTable.js
index d110cab68..e8af96c6b 100644
--- a/ui/src/admin/components/UsersTable.js
+++ b/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>