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

[Security Solution] Migrate rules table tags filter to EuiSelectable #149508

Merged
merged 9 commits into from
Jan 27, 2023
Merged

[Security Solution] Migrate rules table tags filter to EuiSelectable #149508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e2d424f
migrate tags filter to EuiSelectable
maximpn Jan 25, 2023
18addcf
add data test attribute
maximpn Jan 25, 2023
cfca749
allow to update the tags list
maximpn Jan 25, 2023
17e7fff
fix e2e tests
maximpn Jan 25, 2023
4587749
remove duplicated code
maximpn Jan 25, 2023
0a17b84
display padded search field
maximpn Jan 26, 2023
7600ae2
get rid of search field margin
maximpn Jan 26, 2023
f210f48
get rid of magic constant
maximpn Jan 27, 2023
5d6c42a
convert hard coded text to i18n strings
maximpn Jan 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 0 additions & 12 deletions x-pack/plugins/security_solution/cypress/e2e/detection_rules/bulk_edit_rules.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,12 +267,6 @@ describe('Detection rules, bulk edit', () => {
// check if only pre-populated tags exist in the tags filter
checkTagsInTagsFilter(prePopulatedTags);

cy.get(EUI_FILTER_SELECT_ITEM)
.should('have.length', prePopulatedTags.length)
.each(($el, index) => {
cy.wrap($el).should('have.text', prePopulatedTags[index]);
});

selectNumberOfRules(expectedNumberOfCustomRulesToBeEdited);

// open add tags form and add 2 new tags
Expand All @@ -296,12 +290,6 @@ describe('Detection rules, bulk edit', () => {
// check if only pre-populated tags exist in the tags filter
checkTagsInTagsFilter(prePopulatedTags);

cy.get(EUI_FILTER_SELECT_ITEM)
.should('have.length', prePopulatedTags.length)
.each(($el, index) => {
cy.wrap($el).should('have.text', prePopulatedTags[index]);
});

selectNumberOfRules(expectedNumberOfCustomRulesToBeEdited);

// open add tags form and add 2 new tags
Expand Down
2 changes: 2 additions & 0 deletions x-pack/plugins/security_solution/cypress/screens/common/controls.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ export const TIMELINE_SEARCHBOX = '[data-test-subj="timeline-super-select-search

export const EUI_FILTER_SELECT_ITEM = '.euiFilterSelectItem';

export const EUI_SELECTABLE_LIST_ITEM = '[data-test-subj="euiSelectableList"] li';

export const EUI_CHECKBOX = '.euiCheckbox__input';

export const COMBO_BOX_INPUT = '[data-test-subj="comboBoxInput"]';
Expand Down
4 changes: 2 additions & 2 deletions x-pack/plugins/security_solution/cypress/tasks/rules_bulk_edit.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import { TIMELINE_SEARCHBOX, EUI_FILTER_SELECT_ITEM } from '../screens/common/controls';
import { TIMELINE_SEARCHBOX, EUI_SELECTABLE_LIST_ITEM } from '../screens/common/controls';

import {
BULK_ACTIONS_BTN,
Expand Down Expand Up @@ -226,7 +226,7 @@ export const selectTimelineTemplate = (timelineTitle: string) => {
export const checkTagsInTagsFilter = (tags: string[]) => {
cy.get(RULES_TAGS_FILTER_BTN).contains(`Tags${tags.length}`).click();

cy.get(EUI_FILTER_SELECT_ITEM)
cy.get(EUI_SELECTABLE_LIST_ITEM)
.should('have.length', tags.length)
.each(($el, index) => {
cy.wrap($el).should('have.text', tags[index]);
Expand Down
149 changes: 64 additions & 85 deletions ...ine/rule_management_ui/components/rules_table/rules_table_filters/tags_filter_popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,45 +5,21 @@
* 2.0.
*/

import type { ChangeEvent } from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import {
EuiFilterButton,
EuiFilterSelectItem,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
EuiPopover,
EuiText,
EuiFieldSearch,
EuiPopoverTitle,
} from '@elastic/eui';
import styled from 'styled-components';
import React, { useEffect, useMemo, useState } from 'react';
import type { EuiSelectableOption } from '@elastic/eui';
import { EuiFilterButton, EuiPopover, EuiPopoverTitle, EuiSelectable } from '@elastic/eui';
import * as i18n from '../../../../../detections/pages/detection_engine/rules/translations';
import { toggleSelectedGroup } from '../../../../../common/components/ml_popover/jobs_table/filters/toggle_selected_group';
import { caseInsensitiveSort } from '../helpers';

const TAGS_POPOVER_WIDTH = 274;

interface TagsFilterPopoverProps {
selectedTags: string[];
tags: string[];
onSelectedTagsChanged: (newTags: string[]) => void;
}

const PopoverContentWrapper = styled.div`
width: 275px;
`;

const ScrollableDiv = styled.div`
max-height: 250px;
overflow-y: auto;
`;

const TagOverflowContainer = styled.span`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;

/**
* Popover for selecting tags to filter on
*
Expand All @@ -60,75 +36,78 @@ const TagsFilterPopoverComponent = ({
[selectedTags, tags]
);
const [isTagPopoverOpen, setIsTagPopoverOpen] = useState(false);
const [searchInput, setSearchInput] = useState('');
const [filterTags, setFilterTags] = useState(sortedTags);

const tagsComponent = useMemo(() => {
return filterTags.map((tag, index) => (
<EuiFilterSelectItem
checked={selectedTags.includes(tag) ? 'on' : undefined}
key={`${index}-${tag}`}
onClick={() => toggleSelectedGroup(tag, selectedTags, onSelectedTagsChanged)}
title={tag}
>
<TagOverflowContainer>{tag}</TagOverflowContainer>
</EuiFilterSelectItem>
));
}, [onSelectedTagsChanged, selectedTags, filterTags]);
const [selectableOptions, setSelectableOptions] = useState<EuiSelectableOption[]>(() => {
const selectedTagsSet = new Set(selectedTags);

const onSearchInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
setSearchInput(event.target.value);
}, []);
return sortedTags.map((label) => ({
label,
checked: selectedTagsSet.has(label) ? 'on' : undefined,
}));
});
const handleSelectableOptionsChange = (
newOptions: EuiSelectableOption[],
_: unknown,
changedOption: EuiSelectableOption
) => {
setSelectableOptions(newOptions);
toggleSelectedGroup(changedOption.label, selectedTags, onSelectedTagsChanged);
};

useEffect(() => {
setFilterTags(
sortedTags.filter((tag) => tag.toLowerCase().includes(searchInput.toLowerCase()))
);
}, [sortedTags, searchInput]);
const selectedTagsSet = new Set(selectedTags);
const newSelectableOptions: EuiSelectableOption[] = sortedTags.map((label) => ({
label,
checked: selectedTagsSet.has(label) ? 'on' : undefined,
}));

setSelectableOptions(newSelectableOptions);
}, [sortedTags, selectedTags]);

const triggerButton = (
<EuiFilterButton
grow
iconType="arrowDown"
onClick={() => setIsTagPopoverOpen(!isTagPopoverOpen)}
numFilters={tags.length}
isSelected={isTagPopoverOpen}
hasActiveFilters={selectedTags.length > 0}
numActiveFilters={selectedTags.length}
data-test-subj="tags-filter-popover-button"
>
{i18n.TAGS}
</EuiFilterButton>
);

return (
<EuiPopover
ownFocus
button={
<EuiFilterButton
grow={true}
data-test-subj={'tags-filter-popover-button'}
iconType="arrowDown"
onClick={() => setIsTagPopoverOpen(!isTagPopoverOpen)}
numFilters={tags.length}
isSelected={isTagPopoverOpen}
hasActiveFilters={selectedTags.length > 0}
numActiveFilters={selectedTags.length}
>
{i18n.TAGS}
</EuiFilterButton>
}
button={triggerButton}
isOpen={isTagPopoverOpen}
closePopover={() => setIsTagPopoverOpen(!isTagPopoverOpen)}
panelPaddingSize="none"
repositionOnScroll
panelProps={{
'data-test-subj': 'tags-filter-popover',
}}
>
<PopoverContentWrapper>
<EuiPopoverTitle>
<EuiFieldSearch
placeholder="Search tags"
value={searchInput}
onChange={onSearchInputChange}
isClearable
aria-label="Rules tag search"
/>
</EuiPopoverTitle>
<ScrollableDiv>{tagsComponent}</ScrollableDiv>
{filterTags.length === 0 && (
<EuiFlexGroup gutterSize="m" justifyContent="spaceAround">
<EuiFlexItem grow={true}>
<EuiPanel>
<EuiText>{i18n.NO_TAGS_AVAILABLE}</EuiText>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSelectable
searchable
searchProps={{
placeholder: i18n.SEARCH_TAGS,
}}
aria-label={i18n.RULES_TAG_SEARCH}
options={selectableOptions}
onChange={handleSelectableOptionsChange}
emptyMessage={i18n.NO_TAGS_AVAILABLE}
noMatchesMessage={i18n.NO_TAGS_AVAILABLE}
>
{(list, search) => (
<div style={{ width: TAGS_POPOVER_WIDTH }}>
<EuiPopoverTitle>{search}</EuiPopoverTitle>
{list}
</div>
)}
</PopoverContentWrapper>
</EuiSelectable>
</EuiPopover>
);
};
Expand Down
14 changes: 14 additions & 0 deletions .../plugins/security_solution/public/detections/pages/detection_engine/rules/translations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -659,6 +659,20 @@ export const TAGS = i18n.translate(
}
);

export const SEARCH_TAGS = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.allRules.filters.searchTagsPlaceholder',
{
defaultMessage: 'Search tags',
}
);

export const RULES_TAG_SEARCH = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.allRules.filters.rulesTagSearchText',
{
defaultMessage: 'Rules tag search',
}
);

export const NO_TAGS_AVAILABLE = i18n.translate(
'xpack.securitySolution.detectionEngine.rules.allRules.filters.noTagsAvailableDescription',
{
Expand Down