[EuiInMemoryTable] Allow consumers to use non-EQL plain text search with special characters #7175

cee-chen · 2023-09-09T00:32:38Z

Summary

closes #7160

This PR contains some incidental cleanup - please follow along by commit. 65e5205 is the main feature/fix.

Before (see error icon/message)

After

QA

Go to https://eui.elastic.co/pr_7175/#/tabular-content/in-memory-tables#in-memory-table-with-search
Toggle the Incremental switch for faster feedback, and then the Plain text search switch
Start typing any name(s) with a special character or emoji
Confirm that the table correctly filters names with and without special characters, and no error icon shows up in the search bar

General checklist

Checked in Chrome, Safari, Edge, and Firefox
Props have proper autodocs (using @default if default values are missing) and playground toggles
Added documentation
Added or updated jest ~~and cypress tests~~
A changelog entry exists and is marked appropriately

~~- [ ] Checked in both light and dark modes~~
- [ ] Checked in mobile
~~- [ ] Checked Code Sandbox works for any docs examples~~
~~- [ ] Checked for breaking changes and labeled appropriately~~
~~- [ ] Checked for accessibility including keyboard-only and screenreader modes~~
~~- [ ] Updated the Figma library counterpart~~

- not clear why it lives in `EuiSearchBox`, which doesn't reference it whatsoever + clean up/combine `EuiInMemoryTable` imports

…archas non-EQL searches

+ update faker.js to latest to get string.symbol API

cee-chen · 2023-09-09T01:19:11Z

src/components/basic_table/in_memory_table.tsx

+   * such as quotes, parentheses, and colons, which are normally otherwise
+   * reserved for EQL syntax.
+   */
+  searchPlainText?: boolean;


I'm not 100% convinced this PR is the right way to go, so I'm opening it to get earlier thoughts from the rest of the team.

I don't love this prop name or the "plain text" terminology I'm using - I'm open to other ways to describe "text that does not follow EQL filtering syntax and thus allows users to search for special characters"

I experimented with different ways to pass this flag in the search object, e.g. <EuiInMemoryTable search={{ plainText: true }} />, but it ended up causing a bunch of type headaches down the line so I abandoned it in favor of a top-level prop. Let me know if you have thoughts/preferences on this

Just thinking out loud, what about searchInputFormat: 'eql' | 'text' or just searchFormat?

I love it! I'll go with searchFormat!

searchFormat prop update: feb7a91

Also, leaving some extra thoughts just for more context, in case future devs come by this PR and are like "why did they do things this way":

I'm not 100% convinced this PR is the right way to go

When I mentioned this above, I was referring to the fact that this "plain text" search is still essentially using EQL under the hood, primarily to execute over every item passed to the memory table. This potentially isn't as performant as it could be if we were using a more raw EuiFieldSearch input and skipping using EuiSearchBar.Query.parse entirely.

However, in the end, I think this is a simpler approach to go with because while skipping EQL entirely might be more performant, this at least isn't less performant than current behavior, and additionally has much less dev overhead/testing required (we'd have to write a brand new utility to execute/iterate over every single item otherwise).

In the future, something might change to necessitate a bigger break between EQL and non EQL search - but in the interim, I think this is an okay compromise between performance and developer time spent.

cee-chen · 2023-09-09T01:20:05Z

upcoming_changelogs/7175.md

+
+**Bug fixes**
+
+- Fixed missing i18n in `EuiSearchBar`'s default placeholder and aria-label text


Not sure how this got missed for over 4 years 🥲

cee-chen · 2023-09-09T01:22:13Z

package.json

@@ -127,7 +127,7 @@
    "@emotion/eslint-plugin": "^11.11.0",
    "@emotion/jest": "^11.11.0",
    "@emotion/react": "^11.11.0",
-    "@faker-js/faker": "^7.6.0",
+    "@faker-js/faker": "^8.0.2",


Upgrade needed for the new faker.string.symbol API I'm using to generate random special characters. Probably safe to do now that the faker controversy is behind us 🙈

src/components/basic_table/in_memory_table.tsx

tkajtoch · 2023-09-14T20:20:42Z

I'm really happy with the changes in this PR. I'd like to get the regex not throwing errors when typing \ fixed before merging this PR but all other comments are not change requests, so feel free to ignore them :D

kibanamachine · 2023-09-15T01:58:29Z

Preview staging links for this PR:

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

elasticmachine · 2023-09-15T02:07:18Z

💚 Build Succeeded

Buildkite Build
Commit: 40d2ea3

History

💚 Build #579 succeeded 4d8fd29

tkajtoch

LGTM 🚢

`v88.3.0`⏩`v88.5.0` closes #151514 --- ## [`88.5.0`](https://github.com/elastic/eui/tree/v88.5.0) - Updated `EuiCallOut` with a new `onDismiss` prop ([#7156](elastic/eui#7156)) - Added a new `renderCustomToolbar` prop to `EuiDataGrid`, which allows custom rendering of the toolbar. ([#7190](elastic/eui#7190)) - Added a new `allowResetButton` prop to `toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows hiding the "Reset to default" button from the display settings popover. ([#7190](elastic/eui#7190)) - Added a new `additionalDisplaySettings` prop to `toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows rendering extra settings inside the display settings popover. ([#7190](elastic/eui#7190)) - Updated `EuiDataGrid`'s toolbar display settings button icon ([#7190](elastic/eui#7190)) - Updated `EuiTextTruncate` with significantly improved iteration performance. Removed `measurementRenderAPI` prop, as `EuiTextTruncation` now only uses more performant canvas render API ([#7210](elastic/eui#7210)) - Updated `EuiPopover` with a new configurable `repositionToCrossAxis` prop ([#7211](elastic/eui#7211)) - Updated `EuiDatePicker` to support `compressed` input styling ([#7218](elastic/eui#7218)) - Added `gradient` and `palette` icon glyphs. ([#7220](elastic/eui#7220)) **Bug fixes** - Fixed `EuiPopover`'s missing animations on popover close ([#7211](elastic/eui#7211)) - Fixed `EuiInputPopover` anchoring to the wrong side and missing shadows on smaller screens ([#7211](elastic/eui#7211)) - Fixed `EuiSuperDatePicker` icon spacing on the quick select button ([#7217](elastic/eui#7217)) - Fixed a missing type in `EuiMarkdownEditor`'s default processing plugins ([#7221](elastic/eui#7221)) ## [`88.4.1`](https://github.com/elastic/eui/tree/v88.4.1) **Bug fixes** - Fixed missing `className`s on `EuiTextTruncate` ([#7212](elastic/eui#7212)) - Fixed `title`s on `EuiComboBox` dropdown options to always be present ([#7212](elastic/eui#7212)) - Fixed `EuiComboBox` truncation issues when search is an empty space ([#7212](elastic/eui#7212)) ## [`88.4.0`](https://github.com/elastic/eui/tree/v88.4.0) - Updated `EuiComboBox` to allow configuring text truncation behavior via `truncationProps`. These props can be set on the entire combobox as well as on on individual dropdown options. ([#7028](elastic/eui#7028)) - Updated `EuiInMemoryTable` with a new `searchFormat` prop (defaults to `eql`). When setting this prop to `text`, the built-in search bar will ignore EQL syntax and allow searching for plain strings with special characters and symbols. ([#7175](elastic/eui#7175)) **Bug fixes** - `EuiComboBox` now always shows the highlighted search text, even on truncated text ([#7028](elastic/eui#7028)) - Fixed missing i18n in `EuiSearchBar`'s default placeholder and aria-label text ([#7175](elastic/eui#7175)) - Fixed the inline compressed styles of `EuiDescriptionListTitle` to use a taller line-height for readability ([#7185](elastic/eui#7185)) - Fixed `EuiComboBox` to correctly truncate selected items when displayed as pills and plain text ([#7193](elastic/eui#7193)) **Accessibility** - Added `aria-current` attribute to `EuiTablePagination` ([#7186](elastic/eui#7186)) **CSS-in-JS conversions** - Converted `EuiDroppable` and `EuiDraggable` to Emotion; Removed `$euiDragAndDropSpacing` Sass variables ([#7187](elastic/eui#7187)) --------- Co-authored-by: Patryk Kopycinski <contact@patrykkopycinski.com> Co-authored-by: Jan Monschke <jan.monschke@elastic.co> Co-authored-by: Thomas Watson <watson@elastic.co>

cee-chen added 2 commits September 8, 2023 17:11

[setup] move unused SchemaType export to main EuiSearchBar

463a854

- not clear why it lives in `EuiSearchBox`, which doesn't reference it whatsoever + clean up/combine `EuiInMemoryTable` imports

[tech debt] Convert EuiSearchBox to function component + i18n text

ff7f6ed

cee-chen force-pushed the memory-table-plaintext-search branch from 4634839 to 7d33a52 Compare September 9, 2023 00:42

