diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/columns.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/columns.tsx index c994debfd29cbc..2779ce30ce7766 100644 --- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/columns.tsx +++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/columns.tsx @@ -211,7 +211,7 @@ export const getColumns = ({ field: 'tags', name: i18n.COLUMN_TAGS, render: (value: Rule['tags']) => { - if (value != null && value.length > 0) { + if (value.length > 0) { return ; } return getEmptyTagValue(); diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/index.test.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/index.test.tsx index 2cd81bf8ae60a0..f8ed57aa7537e0 100644 --- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/index.test.tsx +++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/index.test.tsx @@ -14,8 +14,6 @@ import { TestProviders } from '../../../../../common/mock'; import { waitFor } from '@testing-library/react'; import { AllRules } from './index'; -const mockTags = ['Elastic', 'Endpoint', 'Data Protection', 'ML', 'Continuous Monitoring']; - jest.mock('react-router-dom', () => { const original = jest.requireActual('react-router-dom'); @@ -68,7 +66,7 @@ jest.mock('./reducer', () => { risk_score: 73, rule_id: '571afc56-5ed9-465d-a2a9-045f099f6e7e', severity: 'high', - tags: mockTags, + tags: ['Elastic', 'Endpoint'], threat: [], throttle: null, to: 'now', @@ -114,7 +112,7 @@ jest.mock('../../../../containers/detection_engine/rules', () => { risk_score: 73, rule_id: '571afc56-5ed9-465d-a2a9-045f099f6e7e', severity: 'high', - tags: mockTags, + tags: ['Elastic', 'Endpoint'], threat: [], throttle: null, to: 'now', @@ -211,12 +209,6 @@ describe('AllRules', () => { }); }); }); - - it('visibly renders all tags', () => { - for (let i = 0; i < mockTags.length; i++) { - expect(wrapper.exists(`[data-test-subj="rules-table-column-tags-${i}"]`)).toBeTruthy(); - } - }); }); it('renders monitoring tab when monitoring tab clicked', async () => { diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx index 4fe0bc8f835dff..2bf62317dbcac7 100644 --- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx +++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/rules_table_filters/tags_filter_popover.tsx @@ -36,9 +36,19 @@ interface TagsFilterPopoverProps { isLoading: boolean; // TO DO reimplement? } +const PopoverContentWrapper = styled.div` + width: 275px; +`; + const ScrollableDiv = styled.div` max-height: 250px; - overflow: auto; + overflow-y: auto; +`; + +const TagOverflowContainer = styled.span` + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; /** @@ -65,8 +75,9 @@ const TagsFilterPopoverComponent = ({ checked={selectedTags.includes(tag) ? 'on' : undefined} key={`${index}-${tag}`} onClick={() => toggleSelectedGroup(tag, selectedTags, onSelectedTagsChanged)} + title={tag} > - {`${tag}`} + {tag} )); }, [onSelectedTagsChanged, selectedTags, filterTags]); @@ -101,25 +112,27 @@ const TagsFilterPopoverComponent = ({ panelPaddingSize="none" repositionOnScroll > - - - - {tagsComponent} - {filterTags.length === 0 && ( - - - - {i18n.NO_TAGS_AVAILABLE} - - - - )} + + + + + {tagsComponent} + {filterTags.length === 0 && ( + + + + {i18n.NO_TAGS_AVAILABLE} + + + + )} + ); }; diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/tag_display.test.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/tag_display.test.tsx new file mode 100644 index 00000000000000..3e60bb2d3168b0 --- /dev/null +++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/tag_display.test.tsx @@ -0,0 +1,47 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +import React from 'react'; +import { mount, ReactWrapper } from 'enzyme'; + +import { TagsDisplay } from './tag_display'; +import { TestProviders } from '../../../../../common/mock'; +import { waitFor } from '@testing-library/react'; + +const mockTags = ['Elastic', 'Endpoint', 'Data Protection', 'ML', 'Continuous Monitoring']; + +describe('When tag display loads', () => { + let wrapper: ReactWrapper; + beforeEach(() => { + wrapper = mount( + + + + ); + }); + it('visibly renders 3 initial tags', () => { + for (let i = 0; i < 3; i++) { + expect(wrapper.exists(`[data-test-subj="rules-table-column-tags-${i}"]`)).toBeTruthy(); + } + }); + describe("when the 'see all' button is clicked", () => { + beforeEach(() => { + const seeAllButton = wrapper.find('[data-test-subj="tags-display-popover-button"] button'); + seeAllButton.simulate('click'); + }); + it('renders all the tags in the popover', async () => { + await waitFor(() => { + wrapper.update(); + expect(wrapper.exists('[data-test-subj="tags-display-popover"]')).toBeTruthy(); + for (let i = 0; i < mockTags.length; i++) { + expect( + wrapper.exists(`[data-test-subj="rules-table-column-popover-tags-${i}"]`) + ).toBeTruthy(); + } + }); + }); + }); +}); diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/tag_display.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/tag_display.tsx index 4b16efa9a51461..dd1b10b7c429ca 100644 --- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/tag_display.tsx +++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/tag_display.tsx @@ -5,18 +5,7 @@ */ import React, { useState } from 'react'; -import { - EuiFlexGroup, - EuiFlexItem, - EuiPanel, - EuiPopover, - EuiText, - EuiFieldSearch, - EuiPopoverTitle, - EuiBadgeGroup, - EuiBadge, - EuiButtonEmpty, -} from '@elastic/eui'; +import { EuiPopover, EuiBadgeGroup, EuiBadge, EuiButtonEmpty } from '@elastic/eui'; import styled from 'styled-components'; import * as i18n from '../translations'; @@ -29,7 +18,9 @@ const TagWrapper = styled(EuiBadgeGroup)` `; const TagPopoverWrapper = styled(EuiBadgeGroup)` - width: min-content; + max-height: 200px; + max-width: 600px; + overflow: auto; `; const TagPopoverButton = styled(EuiButtonEmpty)` @@ -73,6 +64,7 @@ const TagsDisplayComponent = ({ tags }: TagsDisplayProps) => {