fix(authorization): disable user list api call if not authorised [EE-5825] (#10380)

* fix tests
* disable user list api call if not authorised
* fix lint issues

app/react/portainer/access-control/AccessControlPanel/AccessControlPaneDetails.test.tsx

@@ -83,7 +83,7 @@ for (let i = 0; i < inheritanceTests.length; i += 1) {
   });
 }
 
-test('when resource is limited to specific users, show comma separated list of their names', async () => {
+test('when resource is limited to specific users, show number of users', async () => {
   const users = createMockUsers(10, Role.Standard);
 
   server.use(rest.get('/api/users', (req, res, ctx) => res(ctx.json(users))));
@@ -107,7 +107,7 @@ test('when resource is limited to specific users, show comma separated list of t
   expect(queryByText(/Authorized users/)).toBeVisible();
 
   await expect(findByLabelText('authorized-users')).resolves.toHaveTextContent(
-    restrictedToUsers.map((user) => user.Username).join(', ')
+    `${restrictedToUsers.length} users`
   );
 });
 
@@ -145,6 +145,7 @@ async function renderComponent(
   resourceControl?: ResourceControlViewModel
 ) {
   const WithUser = withUserProvider(AccessControlPanelDetails);
+
   const queries = renderWithQueryClient(
     <WithUser resourceControl={resourceControl} resourceType={resourceType} />
   );

app/react/portainer/access-control/AccessControlPanel/AccessControlPanel.tsx

@@ -52,6 +52,7 @@ export function AccessControlPanel({
       <AccessControlPanelDetails
         resourceType={resourceType}
         resourceControl={resourceControl}
+        isAuthorisedToFetchUsers={isAdmin || isLeaderOfAnyRestrictedTeams}
       />
 
       {!isEditDisabled && !isEditMode && (

app/react/portainer/access-control/AccessControlPanel/AccessControlPanelDetails.tsx

@@ -24,11 +24,13 @@ import { ResourceControlViewModel } from '../models/ResourceControlViewModel';
 interface Props {
   resourceControl?: ResourceControlViewModel;
   resourceType: ResourceControlType;
+  isAuthorisedToFetchUsers?: boolean;
 }
 
 export function AccessControlPanelDetails({
   resourceControl,
   resourceType,
+  isAuthorisedToFetchUsers = false,
 }: Props) {
   const inheritanceMessage = getInheritanceMessage(
     resourceType,
@@ -41,7 +43,10 @@ export function AccessControlPanelDetails({
     TeamAccesses: restrictedToTeams = [],
   } = resourceControl || {};
 
-  const users = useAuthorizedUsers(restrictedToUsers.map((ra) => ra.UserId));
+  const users = useAuthorizedUsers(
+    restrictedToUsers.map((ra) => ra.UserId),
+    isAuthorisedToFetchUsers
+  );
   const teams = useAuthorizedTeams(restrictedToTeams.map((ra) => ra.TeamId));
 
   const teamsLength = teams.data ? teams.data.length : 0;