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

…archas non-EQL searches
elastic · Sep 9, 2023 · 65e5205 · 65e5205
1 parent ff7f6ed
commit 65e5205
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 7 deletions.
diff --git a/src/components/basic_table/in_memory_table.test.tsx b/src/components/basic_table/in_memory_table.test.tsx
@@ -1437,4 +1437,33 @@ describe('EuiInMemoryTable', () => {
       expect(tableContent.at(2).text()).toBe('baz');
     });
   });
+
+  describe('plain text search', () => {
+    it('allows searching for any text with special characters in it', () => {
+      const specialCharacterSearch = '!@#$%^&*(){}+=-_hello:world"`<>?/👋~.,;|';
+      const items = [
+        { title: specialCharacterSearch },
+        { title: 'no special characters' },
+      ];
+      const columns = [{ field: 'title', name: 'Title' }];
+
+      const { getByTestSubject, container } = render(
+        <EuiInMemoryTable
+          items={items}
+          searchPlainText
+          search={{ box: { incremental: true, 'data-test-subj': 'searchbox' } }}
+          columns={columns}
+        />
+      );
+      fireEvent.keyUp(getByTestSubject('searchbox'), {
+        target: { value: specialCharacterSearch },
+      });
+
+      const tableContent = container.querySelectorAll(
+        '.euiTableRowCell .euiTableCellContent'
+      );
+      expect(tableContent).toHaveLength(1); // only 1 match
+      expect(tableContent[0]).toHaveTextContent(specialCharacterSearch);
+    });
+  });
 });
diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx
@@ -80,6 +80,15 @@ type InMemoryTableProps<T> = Omit<
    * Configures #Search.
    */
   search?: Search;
+  /**
+   * If passed as true, search ignores all filters and EQL syntax, and anything
+   * typed into the table search bar is treated as plain text.
+   *
+   * This functionality allows users to search for strings with special characters
+   * such as quotes, parentheses, and colons, which are normally otherwise
+   * reserved for EQL syntax.
+   */
+  searchPlainText?: boolean;
   /**
    * Configures #Pagination
    */
@@ -525,9 +534,31 @@ export class EuiInMemoryTable<T> extends Component<
     }));
   };
 
+  // Alternative to onQueryChange - allows consumers to specify they want the
+  // search bar to ignore EQL syntax and only use the searchbar for plain text
+  onPlainTextSearch = (searchValue: string) => {
+    const escapedQueryText = searchValue.replaceAll('"', '\\"');
+    const finalQuery = `"${escapedQueryText}"`;
+    this.setState({
+      query: EuiSearchBar.Query.parse(finalQuery),
+    });
+  };
+
   renderSearchBar() {
-    const { search } = this.props;
-    if (search) {
+    const { search, searchPlainText } = this.props;
+    if (!search) return;
+
+    let searchBar: ReactNode;
+
+    if (searchPlainText) {
+      searchBar = (
+        <EuiSearchBox
+          query="" // Unused, passed to satisfy Typescript
+          {...(search as EuiSearchBarProps)?.box}
+          onSearch={this.onPlainTextSearch}
+        />
+      );
+    } else {
       let searchBarProps: Omit<EuiSearchBarProps, 'onChange'> = {};
 
       if (isEuiSearchBarProps(search)) {
@@ -542,13 +573,17 @@ export class EuiInMemoryTable<T> extends Component<
         }
       }
 
-      return (
-        <>
-          <EuiSearchBar onChange={this.onQueryChange} {...searchBarProps} />
-          <EuiSpacer size="l" />
-        </>
+      searchBar = (
+        <EuiSearchBar onChange={this.onQueryChange} {...searchBarProps} />
       );
     }
+
+    return (
+      <>
+        {searchBar}
+        <EuiSpacer size="l" />
+      </>
+    );
   }
 
   resolveSearchSchema(): SchemaType {