fix: search highlight on explore card and synonym overflow on explore summary panel (#11451)

* fix: search highlight on explore card

* fix: use common component of synonyms

* fix: update facet filter key

* fix: code smell

* fix: code smell

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx

@@ -17,6 +17,7 @@ import { ROUTES } from 'constants/constants';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
+import { stringToHTML } from 'utils/StringsUtils';
 import { EntityHeaderTitleProps } from './EntityHeaderTitle.interface';
 
 const EntityHeaderTitle = ({
@@ -48,14 +49,14 @@ const EntityHeaderTitle = ({
           <Typography.Text
             className="m-b-0 d-block tw-text-xs tw-text-grey-muted"
             data-testid="entity-header-name">
-            {name}
+            {stringToHTML(name)}
           </Typography.Text>
 
           <Typography.Text
             className="m-b-0 d-block entity-header-display-name text-lg font-bold"
             data-testid="entity-header-display-name"
             ellipsis={{ tooltip: true }}>
-            {displayName ?? name}
+            {stringToHTML(displayName ?? name)}
             {openEntityInNewPage && (
               <IconExternalLink
                 className="anticon vertical-baseline m-l-xss"

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/GlossaryTermSummary/GlossaryTermSummary.component.tsx

@@ -11,10 +11,11 @@
  *  limitations under the License.
  */
 
-import { Col, Divider, Row, Tag, Typography } from 'antd';
+import { Col, Divider, Row, Typography } from 'antd';
 import { AxiosError } from 'axios';
 import ProfilePicture from 'components/common/ProfilePicture/ProfilePicture';
 import SummaryPanelSkeleton from 'components/Skeleton/SummaryPanelSkeleton/SummaryPanelSkeleton.component';
+import TagButton from 'components/TagButton/TagButton.component';
 import { SummaryEntityType } from 'enums/EntitySummary.enum';
 import { GlossaryTerm } from 'generated/entity/data/glossaryTerm';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -113,7 +114,7 @@ function GlossaryTermSummary({
 
         <Divider className="m-y-xs" />
 
-        <Row className="m-md" gutter={[0, 16]}>
+        <Row className="m-md" gutter={[0, 8]}>
           <Col span={24}>
             <Typography.Text
               className="text-base text-grey-muted"
@@ -125,9 +126,11 @@ function GlossaryTermSummary({
             {synonyms.length > 0 ? (
               <div className="d-flex flex-wrap">
                 {synonyms.map((synonym) => (
-                  <>
-                    <Tag className="text-grey-body">{synonym}</Tag>
-                  </>
+                  <TagButton
+                    className="glossary-synonym-tag"
+                    key={synonym}
+                    label={synonym}
+                  />
                 ))}
               </div>
             ) : (

openmetadata-ui/src/main/resources/ui/src/components/common/facetfilter/facetFilter.constants.ts

@@ -22,7 +22,7 @@ const aggregationKeyToTitleMap: Record<string, string> = {
   'service.name.keyword': 'Service Name',
   entityType: 'Entity Type',
   'messageSchema.schemaFields.name': 'Schema Fields',
-  'glossary.name': 'Glossary',
+  'glossary.name.keyword': 'Glossary',
 };
 
 const aggregationKeyOrdering: Record<string, number> = {

openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.test.tsx

@@ -44,6 +44,10 @@ const mockData: SearchedDataProps['data'] = [
         tagFQN: 'tier1',
       },
     },
+    highlight: {
+      name: ['raw_<span class="text-highlighter">customer</span>'],
+      displayName: ['raw_<span class="text-highlighter">customer</span>'],
+    },
   },
   {
     _index: SearchIndex.TABLE,
@@ -132,6 +136,27 @@ describe('Test SearchedData Component', () => {
     expect(searchedDataContainer).toHaveLength(3);
   });
 
+  it('Should display table card with name and display name highlighted', () => {
+    const { container } = render(<SearchedData {...MOCK_PROPS} />, {
+      wrapper: MemoryRouter,
+    });
+
+    const searchedDataContainer = getAllByTestId(container, 'table-data-card');
+
+    expect(searchedDataContainer).toHaveLength(3);
+
+    const headerName = getAllByTestId(container, 'entity-header-name');
+    const headerDisplayName = getAllByTestId(
+      container,
+      'entity-header-display-name'
+    );
+
+    expect(headerName[0].querySelector('span')).toHaveClass('text-highlighter');
+    expect(headerDisplayName[0].querySelector('span')).toHaveClass(
+      'text-highlighter'
+    );
+  });
+
   it('If children is provided it should display', () => {
     const { container } = render(
       <SearchedData {...MOCK_PROPS}>

openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx

@@ -64,9 +64,11 @@ const SearchedData: React.FC<SearchedDataProps> = ({
         });
       }
 
-      let name = getEntityName(table);
+      let name = table.name;
+      let displayName = getEntityName(table);
       if (!isUndefined(highlight)) {
         name = highlight?.name?.join(' ') || name;
+        displayName = highlight?.displayName?.join(' ') || displayName;
       }
 
       const matches = highlight
@@ -101,7 +103,7 @@ const SearchedData: React.FC<SearchedDataProps> = ({
             handleSummaryPanelDisplay={handleSummaryPanelDisplay}
             id={`tabledatacard${index}`}
             matches={matches}
-            source={{ ...table, name, description: tDesc }}
+            source={{ ...table, name, description: tDesc, displayName }}
           />
         </div>
       );