fix(ui): search dropdown options case changing issue (#9745)

* fixed search dropdown options not showing the original suggestion options

* added unit tests for getSearchLabel util function

openmetadata-ui/src/main/resources/ui/src/utils/AdvancedSearchUtils.test.tsx

@@ -14,9 +14,12 @@
 import { SearchDropdownOption } from 'components/SearchDropdown/SearchDropdown.interface';
 import {
   getSearchDropdownLabels,
+  getSearchLabel,
   getSelectedOptionLabelString,
 } from './AdvancedSearchUtils';
 import {
+  highlightedItemLabel,
+  mockItemLabel,
   mockLongOptionsArray,
   mockOptionsArray,
   mockShortOptionsArray,
@@ -70,4 +73,22 @@ describe('AdvancedSearchUtils tests', () => {
 
     expect(resultOptionsString).toBe('');
   });
+
+  it('Function getSearchLabel should return string with highlighted substring for matched searchKey', () => {
+    const resultSearchLabel = getSearchLabel(mockItemLabel, 'wa');
+
+    expect(resultSearchLabel).toBe(highlightedItemLabel);
+  });
+
+  it('Function getSearchLabel should return original string if searchKey is not matched', () => {
+    const resultSearchLabel = getSearchLabel(mockItemLabel, 'wo');
+
+    expect(resultSearchLabel).toBe(mockItemLabel);
+  });
+
+  it('Function getSearchLabel should return original string if searchKey is passed as an empty string', () => {
+    const resultSearchLabel = getSearchLabel(mockItemLabel, '');
+
+    expect(resultSearchLabel).toBe(mockItemLabel);
+  });
 });

openmetadata-ui/src/main/resources/ui/src/utils/AdvancedSearchUtils.tsx

@@ -143,11 +143,15 @@ export const renderAdvanceSearchButtons: RenderSettings['renderButton'] = (
   return <></>;
 };
 
-const getSearchLabel = (itemLabel: string, searchKey: string) => {
+export const getSearchLabel = (itemLabel: string, searchKey: string) => {
   const regex = new RegExp(searchKey, 'gi');
-  const result = itemLabel.replace(regex, `<mark>${searchKey}</mark>`);
+  if (searchKey) {
+    const result = itemLabel.replace(regex, (match) => `<mark>${match}</mark>`);
 
-  return result;
+    return result;
+  } else {
+    return itemLabel;
+  }
 };
 
 export const getSearchDropdownLabels = (

openmetadata-ui/src/main/resources/ui/src/utils/mocks/AdvancedSearchUtils.mock.ts

@@ -29,3 +29,8 @@ export const mockLongOptionsArray = [
   { key: 'string3', label: 'string3' },
   { key: 'string4', label: 'string4' },
 ];
+
+export const mockItemLabel = 'Aaron Warren and Aaron Warner';
+
+export const highlightedItemLabel =
+  'Aaron <mark>Wa</mark>rren and Aaron <mark>Wa</mark>rner';