diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx index 71e1c60a92aedf..226b9de8b677f2 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/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; - 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/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx index ff5585cf04dbe2..c5d0a6aae54fc6 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/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(undefined); const [actions, setActions] = useState([]); + const [pageIndex, setPageIndex] = useState(0); const [selectedItems, setSelectedItems] = useState([]); const [isLoadingActionTypes, setIsLoadingActionTypes] = useState(false); const [isLoadingActions, setIsLoadingActions] = useState(false); @@ -233,7 +235,15 @@ export const ActionsConnectorsList: React.FunctionComponent = () => { : '', })} data-test-subj="actionsTable" - pagination={true} + pagination={{ + initialPageIndex: 0, + pageIndex, + }} + onTableChange={({ page }: Criteria) => { + if (page) { + setPageIndex(page.index); + } + }} selection={ canDelete ? {