fix tests

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

@@ -27,20 +27,20 @@ test.each([
     const resourceControl = buildViewModel(ownership);
     const { queryByLabelText } = await renderComponent(
       ResourceControlType.Container,
-      resourceControl
+      resourceControl,
     );
 
     expect(queryByLabelText('ownership')).toHaveTextContent(ownership);
-  }
+  },
 );
 
 test('when resource control is not supplied, show administrators', async () => {
   const { queryByLabelText } = await renderComponent(
-    ResourceControlType.Container
+    ResourceControlType.Container,
   );
 
   expect(queryByLabelText('ownership')).toHaveTextContent(
-    ResourceControlOwnership.ADMINISTRATORS
+    ResourceControlOwnership.ADMINISTRATORS,
   );
 });
 
@@ -71,19 +71,19 @@ for (let i = 0; i < inheritanceTests.length; i += 1) {
   test(`when resource is ${ResourceControlType[resourceType]} and resource control is ${ResourceControlType[parentType]}, show message`, async () => {
     const resourceControl = buildViewModel(
       ResourceControlOwnership.ADMINISTRATORS,
-      parentType
+      parentType,
     );
 
     const { queryByLabelText } = await renderComponent(
       resourceType,
-      resourceControl
+      resourceControl,
     );
     const inheritanceMessage = queryByLabelText('inheritance-message');
     expect(inheritanceMessage).toBeVisible();
   });
 }
 
-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))));
@@ -96,18 +96,18 @@ test('when resource is limited to specific users, show comma separated list of t
     restrictedToUsers.map((user) => ({
       UserId: user.Id,
       AccessLevel: 1,
-    }))
+    })),
   );
 
   const { queryByText, findByLabelText } = await renderComponent(
     undefined,
-    resourceControl
+    resourceControl,
   );
 
   expect(queryByText(/Authorized users/)).toBeVisible();
 
   await expect(findByLabelText('authorized-users')).resolves.toHaveTextContent(
-    restrictedToUsers.map((user) => user.Username).join(', ')
+    `${restrictedToUsers.length} users`,
   );
 });
 
@@ -125,28 +125,28 @@ test('when resource is limited to specific teams, show comma separated list of t
     restrictedToTeams.map((team) => ({
       TeamId: team.Id,
       AccessLevel: 1,
-    }))
+    })),
   );
 
   const { queryByText, findByLabelText } = await renderComponent(
     undefined,
-    resourceControl
+    resourceControl,
   );
 
   expect(queryByText(/Authorized teams/)).toBeVisible();
 
   await expect(findByLabelText('authorized-teams')).resolves.toHaveTextContent(
-    restrictedToTeams.map((team) => team.Name).join(', ')
+    restrictedToTeams.map((team) => team.Name).join(', '),
   );
 });
 
 async function renderComponent(
   resourceType: ResourceControlType = ResourceControlType.Container,
-  resourceControl?: ResourceControlViewModel
+  resourceControl?: ResourceControlViewModel,
 ) {
   const WithUser = withUserProvider(AccessControlPanelDetails);
   const queries = renderWithQueryClient(
-    <WithUser resourceControl={resourceControl} resourceType={resourceType} />
+    <WithUser resourceControl={resourceControl} resourceType={resourceType} />,
   );
   await expect(queries.findByText('Ownership')).resolves.toBeVisible();
 
@@ -157,7 +157,7 @@ function buildViewModel(
   ownership: ResourceControlOwnership,
   type: ResourceControlType = ResourceControlType.Config,
   users: UserResourceAccess[] = [],
-  teams: TeamResourceAccess[] = []
+  teams: TeamResourceAccess[] = [],
 ): ResourceControlViewModel {
   return {
     Id: 0,

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;