github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

fixed pagination in connectors list (#83638) (#83790)

Browse source 
Ensures we specify the page on the EuiTable so that pagination is retain after rerenders.
This commit is contained in:
Gidi Meir Morris 2020-11-19 15:11:40 +00:00 • committed by GitHub
parent 5956b9d02e
commit 3004ac935c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 72 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

88
x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.test.tsx
View file

@ -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');

12
x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx
View file

@ -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
? {