[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 (#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!**

… 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!**

… 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)

… 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!**

… 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)

… 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!**

[dx] Set up types & prop docs

e8d333e

cee-chen force-pushed the table-controlled-selection branch from c66e386 to b439ec2 Compare October 26, 2023 21:28

cee-chen mentioned this pull request Oct 26, 2023

[EuiBasicTable] Option to make selected table items controlled from a parent component #6184

Closed

cee-chen added 3 commits October 26, 2023 14:31

Add controlled selected logic

7e9e3fa

[docs] Update table selection example to support switching between co…

aacc390

…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)

changelog

79bff05

cee-chen force-pushed the table-controlled-selection branch from b439ec2 to 79bff05 Compare October 26, 2023 21:31

cee-chen mentioned this pull request Oct 26, 2023

[Meta] Deprecation schedule #1469

Open

35 tasks

cee-chen marked this pull request as ready for review October 26, 2023 21:47

cee-chen requested a review from a team as a code owner October 26, 2023 21:47

cee-chen commented Oct 27, 2023

View reviewed changes

src/components/basic_table/basic_table.test.tsx Outdated Show resolved Hide resolved

test fix

866731c

1Copenut reviewed Oct 27, 2023

View reviewed changes

src-docs/src/views/tables/selection/selection_section.js Outdated Show resolved Hide resolved

src-docs/src/views/tables/selection/selection_section.js Outdated Show resolved Hide resolved

src-docs/src/views/tables/in_memory/in_memory_selection_section.js Outdated Show resolved Hide resolved

[PR feedback] Copy

ec7863c

cee-chen requested a review from 1Copenut October 27, 2023 23:10

1Copenut approved these changes Oct 30, 2023

View reviewed changes

Add missing regression/confidence test for setSelection API

fdfe1bb

cee-chen enabled auto-merge (squash) October 30, 2023 15:17

cee-chen merged commit f7b37d2 into elastic:main Oct 30, 2023
1 check passed

cee-chen deleted the table-controlled-selection branch October 30, 2023 15:46

cee-chen mentioned this pull request Oct 30, 2023

Upgrade EUI to v90.0.0 elastic/kibana#170179

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

cee-chen commented Oct 26, 2023 •

edited by 1Copenut

Loading

1Copenut left a comment

1Copenut left a comment

kibanamachine commented Oct 30, 2023

elasticmachine commented Oct 30, 2023

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

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

Conversation

cee-chen commented Oct 26, 2023 • edited by 1Copenut Loading

Summary

QA

General checklist

1Copenut left a comment

Choose a reason for hiding this comment

1Copenut left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 30, 2023

elasticmachine commented Oct 30, 2023

💚 Build Succeeded

History

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

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

cee-chen commented Oct 26, 2023 •

edited by 1Copenut

Loading