[EuiSearchBar] Automatically wrap special characters (that aren't used in EQL syntax) in quotes

src-docs/src/views/search_bar/search_bar.js

@@ -17,11 +17,11 @@ import {
 const random = new Random();
 
 const tags = [
-  { name: 'marketing', color: 'danger' },
-  { name: 'finance', color: 'success' },
-  { name: 'eng', color: 'success' },
-  { name: 'sales', color: 'warning' },
-  { name: 'ga', color: 'success' },
+  { name: 'market ing', color: 'danger' },
+  { name: 'fi@nance', color: 'success' },
+  { name: 'eng!&$#%^', color: 'success' },
+  { name: 's*a:les', color: 'warning' },
+  { name: 'g\\a/', color: 'success' },
 ];
 
 const types = ['dashboard', 'visualization', 'watch'];

src-docs/src/views/tables/data_store.js

@@ -5,30 +5,30 @@ import { times } from '../../../../src/services/utils';
 const random = new Random();
 
 const createCountries = () => [
-  { code: 'NL', name: 'Netherlands', flag: '🇳🇱' },
-  { code: 'CZ', name: 'Czech Republic', flag: '🇨🇿' },
-  { code: 'ZA', name: 'South Africa', flag: '🇿🇦' },
-  { code: 'US', name: 'United States', flag: '🇺🇲' },
-  { code: 'AU', name: 'Australia', flag: '🇦🇺' },
-  { code: 'IL', name: 'Israel', flag: '🇮🇱' },
-  { code: 'NO', name: 'Norway', flag: '🇳🇴' },
-  { code: 'IT', name: 'Italy', flag: '🇮🇹' },
-  { code: 'CA', name: 'Canada', flag: '🇨🇦' },
-  { code: 'CG', name: 'Congo', flag: '🇨🇬' },
-  { code: 'CL', name: 'Chile', flag: '🇨🇱' },
-  { code: 'FJ', name: 'Fiji', flag: '🇫🇯' },
-  { code: 'GB', name: 'United Kingdom', flag: '🇬🇧' },
-  { code: 'GR', name: 'Greece', flag: '🇬🇷' },
-  { code: 'HT', name: 'Haiti', flag: '🇭🇹' },
-  { code: 'LB', name: 'Lebanon', flag: '🇱🇧' },
-  { code: 'MM', name: 'Myanmar', flag: '🇲🇲' },
-  { code: 'MX', name: 'Mexico', flag: '🇲🇽' },
-  { code: 'NG', name: 'Nigeria', flag: '🇳🇬' },
-  { code: 'SG', name: 'Singapore', flag: '🇸🇬' },
-  { code: 'SO', name: 'Somalia', flag: '🇸🇴' },
-  { code: 'TN', name: 'Tunisia', flag: '🇹🇳' },
-  { code: 'VE', name: 'Venezuela', flag: '🇻🇪' },
-  { code: 'ZM', name: 'Zambia', flag: '🇿🇲' },
+  { code: 'NL@', name: 'Netherlands', flag: '🇳🇱' },
+  { code: 'CZ@', name: 'Czech Republic', flag: '🇨🇿' },
+  { code: 'ZA@', name: 'South Africa', flag: '🇿🇦' },
+  { code: 'US@', name: 'United States', flag: '🇺🇲' },
+  { code: 'AU@', name: 'Australia', flag: '🇦🇺' },
+  { code: 'IL@', name: 'Israel', flag: '🇮🇱' },
+  { code: 'NO@', name: 'Norway', flag: '🇳🇴' },
+  { code: 'IT@', name: 'Italy', flag: '🇮🇹' },
+  { code: 'CA@', name: 'Canada', flag: '🇨🇦' },
+  { code: 'CG@', name: 'Congo', flag: '🇨🇬' },
+  { code: 'CL@', name: 'Chile', flag: '🇨🇱' },
+  { code: 'FJ@', name: 'Fiji', flag: '🇫🇯' },
+  { code: 'GB@', name: 'United Kingdom', flag: '🇬🇧' },
+  { code: 'GR@', name: 'Greece', flag: '🇬🇷' },
+  { code: 'HT@', name: 'Haiti', flag: '🇭🇹' },
+  { code: 'LB@', name: 'Lebanon', flag: '🇱🇧' },
+  { code: 'MM@', name: 'Myanmar', flag: '🇲🇲' },
+  { code: 'MX@', name: 'Mexico', flag: '🇲🇽' },
+  { code: 'NG@', name: 'Nigeria', flag: '🇳🇬' },
+  { code: 'SG@', name: 'Singapore', flag: '🇸🇬' },
+  { code: 'SO@', name: 'Somalia', flag: '🇸🇴' },
+  { code: 'TN@', name: 'Tunisia', flag: '🇹🇳' },
+  { code: 'VE@', name: 'Venezuela', flag: '🇻🇪' },
+  { code: 'ZM@', name: 'Zambia', flag: '🇿🇲' },
 ];
 
 const firstNames = [

src/components/search_bar/query/default_syntax.test.ts

@@ -639,6 +639,33 @@ describe('defaultSyntax', () => {
     expect(printedQuery).toBe(query);
   });
 
+  describe('phrases with special characters', () => {
+    const wrappedSpecialChars = "~`!@#$%^&+={}[];',.?".split('');
+
+    wrappedSpecialChars.forEach((char) => {
+      test(`${char} should be wrapped in quotes`, () => {
+        const query = `user:("foo${char}bar")`;
+
+        const ast = defaultSyntax.parse(query);
+        const printedQuery = defaultSyntax.print(ast);
+        expect(printedQuery).toBe(query);
+      });
+    });
+
+    const unwrappedSpecialChars = ['\\"', '(', ')', '_', '-', ':', '*', '\\'];
+
+    unwrappedSpecialChars.forEach((char) => {
+      test(`${char} should not be wrapped in quotes`, () => {
+        const query = `user:("foo${char}bar")`;
+        const expected = `user:(foo${char.replaceAll('\\', '')}bar)`;
+
+        const ast = defaultSyntax.parse(query);
+        const printedQuery = defaultSyntax.print(ast);
+        expect(printedQuery).toBe(expected);
+      });
+    });
+  });
+
   test('single term or expression', () => {
     const query = 'f:(foo)';
     const ast = defaultSyntax.parse(query);

src/components/search_bar/query/default_syntax.ts

@@ -451,7 +451,11 @@ const printValue = (value: Value, options: ParseOptions) => {
     return value.toString();
   }
 
-  if (value.length === 0 || value.match(/\s/) || value.toLowerCase() === 'or') {
+  if (
+    value.length === 0 ||
+    value.match(/[^\w\-_*:()"/\\]/) || // Escape spaces and special characters not used as syntax identifiers
+    value.toLowerCase() === 'or'
+  ) {
     return `"${escapePhraseValue(value)}"`;
   }