Issue-40: Updated UI part for search results in explore page (#306)

catalog-rest-service/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx

@@ -18,6 +18,7 @@
 import React, { FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 import { getDatasetDetailsPath } from '../../../constants/constants';
+import { stringToHTML } from '../../../utils/StringsUtils';
 import { getUsagePercentile } from '../../../utils/TableUtils';
 import TableDataCardBody from './TableDataCardBody';
 
@@ -59,7 +60,7 @@ const TableDataCard: FunctionComponent<Props> = ({
         <h6 className="tw-flex tw-items-center tw-m-0 tw-heading">
           <Link to={getDatasetDetailsPath(fullyQualifiedName)}>
             <button className="tw-text-grey-body tw-font-medium">
-              {name + ' '}
+              {stringToHTML(name)}
             </button>
           </Link>
         </h6>

catalog-rest-service/src/main/resources/ui/src/components/searched-data/SearchedData.tsx

@@ -15,6 +15,7 @@
   * limitations under the License.
 */
 
+import { isEmpty } from 'lodash';
 import { FormatedTableData } from 'Models';
 import PropTypes from 'prop-types';
 import React, { ReactNode } from 'react';
@@ -54,6 +55,38 @@ const SearchedData: React.FC<SearchedDataProp> = ({
   totalValue,
   fetchLeftPanel,
 }) => {
+  const highlightSearchResult = () => {
+    return data.map((table, index) => {
+      const description = isEmpty(table.highlight?.description)
+        ? table.description
+        : table.highlight?.description.join(' ');
+
+      const name = isEmpty(table.highlight?.table_name)
+        ? table.name
+        : table.highlight?.table_name.join(' ') || table.name;
+
+      return (
+        <div className="tw-mb-3" key={index}>
+          <TableDataCard
+            description={description}
+            fullyQualifiedName={table.fullyQualifiedName}
+            name={name}
+            owner={getOwnerFromId(table.owner)?.name}
+            serviceType={table.serviceType || '--'}
+            tableType={table.tableType}
+            tags={table.tags}
+            tier={
+              (table.tier || getTierFromSearchTableTags(table.tags))?.split(
+                '.'
+              )[1]
+            }
+            usage={table.weeklyPercentileRank}
+          />
+        </div>
+      );
+    });
+  };
+
   return (
     <>
       <PageContainer leftPanelContent={fetchLeftPanel && fetchLeftPanel()}>
@@ -72,27 +105,7 @@ const SearchedData: React.FC<SearchedDataProp> = ({
                   ) : null}
                   {data.length > 0 ? (
                     <div className="tw-grid tw-grid-rows-1 tw-grid-cols-1">
-                      {data.map((table, index) => (
+                      {highlightSearchResult()}
-                        <div className="tw-mb-3" key={index}>
-                          <TableDataCard
-                            description={table.description}
-                            fullyQualifiedName={table.fullyQualifiedName}
-                            name={table.name}
-                            owner={getOwnerFromId(table.owner)?.name}
-                            serviceType={table.serviceType || '--'}
-                            tableType={table.tableType}
-                            tags={table.tags}
-                            tier={
-                              (
-                                table.tier ||
-                                getTierFromSearchTableTags(table.tags)
-                              )?.split('.')[1]
-                            }
-                            usage={table.weeklyPercentileRank}
-                          />
-                        </div>
-                      ))}
-
                       {totalValue > PAGE_SIZE && data.length > 0 && (
                         <Pagination
                           currentPage={currentPage}

catalog-rest-service/src/main/resources/ui/src/interface/types.d.ts

@@ -205,6 +205,10 @@ declare module 'Models' {
     service?: string;
     serviceType?: string;
     tier: string;
+    highlight?: {
+      description: string[];
+      table_name: string[];
+    };
   };
 
   export type NewUser = {

catalog-rest-service/src/main/resources/ui/src/styles/tailwind.css

@@ -291,4 +291,8 @@
   .disable-cta * {
     @apply tw-cursor-not-allowed !important;
   }
+
+  .text-highlighter {
+    @apply tw-bg-warning-lite tw-p-1;
+  }
 }

catalog-rest-service/src/main/resources/ui/src/utils/APIUtils.js

@@ -21,6 +21,7 @@ export const formatDataResponse = (hits) => {
     newData.tableEntity = hit._source.table_entity;
     newData.tier = hit._source.tier;
     newData.owner = hit._source.owner;
+    newData.highlight = hit.highlight;
 
     return newData;
   });

catalog-rest-service/src/main/resources/ui/tailwind.config.js

@@ -30,6 +30,7 @@ const success = '#51C41A';
 const error = '#FF4C3B';
 const info = '#1890FF';
 const warning = '#FFC34E';
+const warningBG = '#FFC34E40';
 
 // Background colors
 const bodyBG = '#FCFBFE';
@@ -89,6 +90,7 @@ module.exports = {
         success: success,
         error: error,
         warning: warning,
+        'warning-lite': warningBG,
         info: info,
       },
       fontFamily: {