Merge branch 'main' into task/constraint_card_adjustmnets

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "unleash-frontend",
   "description": "unleash your features",
-  "version": "4.14.0-beta.5",
+  "version": "4.14.0-beta.6",
   "keywords": [
     "unleash",
     "feature toggle",

frontend/src/component/project/ProjectAccess/ProjectAccessAssign/ProjectAccessAssign.tsx

@@ -27,6 +27,7 @@ import { useUsers } from 'hooks/api/getters/useUsers/useUsers';
 import { useGroups } from 'hooks/api/getters/useGroups/useGroups';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ProjectRoleDescription } from './ProjectRoleDescription/ProjectRoleDescription';
+import { useAccess } from '../../../../hooks/api/getters/useAccess/useAccess';
 
 const StyledForm = styled('form')(() => ({
     display: 'flex',
@@ -109,8 +110,7 @@ export const ProjectAccessAssign = ({
     const { refetchProjectAccess } = useProjectAccess(projectId);
     const { addAccessToProject, changeUserRole, changeGroupRole, loading } =
         useProjectApi();
-    const { users = [] } = useUsers();
-    const { groups = [] } = useGroups();
+    const { users, groups } = useAccess();
     const edit = Boolean(selected);
 
     const { setToastData, setToastApiError } = useToast();
@@ -148,7 +148,7 @@ export const ProjectAccessAssign = ({
                                 group.id === id && type === ENTITY_TYPE.GROUP
                         )
                 )
-                .map(group => ({
+                .map((group: IGroup) => ({
                     id: group.id,
                     entity: group,
                     type: ENTITY_TYPE.GROUP,
@@ -249,7 +249,7 @@ export const ProjectAccessAssign = ({
                     show={
                         <StyledGroupOption>
                             <span>{optionGroup?.name}</span>
-                            <span>{optionGroup?.users.length} users</span>
+                            <span>{optionGroup?.userCount} users</span>
                         </StyledGroupOption>
                     }
                     elseShow={

frontend/src/hooks/api/getters/useAccess/useAccess.ts

@@ -0,0 +1,28 @@
+import useSWR from 'swr';
+import { useMemo } from 'react';
+import { formatApiPath } from 'utils/formatPath';
+import handleErrorResponses from '../httpErrorResponseHandler';
+
+export const useAccess = () => {
+    const { data, error, mutate } = useSWR(
+        formatApiPath(`api/admin/user-admin/access`),
+        fetcher
+    );
+
+    return useMemo(
+        () => ({
+            users: data?.users ?? [],
+            groups: data?.groups ?? [],
+            loading: !error && !data,
+            refetch: () => mutate(),
+            error,
+        }),
+        [data, error, mutate]
+    );
+};
+
+const fetcher = (path: string) => {
+    return fetch(path)
+        .then(handleErrorResponses('Access'))
+        .then(res => res.json());
+};

frontend/src/interfaces/group.ts

@@ -13,6 +13,7 @@ export interface IGroup {
     users: IGroupUser[];
     projects: string[];
     addedAt?: string;
+    userCount?: number;
 }
 
 export interface IGroupUser extends IUser {