Skip to content

Commit 0bd009c

Browse files
damian-polewskiiblancof
damian-polewski
authored and
iblancof
committed
[ILM][Index Management] Replace deprecated EuiFilterSelectItem (elastic#223001)
Closes elastic#220512 This PR replaces deprecated `EuiFilterSelectItem` component with `EuiSelectable` in ILM and Index Management plugins.
1 parent df88bbe commit 0bd009c

File tree

5 files changed

+100
-73
lines changed

5 files changed

+100
-73
lines changed

‎x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/unit_field.tsx‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
import React, { FunctionComponent, useState } from 'react';
9-
import { EuiFilterSelectItem, EuiPopover, EuiButtonEmpty } from '@elastic/eui';
9+
import { EuiPopover, EuiButtonEmpty, EuiSelectable } from '@elastic/eui';
1010
import { UseField } from '../../../form';
1111

1212
interface Props {
@@ -49,16 +49,28 @@ export const UnitField: FunctionComponent<Props> = ({ path, options, euiFieldPro
4949
closePopover={() => setOpen(false)}
5050
{...euiFieldProps}
5151
>
52-
{options.map((item) => (
53-
<EuiFilterSelectItem
54-
key={item.value}
55-
checked={field.value === item.value ? 'on' : undefined}
56-
onClick={() => onSelect(item.value)}
57-
data-test-subj={`filter-option-${item.value}`}
58-
>
59-
{item.text}
60-
</EuiFilterSelectItem>
61-
))}
52+
<EuiSelectable
53+
singleSelection="always"
54+
listProps={{
55+
onFocusBadge: false,
56+
style: {
57+
minWidth: 130,
58+
},
59+
}}
60+
options={options.map((item) => ({
61+
key: item.value,
62+
label: item.text,
63+
checked: field.value === item.value ? 'on' : undefined,
64+
'data-test-subj': `filter-option-${item.value}`,
65+
}))}
66+
onChange={(newOptions, event, changedOption) => {
67+
if (changedOption) {
68+
onSelect(changedOption.key);
69+
}
70+
}}
71+
>
72+
{(list) => list}
73+
</EuiSelectable>
6274
</EuiPopover>
6375
);
6476
}}

‎x-pack/platform/plugins/shared/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -235,11 +235,10 @@ describe('<TemplateCreate />', () => {
235235

236236
showFilters();
237237

238-
expect(find('filterList.filterItem').map((wrapper) => wrapper.text())).toEqual([
239-
'Index settings',
240-
'Mappings',
241-
'Aliases',
242-
]);
238+
const filtersList = find('filterList.filterItem').map((wrapper) => wrapper.text());
239+
expect(filtersList[0]).toContain('Index settings');
240+
expect(filtersList[1]).toContain('Mappings');
241+
expect(filtersList[2]).toContain('Aliases');
243242

244243
await selectFilter('settings');
245244
expect(getComponentTemplatesInList()).toEqual(['test_component_template_2']); // only this one has settings

‎x-pack/platform/plugins/shared/index_management/public/application/components/component_templates/component_template_selector/components/filter_list_button.tsx‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,7 @@
77

88
import React, { useState } from 'react';
99
import { FormattedMessage } from '@kbn/i18n-react';
10-
import {
11-
EuiFilterButton,
12-
EuiPopover,
13-
EuiFilterSelectItem,
14-
EuiFilterGroup,
15-
useEuiTheme,
16-
} from '@elastic/eui';
10+
import { EuiFilterButton, EuiPopover, EuiFilterGroup, EuiSelectable } from '@elastic/eui';
1711

1812
interface Filter {
1913
name: string;
@@ -30,7 +24,6 @@ export interface Filters {
3024
}
3125

3226
export function FilterListButton({ onChange, filters }: Props) {
33-
const { euiTheme } = useEuiTheme();
3427
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
3528

3629
const activeFilters = Object.values(filters).filter((v) => (v as Filter).checked === 'on');
@@ -43,6 +36,13 @@ export function FilterListButton({ onChange, filters }: Props) {
4336
setIsPopoverOpen(false);
4437
};
4538

39+
const selectableOptions = Object.entries(filters).map(([filter, item]) => ({
40+
key: filter,
41+
label: (item as Filter).name,
42+
checked: (item as Filter).checked,
43+
'data-test-subj': 'filterItem',
44+
}));
45+
4646
const toggleFilter = (filter: string) => {
4747
const previousValue = filters[filter].checked;
4848
const nextValue = previousValue === 'on' ? 'off' : 'on';
@@ -83,21 +83,23 @@ export function FilterListButton({ onChange, filters }: Props) {
8383
panelPaddingSize="none"
8484
data-test-subj="filterList"
8585
>
86-
{/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
87-
instead of EuiFilterSelectItem (which is pending deprecation).
88-
@see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
89-
<div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
90-
{Object.entries(filters).map(([filter, item], index) => (
91-
<EuiFilterSelectItem
92-
checked={(item as Filter).checked}
93-
key={index}
94-
onClick={() => toggleFilter(filter)}
95-
data-test-subj="filterItem"
96-
>
97-
{(item as Filter).name}
98-
</EuiFilterSelectItem>
99-
))}
100-
</div>
86+
<EuiSelectable
87+
allowExclusions
88+
listProps={{
89+
onFocusBadge: false,
90+
style: {
91+
minWidth: 150,
92+
},
93+
}}
94+
options={selectableOptions}
95+
onChange={(newOptions, event, changedOption) => {
96+
if (changedOption) {
97+
toggleFilter(changedOption.key);
98+
}
99+
}}
100+
>
101+
{(list) => list}
102+
</EuiSelectable>
101103
</EuiPopover>
102104
</EuiFilterGroup>
103105
);

‎x-pack/platform/plugins/shared/index_management/public/application/components/shared/fields/unit_field.tsx‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77

88
import React, { FunctionComponent, useState } from 'react';
9-
import { EuiFilterSelectItem, EuiPopover, EuiButtonEmpty } from '@elastic/eui';
9+
import { EuiSelectable, EuiPopover, EuiButtonEmpty } from '@elastic/eui';
1010
import { UseField } from '../../../../shared_imports';
1111

1212
interface Props {
@@ -52,16 +52,28 @@ export const UnitField: FunctionComponent<Props> = ({ path, disabled, options, e
5252
closePopover={() => setOpen(false)}
5353
{...euiFieldProps}
5454
>
55-
{options.map((item) => (
56-
<EuiFilterSelectItem
57-
key={item.value}
58-
checked={field.value === item.value ? 'on' : undefined}
59-
onClick={() => onSelect(item.value)}
60-
data-test-subj={`filter-option-${item.value}`}
61-
>
62-
{item.text}
63-
</EuiFilterSelectItem>
64-
))}
55+
<EuiSelectable
56+
singleSelection="always"
57+
listProps={{
58+
onFocusBadge: false,
59+
style: {
60+
minWidth: 130,
61+
},
62+
}}
63+
options={options.map((item) => ({
64+
key: item.value,
65+
label: item.text,
66+
checked: field.value === item.value ? 'on' : undefined,
67+
'data-test-subj': `filter-option-${item.value}`,
68+
}))}
69+
onChange={(newOptions, event, changedOption) => {
70+
if (changedOption) {
71+
onSelect(changedOption.key);
72+
}
73+
}}
74+
>
75+
{(list) => list}
76+
</EuiSelectable>
6577
</EuiPopover>
6678
);
6779
}}

‎x-pack/platform/plugins/shared/index_management/public/application/sections/home/components/filter_list_button.tsx‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,7 @@
77

88
import React, { useState } from 'react';
99
import { FormattedMessage } from '@kbn/i18n-react';
10-
import {
11-
EuiFilterButton,
12-
EuiFilterGroup,
13-
EuiPopover,
14-
EuiFilterSelectItem,
15-
useEuiTheme,
16-
} from '@elastic/eui';
10+
import { EuiFilterButton, EuiFilterGroup, EuiPopover, EuiSelectable } from '@elastic/eui';
1711

1812
interface Filter {
1913
name: string;
@@ -30,7 +24,6 @@ export type Filters<T extends string> = {
3024
};
3125

3226
export function FilterListButton<T extends string>({ onChange, filters }: Props<T>) {
33-
const { euiTheme } = useEuiTheme();
3427
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
3528

3629
const activeFilters = Object.values(filters).filter((v) => (v as Filter).checked === 'on');
@@ -43,6 +36,13 @@ export function FilterListButton<T extends string>({ onChange, filters }: Props<
4336
setIsPopoverOpen(false);
4437
};
4538

39+
const selectableOptions = Object.entries(filters).map(([filter, item]) => ({
40+
key: filter as T,
41+
label: (item as Filter).name,
42+
checked: (item as Filter).checked,
43+
'data-test-subj': 'filterItem',
44+
}));
45+
4646
const toggleFilter = (filter: T) => {
4747
const previousValue = filters[filter].checked;
4848
onChange({
@@ -81,21 +81,23 @@ export function FilterListButton<T extends string>({ onChange, filters }: Props<
8181
panelPaddingSize="none"
8282
data-test-subj="filterList"
8383
>
84-
{/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
85-
instead of EuiFilterSelectItem (which is pending deprecation).
86-
@see https://elastic.github.io/eui/#/forms/filter-group#multi-select */}
87-
<div className="eui-yScroll" css={{ maxHeight: euiTheme.base * 30 }}>
88-
{Object.entries(filters).map(([filter, item], index) => (
89-
<EuiFilterSelectItem
90-
checked={(item as Filter).checked}
91-
key={index}
92-
onClick={() => toggleFilter(filter as T)}
93-
data-test-subj="filterItem"
94-
>
95-
{(item as Filter).name}
96-
</EuiFilterSelectItem>
97-
))}
98-
</div>
84+
<EuiSelectable
85+
allowExclusions
86+
listProps={{
87+
onFocusBadge: false,
88+
style: {
89+
minWidth: 220,
90+
},
91+
}}
92+
options={selectableOptions}
93+
onChange={(newOptions, event, changedOption) => {
94+
if (changedOption) {
95+
toggleFilter(changedOption.key);
96+
}
97+
}}
98+
>
99+
{(list) => list}
100+
</EuiSelectable>
99101
</EuiPopover>
100102
</EuiFilterGroup>
101103
);

0 commit comments

Comments
 (0)