[Maps] Fix long field truncation on Comboboxes

[mbondyra]

Summary

Fixes #171509 (fixed in all the places in maps)

Adds middle truncation and combobox auto-expansion to the content to approximate of 60 character maximum for SingleFieldSelect and FieldSelect components in maps.
I removed custom renderOption prop so the combobox can take care of the proper truncation while searching through the fields. One case I had to hack was to display a tooltip for a disabled state. I used prepend and some custom styling to do so - it works as before (check out the screenshot below).

FieldSelect component before

FieldSelect component after

SingleFieldSelect component before

SingleFieldSelect component after

disabled state

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[nreese]

Does this mean the tooltip is only on prepend icon? Is there any way to keep the tooltip on the entire value? Could renderOption still be used?

[mbondyra]

it is not, it happens inside the entire value because of the custom css we place there. It works exactly as before. We cannot use renderOption if we want to take advantage of internal combobox truncation.

[nreese]

How difficult is it to do the truncation in renderOptions? I think its important to keep the tooltip target over the entire text, otherwise, its really difficult to trigger.

[mbondyra]

This is how it works, sorry I wasn't clear before. I agree it's important to keep the tooltip target over the entire text and it is kept this way in this PR. Right now it doesn't make sense to do the truncation in renderOption because the implementation is not straightforward and it's complex (the problem is not truncation but proper selecting text when searching through it). Please take a look at this video:

Screen.Recording.2023-11-28.at.20.38.49.mov

[nreese]

Thanks for clarifying

[nreese]

kibana-gis changes LGTM. Thanks for putting this fix together. Really appreciate it!
code review and tested in chrome

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: c776a27

Failed CI Steps

• Defend Workflows Cypress Tests on Serverless #6

Test Failures

• [job] [logs] Defend Workflows Cypress Tests on Serverless #6 / Response console Execute operations: "execute --command" - should execute a command "execute --command" - should execute a command

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
maps	1093	1097	+4

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
maps	2.9MB	2.9MB	+432.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
maps	46.7KB	46.9KB	+117.0B

History

• 💛 Build #179640 was flaky b942da0
• 💛 Build #179509 was flaky 40503c7
• 💔 Build #179117 failed ff83ba6
• 💛 Build #178394 was flaky 2c9ab60
• 💔 Build #178361 failed c8e166c

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream