Implement update role permissions

ui/src/admin/actions/index.js

@@ -5,6 +5,7 @@ import {
   deleteRole as deleteRoleAJAX,
   deleteUser as deleteUserAJAX,
   addUsersToRole as addUsersToRoleAJAX,
+  updateRolePermissions as updateRolePermissionsAJAX,
 } from 'src/admin/apis'
 import {killQuery as killQueryProxy} from 'shared/apis/metaQuery'
 import {publishNotification} from 'src/shared/actions/notifications';
@@ -148,8 +149,17 @@ export const deleteUserAsync = (user, addFlashMessage) => (dispatch) => {
 export const addUsersToRoleAsync = (users, role) => async (dispatch) => {
   try {
     await addUsersToRoleAJAX(role.links.self, users)
-    dispatch(publishNotification('success', 'Role upated successfully'))
+    dispatch(publishNotification('success', 'Role users updated'))
   } catch (error) {
     dispatch(publishNotification('error', `Failed to update role: ${error.data.message}`))
   }
 }
+
+export const updateRolePermissionsAsync = (permissions, role) => async (dispatch) => {
+  try {
+    await updateRolePermissionsAJAX(role.links.self, permissions)
+    dispatch(publishNotification('success', 'Role permissions updated'))
+  } catch (error) {
+    dispatch(publishNotification('error', `Failed to updated role:  ${error.data.message}`))
+  }
+}

ui/src/admin/apis/index.js

@@ -87,3 +87,17 @@ export const addUsersToRole = async (url, users) => {
     console.error(error)
   }
 }
+
+export const updateRolePermissions = async (url, permissions) => {
+  try {
+    await AJAX({
+      method: 'PATCH',
+      url,
+      data: {
+        permissions,
+      },
+    })
+  } catch (error) {
+    console.error(error)
+  }
+}

ui/src/admin/components/AdminTabs.js

@@ -19,6 +19,7 @@ const AdminTabs = ({
   onFilterRoles,
   onFilterUsers,
   onAddUsersToRole,
+  onUpdateRolePermissions,
 }) => {
   const hasRoles = !!source.links.roles
 
@@ -40,7 +41,16 @@ const AdminTabs = ({
     },
     {
       type: 'Roles',
-      component: (<RolesTable roles={roles} allUsers={users} onDelete={onDeleteRole} onFilter={onFilterRoles} onAddUsersToRole={onAddUsersToRole}/>),
+      component: (
+        <RolesTable
+          roles={roles}
+          allUsers={users}
+          onDelete={onDeleteRole}
+          onFilter={onFilterRoles}
+          onAddUsersToRole={onAddUsersToRole}
+          onUpdateRolePermissions={onUpdateRolePermissions}
+        />
+      ),
     },
     {
       type: 'Queries',
@@ -96,6 +106,7 @@ AdminTabs.propTypes = {
   onFilterRoles: func.isRequired,
   onFilterUsers: func.isRequired,
   onAddUsersToRole: func.isRequired,
+  onUpdateRolePermissions: func.isRequired,
 }
 
 export default AdminTabs

ui/src/admin/components/RoleRow.js

@@ -4,7 +4,7 @@ import _ from 'lodash'
 import MultiSelectDropdown from 'shared/components/MultiSelectDropdown'
 import DeleteRow from 'src/admin/components/DeleteRow'
 
-const PERMISSIONS = [
+const ALL_PERMISSIONS = [
   "NoPermissions",
   "ViewAdmin",
   "ViewChronograf",
@@ -32,14 +32,19 @@ const RoleRow = ({
   allUsers,
   onDelete,
   onAddUsersToRole,
+  onUpdateRolePermissions,
 }) => {
-  const wrapUsers = (u) => {
+  const handleAddUsers = (u) => {
-    const updatedUsers = u.map((n) => {
+    const updatedUsers = u.map((n) => ({name: n}))
-      return {name: n}
-    })
     onAddUsersToRole(updatedUsers, role)
   }
 
+  const handleAddPermisisons = (allowed) => {
+    onUpdateRolePermissions([{scope: 'all', allowed}], role)
+  }
+
+  const perms = _.get(permissions, ['0', 'allowed'], [])
+
   return (
     <tr>
       <td>{name}</td>
@@ -47,10 +52,10 @@ const RoleRow = ({
         {
           permissions && permissions.length ?
             <MultiSelectDropdown
-              items={PERMISSIONS}
+              items={ALL_PERMISSIONS}
-              selectedItems={_.get(permissions, ['0', 'allowed'], [])}
+              selectedItems={perms}
-              label={'Select Permissions'}
+              label={perms.length ? '' : 'Select Permissions'}
-              onApply={() => '// TODO'}
+              onApply={handleAddPermisisons}
             /> : '\u2014'
         }
       </td>
@@ -60,7 +65,8 @@ const RoleRow = ({
             <MultiSelectDropdown
               items={allUsers.map((u) => u.name)}
               selectedItems={users.map((u) => u.name)}
-              onApply={wrapUsers}
+              label={users.length ? '' : 'Select Users'}
+              onApply={handleAddUsers}
             /> : '\u2014'
         }
       </td>
@@ -91,6 +97,7 @@ RoleRow.propTypes = {
   onDelete: func.isRequired,
   allUsers: arrayOf(shape()),
   onAddUsersToRole: func.isRequired,
+  onUpdateRolePermissions: func.isRequired,
 }
 
 export default RoleRow

ui/src/admin/components/RolesTable.js

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

ui/src/admin/containers/AdminPage.js

@@ -11,6 +11,7 @@ import {
   deleteRoleAsync,
   deleteUserAsync,
   addUsersToRoleAsync,
+  updateRolePermissionsAsync,
   filterRoles as filterRolesAction,
   filterUsers as filterUsersAction,
 } from 'src/admin/actions'
@@ -32,6 +33,7 @@ class AdminPage extends Component {
     this.handleDeleteRole = ::this.handleDeleteRole
     this.handleDeleteUser = ::this.handleDeleteUser
     this.handleAddUsersToRole = ::this.handleAddUsersToRole
+    this.handleUpdateRolePermissions = ::this.handleUpdateRolePermissions
   }
 
   componentDidMount() {
@@ -82,6 +84,10 @@ class AdminPage extends Component {
     this.props.addUsersToRole(users, role)
   }
 
+  handleUpdateRolePermissions(permissions, role) {
+    this.props.updateRolePermissions(permissions, role)
+  }
+
   render() {
     const {users, roles, source, filterUsers, filterRoles, addFlashMessage} = this.props
 
@@ -116,6 +122,7 @@ class AdminPage extends Component {
                     onFilterRoles={filterRoles}
                     addFlashMessage={addFlashMessage}
                     onAddUsersToRole={this.handleAddUsersToRole}
+                    onUpdateRolePermissions={this.handleUpdateRolePermissions}
                   /> :
                   <span>Loading...</span>
                 }
@@ -155,6 +162,7 @@ AdminPage.propTypes = {
   filterRoles: func,
   filterUsers: func,
   addUsersToRole: func,
+  updateRolePermissions: func,
 }
 
 const mapStateToProps = ({admin: {users, roles}}) => ({
@@ -174,6 +182,7 @@ const mapDispatchToProps = (dispatch) => ({
   filterRoles: bindActionCreators(filterRolesAction, dispatch),
   filterUsers: bindActionCreators(filterUsersAction, dispatch),
   addUsersToRole: bindActionCreators(addUsersToRoleAsync, dispatch),
+  updateRolePermissions: bindActionCreators(updateRolePermissionsAsync, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(AdminPage)