Show display all users in MultiSelect

ui/src/admin/components/AdminTabs.js

@@ -39,7 +39,7 @@ const AdminTabs = ({
     },
     {
       type: 'Roles',
-      component: (<RolesTable roles={roles} onDelete={onDeleteRole} onFilter={onFilterRoles} />),
+      component: (<RolesTable roles={roles} allUsers={users} onDelete={onDeleteRole} onFilter={onFilterRoles} />),
     },
     {
       type: 'Queries',

ui/src/admin/components/RoleRow.js

@@ -26,7 +26,7 @@ const PERMISSIONS = [
   "KapacitorConfigAPI",
 ]
 
-const RoleRow = ({role: {name, permissions, users}, role, onDelete}) => (
+const RoleRow = ({role: {name, permissions, users}, role, allUsers, onDelete}) => (
   <tr>
     <td>{name}</td>
     <td>
@@ -43,11 +43,10 @@ const RoleRow = ({role: {name, permissions, users}, role, onDelete}) => (
     </td>
     <td>
       {
-        users && users.length ?
+        allUsers && allUsers.length ?
         <MultiSelectDropdown
-          items={users.map((r) => r.name)}
-          selectedItems={[]}
-          label={'Select Users'}
+          items={allUsers.map((u) => u.name)}
+          selectedItems={users.map((u) => u.name)}
           onApply={() => '//TODO'}
         /> :
         '\u2014'
@@ -77,6 +76,7 @@ RoleRow.propTypes = {
     })),
   }).isRequired,
   onDelete: func.isRequired,
+  allUsers: arrayOf(shape()),
 }
 
 export default RoleRow

ui/src/admin/components/RolesTable.js

@@ -3,7 +3,7 @@ import RoleRow from 'src/admin/components/RoleRow'
 import EmptyRow from 'src/admin/components/EmptyRow'
 import FilterBar from 'src/admin/components/FilterBar'
 
-const RolesTable = ({roles, onDelete, onFilter}) => (
+const RolesTable = ({roles, allUsers, onDelete, onFilter}) => (
   <div className="panel panel-info">
     <FilterBar type="roles" onFilter={onFilter} />
     <div className="panel-body">
@@ -20,7 +20,7 @@ const RolesTable = ({roles, onDelete, onFilter}) => (
           {
             roles.length ?
               roles.filter(r => !r.hidden).map((role) =>
-                <RoleRow key={role.name} role={role} onDelete={onDelete} />
+                <RoleRow key={role.name} allUsers={allUsers} role={role} onDelete={onDelete} />
               ) : <EmptyRow tableName={'Roles'} />
           }
         </tbody>
@@ -49,6 +49,7 @@ RolesTable.propTypes = {
   })),
   onDelete: func.isRequired,
   onFilter: func,
+  allUsers: arrayOf(shape()),
 }
 
 export default RolesTable

ui/src/shared/components/MultiSelectDropdown.js

@@ -13,7 +13,7 @@ const labelText = ({localSelectedItems, isOpen, label}) => {
   if (isOpen) {
     return '0 Selected'
   }
-  return 'Apply Function'
+  return 'None'
 }
 
 class MultiSelectDropdown extends Component {