fixed pagination in connectors list (elastic#83638)

Ensures we specify the page on the EuiTable so that pagination is retain after rerenders.
phillipb · Nov 19, 2020 · ffdc507 · ffdc507
1 parent 514b50e
commit ffdc507
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 28 deletions.
diff --git a/.../application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx b/.../application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx
@@ -16,6 +16,8 @@ import { chartPluginMock } from '../../../../../../../../src/plugins/charts/publ
 import { dataPluginMock } from '../../../../../../../../src/plugins/data/public/mocks';
 import { alertingPluginMock } from '../../../../../../alerts/public/mocks';
 import { featuresPluginMock } from '../../../../../../features/public/mocks';
+import { ActionConnector } from '../../../../types';
+import { times } from 'lodash';
 
 jest.mock('../../../lib/action_connector_api', () => ({
   loadAllActions: jest.fn(),
@@ -109,36 +111,38 @@ describe('actions_connectors_list component empty', () => {
 describe('actions_connectors_list component with items', () => {
   let wrapper: ReactWrapper<any>;
 
-  async function setup() {
+  async function setup(actionConnectors?: ActionConnector[]) {
     const { loadAllActions, loadActionTypes } = jest.requireMock(
       '../../../lib/action_connector_api'
     );
-    loadAllActions.mockResolvedValueOnce([
-      {
-        id: '1',
-        actionTypeId: 'test',
-        description: 'My test',
-        isPreconfigured: false,
-        referencedByCount: 1,
-        config: {},
-      },
-      {
-        id: '2',
-        actionTypeId: 'test2',
-        description: 'My test 2',
-        referencedByCount: 1,
-        isPreconfigured: false,
-        config: {},
-      },
-      {
-        id: '3',
-        actionTypeId: 'test2',
-        description: 'My preconfigured test 2',
-        referencedByCount: 1,
-        isPreconfigured: true,
-        config: {},
-      },
-    ]);
+    loadAllActions.mockResolvedValueOnce(
+      actionConnectors ?? [
+        {
+          id: '1',
+          actionTypeId: 'test',
+          description: 'My test',
+          isPreconfigured: false,
+          referencedByCount: 1,
+          config: {},
+        },
+        {
+          id: '2',
+          actionTypeId: 'test2',
+          description: 'My test 2',
+          referencedByCount: 1,
+          isPreconfigured: false,
+          config: {},
+        },
+        {
+          id: '3',
+          actionTypeId: 'test2',
+          description: 'My preconfigured test 2',
+          referencedByCount: 1,
+          isPreconfigured: true,
+          config: {},
+        },
+      ]
+    );
     loadActionTypes.mockResolvedValueOnce([
       {
         id: 'test',
@@ -217,6 +221,36 @@ describe('actions_connectors_list component with items', () => {
     expect(wrapper.find('[data-test-subj="preConfiguredTitleMessage"]')).toHaveLength(2);
   });
 
+  it('supports pagination', async () => {
+    await setup(
+      times(15, (index) => ({
+        id: `connector${index}`,
+        actionTypeId: 'test',
+        name: `My test ${index}`,
+        secrets: {},
+        description: `My test ${index}`,
+        isPreconfigured: false,
+        referencedByCount: 1,
+        config: {},
+      }))
+    );
+    expect(wrapper.find('[data-test-subj="actionsTable"]').first().prop('pagination'))
+      .toMatchInlineSnapshot(`
+      Object {
+        "initialPageIndex": 0,
+        "pageIndex": 0,
+      }
+    `);
+    wrapper.find('[data-test-subj="pagination-button-1"]').first().simulate('click');
+    expect(wrapper.find('[data-test-subj="actionsTable"]').first().prop('pagination'))
+      .toMatchInlineSnapshot(`
+      Object {
+        "initialPageIndex": 0,
+        "pageIndex": 1,
+      }
+    `);
+  });
+
   test('if select item for edit should render ConnectorEditFlyout', async () => {
     await setup();
     await wrapper.find('[data-test-subj="edit1"]').first().simulate('click');

diff --git a/...ublic/application/sections/actions_connectors_list/components/actions_connectors_list.tsx b/...ublic/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
@@ -18,6 +18,7 @@ import {
   EuiToolTip,
   EuiButtonIcon,
   EuiEmptyPrompt,
+  Criteria,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { omit } from 'lodash';
@@ -54,6 +55,7 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
 
   const [actionTypesIndex, setActionTypesIndex] = useState<ActionTypeIndex | undefined>(undefined);
   const [actions, setActions] = useState<ActionConnector[]>([]);
+  const [pageIndex, setPageIndex] = useState<number>(0);
   const [selectedItems, setSelectedItems] = useState<ActionConnectorTableItem[]>([]);
   const [isLoadingActionTypes, setIsLoadingActionTypes] = useState<boolean>(false);
   const [isLoadingActions, setIsLoadingActions] = useState<boolean>(false);
@@ -233,7 +235,15 @@ export const ActionsConnectorsList: React.FunctionComponent = () => {
             : '',
       })}
       data-test-subj="actionsTable"
-      pagination={true}
+      pagination={{
+        initialPageIndex: 0,
+        pageIndex,
+      }}
+      onTableChange={({ page }: Criteria<ActionConnectorTableItem>) => {
+        if (page) {
+          setPageIndex(page.index);
+        }
+      }}
       selection={
         canDelete
           ? {