## Summary Fixes https://github.com/elastic/kibana/issues/105731, by replacing these `any` types: ```json type IFieldType = any; type IIndexPattern = any; type Filter = any; ``` With the types from `es-query` which are: * IndexPatternFieldBase * IndexPatternBase * Filter Note: I had to do a few creative casting to avoid having to use `FieldSpec` since that is not within the package `es-query` and is not planned to be within that package or another package for at least a while if ever. ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios Co-authored-by: Frank Hassanabad <frank.hassanabad@elastic.co>
4.9 KiB
Autocomplete Fields
Need an input that shows available index fields? Or an input that autocompletes based on a selected indexPattern field? Bingo! That's what these components are for. They are generalized enough so that they can be reused throughout and repurposed based on your needs.
All three of the available components rely on Eui's combo box.
useFieldValueAutocomplete
This hook uses the kibana services.data.autocomplete.getValueSuggestions()
service to return possible autocomplete fields based on the passed in indexPattern
and selectedField
.
FieldComponent
This component can be used to display available indexPattern fields. It requires an indexPattern to be passed in and will show an error state if value is not one of the available indexPattern fields. Users will be able to select only one option.
The onChange
handler is passed IndexPatternFieldBase[]
.
<FieldComponent
placeholder={i18n.FIELD_PLACEHOLDER}
indexPattern={indexPattern}
selectedField={selectedField}
isLoading={isLoading}
isClearable={isClearable}
onChange={handleFieldChange}
/>
OperatorComponent
This component can be used to display available operators. If you want to pass in your own operators, you can use operatorOptions
prop. If a operatorOptions
is provided, those will be used and it will ignore any of the built in logic that determines which operators to show. The operators within operatorOptions
will still need to be of type OperatorOption
.
If no operatorOptions
is provided, then the following behavior is observed:
- if
selectedField
type isboolean
, onlyis
,is not
,exists
,does not exist
operators will show - if
selectedField
type isnested
, onlyis
operator will show - if not one of the above, all operators will show (see
operators.ts
)
The onChange
handler is passed OperatorOption[]
.
<OperatorComponent
placeholder={i18n.OPERATOR_PLACEHOLDER}
selectedField={selectedField}
operator={selectedOperator}
isDisabled={iDisabled}
isLoading={isLoading}
isClearable={isClearable}
onChange={handleOperatorChange}
/>
AutocompleteFieldExistsComponent
This field value component is used when the selected operator is exists
or does not exist
. When these operators are selected, they are equivalent to using a wildcard. The combo box will be displayed as disabled.
<AutocompleteFieldExistsComponent placeholder={i18n.EXISTS_VALUE_PLACEHOLDER} />
AutocompleteFieldListsComponent
This component can be used to display available large value lists - when operator selected is is in list
or is not in list
. It relies on hooks from the lists
plugin. Users can only select one list and an error is shown if value is not one of available lists.
The selectedValue
should be the id
of the selected list.
This component relies on selectedField
to render available lists. The reason being that it relies on the selectedField
type to determine which lists to show as each large value list has a type as well. So if a user selects a field of type ip
, it will only display lists of type ip
.
The onChange
handler is passed ListSchema
.
<AutocompleteFieldListsComponent
selectedField={selectedField}
placeholder={i18n.FIELD_LISTS_PLACEHOLDER}
selectedValue={id}
isLoading={isLoading}
isDisabled={iDisabled}
isClearable={isClearable}
onChange={handleFieldListValueChange}
/>
AutocompleteFieldMatchComponent
This component can be used to allow users to select one single value. It uses the autocomplete hook to display any autocomplete options based on the passed in indexPattern
, but also allows a user to add their own value.
It does some minor validation, assuring that field value is a date if selectedField
type is date
, a number if selectedField
type is number
, an ip if selectedField
type is ip
.
The onChange
handler is passed selected string
.
<AutocompleteFieldMatchComponent
placeholder={i18n.FIELD_VALUE_PLACEHOLDER}
selectedField={selectedField}
selectedValue={value}
isDisabled={iDisabled}
isLoading={isLoading}
isClearable={isClearable}
indexPattern={indexPattern}
onChange={handleFieldMatchValueChange}
/>
AutocompleteFieldMatchAnyComponent
This component can be used to allow users to select multiple values. It uses the autocomplete hook to display any autocomplete options based on the passed in indexPattern
, but also allows a user to add their own values.
It does some minor validation, assuring that field values are a date if selectedField
type is date
, numbers if selectedField
type is number
, ips if selectedField
type is ip
.
The onChange
handler is passed selected string[]
.
<AutocompleteFieldMatchAnyComponent
placeholder={i18n.FIELD_VALUE_PLACEHOLDER}
selectedField={selectedField}
selectedValue={values}
isDisabled={false}
isLoading={isLoading}
isClearable={false}
indexPattern={indexPattern}
onChange={handleFieldMatchAnyValueChange}
/>