feat: [UIE-8792] - add pagination to Roles table (#12264)

* feat: [UIE-8792] - add pagination to Roles table

* Added changeset: IAM RBAC: add pagination to the Roles table

* feat: [UIE-8792] - unit test fix

* feat: [UIE-8792] - update default page size

* feat: [UIE-8792] - use usePagination hook to handle page state

---------

Co-authored-by: Jaalah Ramos <[email protected]>
Co-authored-by: corya-akamai <[email protected]>

Author: 3 people

packages/manager/.changeset/pr-12264-upcoming-features-1747926067938.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+IAM RBAC: add pagination to the Roles table ([#12264](https://github.com/linode/manager/pull/12264))

packages/manager/src/features/IAM/Roles/RolesTable/RolesTable.tsx

@@ -2,6 +2,7 @@ import { Button, Select, Typography } from '@linode/ui';
 import { capitalizeAllWords } from '@linode/utilities';
 import Grid from '@mui/material/Grid';
 import Paper from '@mui/material/Paper';
+import { Pagination } from 'akamai-cds-react-components/Pagination';
 import {
   sortRows,
   Table,
@@ -23,89 +24,100 @@ import {
   getFacadeRoleDescription,
   mapEntityTypesForSelect,
 } from 'src/features/IAM/Shared/utilities';
+import { usePagination } from 'src/hooks/usePagination';
+
+import { ROLES_TABLE_PREFERENCE_KEY } from '../../Shared/constants';
 
 import type { RoleView } from '../../Shared/types';
 import type { SelectOption } from '@linode/ui';
 import type { Order } from 'akamai-cds-react-components/Table';
-
 const ALL_ROLES_OPTION: SelectOption = {
   label: 'All Roles',
   value: 'all',
 };
 
 interface Props {
-  roles: RoleView[];
+  roles?: RoleView[];
 }
 
-export const RolesTable = ({ roles }: Props) => {
-  const [rows, setRows] = useState(roles);
-
+export const RolesTable = ({ roles = [] }: Props) => {
   // Filter string for the search bar
   const [filterString, setFilterString] = React.useState('');
-
-  // Get just the list of entity types from this list of roles, to be used in the selection filter
-  const filterableOptions = React.useMemo(() => {
-    return [ALL_ROLES_OPTION, ...mapEntityTypesForSelect(roles, ' Roles')];
-  }, [roles]);
-
   const [filterableEntityType, setFilterableEntityType] =
     useState<null | SelectOption>(ALL_ROLES_OPTION);
-
   const [sort, setSort] = useState<
     undefined | { column: string; order: Order }
   >(undefined);
-
   const [selectedRows, setSelectedRows] = useState<RoleView[]>([]);
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
 
+  const pagination = usePagination(1, ROLES_TABLE_PREFERENCE_KEY);
+
+  // Filtering
+  const getFilteredRows = (
+    text: string,
+    entityTypeVal = ALL_ROLES_OPTION.value
+  ) => {
+    return roles.filter(
+      (r) =>
+        (entityTypeVal === ALL_ROLES_OPTION.value ||
+          entityTypeVal === r.entity_type) &&
+        (r.name.includes(text) ||
+          r.description.includes(text) ||
+          r.access.includes(text))
+    );
+  };
+
+  const filteredRows = React.useMemo(
+    () => getFilteredRows(filterString, filterableEntityType?.value),
+    [roles, filterString, filterableEntityType]
+  );
+
+  // Get just the list of entity types from this list of roles, to be used in the selection filter
+  const filterableOptions = React.useMemo(() => {
+    return [ALL_ROLES_OPTION, ...mapEntityTypesForSelect(roles, ' Roles')];
+  }, [roles]);
+
+  const sortedRows = React.useMemo(() => {
+    if (!sort) return filteredRows;
+    return sortRows(filteredRows, sort.order, sort.column);
+  }, [filteredRows, sort]);
+
+  const paginatedRows = React.useMemo(() => {
+    const start = (pagination.page - 1) * pagination.pageSize;
+    return sortedRows.slice(start, start + pagination.pageSize);
+  }, [sortedRows, pagination.page, pagination.pageSize]);
+
   const areAllSelected = React.useMemo(() => {
     return (
-      !!rows?.length &&
+      !!paginatedRows?.length &&
       !!selectedRows?.length &&
-      rows?.length === selectedRows?.length
+      paginatedRows?.length === selectedRows?.length
     );
-  }, [rows, selectedRows]);
+  }, [paginatedRows, selectedRows]);
 
   const handleSort = (event: CustomEvent, column: string) => {
     setSort({ column, order: event.detail as Order });
-    const visibleRows = sortRows(rows, event.detail as Order, column);
-    setRows(visibleRows);
   };
 
   const handleSelect = (event: CustomEvent, row: 'all' | RoleView) => {
     if (row === 'all') {
-      setSelectedRows(areAllSelected ? [] : rows);
+      setSelectedRows(areAllSelected ? [] : paginatedRows);
     } else if (selectedRows.includes(row)) {
       setSelectedRows(selectedRows.filter((r) => r !== row));
     } else {
       setSelectedRows([...selectedRows, row]);
     }
   };
 
-  const getFilteredRows = (
-    text: string,
-    entityTypeVal = ALL_ROLES_OPTION.value
-  ) => {
-    return roles.filter(
-      (r) =>
-        (entityTypeVal === ALL_ROLES_OPTION.value ||
-          entityTypeVal === r.entity_type) &&
-        (r.name.includes(text) ||
-          r.description.includes(text) ||
-          r.access.includes(text))
-    );
-  };
-
   const handleTextFilter = (fs: string) => {
     setFilterString(fs);
-    const filteredRows = getFilteredRows(fs, filterableEntityType?.value);
-    setRows(filteredRows);
+    pagination.handlePageChange(1);
   };
 
   const handleChangeEntityTypeFilter = (_: never, entityType: SelectOption) => {
     setFilterableEntityType(entityType ?? ALL_ROLES_OPTION);
-    const filteredRows = getFilteredRows(filterString, entityType?.value);
-    setRows(filteredRows);
+    pagination.handlePageChange(1);
   };
 
   const assignRoleRow = (row: RoleView) => {
@@ -118,6 +130,15 @@ export const RolesTable = ({ roles }: Props) => {
     setIsDrawerOpen(true);
   };
 
+  const handlePageChange = (event: CustomEvent<{ page: number }>) => {
+    pagination.handlePageChange(Number(event.detail));
+  };
+
+  const handlePageSizeChange = (event: CustomEvent<{ pageSize: number }>) => {
+    const newSize = event.detail.pageSize;
+    pagination.handlePageSizeChange(newSize);
+    pagination.handlePageChange(1);
+  };
   return (
     <>
       <Paper sx={(theme) => ({ marginTop: theme.tokens.spacing.S16 })}>
@@ -208,14 +229,14 @@ export const RolesTable = ({ roles }: Props) => {
             </TableRow>
           </TableHead>
           <TableBody>
-            {!rows?.length ? (
+            {!paginatedRows?.length ? (
               <TableRow>
                 <TableCell style={{ justifyContent: 'center' }}>
                   No items to display.
                 </TableCell>
               </TableRow>
             ) : (
-              rows.map((roleRow) => (
+              paginatedRows.map((roleRow) => (
                 <TableRow
                   expandable
                   hoverable
@@ -267,6 +288,14 @@ export const RolesTable = ({ roles }: Props) => {
             )}
           </TableBody>
         </Table>
+        <Pagination
+          count={filteredRows.length}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          page={pagination.page}
+          pageSize={pagination.pageSize}
+          style={{ borderTop: 0 }}
+        />
       </Paper>
       <AssignSelectedRolesDrawer
         onClose={() => setIsDrawerOpen(false)}

packages/manager/src/features/IAM/Shared/constants.ts

@@ -19,3 +19,5 @@ export const PAID_ENTITY_TYPES = [
   'volume',
   'image',
 ];
+
+export const ROLES_TABLE_PREFERENCE_KEY = 'roles';