[ES3][Connectors]Using EuiComboBox with searchable capability as we do in ESS #199464
Conversation
JoseLuisGJ
changed the title
JoseLuisGJ
added
release_note:skip
|
@elasticmachine merge upstream |
|
@elasticmachine merge upstream |
x-pack/plugins/serverless_search/public/application/components/connectors/edit_service_type.tsx
Outdated
Show resolved
Hide resolved
x-pack/plugins/serverless_search/public/application/components/connectors/edit_service_type.tsx
Outdated
Show resolved
Hide resolved
| // We only want to allow people to set the service type once to avoid weird conflicts | ||
| isDisabled={Boolean(connector.service_type) || isDisabled} | ||
| isLoading={isLoading} | ||
| data-test-subj="serverlessSearchEditConnectorTypeChoices" |
There was a problem hiding this comment.
I think this is fine, but we should watch out for this change breaking the connectors synthetic tests.
| mutate(allConnectors[keySelected].serviceType); | ||
| }} | ||
| renderOption={renderOption} | ||
| rowHeight={(euiTheme.base / 2) * 5} |
There was a problem hiding this comment.
nitpick, none of the stock sizes are close to what we need?
There was a problem hiding this comment.
Not really, I tried back and forth but this is the most accurate value we should use
x-pack/plugins/serverless_search/public/application/components/connectors/edit_service_type.tsx
Outdated
Show resolved
Hide resolved
| contentClassName: string | ||
| ) => { | ||
| const { _append, key, label, _prepend, serviceType } = | ||
| option as EuiComboBoxOptionOption<OptionData> & { |
There was a problem hiding this comment.
❌ fix the type instead of casting
type ExpandedComboBoxOption = EuiComboBoxOptionOption<OptionData> & {
_append: JSX.Element[];
_prepend: JSX.Element;
serviceType: string;
};
const renderOption = (
option: ExpandedComboBoxOption,
searchValue: string,
contentClassName: string
) => {Or you can just add _append, _prepend, serviceType to OptionData
There was a problem hiding this comment.
If I add _append, _prepend, serviceType to OptionData :
interface OptionData {
secondaryContent?: string;
_append: React.ReactNode[];
_prepend: React.ReactNode;
serviceType: string;
}I run in this error: Property '_append' does not exist on type 'EuiComboBoxOptionOption<OptionData>
When:
) => {
const { _append, key, label, _prepend, serviceType } =
option as EuiComboBoxOptionOption<OptionData>;
return (There was a problem hiding this comment.
If I fix the type. I get this error:
No overload matches this call.
Overload 1 of 2, '(props: _EuiComboBoxProps<OptionData>): EuiComboBox<OptionData>', gave the following error.
Type '(option: ExpandedComboBoxOption, searchValue: string, contentClassName: string) => React.JSX.Element' is not assignable to type '(option: EuiComboBoxOptionOption<OptionData>, searchValue: string, OPTION_CONTENT_CLASSNAME: string) => ReactNode'.
Types of parameters 'option' and 'option' are incompatible.
Type 'EuiComboBoxOptionOption<OptionData>' is not assignable to type 'ExpandedComboBoxOption'.
Type 'EuiComboBoxOptionOption<OptionData>' is missing the following properties from type '{ _append: Element[]; _prepend: Element; serviceType: string; }': _append, _prepend, serviceType
Overload 2 of 2, '(props: _EuiComboBoxProps<OptionData>, context: any): EuiComboBox<OptionData>', gave the following error.
Type '(option: ExpandedComboBoxOption, searchValue: string, contentClassName: string) => React.JSX.Element' is not assignable to type '(option: EuiComboBoxOptionOption<OptionData>, searchValue: string, OPTION_CONTENT_CLASSNAME: string) => ReactNode'.ts(2769)
Consuming the render options:
<EuiComboBox
...
renderOption={renderOption}
...
/>
x-pack/plugins/serverless_search/public/application/components/connectors/edit_service_type.tsx
Outdated
Show resolved
Hide resolved
| )} | ||
| options={initialOptions} | ||
| selectedOptions={initialOptions.filter( | ||
| (option) => option.serviceType === connector.service_type |
There was a problem hiding this comment.
It's not clear to me how to get a unique serviceType from here. I'm getting 3 items for any Jira connector selected. @sphilipse how could I apply your suggestion array.filter((item,index) => array.indexOf(item) === index)); here?
There was a problem hiding this comment.
First you have to decide what you actually want to display there. All three of these options have the same service type, because you are selecting a service type that can handle all three of these options. So maybe it's okay to display all three?
There was a problem hiding this comment.
If so, we should just display 1 Jira item in the dropdown IMO not 3. That would be more accurate and less confusing.
Currently I realised this serviceType issue is also affecting the current experience in ES3 if you watch the video choosing any Confluence (either Cloud & Server or Data Center) connector always applies the Confluence Cloud & Server in the table and the same happens choosing any Jira (either Cloud, Server or Data Center) connector it always applies the Jira Cloud
CleanShot.2024-11-13.at.14.20.54.mp4
There was a problem hiding this comment.
If so, we should just display 1 Jira item in the dropdown IMO not 3. That would be more accurate and less confusing.
I'm fine with that. I think that's how we did confluence and github in ESS, where you pick which "flavor" you want in the configuration tab, not from the tiles at creation time.
There was a problem hiding this comment.
This is what we display now in ESS for Confluence:
And this for Github:
|
@elasticmachine merge upstream |
|
@elasticmachine merge upstream |
|
@elasticmachine merge upstream |
💚 Build Succeeded
Metrics [docs]Async chunks
History
|
|
@elasticmachine merge upstream |
Summary
This PR swaps the
EuiSelectableby theEuiComboBoxcomponent as we have in ESS.Context:
This PR belongs to this initiative https://github.com/elastic/search-team/issues/8000 where we agreed on bring low hanging fruit artefacts from ESS to ES3 before being replace completly with the full new experience which will be later. Therefor we are not investing effort on make the code scalable and reusable at this point.