Skip to content

Commit

Permalink
implement fix and test
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephmilovic
stephmilovic committed May 15, 2023
1 parent 9aa186e commit 5c8d5c7
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 8 deletions.
4 changes: 2 additions & 2 deletions packages/kbn-securitysolution-grouping/src/components/grouping.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ const GroupingComponent = <T,>({
<EuiProgress data-test-subj="is-loading-grouping-table" size="xs" color="accent" />
)}
{groupCount > 0 ? (
<>
<span data-test-subj={`grouping-level-${groupingLevel}`}>
{groupPanels}
{groupCount > 0 && (
<>
Expand All @@ -246,7 +246,7 @@ const GroupingComponent = <T,>({
/>
</>
)}
</>
</span>
) : (
<EmptyGroupingComponent />
)}
Expand Down
108 changes: 102 additions & 6 deletions ...gins/security_solution/public/detections/components/alerts_table/alerts_grouping.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,10 @@ jest.mock('../../../common/lib/kibana', () => {
services: {
...mockedUseKibana.services,
telemetry: mockedTelemetry,
storage: {
get: jest.fn().mockReturnValue([25, 25, 25]),
set: jest.fn(),
},
},
}),
};
Expand Down Expand Up @@ -187,7 +191,7 @@ describe('GroupedAlertsTable', () => {
);
});

