Fixed #392 Add entity type icons and show it at all the relevant places (#410)

catalog-rest-service/src/main/resources/ui/src/assets/svg/dashboard.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.89091 0.875C3.53283 0.875 0 4.4007 0 8.75C0 10.1938 0.390436 11.5462 1.0702 12.7094C1.22391 12.9724 1.51681 13.125 1.82203 13.125H13.9598C14.265 13.125 14.5579 12.9724 14.7116 12.7094C15.3914 11.5462 15.7818 10.1938 15.7818 8.75C15.7818 4.4007 12.249 0.875 7.89091 0.875ZM7.89091 2.625C8.29395 2.625 8.61917 2.90199 8.72165 3.27168C8.69123 3.33348 8.64931 3.38734 8.62712 3.45406L8.3745 4.21066C8.23394 4.30609 8.07393 4.375 7.89118 4.375C7.40704 4.375 7.01442 3.98316 7.01442 3.5C7.01442 3.01684 7.40677 2.625 7.89091 2.625ZM2.6303 10.5C2.14616 10.5 1.75354 10.1082 1.75354 9.625C1.75354 9.14184 2.14616 8.75 2.6303 8.75C3.11444 8.75 3.50707 9.14184 3.50707 9.625C3.50707 10.1082 3.11444 10.5 2.6303 10.5ZM3.94545 6.125C3.46131 6.125 3.06869 5.73316 3.06869 5.25C3.06869 4.76684 3.46131 4.375 3.94545 4.375C4.42959 4.375 4.82222 4.76684 4.82222 5.25C4.82222 5.73316 4.42959 6.125 3.94545 6.125ZM10.7067 4.14504L9.02632 9.17629C9.40142 9.4973 9.64444 9.96789 9.64444 10.5C9.64444 10.8205 9.55184 11.1166 9.40114 11.375H6.38068C6.22998 11.1166 6.13737 10.8205 6.13737 10.5C6.13737 9.57195 6.86345 8.82027 7.77857 8.76121L9.45923 3.72969C9.57348 3.38625 9.94501 3.19785 10.2911 3.31488C10.6355 3.42945 10.8212 3.80133 10.7067 4.14504ZM11.1084 5.7091L11.5336 4.43625C11.6287 4.40098 11.729 4.37527 11.8364 4.37527C12.3205 4.37527 12.7131 4.76711 12.7131 5.25027C12.7131 5.73344 12.3205 6.12527 11.8364 6.12527C11.5246 6.125 11.264 5.95355 11.1084 5.7091ZM13.1515 10.5C12.6674 10.5 12.2747 10.1082 12.2747 9.625C12.2747 9.14184 12.6674 8.75 13.1515 8.75C13.6357 8.75 14.0283 9.14184 14.0283 9.625C14.0283 10.1082 13.6357 10.5 13.1515 10.5Z" fill="#008376"/>
+</svg>

catalog-rest-service/src/main/resources/ui/src/assets/svg/table.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6875 0.875H1.3125C0.587617 0.875 0 1.46262 0 2.1875V11.8125C0 12.5374 0.587617 13.125 1.3125 13.125H12.6875C13.4124 13.125 14 12.5374 14 11.8125V2.1875C14 1.46262 13.4124 0.875 12.6875 0.875ZM6.125 11.375H1.75V8.75H6.125V11.375ZM6.125 7H1.75V4.375H6.125V7ZM12.25 11.375H7.875V8.75H12.25V11.375ZM12.25 7H7.875V4.375H12.25V7Z" fill="#7147E8"/>
+</svg>

catalog-rest-service/src/main/resources/ui/src/assets/svg/topic.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.24 2V3.25C12.24 4.35157 9.49876 5.25 6.12 5.25C2.74124 5.25 0 4.35157 0 3.25V2C0 0.898434 2.74124 0 6.12 0C9.49876 0 12.24 0.898434 12.24 2ZM12.24 4.8125V7.625C12.24 8.72657 9.49876 9.625 6.12 9.625C2.74124 9.625 0 8.72657 0 7.625V4.8125C1.31484 5.71875 3.7214 6.14064 6.12 6.14064C8.5186 6.14064 10.9251 5.71875 12.24 4.8125ZM12.24 9.1875V12C12.24 13.1016 9.49876 14 6.12 14C2.74124 14 0 13.1016 0 12V9.1875C1.31484 10.0938 3.7214 10.5156 6.12 10.5156C8.5186 10.5156 10.9251 10.0938 12.24 9.1875Z" fill="#B02AAC"/>
+</svg>

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

