fix(search): render escaped asterisks as escaped (#118019)

In the shared `SearchQueryBuilder`, filter token values containing an
escaped asterisk (`\*`) were rendered identically to an active wildcard
(`*`). Eek. This PR adds a visual `\` to differentiate.

Given the `message` contains query with `a * b \* c`:

<table>
<thead>
<tr>
<th>Before</th>
<th>After</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img width="357" height="131" alt="image"
src="https://github.com/user-attachments/assets/dcb8040d-e61c-4297-a21f-8ed4f3edf28a"
/>
</td>
<td>
<img width="357" height="131" alt="image"
src="https://github.com/user-attachments/assets/56e4723a-c037-4ebf-8979-f5b5ef50e183"
/>
</td>
</tr>
</tbody>
</table>

Closes LOGS-880.

Author: JoshuaKGoldberg

static/app/components/searchQueryBuilder/formattedQuery.spec.tsx

@@ -102,4 +102,16 @@ describe('FormattedQuery', () => {
 
     expect(screen.getByText(textWithMarkupMatcher('has foo'))).toBeInTheDocument();
   });
+
+  it('renders an escaped asterisk with the escape visible', () => {
+    render(<FormattedQuery {...defaultProps} query={'message:foo\\*bar'} />);
+
+    expect(screen.getByText('foo\\*bar')).toBeInTheDocument();
+  });
+
+  it('renders a wildcard asterisk without an escape', () => {
+    render(<FormattedQuery {...defaultProps} query="message:foo*bar" />);
+
+    expect(screen.getByText('foo*bar')).toBeInTheDocument();
+  });
 });

static/app/components/searchQueryBuilder/index.spec.tsx

@@ -2748,11 +2748,21 @@ describe('SearchQueryBuilder', () => {
         });
       });
 
-      it('renders escaped asterisks as a bare asterisk in the filter chip', async () => {
+      it('renders an escaped asterisk with the escape visible in the filter chip', async () => {
         render(
           <SearchQueryBuilder {...defaultProps} initialQuery={'browser.name:foo\\*'} />
         );
 
+        expect(
+          await within(
+            screen.getByRole('button', {name: 'Edit value for filter: browser.name'})
+          ).findByText('foo\\*')
+        ).toBeInTheDocument();
+      });
+
+      it('renders a wildcard asterisk without an escape in the filter chip', async () => {
+        render(<SearchQueryBuilder {...defaultProps} initialQuery="browser.name:foo*" />);
+
         expect(
           await within(
             screen.getByRole('button', {name: 'Edit value for filter: browser.name'})
@@ -5621,7 +5631,7 @@ describe('SearchQueryBuilder', () => {
       ).toBeInTheDocument();
     });
 
-    it('escapes * for is op but not contains op', async () => {
+    it('renders the escaped asterisk for the contains suggestion but a wildcard for the is suggestion', async () => {
       render(
         <SearchQueryBuilder
           {...defaultProps}
@@ -5635,7 +5645,7 @@ describe('SearchQueryBuilder', () => {
       const options = within(screen.getByRole('listbox')).getAllByRole('option');
       expect(options).toHaveLength(2);
 
-      expect(options[0]).toHaveTextContent('span.description contains test*');
+      expect(options[0]).toHaveTextContent('span.description contains test\\*');
       expect(options[1]).toHaveTextContent('span.description is test*');
     });
 

static/app/components/searchQueryBuilder/tokens/filter/utils.spec.tsx

@@ -196,7 +196,7 @@ describe('unescapeAsteriskSearchValue', () => {
 });
 
 describe('formatFilterValue', () => {
-  it('unescapes asterisks for unquoted values', () => {
+  it('preserves escaped asterisks for unquoted values', () => {
     expect(
       formatFilterValue({
         token: {
@@ -206,19 +206,55 @@ describe('formatFilterValue', () => {
           quoted: false,
         } as any,
       })
-    ).toBe('****');
+    ).toBe('\\*\\*\\*\\*');
   });
 
-  it('unescapes asterisks for quoted values', () => {
+  it('preserves escaped asterisks for quoted values', () => {
     expect(
       formatFilterValue({
         token: {
           type: Token.VALUE_TEXT,
-          text: '"foo\\\\*bar"',
+          text: '"foo\\*bar"',
           value: 'foo\\*bar',
           quoted: true,
         } as any,
       })
-    ).toBe('foo*bar');
+    ).toBe('foo\\*bar');
+  });
+
+  it('renders an escaped asterisk differently from a wildcard asterisk', () => {
+    const escaped = formatFilterValue({
+      token: {
+        type: Token.VALUE_TEXT,
+        text: 'foo\\*bar',
+        value: 'foo\\*bar',
+        quoted: false,
+      } as any,
+    });
+    const wildcard = formatFilterValue({
+      token: {
+        type: Token.VALUE_TEXT,
+        text: 'foo*bar',
+        value: 'foo*bar',
+        quoted: false,
+      } as any,
+    });
+
+    expect(escaped).toBe('foo\\*bar');
+    expect(wildcard).toBe('foo*bar');
+    expect(escaped).not.toBe(wildcard);
+  });
+
+  it('preserves a literal backslash before a wildcard asterisk', () => {
+    expect(
+      formatFilterValue({
+        token: {
+          type: Token.VALUE_TEXT,
+          text: 'foo\\\\*bar',
+          value: 'foo\\\\*bar',
+          quoted: false,
+        } as any,
+      })
+    ).toBe('foo\\\\*bar');
   });
 });

static/app/components/searchQueryBuilder/tokens/filter/utils.tsx

@@ -209,9 +209,7 @@ export function formatFilterValue({
         return content;
       }
 
-      return unescapeAsteriskSearchValue(
-        token.quoted ? unescapeTagValue(content) : content
-      );
+      return token.quoted ? unescapeTagValue(content) : content;
     }
     case Token.VALUE_RELATIVE_DATE:
       return t('%s', `${token.value}${token.unit} ago`);