diff --git a/.changeset/shaggy-drinks-hammer.md b/.changeset/shaggy-drinks-hammer.md new file mode 100644 index 0000000000..67f284ea3f --- /dev/null +++ b/.changeset/shaggy-drinks-hammer.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org': patch +--- + +Paginate group members to only display 50 members maximum. diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx index d68328ef1a..58dcefaaa4 100644 --- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx +++ b/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, 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 ; } + const nbPages = Math.ceil((members?.length || 0) / pageSize); + const paginationLabel = nbPages < 2 ? '' : `, page ${page} of ${nbPages}`; + + const pagination = ( + + ); + return ( {members && members.length > 0 ? ( - members.map(member => ( - - )) + members + .slice(pageSize * (page - 1), pageSize * page) + .map(member => ( + + )) ) : ( This group has no members.