fix(ui) - roles review

frontend/app/components/Client/ManageUsers/ManageUsers.js

@@ -22,7 +22,7 @@ const LIMIT_WARNING = 'You have reached users limit.';
   errors: state.getIn([ 'members', 'saveRequest', 'errors' ]),
   loading: state.getIn([ 'members', 'loading' ]),
   saving: state.getIn([ 'members', 'saveRequest', 'loading' ]),
-  roles: state.getIn(['roles', 'list']).map(r => ({ text: r.name, value: r.roleId })).toJS(),
+  roles: state.getIn(['roles', 'list']).filter(r => !r.protected).map(r => ({ text: r.name, value: r.roleId })).toJS(),
   isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
 }), {
   init,
@@ -127,7 +127,7 @@ class ManageUsers extends React.PureComponent {
                 onChange={ this.onChangeCheckbox }
                 disabled={member.superAdmin}
               />
-              <span>{ 'Admin' }</span>
+              <span>{ 'Admin Privileges' }</span>
             </label>
             <div className={ styles.adminInfo }>{ 'Can manage Projects and team members.' }</div>
           </div>
@@ -220,7 +220,7 @@ class ManageUsers extends React.PureComponent {
                       />
                     </div>
                   }
-                  // disabled={ canAddUsers }
+                  disabled={ canAddUsers }
                   content={ `${ !canAddUsers ? (!isAdmin ? PERMISSION_WARNING : LIMIT_WARNING) : 'Add team member' }` }
                   size="tiny"
                   inverted

frontend/app/components/Client/PreferencesMenu/PreferencesMenu.js

@@ -50,7 +50,6 @@ function PreferencesMenu({ activeTab, appearance, history, isEnterprise }) {
 
       { 
         <div className="mb-4">
-
           <SideMenuitem
             active={ activeTab === CLIENT_TABS.WEBHOOKS }
             title="Webhooks"

frontend/app/components/Client/Roles/Roles.tsx

@@ -16,11 +16,17 @@ interface Props {
   roles: any[],
   deleteRole: (id: any) => void,
   fetchList: () => Promise<void>,
+  account: any,
+  permissionsMap: any
 }
 
 function Roles(props: Props) {
-  const { loading, instance, roles, init, edit, deleteRole } = props
+  const { loading, instance, roles, init, edit, deleteRole, account, permissionsMap } = props
   const [showModal, setShowmModal] = useState(false)
+  const isAdmin = account.admin || account.superAdmin;
+
+  console.log('permissionsMap', permissionsMap)
+
 
   useEffect(() => {
     props.fetchList()
@@ -69,10 +75,12 @@ function Roles(props: Props) {
                       circle
                       icon="plus"
                       outline
+                      disabled={ !isAdmin }
                       onClick={ () => setShowmModal(true) }
                     />
                   </div>
                 }
+                disabled={ isAdmin }
                 size="tiny"
                 inverted
                 position="top left"
@@ -90,6 +98,7 @@ function Roles(props: Props) {
               {roles.map(role => (
                 <RoleItem
                   role={role}
+                  permissions={permissionsMap}
                   editHandler={editHandler}
                   deleteHandler={deleteHandler}
                 />
@@ -102,8 +111,17 @@ function Roles(props: Props) {
   )
 }
 
-export default connect(state => ({
-  instance: state.getIn(['roles', 'instance']) || null,
-  roles: state.getIn(['roles', 'list']),
-  loading: state.getIn(['roles', 'fetchRequest', 'loading']),
-}), { init, edit, fetchList, deleteRole })(Roles)
+export default connect(state => {
+  const permissions = state.getIn(['roles', 'permissions'])
+  const permissionsMap = {}
+  permissions.forEach(p => {
+    permissionsMap[p.value] = p.name
+  });
+  return {
+    instance: state.getIn(['roles', 'instance']) || null,
+    permissionsMap: permissionsMap,
+    roles: state.getIn(['roles', 'list']),
+    loading: state.getIn(['roles', 'fetchRequest', 'loading']),
+    account: state.getIn([ 'user', 'account' ])
+  }
+}, { init, edit, fetchList, deleteRole })(Roles)

frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx

@@ -97,4 +97,5 @@ const RoleForm = ({ role, closeModal, edit, save, saving, permissions }: Props)
 export default connect(state => ({
   role: state.getIn(['roles', 'instance']),
   permissions: state.getIn(['roles', 'permissions']),
+  saving: state.getIn([ 'roles', 'saveRequest', 'loading' ]),
 }), { edit, save })(RoleForm);

frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx

@@ -1,18 +1,33 @@
-import React from 'react';
+import React from 'react'
 import { Icon } from 'UI'
 import stl from './roleItem.css'
 import cn from 'classnames'
 
+function PermisionLabel({ permission }: any) {
+  return (
+    <div className={cn(stl.label)}>{ permission }</div>
+  );
+}
+
 interface Props {
   role: any,
   deleteHandler?: (role: any) => void,
   editHandler?: (role: any) => void,
+  permissions: any
 }
-function RoleItem({ role, deleteHandler, editHandler }: Props) {
+function RoleItem({ role, deleteHandler, editHandler, permissions }: Props) {
   return (
     <div className={cn(stl.wrapper)}>
       <Icon name="user-alt" size="16" marginRight="10" />
-      <span>{ role.name }</span>
+      <div className="flex items-center">
+        <span>{ role.name }</span>
+        <div className="grid grid-flow-col auto-cols-max gap-2">
+          {role.permissions.map((permission: any) => (
+            <PermisionLabel permission={permissions[permission]} key={permission.id} />
+            // <span key={permission.id} className={cn(stl.permission)}>{ permissions[permission].name }</span>
+          ))}
+        </div>
+      </div>
 
       <div className={ stl.actions }>
         { !!deleteHandler &&

frontend/app/components/Client/Roles/components/RoleItem/roleItem.css

@@ -34,4 +34,14 @@
     pointer-events: none;
     opacity: 0.5;
   }
+}
+
+.label {
+  margin-left: 10px;
+  padding: 0 10px;
+  border-radius: 3px;
+  background-color: $gray-lightest;
+  font-size: 12px;
+  border: solid thin $gray-light;
+  width: fit-content;
 }

frontend/app/types/member.js

@@ -12,6 +12,7 @@ export default Record({
   joined: false,
   expiredInvitation: false,
   roleId: undefined,
+  roleName: undefined,
   invitationLink: '',
 }, {
   idKey: 'id',