[Discover] Improve HTML formatting of fields with a list of values

[davismcphee]

Summary

This PR improves HTML formatting of fields with a list of values to help differentiate between long numbers and numeric arrays. These changes were made:

• Array values now include brackets in addition to commas.
• Array brackets and commas are highlighted grey to make it clear they aren't part of the value.
• For arrays that include values with newlines, the brackets are placed on their own lines and the array content is indented to improve appearance.

Discover grid:

Expanded document:

Resolves #135357.

Checklist

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

[kertal]

Code LGTM, this is a nice little big improvement , thank you 🙏 ... tested a-la-carte and works as expected. Just one note, the text in the PR doesn't mention what was changed (like added fancy brackets). this could be added

[davismcphee]

Code LGTM, this is a nice little big improvement , thank you 🙏 ... tested a-la-carte and works as expected. Just one note, the text in the PR doesn't mention what was changed (like added fancy brackets). this could be added

Good call, summary updated to include changes.

[andreadelrio]

Nice improvement, LGTM.

[Dosant]

LGTM,

I come up with this edge case, 3 values, but look like 5 (except subtle color difference in commas) :

But I don't think this is a blocker, since we had same edge case in main and overall changes makes formatting better

[kertal]

LGTM,

I come up with this edge case, 3 values, but look like 5 (except subtle color difference in commas) :

But I don't think this is a blocker, since we had same edge case in main and overall changes makes formatting better

this is a neat edge case @Dosant , also do agree it shouldn't block, but it's good to be aware of this 👍 . BTW there are no plans to add React based formatters which would e.g. allow expand/collapse such a list in UI, are there?

[kertal]

@elasticmachine merge upstream

[Dosant]

there are no plans to add React based formatters which would e.g. allow expand/collapse such a list in UI, are there?

There are no plans, but there is this bug in the backlog: #75729, which I think could be fixed with some kind of React-based formatter where internally it updates with an interval

Another use-case I had in mind is that we possibly could use lazy-loading inside such React-based formatter and stop loading some of those heavy formatting functions into the initial bundle with all the formatters

I think it is worth at least creating an issue even if this won't be escalated soon

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: c4ec410
• Storybooks Preview

Failed CI Steps

• FTR Configs #30

Test Failures

• [job] [logs] FTR Configs #30 / machine learning - data visualizer index based actions panel on trial license view in discover page action loads the source data in the data visualizer

Metrics [docs]

Page load bundle

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

id	before	after	diff
fieldFormats	45.0KB	45.3KB	+291.0B

History

• 💚 Build #59718 succeeded ebebb66
• 💚 Build #59235 succeeded e6c388d
• 💚 Build #58895 succeeded 6731fa3

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

cc @davismcphee

[davismcphee]

I come up with this edge case, 3 values, but look like 5 (except subtle color difference in commas) :

Oh yeah, good catch. I guess to the very keen eye the comma colours could help, but definitely not ideal. This will be good to keep in mind if we later go the React direction.