-
Notifications
You must be signed in to change notification settings - Fork 8.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Inventory][ECO] filter by type on grid
- Loading branch information
1 parent
6d584d4
commit 741a877
Showing
5 changed files
with
236 additions
and
22 deletions.
There are no files selected for viewing
68 changes: 68 additions & 0 deletions
68
.../inventory/public/components/badge_filter_with_popover/badge_filter_with_popover.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0; you may not use this file except in compliance with the Elastic License | ||
* 2.0. | ||
*/ | ||
|
||
import React from 'react'; | ||
import { render, fireEvent, screen } from '@testing-library/react'; | ||
import { BadgeFilterWithPopover } from '.'; | ||
import { EuiThemeProvider, copyToClipboard } from '@elastic/eui'; | ||
import { ENTITY_TYPE } from '../../../common/es_fields/entities'; | ||
|
||
jest.mock('@elastic/eui', () => ({ | ||
...jest.requireActual('@elastic/eui'), | ||
copyToClipboard: jest.fn(), | ||
})); | ||
|
||
describe('BadgeFilterWithPopover', () => { | ||
const mockOnFilter = jest.fn(); | ||
const property = ENTITY_TYPE; | ||
const value = 'host'; | ||
const label = 'Host'; | ||
const popoverContentDataTestId = 'popoverContent'; | ||
const popoverContentTitleTestId = 'popoverContentTitle'; | ||
|
||
beforeEach(() => { | ||
jest.clearAllMocks(); | ||
}); | ||
|
||
it('renders the badge with the correct label', () => { | ||
render( | ||
<BadgeFilterWithPopover | ||
property={property} | ||
value={value} | ||
onFilter={mockOnFilter} | ||
label={label} | ||
/>, | ||
{ wrapper: EuiThemeProvider } | ||
); | ||
expect(screen.queryByText(label)).toBeInTheDocument(); | ||
expect(screen.getByText(label).textContent).toBe(label); | ||
}); | ||
|
||
it('opens the popover when the badge is clicked', () => { | ||
render(<BadgeFilterWithPopover property={property} value={value} onFilter={mockOnFilter} />); | ||
expect(screen.queryByTestId(popoverContentDataTestId)).not.toBeInTheDocument(); | ||
fireEvent.click(screen.getByText(value)); | ||
expect(screen.queryByTestId(popoverContentDataTestId)).toBeInTheDocument(); | ||
expect(screen.queryByTestId(popoverContentTitleTestId)?.textContent).toBe( | ||
`${property}:${value}` | ||
); | ||
}); | ||
|
||
it('calls onFilter when the "Filter for" button is clicked', () => { | ||
render(<BadgeFilterWithPopover property={property} value={value} onFilter={mockOnFilter} />); | ||
fireEvent.click(screen.getByText(value)); | ||
fireEvent.click(screen.getByTestId('inventoryBadgeFilterWithPopoverFilterForButton')); | ||
expect(mockOnFilter).toHaveBeenCalled(); | ||
}); | ||
|
||
it('copies value to clipboard when the "Copy value" button is clicked', () => { | ||
render(<BadgeFilterWithPopover property={property} value={value} onFilter={mockOnFilter} />); | ||
fireEvent.click(screen.getByText(value)); | ||
fireEvent.click(screen.getByTestId('inventoryBadgeFilterWithPopoverCopyValueButton')); | ||
expect(copyToClipboard).toHaveBeenCalledWith(value); | ||
}); | ||
}); |
103 changes: 103 additions & 0 deletions
103
...ns/observability_solution/inventory/public/components/badge_filter_with_popover/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0; you may not use this file except in compliance with the Elastic License | ||
* 2.0. | ||
*/ | ||
|
||
import { | ||
EuiBadge, | ||
EuiButtonEmpty, | ||
EuiFlexGrid, | ||
EuiFlexGroup, | ||
EuiFlexItem, | ||
EuiPopover, | ||
EuiPopoverFooter, | ||
copyToClipboard, | ||
useEuiTheme, | ||
} from '@elastic/eui'; | ||
import { css } from '@emotion/react'; | ||
import { i18n } from '@kbn/i18n'; | ||
import React, { useState } from 'react'; | ||
|
||
interface Props { | ||
property: string; | ||
value: string; | ||
label?: string; | ||
onFilter: () => void; | ||
} | ||
|
||
export function BadgeFilterWithPopover({ property, value, onFilter, label }: Props) { | ||
const [isOpen, setIsOpen] = useState(false); | ||
const theme = useEuiTheme(); | ||
|
||
return ( | ||
<EuiPopover | ||
button={ | ||
<EuiBadge | ||
data-test-subj="popoverButton" | ||
color="hollow" | ||
onClick={() => setIsOpen((state) => !state)} | ||
onClickAriaLabel={i18n.translate( | ||
'xpack.inventory.badgeFilterWithPopover.openPopoverBadgeLabel', | ||
{ defaultMessage: 'Open popover' } | ||
)} | ||
> | ||
{label || value} | ||
</EuiBadge> | ||
} | ||
isOpen={isOpen} | ||
closePopover={() => setIsOpen(false)} | ||
> | ||
<span data-test-subj="popoverContentTitle"> | ||
<EuiFlexGroup | ||
data-test-subj="popoverContent" | ||
responsive={false} | ||
gutterSize="xs" | ||
css={css` | ||
font-family: ${theme.euiTheme.font.familyCode}; | ||
`} | ||
> | ||
<EuiFlexItem grow={false}> | ||
<span | ||
css={css` | ||
font-weight: bold; | ||
`} | ||
> | ||
{property}: | ||
</span> | ||
</EuiFlexItem> | ||
<EuiFlexItem grow={false}> | ||
<span className="eui-textBreakWord">{value}</span> | ||
</EuiFlexItem> | ||
</EuiFlexGroup> | ||
</span> | ||
<EuiPopoverFooter> | ||
<EuiFlexGrid responsive={false} columns={2}> | ||
<EuiFlexItem> | ||
<EuiButtonEmpty | ||
data-test-subj="inventoryBadgeFilterWithPopoverFilterForButton" | ||
iconType="plusInCircle" | ||
onClick={onFilter} | ||
> | ||
{i18n.translate('xpack.inventory.badgeFilterWithPopover.filterForButtonEmptyLabel', { | ||
defaultMessage: 'Filter for', | ||
})} | ||
</EuiButtonEmpty> | ||
</EuiFlexItem> | ||
<EuiFlexItem> | ||
<EuiButtonEmpty | ||
data-test-subj="inventoryBadgeFilterWithPopoverCopyValueButton" | ||
iconType="copyClipboard" | ||
onClick={() => copyToClipboard(value)} | ||
> | ||
{i18n.translate('xpack.inventory.badgeFilterWithPopover.copyValueButtonEmptyLabel', { | ||
defaultMessage: 'Copy value', | ||
})} | ||
</EuiButtonEmpty> | ||
</EuiFlexItem> | ||
</EuiFlexGrid> | ||
</EuiPopoverFooter> | ||
</EuiPopover> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters