Add documentation toggle for searching plain text/special characters

+ update faker.js to latest to get string.symbol API
elastic · Sep 9, 2023 · 74f96cc · 74f96cc
1 parent bf1235e
commit 74f96cc
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 32 deletions.
diff --git a/package.json b/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",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@storybook/addon-essentials": "^7.3.1",
     "@storybook/addon-interactions": "^7.3.1",

diff --git a/src-docs/src/views/tables/in_memory/in_memory_search.tsx b/src-docs/src/views/tables/in_memory/in_memory_search.tsx
@@ -11,7 +11,6 @@ import {
   EuiSpacer,
   EuiSwitch,
   EuiFlexGroup,
-  EuiFlexItem,
   EuiCallOut,
   EuiCode,
 } from '../../../../../src/components';
@@ -27,16 +26,23 @@ type User = {
 };
 
 const users: User[] = [];
+const usersWithSpecialCharacters: User[] = [];
 
 for (let i = 0; i < 20; i++) {
-  users.push({
+  const userData = {
     id: i + 1,
-    firstName: faker.name.firstName(),
-    lastName: faker.name.lastName(),
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
     github: faker.internet.userName(),
     dateOfBirth: faker.date.past(),
     online: faker.datatype.boolean(),
-    location: faker.address.country(),
+    location: faker.location.country(),
+  };
+  users.push(userData);
+  usersWithSpecialCharacters.push({
+    ...userData,
+    firstName: `${userData.firstName} "${faker.string.symbol(10)}"`,
+    lastName: `${userData.lastName} ${faker.internet.emoji()}`,
   });
 }
 
@@ -108,6 +114,7 @@ export default () => {
   const [incremental, setIncremental] = useState(false);
   const [filters, setFilters] = useState(false);
   const [contentBetween, setContentBetween] = useState(false);
+  const [searchPlainText, setSearchPlainText] = useState(false);
 
   const search: EuiSearchBarProps = {
     box: {
@@ -138,34 +145,34 @@ export default () => {
   return (
     <>
       <EuiFlexGroup>
-        <EuiFlexItem grow={false}>
-          <EuiSwitch
-            label="Incremental"
-            checked={incremental}
-            onChange={() => setIncremental(!incremental)}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiSwitch
-            label="With Filters"
-            checked={filters}
-            onChange={() => setFilters(!filters)}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiSwitch
-            label="Content between"
-            checked={contentBetween}
-            onChange={() => setContentBetween(!contentBetween)}
-          />
-        </EuiFlexItem>
+        <EuiSwitch
+          label="Incremental"
+          checked={incremental}
+          onChange={() => setIncremental(!incremental)}
+        />
+        <EuiSwitch
+          label="With Filters"
+          checked={filters}
+          onChange={() => setFilters(!filters)}
+        />
+        <EuiSwitch
+          label="Content between"
+          checked={contentBetween}
+          onChange={() => setContentBetween(!contentBetween)}
+        />
+        <EuiSwitch
+          label="Plain text search"
+          checked={searchPlainText}
+          onChange={() => setSearchPlainText(!searchPlainText)}
+        />
       </EuiFlexGroup>
       <EuiSpacer size="l" />
       <EuiInMemoryTable
         tableCaption="Demo of EuiInMemoryTable with search"
-        items={users}
+        items={searchPlainText ? usersWithSpecialCharacters : users}
         columns={columns}
         search={search}
+        searchPlainText={searchPlainText}
         pagination={true}
         sorting={true}
         childrenBetween={

diff --git a/yarn.lock b/yarn.lock
@@ -2423,10 +2423,10 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.43.0.tgz#559ca3d9ddbd6bf907ad524320a0d14b85586af0"
   integrity sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==
 
-"@faker-js/faker@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-7.6.0.tgz#9ea331766084288634a9247fcd8b84f16ff4ba07"
-  integrity sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw==
+"@faker-js/faker@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-8.0.2.tgz#bab698c5d3da9c52744e966e0e3eedb6c8b05c37"
+  integrity sha512-Uo3pGspElQW91PCvKSIAXoEgAUlRnH29sX2/p89kg7sP1m2PzCufHINd0FhTXQf6DYGiUlVncdSPa2F9wxed2A==
 
 "@fal-works/esbuild-plugin-global-externals@^2.1.2":
   version "2.1.2"