From f6ca0075461a59872d3ed1f6e9ac4e6ca8e56845 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Tue, 7 Sep 2021 09:32:00 +0530
Subject: [PATCH] Fixed #392 Add entity type icons and show it at all the
 relevant places (#410)

---
 .../resources/ui/src/assets/svg/dashboard.svg |  3 +++
 .../resources/ui/src/assets/svg/table.svg     |  3 +++
 .../resources/ui/src/assets/svg/topic.svg     |  3 +++
 .../common/table-data-card/TableDataCard.tsx  | 23 ++++++++++++-------
 .../main/resources/ui/src/utils/SvgUtils.tsx  | 18 +++++++++++++++
 .../resources/ui/src/utils/TableUtils.tsx     | 23 +++++++++++++++++++
 6 files changed, 65 insertions(+), 8 deletions(-)
 create mode 100644 catalog-rest-service/src/main/resources/ui/src/assets/svg/dashboard.svg
 create mode 100644 catalog-rest-service/src/main/resources/ui/src/assets/svg/table.svg
 create mode 100644 catalog-rest-service/src/main/resources/ui/src/assets/svg/topic.svg

diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/dashboard.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/dashboard.svg
new file mode 100644
index 00000000000..685e3b7f6ee
--- /dev/null
+++ b/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>
diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/table.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/table.svg
new file mode 100644
index 00000000000..bcab0e19208
--- /dev/null
+++ b/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>
diff --git a/catalog-rest-service/src/main/resources/ui/src/assets/svg/topic.svg b/catalog-rest-service/src/main/resources/ui/src/assets/svg/topic.svg
new file mode 100644
index 00000000000..fb565b92e6a
--- /dev/null
+++ b/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>
diff --git a/catalog-rest-service/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx b/catalog-rest-service/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx
index 0c50040a897..66748c160f1 100644
--- a/catalog-rest-service/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx
+++ b/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
diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx b/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx
index 57fb5eec067..439df3dda24 100644
--- a/catalog-rest-service/src/main/resources/ui/src/utils/SvgUtils.tsx
+++ b/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:
diff --git a/catalog-rest-service/src/main/resources/ui/src/utils/TableUtils.tsx b/catalog-rest-service/src/main/resources/ui/src/utils/TableUtils.tsx
index dc572264549..83dae9a3b24 100644
--- a/catalog-rest-service/src/main/resources/ui/src/utils/TableUtils.tsx
+++ b/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" />;
+};