From d6e989291b56fcd1100668a515a00a5ff0114a54 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 14 Jul 2023 08:57:51 -0700
Subject: [PATCH] Update EuiTablePagination to use defaults context

- default props must be manually declared using jsdocs now, since react docgen can no longer use `=` fallbacks to figure them out

- note: setting `EuiTablePagination.defaultProps` unfortunately does not work, React will automatically populate them and they don't come in as undefined
---
 .../component_defaults.test.tsx               |  4 +-
 .../table_pagination.test.tsx                 | 51 +++++++++++++++++++
 .../table_pagination/table_pagination.tsx     | 38 ++++++++++----
 3 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/src/components/provider/component_defaults/component_defaults.test.tsx b/src/components/provider/component_defaults/component_defaults.test.tsx
index ec186b896953..e61b4f1522ca 100644
--- a/src/components/provider/component_defaults/component_defaults.test.tsx
+++ b/src/components/provider/component_defaults/component_defaults.test.tsx
@@ -96,5 +96,7 @@ describe('EuiComponentDefaultsProvider', () => {
 
   // NOTE: Components are in charge of their own testing to ensure that the props
   // coming from `useEuiComponentDefaults()` were properly applied.
-  // @see `src/components/portal/portal.spec.tsx` as an example
+  // Examples:
+  // @see src/components/portal/portal.spec.tsx
+  // @see src/components/table/table_pagination/table_pagination.test.tsx
 });
diff --git a/src/components/table/table_pagination/table_pagination.test.tsx b/src/components/table/table_pagination/table_pagination.test.tsx
index 04e8419bc2b0..a11a049f00d5 100644
--- a/src/components/table/table_pagination/table_pagination.test.tsx
+++ b/src/components/table/table_pagination/table_pagination.test.tsx
@@ -7,9 +7,12 @@
  */
 
 import React from 'react';
+import { fireEvent } from '@testing-library/react';
 import { render } from '../../../test/rtl';
 import { requiredProps } from '../../../test/required_props';
 
+import { EuiProvider } from '../../provider';
+
 import { EuiTablePagination } from './table_pagination';
 
 describe('EuiTablePagination', () => {
@@ -51,4 +54,52 @@ describe('EuiTablePagination', () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  describe('configurable defaults', () => {
+    test('itemsPerPage', () => {
+      const { getByText } = render(
+        <EuiProvider
+          componentDefaults={{ EuiTablePagination: { itemsPerPage: 20 } }}
+        >
+          <EuiTablePagination {...paginationProps} />
+        </EuiProvider>,
+        { wrapper: undefined }
+      );
+
+      expect(getByText('Rows per page: 20')).toBeTruthy();
+    });
+
+    test('itemsPerPageOptions', () => {
+      const { getByTestSubject } = render(
+        <EuiProvider
+          componentDefaults={{
+            EuiTablePagination: { itemsPerPageOptions: [5, 10, 15] },
+          }}
+        >
+          <EuiTablePagination {...paginationProps} />
+        </EuiProvider>,
+        { wrapper: undefined }
+      );
+
+      fireEvent.click(getByTestSubject('tablePaginationPopoverButton'));
+      expect(getByTestSubject('tablePaginationRowOptions').textContent).toEqual(
+        '5 rows10 rows15 rows'
+      );
+    });
+
+    test('showPerPageOptions', () => {
+      const { queryByTestSubject } = render(
+        <EuiProvider
+          componentDefaults={{
+            EuiTablePagination: { showPerPageOptions: false },
+          }}
+        >
+          <EuiTablePagination {...paginationProps} />
+        </EuiProvider>,
+        { wrapper: undefined }
+      );
+
+      expect(queryByTestSubject('tablePaginationPopoverButton')).toBe(null);
+    });
+  });
 });
diff --git a/src/components/table/table_pagination/table_pagination.tsx b/src/components/table/table_pagination/table_pagination.tsx
index 19f944d80235..b0f38c473f26 100644
--- a/src/components/table/table_pagination/table_pagination.tsx
+++ b/src/components/table/table_pagination/table_pagination.tsx
@@ -20,6 +20,8 @@ import { EuiPagination, EuiPaginationProps } from '../../pagination';
 import { EuiPopover } from '../../popover';
 import { EuiI18n } from '../../i18n';
 
+import { useEuiComponentDefaults } from '../../provider/component_defaults';
+
 export type PageChangeHandler = EuiPaginationProps['onPageClick'];
 export type ItemsPerPageChangeHandler = (pageSize: number) => void;
 
@@ -27,16 +29,22 @@ export interface EuiTablePaginationProps
   extends Omit<EuiPaginationProps, 'onPageClick'> {
   /**
    * Option to completely hide the "Rows per page" selector.
+   *
+   * @default true
    */
   showPerPageOptions?: boolean;
   /**
    * Current selection for "Rows per page".
    * Pass `0` to display the selected "Show all" option and hide the pagination.
+   *
+   * @default 50
    */
   itemsPerPage?: number;
   /**
    * Custom array of options for "Rows per page".
    * Pass `0` as one of the options to create a "Show all" option.
+   *
+   * @default [10, 20, 50, 100]
    */
   itemsPerPageOptions?: number[];
   /**
@@ -51,16 +59,21 @@ export interface EuiTablePaginationProps
   'aria-label'?: string;
 }
 
-export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = ({
-  activePage,
-  itemsPerPage = 50,
-  itemsPerPageOptions = [10, 20, 50, 100],
-  showPerPageOptions = true,
-  onChangeItemsPerPage,
-  onChangePage,
-  pageCount,
-  ...rest
-}) => {
+export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = (
+  props
+) => {
+  const { EuiTablePagination: defaults } = useEuiComponentDefaults();
+  const {
+    activePage,
+    itemsPerPage = defaults.itemsPerPage,
+    itemsPerPageOptions = defaults.itemsPerPageOptions,
+    showPerPageOptions = defaults.showPerPageOptions,
+    onChangeItemsPerPage,
+    onChangePage,
+    pageCount,
+    ...rest
+  } = props;
+
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const togglePopover = useCallback(() => {
@@ -134,7 +147,10 @@ export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = ({
       panelPaddingSize="none"
       anchorPosition="upRight"
     >
-      <EuiContextMenuPanel items={items} />
+      <EuiContextMenuPanel
+        items={items}
+        data-test-subj="tablePaginationRowOptions"
+      />
     </EuiPopover>
   );