From 6b1cf60c5952fc15def88517021adc94db9549c1 Mon Sep 17 00:00:00 2001
From: GregoireW <24318548+GregoireW@users.noreply.github.com>
Date: Fri, 7 May 2021 19:23:09 +0200
Subject: [PATCH] Pagination label is now cleaner

Signed-off-by: GregoireW <24318548+GregoireW@users.noreply.github.com>
---
 .changeset/shaggy-drinks-hammer.md                  |  2 +-
 .../Cards/Group/MembersList/MembersListCard.tsx     | 13 +++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/.changeset/shaggy-drinks-hammer.md b/.changeset/shaggy-drinks-hammer.md
index f068ce4267..67f284ea3f 100644
--- a/.changeset/shaggy-drinks-hammer.md
+++ b/.changeset/shaggy-drinks-hammer.md
@@ -2,4 +2,4 @@
 '@backstage/plugin-org': patch
 ---
 
-Display only first 50 group members
+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 e3ab4e5193..dbe35c3057 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
@@ -151,16 +151,13 @@ export const MembersListCard = (_props: {
     return <ResponseErrorPanel error={error} />;
   }
 
+  const nbPages = Math.ceil((members?.length || 0) / pageSize);
+  const paginationLabel = nbPages < 2 ? '' : `, page ${page} of ${nbPages}`;
+
   return (
     <Grid item>
       <InfoCard
-        title={`Members (${members?.length || 0}) ${
-          members && members.length > pageSize
-            ? ` (page ${page} of ${Math.ceil(
-                (members?.length || 0) / pageSize,
-              )})`
-            : ''
-        }`}
+        title={`Members (${members?.length || 0}${paginationLabel})`}
         subheader={`of ${displayName}`}
       >
         <Grid container spacing={3}>
@@ -177,7 +174,7 @@ export const MembersListCard = (_props: {
           )}
         </Grid>
         <Pagination
-          count={Math.ceil((members?.length || 0) / pageSize)}
+          count={nbPages}
           page={page}
           onChange={pageChange}
           showFirstButton