🔮 [HADXVI-53] Browser SDK extension search bar improvement

developer-extension/src/panel/components/json.tsx

@@ -310,11 +310,16 @@ function JsonLine({
   )
 }
 
-function CopyMenuItem({ value, children }: { value: unknown; children: ReactNode }) {
+export function CopyMenuItem({ value, children }: { value: unknown; children: ReactNode }) {
   return (
     <Menu.Item
       onClick={() => {
-        copy(JSON.stringify(value, null, 2))
+        // Remove the outer quotation marks from copied string
+        if (typeof value === 'object') {
+          copy(JSON.stringify(value, null, 2))
+        } else {
+          copy(String(value))
+        }
       }}
       leftSection={<IconCopy size={14} />}
     >

developer-extension/src/panel/components/tabs/eventsTab/eventRow.tsx

@@ -16,7 +16,7 @@ import type {
 import type { SdkEvent } from '../../../sdkEvent'
 import { isTelemetryEvent, isLogEvent, isRumEvent } from '../../../sdkEvent'
 import { formatDate, formatDuration } from '../../../formatNumber'
-import { defaultFormatValue, Json } from '../../json'
+import { CopyMenuItem, defaultFormatValue, Json } from '../../json'
 import { LazyCollapse } from '../../lazyCollapse'
 import type { FacetRegistry } from '../../../hooks/useEvents'
 import { useSdkInfos } from '../../../hooks/useSdkInfos'
@@ -90,6 +90,11 @@ export const EventRow = React.memo(
       )
     }
 
+    function getCopyMenuItemsForPath(path: string, value: unknown) {
+      const searchTerm = String(value).replace(/ /g, '\\ ')
+      return <CopyMenuItem value={`${path}:${searchTerm}`}>Copy search query</CopyMenuItem>
+    }
+
     return (
       <Table.Tr>
         {columns.map((column): React.ReactElement => {
@@ -151,7 +156,15 @@ export const EventRow = React.memo(
                     <Json
                       value={value}
                       defaultCollapseLevel={0}
-                      getMenuItemsForPath={(path) => getMenuItemsForPath(path ? `${column.path}.${path}` : column.path)}
+                      getMenuItemsForPath={(path) => {
+                        const fullPath = path ? `${column.path}.${path}` : column.path
+                        return (
+                          <>
+                            {getMenuItemsForPath(fullPath)}
+                            {typeof value === 'string' ? getCopyMenuItemsForPath(column.path, value) : undefined}
+                          </>
+                        )
+                      }}
                       formatValue={(path, value) => formatValue(path ? `${column.path}.${path}` : column.path, value)}
                     />
                   )}

developer-extension/src/panel/hooks/useEvents/eventFilters.spec.ts

@@ -0,0 +1,74 @@
+import { parseQuery, matchWithWildcard } from './eventFilters'
+
+describe('parseQuery', () => {
+  it('return a simple field', () => {
+    expect(parseQuery('foo:bar')).toEqual([['foo', 'bar']])
+  })
+  it('return intermediary fields', () => {
+    expect(parseQuery('foo.bar:baz')).toEqual([['foo.bar', 'baz']])
+  })
+  it('return multiple fields', () => {
+    expect(parseQuery('foo:bar baz:qux')).toEqual([
+      ['foo', 'bar'],
+      ['baz', 'qux'],
+    ])
+  })
+  it('parse escaped whitespace with backslashes in search terms', () => {
+    expect(parseQuery('foo:bar\\ baz')).toEqual([['foo', 'bar\\ baz']])
+  })
+  it('parse escaped whitespace with backslashes in keys', () => {
+    expect(parseQuery('foo\\ bar:baz')).toEqual([['foo\\ bar', 'baz']])
+  })
+  it('return multiple fields with escaped whitespace', () => {
+    expect(parseQuery('foo\\ bar:baz\\ qux')).toEqual([['foo\\ bar', 'baz\\ qux']])
+    expect(parseQuery('foo:bar\\ baz qux:quux\\ corge')).toEqual([
+      ['foo', 'bar\\ baz'],
+      ['qux', 'quux\\ corge'],
+    ])
+  })
+})
+
+describe('matchWithWildcard', () => {
+  it('matches exact strings', () => {
+    expect(matchWithWildcard('foo', 'foo')).toBe(true)
+  })
+  it('matches exact strings case-insensitively', () => {
+    expect(matchWithWildcard('foo', 'FOO')).toBe(true)
+  })
+  it('matches substrings', () => {
+    expect(matchWithWildcard('foo', 'oo')).toBe(true)
+  })
+  it('matches substrings case-insensitively', () => {
+    expect(matchWithWildcard('foo', 'OO')).toBe(true)
+  })
+  it('does not match missing substrings', () => {
+    expect(matchWithWildcard('foo', 'bar')).toBe(false)
+  })
+  it('does not match missing substrings case-insensitively', () => {
+    expect(matchWithWildcard('foo', 'BAR')).toBe(false)
+  })
+  it('matches with wildcard at the beginning', () => {
+    expect(matchWithWildcard('foo', '*oo')).toBe(true)
+  })
+  it('matches with wildcard at the end', () => {
+    expect(matchWithWildcard('foo', 'fo*')).toBe(true)
+  })
+  it('matches with wildcard at the beginning and the end', () => {
+    expect(matchWithWildcard('foo', '*o*')).toBe(true)
+  })
+  it('matches with wildcard at the beginning and the end case-insensitively', () => {
+    expect(matchWithWildcard('foo', '*O*')).toBe(true)
+  })
+  it('does not match missing substrings with wildcard at the beginning', () => {
+    expect(matchWithWildcard('foo', '*bar')).toBe(false)
+  })
+  it('does not match missing substrings with wildcard at the end', () => {
+    expect(matchWithWildcard('foo', 'bar*')).toBe(false)
+  })
+  it('does not match missing substrings with wildcard at the beginning and the end', () => {
+    expect(matchWithWildcard('foo', '*bar*')).toBe(false)
+  })
+  it('does not match missing substrings with wildcard at the beginning and the end case-insensitively', () => {
+    expect(matchWithWildcard('foo', '*BAR*')).toBe(false)
+  })
+})

developer-extension/src/panel/hooks/useEvents/eventFilters.ts

@@ -26,8 +26,14 @@ export function applyEventFilters(filters: EventFilters, events: SdkEvent[], fac
   filteredEvents = filterExcludedFacets(filteredEvents, filters.excludedFacetValues, facetRegistry)
 
   if (filters.query) {
-    const query = parseQuery(filters.query)
-    filteredEvents = filteredEvents.filter(query.match)
+    const queryParts: string[][] = parseQuery(filters.query)
+    const matchQuery = (event: SdkEvent) =>
+      queryParts.every((queryPart) => {
+        // Hack it to restore the whitespace
+        const searchTerm = queryPart.length > 1 ? queryPart[1].replaceAll(/\\\s+/gm, ' ') : ''
+        return matchQueryPart(event, queryPart[0], searchTerm)
+      })
+    filteredEvents = filteredEvents.filter(matchQuery)
   }
 
   if (!filters.outdatedVersions) {
@@ -73,20 +79,38 @@ function filterOutdatedVersions(events: SdkEvent[]): SdkEvent[] {
   return events.filter((event) => !outdatedEvents.has(event))
 }
 
-function parseQuery(query: string) {
+export function parseQuery(query: string) {
   const queryParts = query
-    .split(' ')
+    .split(/(?<!\\)\s/gm) // Hack it to escape whitespace with backslashes
     .filter((queryPart) => queryPart)
     .map((queryPart) => queryPart.split(':'))
 
-  return {
-    match: (event: SdkEvent) =>
-      queryParts.every((queryPart) => matchQueryPart(event, queryPart[0], queryPart.length ? queryPart[1] : '')),
+  return queryParts
+}
+
+export function matchWithWildcard(value: string, searchTerm: string): boolean {
+  value = value.toLowerCase()
+  searchTerm = searchTerm.toLowerCase()
+  if (!searchTerm.includes('*')) {
+    return value.includes(searchTerm)
   }
+  const searchTerms = searchTerm.toLowerCase().split('*')
+  let lastIndex = 0
+  for (const term of searchTerms) {
+    const index = value.indexOf(term, lastIndex)
+    if (index === -1) {
+      return false
+    }
+    lastIndex = index + term.length
+  }
+  return true
 }
 
 function matchQueryPart(json: unknown, searchKey: string, searchTerm: string, jsonPath = ''): boolean {
-  if (jsonPath.endsWith(searchKey) && String(json).startsWith(searchTerm)) {
+  if (searchKey.toLowerCase() === 'description') {
+    return matchWithWildcard(JSON.stringify(json), searchTerm)
+  }
+  if (jsonPath.endsWith(searchKey) && matchWithWildcard(String(json), searchTerm)) {
     return true
   }