cee-chen added 2 commits September 8, 2023 18:09

Add new plainTextSearch prop that allows consumers to treat user se…

65e5205

…archas non-EQL searches

Fix test errors w/ non-HTML attributes being passed via ...rest

bf1235e

cee-chen force-pushed the memory-table-plaintext-search branch from 7d33a52 to eaa1ea5 Compare September 9, 2023 01:09

cee-chen added 2 commits September 8, 2023 18:11

Add documentation toggle for searching plain text/special characters

74f96cc

+ update faker.js to latest to get string.symbol API

changelog

4d8fd29

cee-chen force-pushed the memory-table-plaintext-search branch from eaa1ea5 to 4d8fd29 Compare September 9, 2023 01:11

cee-chen requested a review from a team September 9, 2023 01:15

cee-chen marked this pull request as ready for review September 9, 2023 01:15

cee-chen commented Sep 9, 2023

View reviewed changes

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

cee-chen mentioned this pull request Sep 9, 2023

[EuiInMemoryTable] Syntax error when searching with special characters #7160

Closed

tkajtoch reviewed Sep 14, 2023

View reviewed changes

src/components/basic_table/in_memory_table.tsx Show resolved Hide resolved

cee-chen added 3 commits September 14, 2023 18:06

Merge branch 'main' into memory-table-plaintext-search

17d31b5

[PR feedback] Change searchPlainText prop name to searchFormat

feb7a91

Fix broken backslash search 🎉

40d2ea3

tkajtoch approved these changes Sep 18, 2023

View reviewed changes

cee-chen merged commit 0c6ccb0 into elastic:main Sep 18, 2023
1 check passed

cee-chen deleted the memory-table-plaintext-search branch September 18, 2023 17:02

cee-chen mentioned this pull request Sep 20, 2023

Upgrade EUI to v88.5.0 elastic/kibana#166868

Merged

alisonelizabeth mentioned this pull request Sep 21, 2023

Watcher Search Breaks when using Special Character elastic/kibana#123071

Closed

cee-chen mentioned this pull request Sep 21, 2023

[tech debt] Address faker deprecation warnings #7216

Merged

1 task

This was referenced Oct 22, 2024

[TableListView] Listing page search ignores special characters without warning elastic/kibana#151120

Closed

[TableListView] Hint message for chars not allowed in search elastic/kibana#197307

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiInMemoryTable] Allow consumers to use non-EQL plain text search with special characters #7175

[EuiInMemoryTable] Allow consumers to use non-EQL plain text search with special characters #7175

cee-chen commented Sep 9, 2023 •

edited by tkajtoch

Loading

cee-chen Sep 9, 2023

tkajtoch Sep 14, 2023

cee-chen Sep 15, 2023

cee-chen Sep 15, 2023

cee-chen Sep 15, 2023 •

edited

Loading

cee-chen Sep 9, 2023

cee-chen Sep 9, 2023 •

edited

Loading

tkajtoch commented Sep 14, 2023

kibanamachine commented Sep 15, 2023

elasticmachine commented Sep 15, 2023

tkajtoch left a comment


		Bug fixes

		- Fixed missing i18n in `EuiSearchBar`'s default placeholder and aria-label text

[EuiInMemoryTable] Allow consumers to use non-EQL plain text search with special characters #7175

[EuiInMemoryTable] Allow consumers to use non-EQL plain text search with special characters #7175

Conversation

cee-chen commented Sep 9, 2023 • edited by tkajtoch Loading

Summary

Before (see error icon/message)

After

QA

General checklist

cee-chen Sep 9, 2023

Choose a reason for hiding this comment

tkajtoch Sep 14, 2023

Choose a reason for hiding this comment

cee-chen Sep 15, 2023

Choose a reason for hiding this comment

cee-chen Sep 15, 2023

Choose a reason for hiding this comment

cee-chen Sep 15, 2023 • edited Loading

Choose a reason for hiding this comment

cee-chen Sep 9, 2023

Choose a reason for hiding this comment

cee-chen Sep 9, 2023 • edited Loading

Choose a reason for hiding this comment

tkajtoch commented Sep 14, 2023

kibanamachine commented Sep 15, 2023

elasticmachine commented Sep 15, 2023

💚 Build Succeeded

History

tkajtoch left a comment

Choose a reason for hiding this comment

cee-chen commented Sep 9, 2023 •

edited by tkajtoch

Loading

cee-chen Sep 15, 2023 •

edited

Loading

cee-chen Sep 9, 2023 •

edited

Loading