[Lens] Improve field dropdown readability

[ghudgins]

Describe the feature:
When My field names are very long (a certain telemetry environment comes to mind)
I need To see the beginning AND the end of fields
So I can make a choice less painfully

Workaround today - you can hover over a field in the dropdown and get the browser-powered tooltip to see the full field name. There is no way to see what field the system is configured to use without first opening the dropdown and doing this hover and sometimes, if the index pattern is huge, the dropdown doesn't open to the position of the selected field until some data is returned from elasticsearch / kibana

Describe a specific use case for the feature:
Long field names that differ slightly in the last portion are difficult to read -

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[wylieconlon]

I think we have two main options here:

1. Use a custom renderOption function to do our own rendering of each item in the list, which we currently leave to the EUI defaults
2. Contribute a feature to EUI to prevent truncation or to use middle truncation, and then use this feature.

My preference is to contribute this to EUI so that we can use this feature across Kibana, since it comes up frequently with long field names.

[flash1293]

We already use renderOption for this for the icons:

kibana/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/field_select.tsx

Line 209 in 5da47f8

renderOption={(option, searchValue) => {

[ghudgins]

during planning we decided to move forward with ... in the middle over other solutions options (multi line, wider combobox).

[ghudgins]

lets do the fix in Kibana for now and propose changes to EUI based on what we learn

[mbondyra]

I started working on this one, but unfortunately I think it's impossible to fix it outside of EUI.
The property label that we pass to EUI is used both for creating a label in the list, but also for the tooltip text.

I'll propose the changes directly to eui by adding an extra prop middleTruncate.

[wylieconlon]

@mbondyra I agree that a middleTruncate option in EUI is the best long-term goal, since this logic will probably be used in more than one place. But I think that since we have a custom renderOption already we should be able to test the behavior in Lens first.

[mbondyra]

@wylieconlon thanks for your comment, renderOption allows displaying the options with truncating in the middle, but it does not work with the selected option. That looks inconsistent and I am not sure if we want to merge this in this form cc @ghudgins .

[ghudgins]

That looks inconsistent and I am not sure if we want to merge this in this form

@MichaelMarcialis what do you think about that inconsistency? could we do this change just in the dropdown but not the selected value for the minor improvement it provides? Sounds like the alternative is wait for EUI which could be longer

[MichaelMarcialis]

That looks inconsistent and I am not sure if we want to merge this in this form

@MichaelMarcialis what do you think about that inconsistency? could we do this change just in the dropdown but not the selected value for the minor improvement it provides? Sounds like the alternative is wait for EUI which could be longer

I'm personally fine with the notion of implementing the proposed partial/bandaid fix to give middle truncation to the dropdown options, even if it is temporarily inconsistent with the selected item truncation. It's an improvement on something that is potentially problematic at the moment, so that's a win in my book. As long we can easily change to the official EUI fix when that gets implemented in the future, I say go for it.