it('renders empty grouping table when group is selected without data', async () => {
it('renders empty grouping table when group is selected without data', () => {
mockUseQueryAlerts.mockReturnValue(mockQueryResponse);
jest
.spyOn(window.localStorage, 'getItem')
Expand All @@ -201,7 +205,7 @@ describe('GroupedAlertsTable', () => {
expect(getByTestId('empty-results-panel')).toBeInTheDocument();
});

it('renders grouping table in first accordion level when single group is selected', async () => {
it('renders grouping table in first accordion level when single group is selected', () => {
jest
.spyOn(window.localStorage, 'getItem')
.mockReturnValue(getMockStorageState(['kibana.alert.rule.name']));
Expand Down Expand Up @@ -235,7 +239,7 @@ describe('GroupedAlertsTable', () => {
});
});

it('renders grouping table in second accordion level when 2 groups are selected', async () => {
it('renders grouping table in second accordion level when 2 groups are selected', () => {
jest
.spyOn(window.localStorage, 'getItem')
.mockReturnValue(getMockStorageState(['kibana.alert.rule.name', 'host.name']));
Expand All @@ -255,7 +259,7 @@ describe('GroupedAlertsTable', () => {
expect(level1.getByTestId('alerts-table')).toBeInTheDocument();
});

it('resets all levels pagination when selected group changes', async () => {
it('resets all levels pagination when selected group changes', () => {
jest
.spyOn(window.localStorage, 'getItem')
.mockReturnValue(getMockStorageState(['kibana.alert.rule.name', 'host.name', 'user.name']));
Expand Down Expand Up @@ -306,7 +310,7 @@ describe('GroupedAlertsTable', () => {
});
});

it('resets all levels pagination when global query updates', async () => {
it('resets all levels pagination when global query updates', () => {
jest
.spyOn(window.localStorage, 'getItem')
.mockReturnValue(getMockStorageState(['kibana.alert.rule.name', 'host.name', 'user.name']));
Expand Down Expand Up @@ -349,7 +353,7 @@ describe('GroupedAlertsTable', () => {
});
});

it('resets only most inner group pagination when its parent groups open/close', async () => {
it('resets only most inner group pagination when its parent groups open/close', () => {
jest
.spyOn(window.localStorage, 'getItem')
.mockReturnValue(getMockStorageState(['kibana.alert.rule.name', 'host.name', 'user.name']));
Expand Down Expand Up @@ -394,4 +398,96 @@ describe('GroupedAlertsTable', () => {
.getAttribute('aria-current')
).toEqual(null);
});

it(`resets innermost level's current page when that level's page size updates`, () => {
jest
.spyOn(window.localStorage, 'getItem')
.mockReturnValue(getMockStorageState(['kibana.alert.rule.name', 'host.name', 'user.name']));

const { getByTestId, getAllByTestId } = render(
<TestProviders store={store}>
<GroupedAlertsTable {...testProps} />
</TestProviders>
);

fireEvent.click(getByTestId('pagination-button-1'));
fireEvent.click(getAllByTestId('group-panel-toggle')[0]);

const level0 = getAllByTestId('grouping-accordion-content')[0];
fireEvent.click(within(level0).getByTestId('pagination-button-1'));
fireEvent.click(within(level0).getAllByTestId('group-panel-toggle')[0]);

const level1 = getAllByTestId('grouping-accordion-content')[1];
fireEvent.click(within(level1).getByTestId('pagination-button-1'));
fireEvent.click(
within(getByTestId('grouping-level-2')).getByTestId('tablePaginationPopoverButton')
);
fireEvent.click(getByTestId('tablePagination-100-rows'));
[
getByTestId('grouping-level-0-pagination'),
getByTestId('grouping-level-1-pagination'),
getByTestId('grouping-level-2-pagination'),
].forEach((pagination, i) => {
if (i !== 2) {
expect(
within(pagination).getByTestId('pagination-button-0').getAttribute('aria-current')
).toEqual(null);
expect(
within(pagination).getByTestId('pagination-button-1').getAttribute('aria-current')
).toEqual('true');
} else {
expect(
within(pagination).getByTestId('pagination-button-0').getAttribute('aria-current')
).toEqual('true');
expect(within(pagination).queryByTestId('pagination-button-1')).not.toBeInTheDocument();
}
});
});

it(`resets outermost level's current page when that level's page size updates`, () => {
jest
.spyOn(window.localStorage, 'getItem')
.mockReturnValue(getMockStorageState(['kibana.alert.rule.name', 'host.name', 'user.name']));

const { getByTestId, getAllByTestId } = render(
<TestProviders store={store}>
<GroupedAlertsTable {...testProps} />
</TestProviders>
);

fireEvent.click(getByTestId('pagination-button-1'));
fireEvent.click(getAllByTestId('group-panel-toggle')[0]);

const level0 = getAllByTestId('grouping-accordion-content')[0];
fireEvent.click(within(level0).getByTestId('pagination-button-1'));
fireEvent.click(within(level0).getAllByTestId('group-panel-toggle')[0]);

const level1 = getAllByTestId('grouping-accordion-content')[1];
fireEvent.click(within(level1).getByTestId('pagination-button-1'));
const tablePaginations = within(getByTestId('grouping-level-0')).getAllByTestId(
'tablePaginationPopoverButton'
);
fireEvent.click(tablePaginations[tablePaginations.length - 1]);
fireEvent.click(getByTestId('tablePagination-100-rows'));

[
getByTestId('grouping-level-0-pagination'),
getByTestId('grouping-level-1-pagination'),
getByTestId('grouping-level-2-pagination'),
].forEach((pagination, i) => {
if (i !== 0) {
expect(
within(pagination).getByTestId('pagination-button-0').getAttribute('aria-current')
).toEqual(null);
expect(
within(pagination).getByTestId('pagination-button-1').getAttribute('aria-current')
).toEqual('true');
} else {
expect(
within(pagination).getByTestId('pagination-button-0').getAttribute('aria-current')
).toEqual('true');
expect(within(pagination).queryByTestId('pagination-button-1')).not.toBeInTheDocument();
}
});
});
});
6 changes: 6 additions & 0 deletions ...k/plugins/security_solution/public/detections/components/alerts_table/alerts_grouping.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,12 @@ const GroupedAlertsTableComponent: React.FC<AlertsTableComponentProps> = (props)
setStoragePageSize(newArr);
return newArr;
});
// set page index to 0 when page size is changed
setPageIndex((currentIndex) => {
const newArr = [...currentIndex];
newArr[groupingLevel] = 0;
return newArr;
});
}
},
[setStoragePageSize]
Expand Down

0 comments on commit 5c8d5c7

Please sign in to comment.