Skip to content

Commit

Permalink
fixed pagination in connectors list (elastic#83638)
Browse files Browse the repository at this point in the history
Ensures we specify the page on the EuiTable so that pagination is retain after rerenders.
  • Loading branch information
gmmorris committed Nov 19, 2020
1 parent b3363fb commit c0de6b0
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 28 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
EuiToolTip,
EuiButtonIcon,
EuiEmptyPrompt,
Criteria,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { omit } from 'lodash';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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
? {
Expand Down

0 comments on commit c0de6b0

Please sign in to comment.