AccessControl: Show UserPicker based on canListUsers (#44843)

* AccessControl: Show UserPicker based on canListUser

* Update public/app/core/components/AccessControl/AddPermission.tsx

Co-authored-by: Ieva <ieva.vasiljeva@grafana.com>

public/app/core/components/AccessControl/AddPermission.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { UserPicker } from 'app/core/components/Select/UserPicker';
 import { TeamPicker } from 'app/core/components/Select/TeamPicker';
-import { Button, Form, HorizontalGroup, Select } from '@grafana/ui';
+import { Alert, Button, Form, HorizontalGroup, Input, Select } from '@grafana/ui';
 import { OrgRole } from 'app/types/acl';
 import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
 import { Assignments, PermissionTarget, SetPermission } from './types';
@@ -54,10 +54,22 @@ export const AddPermission = ({
     (target === PermissionTarget.User && userId > 0) ||
     (PermissionTarget.BuiltInRole && OrgRole.hasOwnProperty(builtInRole));
 
+  const renderMissingListUserRights = () => {
+    return (
+      <Alert severity="info" title="Missing permission">
+        You are missing the permission to list users (org.users:read). Please contact your administrator to get this
+        resolved.
+      </Alert>
+    );
+  };
+
   return (
     <div className="cta-form" aria-label="Permissions slider">
       <CloseButton onClick={onCancel} />
       <h5>{title}</h5>
+
+      {target === PermissionTarget.User && !canListUsers && renderMissingListUserRights()}
+
       <Form
         name="addPermission"
         maxWidth="none"
@@ -70,12 +82,14 @@ export const AddPermission = ({
               value={target}
               options={targetOptions}
               onChange={(v) => setPermissionTarget(v.value!)}
+              disabled={targetOptions.length === 0}
               menuShouldPortal
             />
 
-            {target === PermissionTarget.User && (
+            {target === PermissionTarget.User && canListUsers && (
               <UserPicker onSelected={(u) => setUserId(u.value || 0)} className={'width-20'} />
             )}
+            {target === PermissionTarget.User && !canListUsers && <Input disabled={true} className={'width-20'} />}
 
             {target === PermissionTarget.Team && (
               <TeamPicker onSelected={(t) => setTeamId(t.value?.id || 0)} className={'width-20'} />