[EuiBasicTable][EuiInMemoryTable] Support controlled `selection` API #7321

cee-chen · 2023-10-26T20:15:07Z

Summary

The bulk of this PR is primarily docs - the actual logic change is relatively small 😅 I recommend code-reviewing the first two commits and only QAing the last [docs] commit. Feedback on the new docs copy would also be appreciated!

⚠️ This PR also marks using table refs and internal setSelection APIs as deprecated. See changelog

QA

(EuiBasicTable) Go to https://eui.elastic.co/pr_7321/#/tabular-content/tables#adding-selection-to-a-table
(Regression testing) Confirm that the uncontrolled selection still behaves as before (clicking updates the checkbox / show all checkbox, deleting users correctly deletes rows)
In the top left hand corner of the demo, click the Controlled selection switch
Confirm that the Select online users button correctly selects all non-grayed-out checkboxes on the current page, and that the delete button also shows the correct count & works
Confirm that manually clicking individual checkboxes still works as expected (should be same as the uncontrolled demo)
Repeat the above steps for EuiInMemoryTable (https://eui.elastic.co/pr_7321/#/tabular-content/in-memory-tables#in-memory-table-selection)

General checklist

Browser QA
- Checked in mobile
  ~~- [ ] Checked in both light and dark modes~~
  - [ ] 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~~

…ntrolled & uncontrolled logic - requires creating a new prop and semi custom section - + clean up and remove unnecessary table data not relevant to the demo(s)

src/components/basic_table/basic_table.test.tsx

1Copenut

Just a few suggestions for copy. Feel free to use or discard and I'll approve the PR after. Thanks @cee-chen!

src-docs/src/views/tables/selection/selection_section.js

src-docs/src/views/tables/in_memory/in_memory_selection_section.js

1Copenut

👍 LGTM!

kibanamachine · 2023-10-30T15:46:47Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7321/
Storybook: https://eui.elastic.co/pr_7321/storybook

elasticmachine · 2023-10-30T15:46:50Z

💚 Build Succeeded

Buildkite Build
Commit: fdfe1bb

History

💚 Build #935 succeeded ec7863c
💚 Build #914 succeeded 866731c
💚 Build #911 succeeded 79bff05
💔 Build #909 failed c66e386

`v89.1.0`⏩`v90.0.0` The majority of changes in this PR come from: - **EuiContextMenu** being converted to Emotion (elastic/eui#7312). If your usage of `EuiContextMenu` was significantly affected, we recommend pulling down this PR and QAing it locally. - `defaultProps` being removed from some very widespread components, particularly **EuiButton**, in anticipation of React's upcoming deprecation. (elastic/eui@b7dc9b4) **NOTE**: This only affected Enzyme snapshots, and did not affect production behavior. [Commits](https://github.com/elastic/kibana/pull/170179/commits) have been broken up by component changes as well as types of changes. --- ## [`90.0.0`](https://github.com/elastic/eui/tree/v90.0.0) - Updated the `eventColor` prop on `EuiCommentEvent` to apply the color to the entire comment header. ([#7288](elastic/eui#7288)) - Updated `EuiBasicTable` and `EuiInMemoryTable` to support a new controlled selection API: `selection.selected` ([#7321](elastic/eui#7321)) **Bug fixes** - Fixed controlled `EuiFieldNumbers` not correctly updating native validity state ([#7291](elastic/eui#7291)) - Fixed `EuiListGroupItem` to pass `style` props to the wrapping `<li>` element alongside `className` and `css`. All other props will be passed to the underlying content. ([#7298](elastic/eui#7298)) - Fixed `EuiListGroupItem`'s non-transitioned transform on hover/focus ([#7298](elastic/eui#7298)) - Fixed `EuiDataGrid`s with `gridStyle.stripes` sometimes showing buggy row striping after being sorted ([#7301](elastic/eui#7301)) - Fixed `EuiDataGrid`'s `gridStyle.rowClasses` API to not conflict with `gridStyle.stripes` if dynamically updated ([#7301](elastic/eui#7301)) - Fixed `EuiDataGrid`'s `gridStyle.rowClasses` API to support multiple space-separated classes ([#7301](elastic/eui#7301)) - Fixed `EuiInputPopover` not calling `onPanelResize` callback prop ([#7305](elastic/eui#7305)) - Fixed `EuiDualRange` incorrectly positioning highlights when rendered with `showInput="inputWithPopover"` ([#7305](elastic/eui#7305)) - Fixed `EuiTabs` incorrectly wrapping text when it should instead either scroll or truncate ([#7309](elastic/eui#7309)) - `EuiContextMenu` now renders text colors correctly when used within an `EuiBottomBar` ([#7312](elastic/eui#7312)) - Fixed the width of `EuiSuperDatePicker`'s Absolute date picker ([#7313](elastic/eui#7313)) - Fixed `EuiDataGrid` cells visually cutting off overflowing content a little too quickly ([#7320](elastic/eui#7320)) **Deprecations** - Deprecated `EuiBasicTable` and `EuiInMemoryTable`'s ref `setSelection` API. Use the new `selection.selected` API instead. ([#7321](elastic/eui#7321)) **Breaking changes** - Removed `EuiPageTemplate_Deprecated`, `EuiPageSideBar_Deprecated`, and `EuiPageContent*_Deprecated` ([#7265](elastic/eui#7265)) - Removed the `ghost` color option from `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon`. Use an `<EuiThemeProvider colorMode="dark">` wrapper and `color="text"` instead. ([#7296](elastic/eui#7296)) **Dependency updates** - Updated `refractor` to v3.6.0 ([#7127](elastic/eui#7127)) - Updated `rehype-raw` to v5.1.0 ([#7127](elastic/eui#7127)) - Updated `vfile` to v4.2.1 ([#7127](elastic/eui#7127)) **Accessibility** - `EuiContextMenu` now correctly respects reduced motion preferences ([#7312](elastic/eui#7312)) - `EuiAccordion`s no longer attempt to focus child content when the accordion is externally opened via `forceState`, but will continue to focus expanded content when users click the toggle button. ([#7314](elastic/eui#7314)) **CSS-in-JS conversions** - Converted `EuiContextMenu`, `EuiContextMenuPanel`, and `EuiContextMenuItem` to Emotion; Removed `$euiContextMenuWidth` ([#7312](elastic/eui#7312))

… controlled `selection.selected` API (#175727) ## Summary **Please help us QA your affected tables to confirm that your plugin's table selection still works as before!** EUI will shortly be removing this deprecated ref `setSelection` method in favor of the new controlled `selection.selected` prop. This PR converts Fleet's more advanced usage of controlled selection, which should not suffer any UI/UX regressions. See also: - elastic/eui#7321 - #175722 (examples of basic conversions)

…ith controlled `selection.selected` API (#175838) Closes #175836 ## Summary **Please help us QA your affected tables to confirm that your plugin's table selection still works as before!** EUI will shortly be removing this deprecated ref `setSelection` method in favor of the new controlled `selection.selected` prop. This PR converts the Security plugin's basic usages of controlled selection and additionally removes 2 deletion cancellation behaviors on the team's request. There should not be any other UI/UX regressions when selecting rows. See also: - elastic/eui#7321 - #175722 (examples of basic conversions)

… method with controlled `selection.selected` API (#175726) ## Summary **Please help us QA your affected tables to confirm that your plugin's table selection still works as before!** EUI will shortly be removing this deprecated ref `setSelection` method in favor of the new controlled `selection.selected` prop. This PR converts basic usages of controlled selection, which should not suffer any UI/UX regressions. See also: - elastic/eui#7321 - #175722 (examples of basic conversions) Co-authored-by: Tomasz Ciecierski <tomasz.ciecierski@elastic.co>

… controlled `selection.selected` API (elastic#175727) ## Summary **Please help us QA your affected tables to confirm that your plugin's table selection still works as before!** EUI will shortly be removing this deprecated ref `setSelection` method in favor of the new controlled `selection.selected` prop. This PR converts Fleet's more advanced usage of controlled selection, which should not suffer any UI/UX regressions. See also: - elastic/eui#7321 - elastic#175722 (examples of basic conversions)

…ith controlled `selection.selected` API (elastic#175838) Closes elastic#175836 ## Summary **Please help us QA your affected tables to confirm that your plugin's table selection still works as before!** EUI will shortly be removing this deprecated ref `setSelection` method in favor of the new controlled `selection.selected` prop. This PR converts the Security plugin's basic usages of controlled selection and additionally removes 2 deletion cancellation behaviors on the team's request. There should not be any other UI/UX regressions when selecting rows. See also: - elastic/eui#7321 - elastic#175722 (examples of basic conversions)

… controlled `selection.selected` API (#175722) ## Summary See elastic/eui#7321 EUI will shortly be removing this deprecated ref `setSelection` method in favor of the new controlled `selection.selected` prop. This PR converts basic usages of controlled selection, which should not suffer any UI/UX regressions. **Please help us QA your affected tables to confirm that your table selection still works as before!**

… method with controlled `selection.selected` API (elastic#175726) ## Summary **Please help us QA your affected tables to confirm that your plugin's table selection still works as before!** EUI will shortly be removing this deprecated ref `setSelection` method in favor of the new controlled `selection.selected` prop. This PR converts basic usages of controlled selection, which should not suffer any UI/UX regressions. See also: - elastic/eui#7321 - elastic#175722 (examples of basic conversions) Co-authored-by: Tomasz Ciecierski <tomasz.ciecierski@elastic.co>

… controlled `selection.selected` API (elastic#175722) ## Summary See elastic/eui#7321 EUI will shortly be removing this deprecated ref `setSelection` method in favor of the new controlled `selection.selected` prop. This PR converts basic usages of controlled selection, which should not suffer any UI/UX regressions. **Please help us QA your affected tables to confirm that your table selection still works as before!**