From 37984f2822cc593f6ce85d8109b569966cd4bc2f Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 8 Oct 2021 22:21:19 +0530
Subject: [PATCH] fixed #692 Search results are not showing the table
 description properly . (#714)

---
 .../components/searched-data/SearchedData.tsx | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx b/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx
index b10147e8bb1..81fc17c72da 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx
@@ -59,9 +59,25 @@ const SearchedData: React.FC<SearchedDataProp> = ({
 }: SearchedDataProp) => {
   const highlightSearchResult = () => {
     return data.map((table, index) => {
-      const description = isEmpty(table.highlight?.description)
-        ? table.description
-        : table.highlight?.description.join(' ');
+      let tDesc = table.description;
+      const highLightedTexts = !isEmpty(table.highlight?.description)
+        ? table.highlight?.description.join(' ') || ''
+        : '';
+      const highlightTxtMatch = highLightedTexts.match(
+        /<span(.*?)>(.*?)<\/span>/g
+      );
+      if (highlightTxtMatch) {
+        const matchTextArr = highlightTxtMatch.map((val) =>
+          val.replace(/<\/?span(.*?)>/g, '')
+        );
+        matchTextArr.forEach((text) => {
+          const regEx = new RegExp(`\\b${text}\\b`, 'g');
+          tDesc = tDesc.replace(
+            regEx,
+            `<span class="text-highlighter">${text}</span>`
+          );
+        });
+      }
 
       const name = isEmpty(table.highlight?.table_name)
         ? table.name
@@ -70,7 +86,7 @@ const SearchedData: React.FC<SearchedDataProp> = ({
       return (
         <div className="tw-mb-3" key={index}>
           <TableDataCard
-            description={description}
+            description={tDesc}
             fullyQualifiedName={table.fullyQualifiedName}
             indexType={table.index}
             name={name}