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

[cy-moi]

Motivation

The search bar living in the event tab has only minimal support now. We want to improve it for a better user experience. This PR is an experiment on one of the approaches.

Changes

Search in descriptions	Copy search query from cell value directly
Search with *	Escape whitespace with backlash

Testing

• Local
• Staging
• Unit
• End to end

---

I have gone over the contributing documentation.

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 62.50000% with 9 lines in your changes missing coverage. Please review.

Project coverage is 93.04%. Comparing base (0783df4) to head (bcc6402).
Report is 22 commits behind head on main.

Files	Patch %	Lines
...xtension/src/panel/hooks/useEvents/eventFilters.ts	62.50%	9 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2771      +/-   ##
==========================================
- Coverage   93.61%   93.04%   -0.58%     
==========================================
  Files         243      244       +1     
  Lines        7098     7161      +63     
  Branches     1583     1598      +15     
==========================================
+ Hits         6645     6663      +18     
- Misses        453      498      +45     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[cit-pr-commenter]

Bundles Sizes Evolution

📦 Bundle Name	Base Size	Local Size	𝚫	𝚫%	Status
Rum	158.75 KiB	158.75 KiB	0 B	0.00%	✅
Logs	57.02 KiB	57.02 KiB	0 B	0.00%	✅
Rum Slim	105.22 KiB	105.22 KiB	0 B	0.00%	✅
Worker	25.21 KiB	25.21 KiB	0 B	0.00%	✅

🚀 CPU Performance

Action Name	Base Average Cpu Time (ms)	Local Average Cpu Time (ms)	𝚫
addglobalcontext	0.001	0.002	0.000
addaction	0.031	0.043	0.012
adderror	0.031	0.038	0.007
addtiming	0.001	0.001	0.000
startview	0.835	1.060	0.225
startstopsessionreplayrecording	0.700	1.071	0.371
logmessage	0.004	0.006	0.002

🧠 Memory Performance

Action Name	Base Consumption Memory (bytes)	Local Consumption Memory (bytes)	𝚫 (bytes)
addglobalcontext	20.58 KiB	19.43 KiB	-1181 B
addaction	69.94 KiB	68.84 KiB	-1128 B
adderror	85.08 KiB	86.78 KiB	1.69 KiB
addtiming	16.68 KiB	16.12 KiB	-573 B
startview	312.73 KiB	317.13 KiB	4.40 KiB
startstopsessionreplayrecording	11.72 KiB	12.44 KiB	733 B
logmessage	68.30 KiB	67.40 KiB	-927 B

[thomas-lebeau]

👏 praise: ‏ nice!

[BenoitZugmeyer]

💭 thought: ‏I don't think it makes sense to have this menu everywhere Json is used (like, in the Info tab). What about moving this item in getMenuItemsForPath function in eventRow.tsx? This would also remove the need to have the columnPath in Json.

[cy-moi]

I created the item with getCopyMenuItemsForPath for copying search query, separating the two for the ease of understanding, because column.path and path might be too mixed up. wdyt?

[BenoitZugmeyer]

💬 suggestion: ‏it could be nice to have a few unit tests for that this 😄

[BenoitZugmeyer]

🥜 nitpick: ‏this comment isn't accurate anymore

[BenoitZugmeyer]

💬 suggestion: ‏move this code to getMenuItemsForPath. It could look like this:

 function getMenuItemsForPath(path: string, value: unknown) {
      const menuItems: React.ChildNode[] = []

      const newColumn: EventListColumn = { type: 'field', path }
      if (path && !includesColumn(columns, newColumn)) {
        menuItems.push(
          <Menu.Item
            key="add-column"
            onClick={() => {
              onColumnsChange(addColumn(columns, newColumn))
            }}
            leftSection={<IconColumnInsertRight size={14} />}
          >
            Add column
          </Menu.Item>
        )
      }

      if (typeof value === "string") {
        const searchTerm = String(value).replace(/ /g, '\\ ')
        menuItems.push(
          <CopyMenuItem value={`${path}:${searchTerm}`}>Copy search query</CopyMenuItem>
        )
      }

      return <>{menuItems}</>
    }