AccessControl: Disable user remove and user update roles when they do not have the permissions (#43429)

* AccessControl: Disable user remove and update roles when they do not have the appropriate permissions

* AccessControl: Ensure frontend tests pass in CI

public/app/features/users/UsersTable.test.tsx

@@ -8,6 +8,7 @@ import { ConfirmModal } from '@grafana/ui';
 jest.mock('app/core/core', () => ({
   contextSrv: {
     hasPermission: () => true,
+    hasPermissionInMetadata: () => true,
     accessControlEnabled: () => false,
   },
 }));

public/app/features/users/UsersTable.tsx

@@ -15,9 +15,6 @@ export interface Props {
 
 const UsersTable: FC<Props> = (props) => {
   const { users, orgId, onRoleChange, onRemoveUser } = props;
-  const canUpdateRole = contextSrv.hasPermission(AccessControlAction.OrgUsersRoleUpdate);
-  const canRemoveFromOrg = contextSrv.hasPermission(AccessControlAction.OrgUsersRemove);
-  const rolePickerDisabled = !canUpdateRole;
 
   const [showRemoveModal, setShowRemoveModal] = useState<string | boolean>(false);
   const [roleOptions, setRoleOptions] = useState<Role[]>([]);
@@ -89,19 +86,19 @@ const UsersTable: FC<Props> = (props) => {
                     onBuiltinRoleChange={(newRole) => onRoleChange(newRole, user)}
                     getRoleOptions={getRoleOptions}
                     getBuiltinRoles={getBuiltinRoles}
-                    disabled={rolePickerDisabled}
+                    disabled={!contextSrv.hasPermissionInMetadata(AccessControlAction.OrgUsersRoleUpdate, user)}
                   />
                 ) : (
                   <OrgRolePicker
                     aria-label="Role"
                     value={user.role}
-                    disabled={!canUpdateRole}
+                    disabled={!contextSrv.hasPermissionInMetadata(AccessControlAction.OrgUsersRoleUpdate, user)}
                     onChange={(newRole) => onRoleChange(newRole, user)}
                   />
                 )}
               </td>
 
-              {canRemoveFromOrg && (
+              {contextSrv.hasPermissionInMetadata(AccessControlAction.OrgUsersRemove, user) && (
                 <td>
                   <Button
                     size="sm"

public/app/features/users/state/actions.ts

@@ -3,10 +3,11 @@ import { getBackendSrv } from '@grafana/runtime';
 import { OrgUser } from 'app/types';
 import { inviteesLoaded, usersLoaded } from './reducers';
 import { contextSrv } from 'app/core/core';
+import { addAccessControlQueryParam } from 'app/core/utils/accessControl';
 
 export function loadUsers(): ThunkResult<void> {
   return async (dispatch) => {
-    const users = await getBackendSrv().get('/api/org/users');
+    const users = await getBackendSrv().get(addAccessControlQueryParam('/api/org/users'));
     dispatch(usersLoaded(users));
   };
 }

public/app/types/user.ts

@@ -1,7 +1,6 @@
 import { OrgRole } from '.';
-import { SelectableValue } from '@grafana/data';
+import { SelectableValue, WithAccessControlMetadata } from '@grafana/data';
-
+export interface OrgUser extends WithAccessControlMetadata {
-export interface OrgUser {
   avatarUrl: string;
   email: string;
   lastSeenAt: string;