User Management Screen improvements

chaoscenter/web/src/views/AccountSettingsUserManagement/AccountSettingsUserManagement.tsx

@@ -6,6 +6,7 @@ import {
   Checkbox,
   Container,
   Layout,
+  Pagination,
   TableV2,
   Text,
   useToggleOpen
@@ -190,6 +191,18 @@ export default function AccountSettingsUserManagementView(
   const { isOpen: isCreateUserModalOpen, open: openCreateUserModal, close: closeCreateUserModal } = useToggleOpen();
   const { getString } = useStrings();
 
+  function handleItemsPerPageChange(pageSize: number) {
+    setItemsPerPage(pageSize);
+    setCurrentPage(1);
+  }
+
+  const [currentPage, setCurrentPage] = React.useState(1);
+  const [itemsPerPage, setItemsPerPage] = React.useState(5);
+
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = usersData?.slice(indexOfFirstItem, indexOfLastItem);
+
   return (
     <Layout.Vertical height={'100%'}>
       <Layout.Horizontal
@@ -238,8 +251,18 @@ export default function AccountSettingsUserManagementView(
             {getString('totalUsers')}: {usersData?.length ?? 0}
           </Text>
           <Container style={{ flexGrow: 1 }}>
-            {usersData && <MemoizedUsersTable users={usersData} getUsersRefetch={getUsersRefetch} />}
+            {currentItems && <MemoizedUsersTable users={currentItems} getUsersRefetch={getUsersRefetch} />}
           </Container>
+          <Pagination
+            pageSize={itemsPerPage}
+            pageCount={Math.ceil(usersData?.length / itemsPerPage)}
+            itemCount={usersData?.length ?? 0}
+            pageIndex={currentPage - 1}
+            gotoPage={pageIndex => setCurrentPage(pageIndex + 1)}
+            showPagination={true}
+            pageSizeOptions={[5, 10, 20]}
+            onPageSizeChange={pageSize => handleItemsPerPageChange(pageSize)}
+          />
         </Loader>
       </Layout.Vertical>
     </Layout.Vertical>