@@ -18,7 +18,11 @@
 import React, { FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 import { stringToHTML } from '../../../utils/StringsUtils';
-import { getEntityLink, getUsagePercentile } from '../../../utils/TableUtils';
+import {
+  getEntityIcon,
+  getEntityLink,
+  getUsagePercentile,
+} from '../../../utils/TableUtils';
 import TableDataCardBody from './TableDataCardBody';
 
 type Props = {
@@ -58,13 +62,16 @@ const TableDataCard: FunctionComponent<Props> = ({
   return (
     <div className="tw-bg-white tw-p-3 tw-border tw-border-main tw-rounded-md">
       <div>
-        <h6 className="tw-flex tw-items-center tw-m-0 tw-heading">
-          <Link to={getEntityLink(indexType, fullyQualifiedName)}>
-            <button className="tw-text-grey-body tw-font-medium">
-              {stringToHTML(name)}
-            </button>
-          </Link>
-        </h6>
+        <div className="tw-flex tw-gap-2">
+          {getEntityIcon(indexType)}
+          <h6 className="tw-flex tw-items-center tw-m-0 tw-heading">
+            <Link to={getEntityLink(indexType, fullyQualifiedName)}>
+              <button className="tw-text-grey-body tw-font-medium">
+                {stringToHTML(name)}
+              </button>
+            </Link>
+          </h6>
+        </div>
       </div>
       <div className="tw-pt-2">
         <TableDataCardBody

catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx

@@ -3,6 +3,7 @@ import IconGoogle from '../assets/img/google-icon.png';
 import IconWelcomePopper from '../assets/img/welcome-popper-icon.png';
 import IconAPI from '../assets/svg/api.svg';
 import IconSuccess from '../assets/svg/check.svg';
+import IconDashboard from '../assets/svg/dashboard.svg';
 import IconAsstest from '../assets/svg/data-assets.svg';
 import IconDoc from '../assets/svg/doc.svg';
 import IconError from '../assets/svg/error.svg';
@@ -45,7 +46,9 @@ import IconInfo from '../assets/svg/info.svg';
 import LogoMonogram from '../assets/svg/logo-monogram.svg';
 import Logo from '../assets/svg/logo.svg';
 import IconSetting from '../assets/svg/service.svg';
+import IconTable from '../assets/svg/table.svg';
 import IconTerns from '../assets/svg/terms.svg';
+import IconTopic from '../assets/svg/topic.svg';
 import IconUser from '../assets/svg/user.svg';
 import IconWarning from '../assets/svg/warning.svg';
 
@@ -106,6 +109,9 @@ export const Icons = {
   TERMS: 'terms',
   DOC: 'doc',
   API: 'api',
+  TABLE: 'table',
+  TOPIC: 'topic',
+  DASHBOARD: 'dashboard',
 };
 
 const SVGIcons: FunctionComponent<Props> = ({
@@ -315,6 +321,18 @@ const SVGIcons: FunctionComponent<Props> = ({
     case Icons.API:
       IconComponent = IconAPI;
 
+      break;
+    case Icons.TABLE:
+      IconComponent = IconTable;
+
+      break;
+    case Icons.TOPIC:
+      IconComponent = IconTopic;
+
+      break;
+    case Icons.DASHBOARD:
+      IconComponent = IconDashboard;
+
       break;
 
     default:

catalog-rest-service/src/main/resources/ui/src/utils/TableUtils.tsx

@@ -165,3 +165,26 @@ export const getEntityLink = (
       return getDatasetDetailsPath(fullyQualifiedName);
   }
 };
+
+export const getEntityIcon = (indexType: string) => {
+  let icon = '';
+  switch (indexType) {
+    case SearchIndex.TOPIC:
+      icon = 'topic';
+
+      break;
+
+    case SearchIndex.DASHBOARD:
+      icon = 'dashboard';
+
+      break;
+
+    case SearchIndex.TABLE:
+    default:
+      icon = 'table';
+
+      break;
+  }
+
+  return <SVGIcons alt={icon} icon={icon} width="14" />;
+};