Merge pull request #5117 from GregoireW/feat/limit_group

Paginate group members display

.changeset/shaggy-drinks-hammer.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Paginate group members to only display 50 members maximum.

plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx

@@ -40,6 +40,7 @@ import {
   Theme,
   Typography,
 } from '@material-ui/core';
+import Pagination from '@material-ui/lab/Pagination';
 import React from 'react';
 import { generatePath, Link as RouterLink } from 'react-router-dom';
 import { useAsync } from 'react-use';
@@ -120,6 +121,12 @@ export const MembersListCard = (_props: {
 
   const groupNamespace = grpNamespace || ENTITY_DEFAULT_NAMESPACE;
 
+  const [page, setPage] = React.useState(1);
+  const pageChange = (_: React.ChangeEvent<unknown>, pageIndex: number) => {
+    setPage(pageIndex);
+  };
+  const pageSize = 50;
+
   const { loading, error, value: members } = useAsync(async () => {
     const membersList = await catalogApi.getEntities({
       filter: { kind: 'User' },
@@ -144,17 +151,33 @@ export const MembersListCard = (_props: {
     return <ResponseErrorPanel error={error} />;
   }
 
+  const nbPages = Math.ceil((members?.length || 0) / pageSize);
+  const paginationLabel = nbPages < 2 ? '' : `, page ${page} of ${nbPages}`;
+
+  const pagination = (
+    <Pagination
+      count={nbPages}
+      page={page}
+      onChange={pageChange}
+      showFirstButton
+      showLastButton
+    />
+  );
+
   return (
     <Grid item>
       <InfoCard
-        title={`Members (${members?.length || 0})`}
+        title={`Members (${members?.length || 0}${paginationLabel})`}
         subheader={`of ${displayName}`}
+        actions={pagination}
       >
         <Grid container spacing={3}>
           {members && members.length > 0 ? (
-            members.map(member => (
-              <MemberComponent member={member} key={member.metadata.uid} />
-            ))
+            members
+              .slice(pageSize * (page - 1), pageSize * page)
+              .map(member => (
+                <MemberComponent member={member} key={member.metadata.uid} />
+              ))
           ) : (
             <Box p={2}>
               <Typography>This group has no members.</Typography>