feat: [UIE-9441] implemented pagination for Plans table (#13055)

* feat: [UIE-9441] implemented pagination for Plans table

* feat: [UIE-9441] addressed review comments

* feat: [UIE-9441] added changeset

* feat: [UIE-9441] review comments

* feat: [UIE-9441] review comments

* feat: [UIE-9441] review comments

* Self feedback

---------

Co-authored-by: grevanak-akamai <[email protected]>
Co-authored-by: Alban Bailly <[email protected]>
Co-authored-by: Alban Bailly <[email protected]>

Author: 3 people

packages/manager/.changeset/pr-13055-added-1761777373017.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Implement pagination for Plans table ([#13055](https://github.com/linode/manager/pull/13055))

packages/manager/src/components/PaginationFooter/PaginationFooter.test.tsx

@@ -1,3 +1,10 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { PaginationFooter } from './PaginationFooter';
 import { PAGE_SIZES } from './PaginationFooter.constants';
 import { getMinimumPageSizeForNumberOfItems } from './PaginationFooter.utils';
 
@@ -13,3 +20,27 @@ describe('getMinimumPageSizeForNumberOfItems', () => {
     expect(getMinimumPageSizeForNumberOfItems(100, [25, 50])).toBe(Infinity);
   });
 });
+
+describe('PaginationFooter component', () => {
+  it('renders custom page size options when provided', async () => {
+    renderWithTheme(
+      <PaginationFooter
+        count={150}
+        customOptions={[
+          { label: 'Show 15', value: 15 },
+          { label: 'Show 25', value: 25 },
+        ]}
+        handlePageChange={vi.fn()}
+        handleSizeChange={vi.fn()}
+        page={1}
+        pageSize={15}
+      />
+    );
+
+    const select = screen.getByLabelText('Number of items to show');
+    await userEvent.click(select);
+
+    expect(screen.getByRole('option', { name: 'Show 15' })).toBeVisible();
+    expect(screen.getByRole('option', { name: 'Show 25' })).toBeVisible();
+  });
+});

packages/manager/src/components/PaginationFooter/PaginationFooter.tsx

@@ -17,7 +17,13 @@ export interface PaginationProps {
   sx?: SxProps;
 }
 
+interface PaginationOption {
+  label: string;
+  value: number;
+}
+
 interface Props extends PaginationProps {
+  customOptions?: PaginationOption[];
   handlePageChange: (page: number) => void;
   handleSizeChange: (pageSize: number) => void;
 }
@@ -33,6 +39,7 @@ export const PaginationFooter = (props: Props) => {
   const theme = useTheme();
   const {
     count,
+    customOptions,
     fixedSize,
     handlePageChange,
     handleSizeChange,
@@ -46,7 +53,7 @@ export const PaginationFooter = (props: Props) => {
     return null;
   }
 
-  const finalOptions = [...baseOptions];
+  const finalOptions = [...(customOptions ?? baseOptions)];
 
   // Add "Show All" to the list of options if the consumer has so specified.
   if (showAll) {