Skip to content

[Data Views] Update to EuiSelectable #244744

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+153 −188
Open

[Data Views] Update to EuiSelectable #244744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a3e7ad9
Update to EuiSelectable
AlexGPlay Dec 1, 2025
e69c921
Fix functional tests
AlexGPlay Dec 1, 2025
5c25e55
Change width to 150px
AlexGPlay Dec 2, 2025
3048375
Merge branch 'main' into 242932-migrate-to-euiselectable
AlexGPlay Dec 2, 2025
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
149 changes: 61 additions & 88 deletions ...rm/plugins/shared/data_view_management/public/components/edit_index_pattern/tabs/tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import { uniq } from 'lodash';
import React, { useState, useCallback, useEffect, Fragment, useMemo, useRef } from 'react';
import type { RouteComponentProps } from 'react-router-dom';
import type { EuiTabbedContentTab, FilterChecked } from '@elastic/eui';
import type { EuiSelectableOption, EuiTabbedContentTab } from '@elastic/eui';
import {
EuiFilterButton,
EuiFilterGroup,
Expand All @@ -20,9 +19,9 @@ import {
EuiTabbedContent,
EuiSpacer,
EuiFieldSearch,
EuiFilterSelectItem,
EuiToolTip,
EuiButton,
EuiSelectable,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { fieldWildcardMatcher } from '@kbn/kibana-utils-plugin/public';
Expand All @@ -39,6 +38,8 @@ import type {
SavedObjectManagementTypeInfo,
} from '@kbn/saved-objects-management-plugin/public';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { css } from '@emotion/react';
import { uniq } from 'lodash';
import type { IndexPatternManagmentContext } from '../../../types';
import { createEditIndexPatternPageStateContainer } from '../edit_index_pattern_state_container';
import {
Expand All @@ -51,7 +52,7 @@ import { SourceFiltersTable } from '../source_filters_table';
import { IndexedFieldsTable } from '../indexed_fields_table';
import { ScriptedFieldsTable } from '../scripted_fields_table';
import { RelationshipsTable } from '../relationships_table';
import { getTabs, getPath, convertToEuiFilterOptions } from './utils';
import { getTabs, getPath, convertToEuiSelectableOptions, getNewSelectedValues } from './utils';
import { getFieldInfo } from '../../utils';
import { useStateSelector } from '../../../management_app/state_utils';

Expand All @@ -73,12 +74,6 @@ interface TabsProps extends Pick<RouteComponentProps, 'history' | 'location'> {
isRefreshing?: boolean;
}

interface FilterItems {
value: string;
name: string;
checked?: FilterChecked;
}

const searchAriaLabel = i18n.translate(
'indexPatternManagement.editIndexPattern.fields.searchAria',
{
Expand Down Expand Up @@ -158,14 +153,14 @@ const refreshTooltip = i18n.translate('indexPatternManagement.editDataView.refre
defaultMessage: 'Refresh local copy of data view field list',
});

const SCHEMA_ITEMS: FilterItems[] = [
const SCHEMA_ITEMS: EuiSelectableOption<{ value: string }>[] = [
{
value: 'runtime',
name: schemaOptionRuntime,
label: schemaOptionRuntime,
},
{
value: 'indexed',
name: schemaOptionIndexed,
label: schemaOptionIndexed,
},
];

Expand Down Expand Up @@ -208,27 +203,22 @@ export const Tabs: React.FC<TabsProps> = ({
}>({});
const [scriptedFieldLanguageFilter, setScriptedFieldLanguageFilter] = useState<string[]>([]);
const [isScriptedFieldFilterOpen, setIsScriptedFieldFilterOpen] = useState(false);
const [indexedFieldTypeFilter, setIndexedFieldTypeFilter] = useState<string[]>([]);
const [isIndexedFilterOpen, setIsIndexedFilterOpen] = useState(false);
const [schemaFieldTypeFilter, setSchemaFieldTypeFilter] = useState<string[]>([]);
const [isSchemaFilterOpen, setIsSchemaFilterOpen] = useState(false);
const fields = useStateSelector(dataViewMgmtService.state$, fieldsSelector);
const indexedFieldTypes = convertToEuiFilterOptions(
useStateSelector(dataViewMgmtService.state$, indexedFieldTypeSelector)
);
const scriptedFieldLanguages = useStateSelector(
dataViewMgmtService.state$,
scriptedFieldLangsSelector
);
const closeEditorHandler = useRef<() => void | undefined>();
const { DeleteRuntimeFieldProvider } = dataViewFieldEditor;

const [isIndexedFilterOpen, setIsIndexedFilterOpen] = useState(false);
const [indexedFieldTypeFilter, setIndexedFieldTypeFilter] = useState<string[]>([]);
const indexedFieldTypes = useStateSelector(dataViewMgmtService.state$, indexedFieldTypeSelector);
const filteredIndexedFieldTypeFilter = useMemo(() => {
return indexedFieldTypeFilter.filter((fieldType) =>
indexedFieldTypes.some((item) => item.value === fieldType)
);
}, [indexedFieldTypeFilter, indexedFieldTypes]);

const [schemaFieldTypeFilter, setSchemaFieldTypeFilter] = useState<string[]>([]);
const [isSchemaFilterOpen, setIsSchemaFilterOpen] = useState(false);
const filteredSchemaFieldTypeFilter = useMemo(() => {
return uniq(
schemaFieldTypeFilter.filter((schemaFieldType) =>
Expand All @@ -237,6 +227,10 @@ export const Tabs: React.FC<TabsProps> = ({
);
}, [schemaFieldTypeFilter]);

const fields = useStateSelector(dataViewMgmtService.state$, fieldsSelector);
const closeEditorHandler = useRef<() => void | undefined>();
const { DeleteRuntimeFieldProvider } = dataViewFieldEditor;

const updateTab = useCallback(
(tab: Pick<EuiTabbedContentTab, 'id'>) => {
syncingStateFunc.setCurrentTab?.(tab.id);
Expand Down Expand Up @@ -338,27 +332,19 @@ export const Tabs: React.FC<TabsProps> = ({
isOpen={isIndexedFilterOpen}
closePopover={() => setIsIndexedFilterOpen(false)}
>
{indexedFieldTypes.map((item) => {
const isSelected = filteredIndexedFieldTypeFilter.includes(item.value);
return (
<EuiFilterSelectItem
checked={isSelected ? 'on' : undefined}
key={item.value}
onClick={() => {
updateFieldTypeFilter(
isSelected
? filteredIndexedFieldTypeFilter.filter((f) => f !== item.value)
: [...filteredIndexedFieldTypeFilter, item.value]
);
}}
data-test-subj={`indexedFieldTypeFilterDropdown-option-${item.value}${
isSelected ? '-checked' : ''
}`}
>
{item.name}
</EuiFilterSelectItem>
);
})}
<EuiSelectable
data-test-subj="indexedFieldTypeSelectable"
options={convertToEuiSelectableOptions(
indexedFieldTypes,
filteredIndexedFieldTypeFilter
)}
onChange={(newOptions) => {
const [newSelectedValues] = getNewSelectedValues(newOptions);
updateFieldTypeFilter(newSelectedValues);
}}
>
{(list) => <div css={selectStyles}>{list}</div>}
</EuiSelectable>
</EuiPopover>
<EuiPopover
anchorPosition="downCenter"
Expand All @@ -380,27 +366,19 @@ export const Tabs: React.FC<TabsProps> = ({
isOpen={isSchemaFilterOpen}
closePopover={() => setIsSchemaFilterOpen(false)}
>
{SCHEMA_ITEMS.map((item) => {
const isSelected = filteredSchemaFieldTypeFilter.includes(item.value);
return (
<EuiFilterSelectItem
checked={isSelected ? 'on' : undefined}
key={item.value}
onClick={() => {
updateSchemaFieldTypeFilter(
isSelected
? filteredSchemaFieldTypeFilter.filter((f) => f !== item.value)
: [...filteredSchemaFieldTypeFilter, item.value]
);
}}
data-test-subj={`schemaFieldTypeFilterDropdown-option-${item.value}${
isSelected ? '-checked' : ''
}`}
>
{item.name}
</EuiFilterSelectItem>
);
})}
<EuiSelectable
data-test-subj="schemaTypeSelectable"
options={convertToEuiSelectableOptions(
SCHEMA_ITEMS,
filteredSchemaFieldTypeFilter
)}
onChange={(newOptions) => {
const [newSelectedValues] = getNewSelectedValues(newOptions);
updateSchemaFieldTypeFilter(newSelectedValues);
}}
>
{(list) => <div css={selectStyles}>{list}</div>}
</EuiSelectable>
</EuiPopover>
</EuiFilterGroup>
</EuiFlexItem>
Expand Down Expand Up @@ -472,27 +450,19 @@ export const Tabs: React.FC<TabsProps> = ({
isOpen={isScriptedFieldFilterOpen}
closePopover={() => setIsScriptedFieldFilterOpen(false)}
>
{scriptedFieldLanguages.map((item, index) => (
<EuiFilterSelectItem
checked={item.checked}
key={item.value}
onClick={() => {
// this does the filtering
setScriptedFieldLanguageFilter(
item.checked
? scriptedFieldLanguageFilter.filter((f) => f !== item.value)
: [...scriptedFieldLanguageFilter, item.value]
);
// updates the UI
dataViewMgmtService.setScriptedFieldLangSelection(index);
}}
data-test-subj={`scriptedFieldLanguageFilterDropdown-option-${item.value}${
item.checked ? '-checked' : ''
}`}
>
{item.name}
</EuiFilterSelectItem>
))}
<EuiSelectable
data-test-subj="scriptedFieldLanguageSelectable"
options={convertToEuiSelectableOptions(
scriptedFieldLanguages,
scriptedFieldLanguageFilter
)}
onChange={(newOptions) => {
const [newSelectedValues] = getNewSelectedValues(newOptions);
setScriptedFieldLanguageFilter(newSelectedValues);
}}
>
{(list) => <div css={selectStyles}>{list}</div>}
</EuiSelectable>
</EuiPopover>
</EuiFilterGroup>
</EuiFlexItem>
Expand All @@ -501,14 +471,13 @@ export const Tabs: React.FC<TabsProps> = ({
);
},
[
dataViewMgmtService,
fieldFilter,
filteredSchemaFieldTypeFilter,
filteredIndexedFieldTypeFilter,
indexedFieldTypes,
isIndexedFilterOpen,
scriptedFieldLanguageFilter,
scriptedFieldLanguages,
scriptedFieldLanguageFilter,
isScriptedFieldFilterOpen,
isSchemaFilterOpen,
openFieldEditor,
Expand Down Expand Up @@ -703,3 +672,7 @@ export const Tabs: React.FC<TabsProps> = ({
/>
);
};

const selectStyles = css({
width: 150,
});
51 changes: 39 additions & 12 deletions ...rm/plugins/shared/data_view_management/public/components/edit_index_pattern/tabs/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
*/

import type { Dictionary } from 'lodash';
import { countBy, defaults, uniq } from 'lodash';
import { countBy, defaults } from 'lodash';
import { i18n } from '@kbn/i18n';
import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
import type { FilterChecked } from '@elastic/eui';
import type { EuiSelectableOption } from '@elastic/eui';
import {
TAB_INDEXED_FIELDS,
TAB_SCRIPTED_FIELDS,
Expand Down Expand Up @@ -131,15 +131,42 @@ export function getPath(field: DataViewField, indexPattern: DataView) {
return `/dataView/${indexPattern?.id}/field/${encodeURIComponent(field.name)}`;
}

export function convertToEuiFilterOptions(options: string[]) {
return uniq(options).map<{
value: string;
name: string;
checked?: FilterChecked;
}>((option) => {
return {
value: option,
name: option,
};
export type OptionWithValue = EuiSelectableOption<{ value: string }>;

export function convertToEuiSelectableOptionsFromArray(options: string[]): OptionWithValue[] {
return options.map((option) => ({
value: option,
label: option,
'data-test-subj': `selectable-option-${option}`,
}));
}

export function convertToEuiSelectableOptions(
options: OptionWithValue[],
selectedOptions: string[]
): OptionWithValue[] {
return options.map((option) => ({
value: option.value,
label: option.label,
checked: selectedOptions.some((value) => value === option.value) ? 'on' : undefined,
'data-test-subj': `selectable-option-${option.value}`,
}));
}

export function getNewSelectedValues<T extends { value: string; checked?: string | undefined }>(
options: Array<T>,
selectedOptions?: string[]
): [string[], number] {
const newSelectedOptions = options
.filter((option) => option.checked === 'on')
.map((option) => option.value);

if (!selectedOptions) return [newSelectedOptions, -1];

const newSelectedIndex = options.findIndex((option) => {
if (option.checked !== 'off') return false;
return selectedOptions.includes(option.value);
});

return [newSelectedOptions, newSelectedIndex];
}
Loading