github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 10:40:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

Fix tag filter button with incorrect styles (#133454)

Browse source 
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Jiawei Wu 2022-06-23 07:33:53 -07:00 • committed by GitHub
parent 8fa2608172
commit 761850e1e8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

16
x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_filter.test.tsx
View file

@ -7,7 +7,7 @@
import React from 'react'; import React from 'react';
import { mountWithIntl } from '@kbn/test-jest-helpers'; import { mountWithIntl } from '@kbn/test-jest-helpers';
import { EuiFilterButton, EuiSelectable } from '@elastic/eui'; import { EuiFilterButton, EuiSelectable, EuiFilterGroup } from '@elastic/eui';
import { RuleTagFilter } from './rule_tag_filter'; import { RuleTagFilter } from './rule_tag_filter';
const onChangeMock = jest.fn(); const onChangeMock = jest.fn();
@ -74,4 +74,18 @@ describe('rule_tag_filter', () => {
tags.length + selectedTags.length tags.length + selectedTags.length
); );
}); });
it('renders the tag filter with a EuiFilterGroup if isGrouped is false', async () => {
const wrapper = mountWithIntl(
<RuleTagFilter tags={tags} selectedTags={[]} onChange={onChangeMock} />
);
expect(wrapper.find(EuiFilterGroup).exists()).toBeTruthy();
wrapper.setProps({
isGrouped: true,
});
expect(wrapper.find(EuiFilterGroup).exists()).toBeFalsy();
});
}); });

62
x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_filter.tsx
View file

@ -10,6 +10,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
import { import {
EuiSelectable, EuiSelectable,
EuiFilterButton, EuiFilterButton,
EuiFilterGroup,
EuiPopover, EuiPopover,
EuiSelectableProps, EuiSelectableProps,
EuiSelectableOption, EuiSelectableOption,
@ -19,6 +20,7 @@ import {
export interface RuleTagFilterProps { export interface RuleTagFilterProps {
tags: string[]; tags: string[];
selectedTags: string[]; selectedTags: string[];
isGrouped?: boolean; // Whether or not this should appear as the child of a EuiFilterGroup
isLoading?: boolean; isLoading?: boolean;
loadingMessage?: EuiSelectableProps['loadingMessage']; loadingMessage?: EuiSelectableProps['loadingMessage'];
noMatchesMessage?: EuiSelectableProps['noMatchesMessage']; noMatchesMessage?: EuiSelectableProps['noMatchesMessage'];
@ -37,6 +39,7 @@ export const RuleTagFilter = (props: RuleTagFilterProps) => {
const { const {
tags = [], tags = [],
selectedTags = [], selectedTags = [],
isGrouped = false,
isLoading = false, isLoading = false,
loadingMessage, loadingMessage,
noMatchesMessage, noMatchesMessage,
@ -101,33 +104,42 @@ export const RuleTagFilter = (props: RuleTagFilterProps) => {
); );
}; };
const Container = useMemo(() => {
if (isGrouped) {
return React.Fragment;
}
return EuiFilterGroup;
}, [isGrouped]);
return ( return (
<EuiPopover <Container>
data-test-subj={dataTestSubj} <EuiPopover
isOpen={isPopoverOpen} data-test-subj={dataTestSubj}
closePopover={onClosePopover} isOpen={isPopoverOpen}
button={renderButton()} closePopover={onClosePopover}
> button={renderButton()}
<EuiSelectable
searchable
data-test-subj={selectableDataTestSubj}
isLoading={isLoading}
options={options}
loadingMessage={loadingMessage}
noMatchesMessage={noMatchesMessage}
emptyMessage={emptyMessage}
errorMessage={errorMessage}
onChange={onChangeInternal}
> >
{(list, search) => ( <EuiSelectable
<> searchable
{search} data-test-subj={selectableDataTestSubj}
<EuiSpacer size="xs" /> isLoading={isLoading}
{list} options={options}
</> loadingMessage={loadingMessage}
)} noMatchesMessage={noMatchesMessage}
</EuiSelectable> emptyMessage={emptyMessage}
</EuiPopover> errorMessage={errorMessage}
onChange={onChangeInternal}
>
{(list, search) => (
<>
{search}
<EuiSpacer size="xs" />
{list}
</>
)}
</EuiSelectable>
</EuiPopover>
</Container>
); );
}; };

4
x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list.tsx
View file

@ -382,7 +382,9 @@ export const RulesList: React.FunctionComponent = () => {
const getRuleTagFilter = () => { const getRuleTagFilter = () => {
if (isRuleTagFilterEnabled) { if (isRuleTagFilterEnabled) {
return [<RuleTagFilter tags={tags} selectedTags={tagsFilter} onChange={setTagsFilter} />]; return [
<RuleTagFilter isGrouped tags={tags} selectedTags={tagsFilter} onChange={setTagsFilter} />,
];
} }
return []; return [];
}; };