Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Security Solution][Exceptions] - Fix pagination bug on shared exception lists view #151393

Merged
merged 2 commits into from
Feb 22, 2023
Merged

[Security Solution][Exceptions] - Fix pagination bug on shared exception lists view #151393

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77eb735
fix bug that broke pagination on shared exception lists page when cha…
yctercero Feb 16, 2023
7873680
Merge branch 'main' into exceptions_bugs_8.7
yctercero Feb 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
96 changes: 40 additions & 56 deletions x-pack/plugins/security_solution/public/exceptions/pages/shared_lists/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
EuiSpacer,
EuiPageHeader,
EuiHorizontalRule,
EuiText,
} from '@elastic/eui';

import type { NamespaceType, ExceptionListFilter } from '@kbn/securitysolution-io-ts-list-types';
Expand Down Expand Up @@ -151,7 +152,7 @@ export const SharedLists = React.memo(() => {
);

const handleDelete = useCallback(
({ id, listId, namespaceType }: { id: string; listId: string; namespaceType: NamespaceType }) =>
({ id, namespaceType }: { id: string; namespaceType: NamespaceType }) =>
async () => {
try {
if (exceptionsListsRef[id] != null) {
Expand Down Expand Up @@ -329,44 +330,28 @@ export const SharedLists = React.memo(() => {
iconSide="right"
onClick={onRowSizeButtonClick}
>
{/* TODO move to translations */}
{`Rows per page: ${rowSize}`}
{i18n.allExceptionsRowPerPage(rowSize)}
</EuiButtonEmpty>
);

const getIconType = (size: number) => {
return size === rowSize ? 'check' : 'empty';
};

const onPerPageClick = useCallback((size: number) => {
closeRowSizePopover();
setRowSize(size);
setActivePage(0);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is where the fix is. There's some jank with the page, reloading when I don't think we need to on row selection, but for now just fixing this bug.

}, []);

const rowSizeItems = [
<EuiContextMenuItem
key="5 rows"
icon={getIconType(5)}
onClick={() => {
closeRowSizePopover();
setRowSize(5);
}}
>
<EuiContextMenuItem key="5 rows" icon={getIconType(5)} onClick={() => onPerPageClick(5)}>
{'5 rows'}
</EuiContextMenuItem>,
<EuiContextMenuItem
key="10 rows"
icon={getIconType(10)}
onClick={() => {
closeRowSizePopover();
setRowSize(10);
}}
>
<EuiContextMenuItem key="10 rows" icon={getIconType(10)} onClick={() => onPerPageClick(10)}>
{'10 rows'}
</EuiContextMenuItem>,
<EuiContextMenuItem
key="25 rows"
icon={getIconType(25)}
onClick={() => {
closeRowSizePopover();
setRowSize(25);
}}
>
<EuiContextMenuItem key="25 rows" icon={getIconType(25)} onClick={() => onPerPageClick(25)}>
{'25 rows'}
</EuiContextMenuItem>,
];
Expand Down Expand Up @@ -397,14 +382,16 @@ export const SharedLists = React.memo(() => {
return (
<>
<MissingPrivilegesCallOut />
<EuiFlexGroup>
<EuiFlexItem>
<EuiPageHeader
pageTitle={i18n.ALL_EXCEPTIONS}
description={
<>
<div>
{"To view rule specific exceptions navigate to that rule's details page."}
<EuiPageHeader
pageTitle={i18n.ALL_EXCEPTIONS}
description={
<EuiFlexGroup gutterSize="xs" direction="column">
<EuiFlexItem>
<EuiFlexGroup gutterSize="none" direction="row">
<EuiFlexItem grow={false}>
<EuiText>{i18n.ALL_EXCEPTIONS_SUBTITLE}</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiButtonIcon
iconType="popout"
aria-label="go-to-rules"
Expand All @@ -413,24 +400,18 @@ export const SharedLists = React.memo(() => {
navigateToApp('security', { openInNewTab: true, path: '/rules' })
}
/>
</div>
{/* TODO: update the above text to incorporate a navigateToApp link to the rule management page */}
<div>
{timelines.getLastUpdated({
showUpdating: loading,
updatedAt: lastUpdated,
})}
</div>
</>
}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton iconType={'importAction'} onClick={() => setDisplayImportListFlyout(true)}>
{i18n.IMPORT_EXCEPTION_LIST_BUTTON}
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
{timelines.getLastUpdated({
showUpdating: loading,
updatedAt: lastUpdated,
})}
</EuiFlexItem>
</EuiFlexGroup>
}
rightSideItems={[
<EuiPopover
data-test-subj="manageExceptionListCreateButton"
button={
Expand Down Expand Up @@ -463,9 +444,12 @@ export const SharedLists = React.memo(() => {
</EuiContextMenuItem>,
]}
/>
</EuiPopover>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPopover>,
<EuiButton iconType={'importAction'} onClick={() => setDisplayImportListFlyout(true)}>
{i18n.IMPORT_EXCEPTION_LIST_BUTTON}
</EuiButton>,
]}
/>

{displayCreateSharedListFlyout && (
<CreateSharedListFlyout
Expand Down
13 changes: 13 additions & 0 deletions x-pack/plugins/security_solution/public/exceptions/translations/shared_list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,19 @@ export const ALL_EXCEPTIONS = i18n.translate(
}
);

export const ALL_EXCEPTIONS_SUBTITLE = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.allExceptions.tableSubtitle',
{
defaultMessage: "To view rule specific exceptions navigate to that rule's details page.",
}
);

export const allExceptionsRowPerPage = (rowSize: number) =>
i18n.translate('xpack.securitySolution.exceptions.allExceptionsRowPerPage', {
defaultMessage: 'Rows per page: {rowSize}',
values: { rowSize },
});

export const NO_LISTS_BODY = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.allExceptions.filters.noListsBody',
{
Expand Down