From 385a2e87d231dc4d184028d23df642eafcf84a0b Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Sat, 11 Mar 2023 23:32:37 +0530
Subject: [PATCH] UI: Fix the icon on lineage Node (#10528)

* Fix the icon on lineage Node

* added pipeline icon

---------

Co-authored-by: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
---
 .../EntityLineage/EntityLineage.component.tsx | 20 +++++++-------
 .../ui/src/utils/EntityLineageUtils.tsx       | 27 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
index 060f87c7405..2f279cc60c6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/EntityLineage.component.tsx
@@ -11,14 +11,13 @@
  *  limitations under the License.
  */
 
-import { Modal } from 'antd';
+import { Modal, Space } from 'antd';
 import { AxiosError } from 'axios';
 import {
   debounce,
   isEmpty,
   isNil,
   isUndefined,
-  lowerCase,
   uniqueId,
   upperCase,
 } from 'lodash';
@@ -83,6 +82,7 @@ import {
   getDeletedLineagePlaceholder,
   getEdgeStyle,
   getEdgeType,
+  getEntityNodeIcon,
   getLayoutedElements,
   getLineageData,
   getLoadingStatusValue,
@@ -105,7 +105,6 @@ import {
   onNodeMouseMove,
 } from '../../utils/EntityLineageUtils';
 import { getEntityReferenceFromPipeline } from '../../utils/PipelineServiceUtils';
-import SVGIcons from '../../utils/SvgUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import EdgeInfoDrawer from '../EntityInfoDrawer/EdgeInfoDrawer.component';
 import EntityInfoDrawer from '../EntityInfoDrawer/EntityInfoDrawer.component';
@@ -1058,6 +1057,7 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
         y: event.clientY - (reactFlowBounds?.top ?? 0),
       });
       const [label, nodeType] = type.split('-');
+      const Icon = getEntityNodeIcon(label);
       const newNode = {
         id: uniqueId(),
         nodeType,
@@ -1072,18 +1072,18 @@ const EntityLineageComponent: FunctionComponent<EntityLineageProp> = ({
               {getNodeRemoveButton(() => {
                 removeNodeHandler(newNode as Node);
               })}
-              <div className="tw-flex">
-                <SVGIcons
-                  alt="entity-icon"
-                  className="tw-mr-2"
-                  icon={`${lowerCase(label)}-grey`}
-                  width="16px"
+              <Space align="center" size={2}>
+                <Icon
+                  className="m-r-xs"
+                  height={16}
+                  name="entity-icon"
+                  width={16}
                 />
                 <NodeSuggestions
                   entityType={upperCase(label)}
                   onSelectHandler={setSelectedEntity}
                 />
-              </div>
+              </Space>
             </div>
           ),
           removeNodeHandler,
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.tsx
index f0a16329347..09ba02cb1ec 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityLineageUtils.tsx
@@ -30,7 +30,7 @@ import LineageNodeLabel from 'components/EntityLineage/LineageNodeLabel';
 import Loader from 'components/Loader/Loader';
 import dagre from 'dagre';
 import { t } from 'i18next';
-import { isEmpty, isNil, isUndefined } from 'lodash';
+import { isEmpty, isNil, isUndefined, lowerCase } from 'lodash';
 import { LoadingState } from 'Models';
 import React, { Fragment, MouseEvent as ReactMouseEvent } from 'react';
 import { Link } from 'react-router-dom';
@@ -77,6 +77,13 @@ import { getEncodedFqn } from './StringsUtils';
 import SVGIcons from './SvgUtils';
 import { getEntityLink } from './TableUtils';
 
+import { ReactComponent as DashboardIcon } from '../assets/svg/dashboard-grey.svg';
+import { ReactComponent as MlModelIcon } from '../assets/svg/mlmodal.svg';
+import { ReactComponent as PipelineIcon } from '../assets/svg/pipeline-grey.svg';
+
+import { ReactComponent as TableIcon } from '../assets/svg/table-grey.svg';
+import { ReactComponent as TopicIcon } from '../assets/svg/topic-grey.svg';
+
 export const getHeaderLabel = (
   name = '',
   fqn = '',
@@ -1125,3 +1132,21 @@ export const getEdgeStyle = (value: boolean) => {
     stroke: value ? SECONDARY_COLOR : undefined,
   };
 };
+
+// Nodes Icons
+export const getEntityNodeIcon = (label: string) => {
+  switch (lowerCase(label)) {
+    case EntityType.TABLE:
+      return TableIcon;
+    case EntityType.DASHBOARD:
+      return DashboardIcon;
+    case EntityType.TOPIC:
+      return TopicIcon;
+    case EntityType.PIPELINE:
+      return PipelineIcon;
+    case EntityType.MLMODEL:
+      return MlModelIcon;
+    default:
+      return TableIcon;
+  }
+};