From 0988c34a39d0475bbfa794c1432350b2896500bd Mon Sep 17 00:00:00 2001
From: GregoireW <24318548+GregoireW@users.noreply.github.com>
Date: Thu, 25 Mar 2021 17:01:19 +0100
Subject: [PATCH 1/6] Limit to display first 50 user on groups

Signed-off-by: GregoireW <24318548+GregoireW@users.noreply.github.com>
---
 .../components/Cards/Group/MembersList/MembersListCard.tsx    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
index d68328ef1a..a5aa073b3d 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
@@ -147,7 +147,9 @@ export const MembersListCard = (_props: {
   return (
     <Grid item>
       <InfoCard
-        title={`Members (${members?.length || 0})`}
+        title={`Members (${members?.length || 0}) ${
+          members && members.length > 50 ? ' (only first 50 displayed)' : ''
+        }`}
         subheader={`of ${displayName}`}
       >
         <Grid container spacing={3}>

From f59a945b7b034ae2526474011797b314ee06fd0e Mon Sep 17 00:00:00 2001
From: GregoireW <24318548+GregoireW@users.noreply.github.com>
Date: Thu, 25 Mar 2021 18:50:43 +0100
Subject: [PATCH 2/6] Changeset

Signed-off-by: GregoireW <24318548+GregoireW@users.noreply.github.com>
---
 .changeset/shaggy-drinks-hammer.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/shaggy-drinks-hammer.md

diff --git a/.changeset/shaggy-drinks-hammer.md b/.changeset/shaggy-drinks-hammer.md
new file mode 100644
index 0000000000..f068ce4267
--- /dev/null
+++ b/.changeset/shaggy-drinks-hammer.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Display only first 50 group members

From 18c0ec2a42bc01b403a4ebaa6097574d52225203 Mon Sep 17 00:00:00 2001
From: GregoireW <24318548+GregoireW@users.noreply.github.com>
Date: Thu, 6 May 2021 17:19:41 +0200
Subject: [PATCH 3/6] Limit to display first 50 user on groups

Signed-off-by: GregoireW <24318548+GregoireW@users.noreply.github.com>
---
 .../Cards/Group/MembersList/MembersListCard.tsx           | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
index a5aa073b3d..89e9f14c4c 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
@@ -154,9 +154,11 @@ export const MembersListCard = (_props: {
       >
         <Grid container spacing={3}>
           {members && members.length > 0 ? (
-            members.map(member => (
-              <MemberComponent member={member} key={member.metadata.uid} />
-            ))
+            members
+              .slice(0, 49)
+              .map(member => (
+                <MemberComponent member={member} key={member.metadata.uid} />
+              ))
           ) : (
             <Box p={2}>
               <Typography>This group has no members.</Typography>

From bc2cab231f43fd4e8d6cba2d56652dfb67da7914 Mon Sep 17 00:00:00 2001
From: GregoireW <24318548+GregoireW@users.noreply.github.com>
Date: Thu, 6 May 2021 20:39:34 +0200
Subject: [PATCH 4/6] Limit to display first 50 user on groups

Signed-off-by: GregoireW <24318548+GregoireW@users.noreply.github.com>
---
 .../Group/MembersList/MembersListCard.tsx     | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
index 89e9f14c4c..e3ab4e5193 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<unknown>, pageIndex: number) => {
+    setPage(pageIndex);
+  };
+  const pageSize = 50;
+
   const { loading, error, value: members } = useAsync(async () => {
     const membersList = await catalogApi.getEntities({
       filter: { kind: 'User' },
@@ -148,14 +155,18 @@ export const MembersListCard = (_props: {
     <Grid item>
       <InfoCard
         title={`Members (${members?.length || 0}) ${
-          members && members.length > 50 ? ' (only first 50 displayed)' : ''
+          members && members.length > pageSize
+            ? ` (page ${page} of ${Math.ceil(
+                (members?.length || 0) / pageSize,
+              )})`
+            : ''
         }`}
         subheader={`of ${displayName}`}
       >
         <Grid container spacing={3}>
           {members && members.length > 0 ? (
             members
-              .slice(0, 49)
+              .slice(pageSize * (page - 1), pageSize * page)
               .map(member => (
                 <MemberComponent member={member} key={member.metadata.uid} />
               ))
@@ -165,6 +176,13 @@ export const MembersListCard = (_props: {
             </Box>
           )}
         </Grid>
+        <Pagination
+          count={Math.ceil((members?.length || 0) / pageSize)}
+          page={page}
+          onChange={pageChange}
+          showFirstButton
+          showLastButton
+        />
       </InfoCard>
     </Grid>
   );

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 5/6] 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

From 55480c31765d370b1b4eaf5f7927615e53ed26d1 Mon Sep 17 00:00:00 2001
From: GregoireW <24318548+GregoireW@users.noreply.github.com>
Date: Mon, 10 May 2021 14:01:48 +0200
Subject: [PATCH 6/6] Pagination is set on the 'action' bar

Signed-off-by: GregoireW <24318548+GregoireW@users.noreply.github.com>
---
 .../Group/MembersList/MembersListCard.tsx      | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
index dbe35c3057..58dcefaaa4 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
@@ -154,11 +154,22 @@ export const MembersListCard = (_props: {
   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}${paginationLabel})`}
         subheader={`of ${displayName}`}
+        actions={pagination}
       >
         <Grid container spacing={3}>
           {members && members.length > 0 ? (
@@ -173,13 +184,6 @@ export const MembersListCard = (_props: {
             </Box>
           )}
         </Grid>
-        <Pagination
-          count={nbPages}
-          page={page}
-          onChange={pageChange}
-          showFirstButton
-          showLastButton
-        />
       </InfoCard>
     </Grid>
   );