[Discover] Improve document explorer flyout

[dimaanj]

Summary

Closes #104339

This PR improves UI for document explorer and single doc view and adds:

• search for field names
• pagination
• ability to pin fields (except single doc view).

Previous state of pinned fields will be persisted per each data view. On single document view pinned fields will not be displayed. Previous search text and page size setting will also be persisted.

From performance perspective, with this changes described above now it's much faster to navigate through a large number of fields using search, pagination. Pinned fields always visible on the top of the table.

Checklist

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

[andreadelrio]

I would suggest that we try grouping the available actions (now 5) into a centralized "actions" button

Ideally the actions column would come last (that's the location it gets in the EuiTable and EuiDataGrid examples).

[kertal]

It's a nice suggestion. Think we should display them first, because last time we changed position we had to roll it back. (for people with very large screens)

I would suggest that we try grouping the available actions (now 5) into a centralized "actions" button

[elasticmachine]

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

[andreadelrio]

@dmitriynj I've been trying to get this running locally to review but no luck so far. Can you please post an image of how this menu looks when a field has been pinned and the user clicks on the menu?

[kertal]

@elasticmachine merge upstream

[kertal]

also the a-la-carte deployment fails due to Error: Cannot find module '@kbn/apm-config-loader' that's odd

[majagrubic]

@andreadelrio @dmitriynj I like grouping of the actions, but I don't like the current icon - it feels like something is still loading and we're waiting on results. any chance we can choose a different icon?

[dimaanj]

Can you please post an image of how this menu looks when a field has been pinned and the user clicks on the menu?

[dimaanj]

Any chance we can choose a different icon?

One option I see is color primary.

[kertal]

Love it, having search and pinning is very useful, here are my first remarks while playing with it:

[dimaanj]

@elasticmachine merge upstream

[kertal]

@elasticmachine merge upstream

[dimaanj]

@elasticmachine merge upstream

[kertal]

While testing I noticed a strange behavior in Firefox: Pinning of field seems doesn't seem to be persisted? In Chrome and Safari it works great.

Screen.Recording.2021-12-20.at.12.27.50.PM.mp4

BTW: I'd suggest setting the title to [Discover] Improve document explorer flyout and mention the performance improvements when having a large field number + search + pinning in the description.

[kertal]

While testing I noticed a strange behavior in Firefox: Pinning of field seems doesn't seem to be persisted? In Chrome and Safari it works great.
Ok, now I know why it didn't work. in local storage, Firefox had the following value stored:

this was returned and decoded as a string, that's why updating didn't work. I guess the implementation of the storage changed during the implementation? that's why it didn't work with 'legacy' stored value?

[dimaanj]

Ok, now I know why it didn't work. in local storage, Firefox had the following value stored:

this was returned and decoded as a string, that's why updating didn't work. I guess the implementation of the storage changed during the implementation? that's why it didn't work with 'legacy' stored value?

You are right, in that specific case the following code didn't worked correctly.

const pinnedFieldsState = storage.get(PINNED_FIELDS_KEY) || {};
storage.set(PINNED_FIELDS_KEY, Object.assign(pinnedFieldsState, { [dataViewId]: newFields }))

Since implementation was changed, pinnedFieldsState here is a string and we cannot assign any properties to string, it was always setting the same string. I have already added validation. Now, even if you change stored value manually, pinned fields anyway will be stored as a new object entry.

[dimaanj]

@elasticmachine merge upstream

[kertal]

@elasticmachine merge upstream

[kertal]

LGTM, tested again, works as expected, even with invalid data in localStorage, great work 👍

Now you're Discover Claus this year, distributing this nice 🎁
Honored to be your reindeer!

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: f6153d9
• Storybooks Preview

Test Failures

• [job] [logs] Default Firefox Tests / InfraOps App Metrics UI Home page with metrics present group nodes by custom field
• [job] [logs] OSS Misc Functional Tests / Saved Objects Management saved objects management with hidden types Delete modal should not delete the hidden objects when performing the operation

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
discover	357	360	+3

Async chunks

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

id	before	after	diff
discover	321.2KB	330.6KB	+9.4KB

Page load bundle

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

id	before	after	diff
discover	51.3KB	51.5KB	+163.0B

Unknown metric groups

async chunk count

id	before	after	diff
discover	6	8	+2

ESLint disabled line counts

id	before	after	diff
discover	33	34	+1

Total ESLint disabled count

id	before	after	diff
discover	35	36	+1

History

• 💔 Build #14524 failed c8b8346
• 💚 Build #14133 succeeded be002cc
• 💚 Build #13840 succeeded 21dc630
• 💔 Build #13641 failed d5a01d5
• 💔 Build #13385 failed 37a822c

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

cc @dmitriynj