Added entity icons on explore tabs and suggestion dropdown (#436)

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>
     );
   };
 

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,
   },
 ];

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>