[Discover] Allow to select/deselect all rows in the grid at once

[jughosta]

• Closes [Discover] Add action to select all documents #175943

Summary

This PR adds a checkbox which allows now to select all rows at once (or deselect all) on the current page.

• A new checkbox was added to the grid header
• "Compare documents" button was moved under "Selected" menu
• "Compare documents" button gets disabled if user selects more than 100 rows
• "Selected" menu button got a new look
• A new "Select all X" button was added next too "Selected" menu button

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
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

[jughosta]

/ci

[jughosta]

Hi @andreadelrio,

What UX would you suggest here: select all loaded rows or only rows on the current page? If it's the second, how would we allow selecting rows on other pages?

(low prio)

[kertal]

adding also @MichaelMarcialis to the loop, currently working on data table stuff

[MichaelMarcialis]

Thanks for the ping. This addition generally makes sense, though I did have a few questions:

• Is there any concern (performance or otherwise) about users potentially selecting an excessive amount of events/documents and then comparing them?
• All selected event/document actions are housed in the "Selected" menu, except for the "Compare" action. Should compare be moved into this menu as well? Or is there a compelling reason to separate it?

What UX would you suggest here: select all loaded rows or only rows on the current page? If it's the second, how would we allow selecting rows on other pages?

I would suggest that it should select all rows on the current page, not only the loaded rows (as that would likely confuse users). As for existing patterns for selecting items on other pages, I would suggest revealing a conditional action adjacent to the current selection options that allows users to select everything on all pages, similar to how our table UX patterns suggest.

[kertal]

• Is there any concern (performance or otherwise) about users potentially selecting an excessive amount of events/documents and then comparing them?

I've tested it here, and on my M1 MacBook Pro, 2021, comparing 500 docs is not a big problem

https://kertal-pr-184241-175943-select-all-rows.kbndev.co/app/discover

However it doesn't make much sense, and if we want to be safe on performance side, we could e.g. disable comparing after selecting X documents, FYI @davismcphee

• All selected event/document actions are housed in the "Selected" menu, except for the "Compare" action. Should compare be moved into this menu as well? Or is there a compelling reason to separate it?

I think it started as a part of the "Selected" menu, but was moved to a separate button during the review of #166577

[davismcphee]

However it doesn't make much sense, and if we want to be safe on performance side, we could e.g. disable comparing after selecting X documents

I agree it doesn't make sense to compare 500 docs at once. We could disable comparing entirely when selecting a lot of docs as you mentioned, although currently we already limit the number of comparison fields to 100 and display a banner, so maybe we could take a similar approach here with something like 20-30 docs?

All selected event/document actions are housed in the "Selected" menu, except for the "Compare" action. Should compare be moved into this menu as well? Or is there a compelling reason to separate it?

We originally had it that way, but as @kertal mentioned it was suggested to move it to a dedicated button during the PR review, mainly for feature visibility.

Also ++ to selecting the entire page and offering a secondary option to select all loaded docs.

[jughosta]

@MichaelMarcialis @davismcphee @kertal

Thanks for your suggestions!
I updated the logic to select/deselect docs only on the current page.

Regarding an option to select all others, should we try to fit it in the grid toolbar? Can we add this action to the "Selected" menu instead?

[jughosta]

Updated "Compare" button:

[davismcphee]

Code changes look good and it works great! Much nicer for selecting lots of docs, LGTM 👍

[MichaelMarcialis]

Thanks for putting this together, @jughosta. It looks great!

The only thing that stood out to me in my testing was that the "Select all X" button shows even if only a single document is selected on the current page. Would it be possible to change this behavior so that the "Select all X" button only appears when all documents on the current page have been selected? Doing so would more closely follow the table bulk selection patterns we try to follow.

Otherwise, everything else looks good from my perspective. Assuming you're able to address my comment above, I'll approve now so I don't hold you up further. Thanks again!

[wayneseymour]

LGTM, cr only.

[jughosta]

@MichaelMarcialis Thanks for the review! Updated.

QQ: If user selects all rows on the current page, then we show "Select all X" button. Should we hide it when user navigates to another page?

[MichaelMarcialis]

QQ: If user selects all rows on the current page, then we show "Select all X" button. Should we hide it when user navigates to another page?

Good question. I'm inclined to say no, we should continue to show the "Select all X" button in that case. Amending my previous rule condition, we should only show the "Select all X" button if the user has selected all rows on one or more pages (even if that selection is not the currently viewed page).

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: d5017b9

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
cloudSecurityPosture	692	693	+1
discover	958	959	+1
esqlDataGrid	407	408	+1
lens	1490	1491	+1
logsExplorer	609	610	+1
securitySolution	5623	5624	+1
slo	866	867	+1
total			+7

Async chunks

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

id	before	after	diff
cloudSecurityPosture	455.3KB	459.8KB	+4.5KB
discover	822.8KB	827.4KB	+4.6KB
esqlDataGrid	117.9KB	122.5KB	+4.5KB
logsExplorer	247.2KB	247.2KB	+34.0B
securitySolution	20.5MB	20.5MB	+17.8KB
slo	878.5KB	883.0KB	+4.6KB
total			+36.0KB

History

• 💛 Build #224796 was flaky 78b885f
• 💔 Build #224768 failed b9c1a7c
• 💔 Build #224699 failed d490ef4
• 💔 Build #224672 failed de39fc4
• 💚 Build #224571 succeeded f123193
• 💛 Build #224281 was flaky 22a4b03

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

cc @jughosta

[michaelolo24]

🎉 Looks good!