Addressed review comments

Signed-off-by: Yi Cai <[email protected]>

workspaces/global-header/plugins/global-header/src/components/SearchComponent/SearchBar.tsx

@@ -29,7 +29,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import InputAdornment from '@mui/material/InputAdornment';
 import SearchIcon from '@mui/icons-material/Search';
-import { highlightMatch } from '../../utils/stringUtils';
+import { createSearchLink, highlightMatch } from '../../utils/stringUtils';
 import styles from './SearchBar.module.css';
 import { useNavigate } from 'react-router-dom';
 
@@ -54,6 +54,7 @@ export const SearchBar = (props: SearchBarProps) => {
         } else if (query?.term) {
           options = ['No results found'];
         }
+        const searchLink = createSearchLink(query?.term ?? '');
 
         return (
           <Autocomplete
@@ -69,7 +70,7 @@ export const SearchBar = (props: SearchBarProps) => {
               if (event.key === 'Enter') {
                 event.preventDefault();
                 if (query?.term) {
-                  navigate(`/search?query=${query?.term}`);
+                  navigate(searchLink);
                 }
               }
             }}
@@ -90,7 +91,7 @@ export const SearchBar = (props: SearchBarProps) => {
                   ),
                 }}
                 sx={{
-                  pt: '0.5rem',
+                  pt: '6px',
                   input: { color: '#fff' },
                   button: { color: '#fff' },
                 }}
@@ -101,7 +102,7 @@ export const SearchBar = (props: SearchBarProps) => {
                 return (
                   <Box key="all-results" id="all-results">
                     <Divider sx={{ my: 0.5 }} />
-                    <Link to={`/search?query=${query?.term}`} underline="none">
+                    <Link to={searchLink} underline="none">
                       <ListItem
                         {...renderProps}
                         sx={{ my: 0 }}

workspaces/global-header/plugins/global-header/src/utils/stringUtils.test.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { highlightMatch } from './stringUtils';
+import '@testing-library/jest-dom';
+
+describe('highlightMatch', () => {
+  it('should highlight the query within the text', () => {
+    const text = 'This is a test string';
+    const query = 'test';
+    const { container } = render(<>{highlightMatch(text, query)}</>);
+
+    const highlighted = screen.getByText('test');
+    expect(highlighted).toHaveStyle('font-weight: normal');
+
+    const spans = container.querySelectorAll('span');
+    expect(spans[0].textContent?.trim()).toBe('This is a');
+    expect(spans[0]).toHaveStyle('font-weight: 700');
+    expect(spans[2].textContent?.trim()).toBe('string');
+    expect(spans[2]).toHaveStyle('font-weight: 700');
+  });
+
+  it('should highlight the query case-insensitively', () => {
+    const text = 'This is a Test string';
+    const query = 'test';
+    render(<>{highlightMatch(text, query)}</>);
+
+    const highlighted = screen.getByText('Test');
+    expect(highlighted).toHaveStyle('font-weight: normal');
+  });
+
+  it('should handle special regex characters in the query', () => {
+    const text = 'This is a [test] string';
+    const query = '[test]';
+    render(<>{highlightMatch(text, query)}</>);
+
+    const highlighted = screen.getByText('[test]');
+    expect(highlighted).toHaveStyle('font-weight: normal');
+  });
+
+  it('should not highlight anything if the query does not match', () => {
+    const text = 'This is a test string';
+    const query = 'notfound';
+    const { container } = render(<>{highlightMatch(text, query)}</>);
+
+    expect(container.textContent).toBe(text);
+  });
+});

workspaces/global-header/plugins/global-header/src/utils/stringUtils.tsx

@@ -26,7 +26,11 @@ import Typography from '@mui/material/Typography';
 export const highlightMatch = (text: string, query: string) => {
   if (!query) return <>{text}</>;
 
-  const regex = new RegExp(`(${query})`, 'i');
+  const escapeRegex = (input: string) =>
+    input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const escapedQuery = escapeRegex(query);
+
+  const regex = new RegExp(`(${escapedQuery})`, 'i');
   const parts = text.split(regex);
 
   return (
@@ -53,3 +57,7 @@ export const highlightMatch = (text: string, query: string) => {
     </>
   );
 };
+
+export const createSearchLink = (searchTerm: string) => {
+  return `/search?query=${encodeURIComponent(searchTerm)}`;
+};