From 297fdaea8d97eaff415d4d1eae44c16b16efc33c Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Wed, 8 Sep 2021 17:19:26 +0530
Subject: [PATCH] Added entity icons on explore tabs and suggestion dropdown
 (#436)

---
 .../ui/src/components/app-bar/Suggestions.tsx          | 10 +++++++++-
 .../ui/src/pages/explore/explore.constants.ts          |  4 ++++
 .../src/main/resources/ui/src/pages/explore/index.tsx  |  6 ++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Suggestions.tsx b/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Suggestions.tsx
index aeaba1001d1..2ec771ee1b9 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Suggestions.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/app-bar/Suggestions.tsx
@@ -21,6 +21,7 @@ import { Link } from 'react-router-dom';
 import { getSuggestions } from '../../axiosAPIs/miscAPI';
 import { SearchIndex } from '../../enums/search.enum';
 import { serviceTypeLogo } from '../../utils/ServiceUtils';
+import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import { getEntityLink } from '../../utils/TableUtils';
 
 type SuggestionProp = {
@@ -84,24 +85,31 @@ const Suggestions = ({ searchText, isOpen, setIsOpen }: SuggestionProp) => {
 
   const getGroupLabel = (index: string) => {
     let label = '';
+    let icon = '';
     switch (index) {
       case SearchIndex.TOPIC:
         label = 'Topics';
+        icon = Icons.TOPIC_GREY;
 
         break;
       case SearchIndex.DASHBOARD:
         label = 'Dashboards';
+        icon = Icons.DASHBOARD_GREY;
 
         break;
       case SearchIndex.TABLE:
       default:
         label = 'Tables';
+        icon = Icons.TABLE_GREY;
 
         break;
     }
 
     return (
-      <p className="tw-px-2 tw-py-2 tw-text-grey-muted tw-text-xs">{label}</p>
+      <div className="tw-flex tw-gap-2 tw-px-2 tw-py-2">
+        <SVGIcons alt="icon" className="tw-h-4 tw-w-4" icon={icon} />
+        <p className="tw-text-grey-muted tw-text-xs">{label}</p>
+      </div>
     );
   };
 
diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/explore/explore.constants.ts b/catalog-rest-service/src/main/resources/ui/src/pages/explore/explore.constants.ts
index ba356eff70f..d031d3e9192 100644
--- a/catalog-rest-service/src/main/resources/ui/src/pages/explore/explore.constants.ts
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/explore/explore.constants.ts
@@ -23,6 +23,7 @@ import {
   topicSortingFields,
 } from '../../constants/constants';
 import { SearchIndex } from '../../enums/search.enum';
+import { Icons } from '../../utils/SvgUtils';
 
 export const getBucketList = (buckets: Array<Bucket>) => {
   let bucketList: Array<Bucket> = [...tiers];
@@ -67,6 +68,7 @@ export const tabsInfo = [
     sortField: tableSortingFields[0].value,
     tab: 1,
     path: 'tables',
+    icon: Icons.TABLE_GREY,
   },
   {
     label: 'Topics',
@@ -75,6 +77,7 @@ export const tabsInfo = [
     sortField: topicSortingFields[0].value,
     tab: 2,
     path: 'topics',
+    icon: Icons.TOPIC_GREY,
   },
   {
     label: 'Dashboards',
@@ -83,5 +86,6 @@ export const tabsInfo = [
     sortField: topicSortingFields[0].value,
     tab: 3,
     path: 'dashboards',
+    icon: Icons.DASHBOARD_GREY,
   },
 ];
diff --git a/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx b/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx
index e20eb3317a0..524c4768311 100644
--- a/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/pages/explore/index.tsx
@@ -46,6 +46,7 @@ import { formatDataResponse } from '../../utils/APIUtils';
 import { getCountBadge } from '../../utils/CommonUtils';
 import { getFilterString } from '../../utils/FilterUtils';
 import { dropdownIcon as DropDownIcon } from '../../utils/svgconstant';
+import SVGIcons from '../../utils/SvgUtils';
 import { getAggrWithDefaultValue, tabsInfo } from './explore.constants';
 import { Params } from './explore.interface';
 
@@ -469,6 +470,11 @@ const ExplorePage: React.FC = (): React.ReactElement => {
                 onClick={() => {
                   onTabChange(tab.tab);
                 }}>
+                <SVGIcons
+                  alt="icon"
+                  className="tw-h-4 tw-w-4 tw-mr-2"
+                  icon={tab.icon}
+                />
                 {tab.label}
                 {getTabCount(tab.index)}
               </button>