[EuiDataGrid] Introduce renderCustomToolbar, additionalDisplaySettings and allowResetButton customization options

[jughosta]

• Resolves [EuiDataGrid] Add renderCustomToolbar render prop #7147
• Resolves [EuiDataGrid] Allow to add custom settings to the grid settings popover #7077
• Addresses [EuiDataGrid] Reset internal state of row height / density popover when props change  #5593

The initial work was done in #7148 by @timductive and @kertal

Summary

This PR allows more customization options for the grid toolbar.

1. Full customization for the toolbar is now possible via the new renderCustomToolbar prop on EuiDataGrid by returning a completely custom react element:

https://github.com/jughosta/eui/blob/render-custom-toolbar/src/components/datagrid/data_grid_types.ts#L50

renderCustomToolbar={() => {
    return <div>Totally custom toolbar</div>;
  }}

2. It's now possible to render additional elements inside the display settings popover and also hide the reset button

https://github.com/jughosta/eui/blob/render-custom-toolbar/src/components/datagrid/data_grid_types.ts#L872-L879

toolbarVisibility={{
  showDisplaySelector: {
    allowResetButton: false,
    additionalDisplaySettings: <div>extra settings</div>,
  },
}}

An example can be found under /tabular-content/data-grid-toolbar#custom-toolbar-layout

Regarding a new design for the default toolbar buttons, I think we could address it in a separate PR.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
    - [ ] Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
    - [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • Updated the Figma library counterpart

[jughosta]

Hi @cee-chen @kertal @timductive,

I am continuing the work which was started in #7148 but decided to create a new PR as it would be easier for me to followup on changes.

Would be great to get an early feedback! I still need to add more tests.

[cee-chen]

Hey @jughosta, thank you for this PR! As a heads up I was a little swamped today and ended up not having time to review. I'm planning on making it a priority for my Monday to review this PR.

[jughosta]

I removed exposing density and rowHeight controls as I am not planning to directly use them in Discover. Having additionalDisplaySettings looks cleaner to me than reimplementing the whole popover on a consumer side.

[cee-chen]

++ agreed, good call on this Julia!

[cee-chen]

I'm a little marginal on the left/right options - if someone's rendering a custom toolbar, I expect them to take it over fully and for rendering responsibility to be fully on the consumer rather than remaining partially on EUI. I'd rather not have an in-between state.

@jughosta Do you mind diving a bit into the use-case you see for left/right replacement?

[jughosta]

@cee-chen I am going to work on Discover side for it today and will provide more details later.

[cee-chen]

👍 LMK if I can help at all! If possible, I would prefer consumers to do something like this:

({ hasRoomForGridControls }) => (
  <EuiFlexGroup responsive={false} gutterSize="s" justifyContent="spaceBetween">
    <EuiFlexItem grow={false}>
      {/* Left side controls, possibly behind a `hasRoomForGridControls` conditional */}
    </EuiFlexItem>
    <EuiFlexItem grow={false}>
      {/* Right side controls */}
    </EuiFlexItem>
  </EuiFlexGroup>
)

[jughosta]

@cee-chen Thanks! I applied your suggestion 84eb5fd

You are right, it's relatively simple to recreate the layout which would be similar to the Eui default one. Changed this in the demo code too.

[cee-chen]

I think those are most of my higher-level comments Julia! Apologies for the mix of architectural comments and nits, the primary 2 blocking comments I have are around the left/right object API and the extra non-Control props being passed back via the render callback.

Quick FYI, I'll skip reviewing tests and documentation for now until we've settled on a more finalized API.

[cee-chen]

These are seriously great tests. Thank you for them!!

[cee-chen]

@kertal @timductive @jughosta Thank you for the seriously amazing PR!! :) Very in awe of your test writing skills and a huge 👏 for the clean-reading code.

I sincerely apologize for taking so long to get to back to this PR, last week was super busy. I had some very minor cleanup feedback and a docs related pass that I opted to push up directly to your branch to save y'all time and so we can get this work in for next week's release. LMK if you have any issues with the changes, otherwise I'll merge this in on Monday.

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7190/
• Storybook: https://eui.elastic.co/pr_7190/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: ab6e553

History

• 💚 Build #688 succeeded 29c5061
• 💚 Build #657 succeeded b59347e
• 💚 Build #655 succeeded 8500388
• 💚 Build #646 succeeded 84eb5fd
• 💚 Build #638 succeeded b7d012a
• 💚 Build #616 succeeded 228220b