MINOR: support entity icon from classBase (#17223)

* support entity icon from classBase * minor changes
2026-01-07 04:56:54 +00:00 · 2024-07-29 21:50:47 +05:30 · 2024-07-29 21:50:47 +05:30 · be1d5a2a31
commit be1d5a2a31
parent 72fd62a14b
24 changed files with 81 additions and 44 deletions
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/kpi.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/kpi.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"><g clip-path="url(#a)"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".6" d="M6.538 7.462 5.33 6.254a.654.654 0 0 1 .925-.925l.746.746 2.68-2.68a.654.654 0 0 1 .924.925L7.463 7.462a.654.654 0 0 1-.925 0Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".7" d="M9.5 3.5c-.703-.515-1.56-.754-2.5-.754A4.253 4.253 0 1 0 11.255 7c0-.94-.24-1.797-.754-2.5"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".7" d="M9.148.863a6.5 6.5 0 0 0-6.08 11.315M3.84 12.68a6.5 6.5 0 1 0 6.163-11.45M11.254 7H13.5"/><path fill="currentColor" d="M11.845 2.645a.35.35 0 0 0-.496-.493l.496.493Zm-1.093.108-.247.249.497.493.246-.248-.496-.494Zm.597-.601-.597.601.496.494.598-.602-.497-.493Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".7" d="M7 .5v2.247M3.993 3.987l-1.59-1.589M.5 7h2.247"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".5" d="M5.324 8.484v1.507M6.135 8.5l-.763.7.816.788M8.677 8.484v1.507M6.998 8.484v1.507M6.998 8.484h.42c.235 0 .434.19.434.426a.433.433 0 0 1-.434.425l-.417.002"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath></defs></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none"><g clip-path="url(#a)"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".6" d="M6.538 7.462 5.33 6.254a.654.654 0 0 1 .925-.925l.746.746 2.68-2.68a.654.654 0 0 1 .924.925L7.463 7.462a.654.654 0 0 1-.925 0Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".7" d="M9.5 3.5c-.703-.515-1.56-.754-2.5-.754A4.253 4.253 0 1 0 11.255 7c0-.94-.24-1.797-.754-2.5"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".7" d="M9.148.863a6.5 6.5 0 0 0-6.08 11.315M3.84 12.68a6.5 6.5 0 1 0 6.163-11.45M11.254 7H13.5"/><path fill="currentColor" d="M11.845 2.645a.35.35 0 0 0-.496-.493l.496.493Zm-1.093.108-.247.249.497.493.246-.248-.496-.494Zm.597-.601-.597.601.496.494.598-.602-.497-.493Z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".7" d="M7 .5v2.247M3.993 3.987l-1.59-1.589M.5 7h2.247"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".5" d="M5.324 8.484v1.507M6.135 8.5l-.763.7.816.788M8.677 8.484v1.507M6.998 8.484v1.507M6.998 8.484h.42c.235 0 .434.19.434.426a.433.433 0 0 1-.434.425l-.417.002"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath></defs></svg>
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardHeader/FeedCardHeaderV2.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardHeader/FeedCardHeaderV2.test.tsx
@ -20,7 +20,7 @@ import {
 } from '../../../../generated/entity/feed/thread';
 import FeedCardHeaderV2 from './FeedCardHeaderV2';

-jest.mock('../../../../utils/TableUtils', () => ({
+jest.mock('../../../../utils/SearchClassBase', () => ({
  getEntityIcon: jest.fn().mockReturnValue('entityIcon'),
 }));

--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardHeader/FeedCardHeaderV2.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedCardV2/FeedCardHeader/FeedCardHeaderV2.tsx
@ -36,7 +36,7 @@ import { ASSET_CARD_STYLES } from '../../../../constants/Feeds.constants';
 import { EntityType } from '../../../../enums/entity.enum';
 import { CardStyle } from '../../../../generated/entity/feed/thread';
 import entityUtilClassBase from '../../../../utils/EntityUtilClassBase';
-import { getEntityIcon } from '../../../../utils/TableUtils';
+import searchClassBase from '../../../../utils/SearchClassBase';
 import UserPopOverCard from '../../../common/PopOverCard/UserPopOverCard';
 import './feed-card-header-v2.less';
 import { FeedCardHeaderV2Props } from './FeedCardHeaderV2.interface';
@ -101,7 +101,7 @@ const FeedCardHeaderV2 = ({
        <EntityPopOverCard entityFQN={entityFQN} entityType={entityType}>
          <>
            <span className="w-5 h-5 m-r-xss d-inline-flex text-xl align-middle">
-              {getEntityIcon(entityType ?? '')}
+              {searchClassBase.getEntityIcon(entityType ?? '')}
            </span>
            <Link
              className="break-all"
@ -120,7 +120,7 @@ const FeedCardHeaderV2 = ({
      return (
        <>
          <span className="w-5 h-5 m-r-xss d-inline-flex text-xl align-middle">
-            {getEntityIcon(entityType ?? '')}
+            {searchClassBase.getEntityIcon(entityType ?? '')}
          </span>
          <Typography.Text className="break-all font-bold">
            {feed?.entityRef
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedEditor/FeedEditor.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedEditor/FeedEditor.tsx
@ -45,7 +45,7 @@ import {
 import { LinkBlot } from '../../../utils/QuillLink/QuillLink';
 import { insertMention, insertRef } from '../../../utils/QuillUtils';
 import { getSanitizeContent } from '../../../utils/sanitize.utils';
-import { getEntityIcon } from '../../../utils/TableUtils';
+import searchClassBase from '../../../utils/SearchClassBase';
 import { editorRef } from '../../common/RichTextEditor/RichTextEditor.interface';
 import './feed-editor.less';
 import { FeedEditorProp, MentionSuggestionsItem } from './FeedEditor.interface';
@ -140,7 +140,7 @@ export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
            </div>`
          : '';

-        const icon = getEntityIcon(item.type as string);
+        const icon = searchClassBase.getEntityIcon(item.type ?? '');

        const iconString = ReactDOMServer.renderToString(icon ?? <></>);

--- a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/hashtag/HashList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/Extensions/hashtag/HashList.tsx
@ -15,7 +15,7 @@ import { Space, Typography } from 'antd';
 import classNames from 'classnames';
 import React, { forwardRef, useImperativeHandle, useState } from 'react';
 import { isInViewport } from '../../../../utils/BlockEditorUtils';
-import { getEntityIcon } from '../../../../utils/TableUtils';
+import searchClassBase from '../../../../utils/SearchClassBase';
 import { ExtensionRef, SuggestionItem } from '../../BlockEditor.interface';

 export default forwardRef<
@ -128,7 +128,7 @@ export default forwardRef<
            </div>
            <Space align="center">
              <div className="w-5" style={{ marginTop: '6px' }}>
-                {getEntityIcon(item.type)}
+                {searchClassBase.getEntityIcon(item.type)}
              </div>
              <Typography className="truncate w-max-200">
                {item.label}
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.tsx
@ -24,7 +24,7 @@ import {
  getEntityName,
  getEntityReferenceFromEntity,
 } from '../../../utils/EntityUtils';
-import { getEntityIcon } from '../../../utils/TableUtils';
+import searchClassBase from '../../../utils/SearchClassBase';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import Loader from '../../common/Loader/Loader';
 import ProfilePicture from '../../common/ProfilePicture/ProfilePicture';
@ -155,7 +155,7 @@ const DataAssetAsyncSelectList: FC<DataAssetAsyncSelectListProps> = ({
            className="d-flex items-center gap-2"
            data-testid={`option-${value}`}>
            <div className="flex-center data-asset-icon">
-              {getEntityIcon(reference.type)}
+              {searchClassBase.getEntityIcon(reference.type)}
            </div>
            <div className="d-flex flex-col">
              <span className="text-grey-muted text-xs">{reference.type}</span>
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/AppPipelineModel/AddPipeLineModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/AppPipelineModel/AddPipeLineModal.tsx
@ -29,7 +29,7 @@ import {
  getEntityReferenceFromEntity,
 } from '../../../../utils/EntityUtils';
 import Fqn from '../../../../utils/Fqn';
-import { getEntityIcon } from '../../../../utils/TableUtils';
+import searchClassBase from '../../../../utils/SearchClassBase';
 import { showErrorToast } from '../../../../utils/ToastUtils';
 import '../../../ActivityFeed/FeedEditor/feed-editor.less';
 import ErrorPlaceHolder from '../../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
@ -157,7 +157,7 @@ const AddPipeLineModal = ({

      <div className="edge-option-container">
        {edgeOptions.map((item) => {
-          const icon = getEntityIcon(item.type);
+          const icon = searchClassBase.getEntityIcon(item.type);
          const breadcrumb = Fqn.split(item.fullyQualifiedName ?? '').join('/');

          return (
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/EntityLineageSidebar.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/EntityLineageSidebar.component.tsx
@ -20,7 +20,7 @@ import { Node } from 'reactflow';
 import { ReactComponent as DragIconDotted } from '../../../assets/svg/dots-six-bold.svg';
 import { entityData } from '../../../constants/Lineage.constants';
 import { useApplicationStore } from '../../../hooks/useApplicationStore';
-import { getEntityIcon } from '../../../utils/TableUtils';
+import searchClassBase from '../../../utils/SearchClassBase';
 import './entity-lineage-sidebar.less';

 interface SidebarProps extends HTMLAttributes<HTMLDivElement> {
@ -56,7 +56,7 @@ const EntityNode: FC<EntityNodeProps> = ({ type, label, draggable }) => {
            e.preventDefault();
            e.stopPropagation();
          }}>
-          {getEntityIcon(type || '')}
+          {searchClassBase.getEntityIcon(type ?? '')}
        </span>
        <span className="d-flex m-l-xs">
          <Icon
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageLayers/LineageLayers.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageLayers/LineageLayers.tsx
@ -20,7 +20,7 @@ import { ReactComponent as Layers } from '../../../../assets/svg/ic-layers.svg';
 import { useLineageProvider } from '../../../../context/LineageProvider/LineageProvider';
 import { LineageLayerView } from '../../../../context/LineageProvider/LineageProvider.interface';
 import { EntityType } from '../../../../enums/entity.enum';
-import { getEntityIcon } from '../../../../utils/TableUtils';
+import searchClassBase from '../../../../utils/SearchClassBase';
 import './lineage-layers.less';

 const LineageLayers = () => {
@ -47,7 +47,7 @@ const LineageLayers = () => {
            onClick={() => onButtonClick(LineageLayerView.COLUMN)}>
            <div className="lineage-layer-btn">
              <div className="layer-icon">
-                {getEntityIcon(EntityType.TABLE)}
+                {searchClassBase.getEntityIcon(EntityType.TABLE)}
              </div>
              <Typography.Text className="text-xss">
                {t('label.column')}
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageSearchSelect/LineageSearchSelect.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/LineageSearchSelect/LineageSearchSelect.tsx
@ -22,8 +22,8 @@ import { useLineageProvider } from '../../../../context/LineageProvider/LineageP
 import { Column } from '../../../../generated/entity/data/table';
 import { getEntityChildrenAndLabel } from '../../../../utils/EntityLineageUtils';
 import { getEntityName } from '../../../../utils/EntityUtils';
+import searchClassBase from '../../../../utils/SearchClassBase';
 import serviceUtilClassBase from '../../../../utils/ServiceUtilClassBase';
-import { getEntityIcon } from '../../../../utils/TableUtils';

 const LineageSearchSelect = () => {
  const { t } = useTranslation();
@ -85,7 +85,7 @@ const LineageSearchSelect = () => {
              </div>
              <div className="d-flex items-center gap-1 ">
                <div className="flex-center w-4 h-4 text-base-color">
-                  {getEntityIcon(node.entityType ?? '')}
+                  {searchClassBase.getEntityIcon(node.entityType ?? '')}
                </div>
                <Typography.Text>{getEntityName(column)}</Typography.Text>
              </div>
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/NodeChildren/NodeChildren.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityLineage/NodeChildren/NodeChildren.component.tsx
@ -26,7 +26,7 @@ import { EntityType } from '../../../../enums/entity.enum';
 import { Column, Table } from '../../../../generated/entity/data/table';
 import { getEntityChildrenAndLabel } from '../../../../utils/EntityLineageUtils';
 import { getEntityName } from '../../../../utils/EntityUtils';
-import { getEntityIcon } from '../../../../utils/TableUtils';
+import searchClassBase from '../../../../utils/SearchClassBase';
 import { getColumnContent } from '../CustomNode.utils';
 import TestSuiteSummaryWidget from '../TestSuiteSummaryWidget/TestSuiteSummaryWidget.component';
 import { EntityChildren, NodeChildrenProps } from './NodeChildren.interface';
@ -200,7 +200,7 @@ const NodeChildren = ({ node, isConnectable }: NodeChildrenProps) => {
                }}>
                <Space>
                  <div className=" w-5 h-5 text-base-color">
-                    {getEntityIcon(node.entityType ?? '')}
+                    {searchClassBase.getEntityIcon(node.entityType ?? '')}
                  </div>
                  {childrenHeading}
                  {isExpanded ? (
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityList/EntityList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityList/EntityList.tsx
@ -18,7 +18,7 @@ import { Link } from 'react-router-dom';
 import { EntityReference } from '../../../generated/entity/type';
 import entityUtilClassBase from '../../../utils/EntityUtilClassBase';
 import { getEntityName } from '../../../utils/EntityUtils';
-import { getEntityIcon } from '../../../utils/TableUtils';
+import searchClassBase from '../../../utils/SearchClassBase';
 import EntityListSkeleton from '../../common/Skeleton/MyData/EntityListSkeleton/EntityListSkeleton.component';
 import './entity.less';

@ -75,7 +75,7 @@ export const EntityListWithV1: FunctionComponent<AntdEntityListProp> = ({
                        className="entity-button flex-center p-0 m--ml-1"
                        icon={
                          <div className="entity-button-icon m-r-xs">
-                            {getEntityIcon(item.type || '')}
+                            {searchClassBase.getEntityIcon(item.type || '')}
                          </div>
                        }
                        title={getEntityName(
--- a/openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreTree/ExploreTree.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreTree/ExploreTree.tsx
@ -33,7 +33,6 @@ import {
 } from '../../../utils/ExploreUtils';
 import searchClassBase from '../../../utils/SearchClassBase';
 import serviceUtilClassBase from '../../../utils/ServiceUtilClassBase';
-import { getEntityIcon } from '../../../utils/TableUtils';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import { UrlParams } from '../ExplorePage.interface';
 import {
@ -136,7 +135,10 @@ const ExploreTree = ({ onFieldValueSelect }: ExploreTreeProps) => {

          let logo = undefined;
          if (isEntityType) {
-            logo = getEntityIcon(bucket.key, 'service-icon w-4 h-4') ?? <></>;
+            logo = searchClassBase.getEntityIcon(
+              bucket.key,
+              'service-icon w-4 h-4'
+            ) ?? <></>;
          } else if (isServiceType) {
            const serviceIcon = serviceUtilClassBase.getServiceLogo(bucket.key);
            logo = (
--- a/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.tsx
@ -33,7 +33,7 @@ import { getEntityId, getEntityName } from '../../../utils/EntityUtils';
 import { getDomainPath } from '../../../utils/RouterUtils';
 import searchClassBase from '../../../utils/SearchClassBase';
 import { stringToHTML } from '../../../utils/StringsUtils';
-import { getEntityIcon, getUsagePercentile } from '../../../utils/TableUtils';
+import { getUsagePercentile } from '../../../utils/TableUtils';
 import TitleBreadcrumb from '../../common/TitleBreadcrumb/TitleBreadcrumb.component';
 import TableDataCardBody from '../../Database/TableDataCardBody/TableDataCardBody';
 import { GlossaryStatusBadge } from '../../Glossary/GlossaryStatusBadge/GlossaryStatusBadge.component';
@ -166,13 +166,13 @@ const ExploreSearchCard: React.FC<ExploreSearchCardProps> = forwardRef<

        return (
          <span className="w-6 h-6 m-r-xs d-inline-flex text-xl align-middle">
-            {getEntityIcon(source.entityType ?? '')}
+            {searchClassBase.getEntityIcon(source.entityType ?? '')}
          </span>
        );
      }

      return;
-    }, [source, showEntityIcon, getEntityIcon]);
+    }, [source, showEntityIcon]);

    const entityLink = useMemo(
      () => searchClassBase.getEntityLink(source),
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.component.tsx
@ -30,9 +30,9 @@ import { searchData } from '../../../rest/miscAPI';
 import { Transi18next } from '../../../utils/CommonUtils';
 import entityUtilClassBase from '../../../utils/EntityUtilClassBase';
 import { getEntityName } from '../../../utils/EntityUtils';
-import { getEntityIcon } from '../../../utils/TableUtils';

 import { useApplicationStore } from '../../../hooks/useApplicationStore';
+import searchClassBase from '../../../utils/SearchClassBase';
 import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import EntityListSkeleton from '../../common/Skeleton/MyData/EntityListSkeleton/EntityListSkeleton.component';
 import { SourceType } from '../../SearchedData/SearchedData.interface';
@ -172,7 +172,9 @@ const MyDataWidgetInternal = ({
                        className="entity-button flex-center p-0 m--ml-1"
                        icon={
                          <div className="entity-button-icon m-r-xs">
-                            {getEntityIcon(item.entityType ?? '')}
+                            {searchClassBase.getEntityIcon(
+                              item.entityType ?? ''
+                            )}
                          </div>
                        }
                        type="text">
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.test.tsx
@ -63,7 +63,7 @@ jest.mock('../../../utils/EntityUtils', () => ({
  getEntityName: jest.fn().mockImplementation((obj) => obj.name),
 }));

-jest.mock('../../../utils/TableUtils', () => ({
+jest.mock('../../../utils/SearchClassBase', () => ({
  getEntityIcon: jest.fn().mockImplementation((obj) => obj.name),
 }));

--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/RecentlyViewed/RecentlyViewed.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/RecentlyViewed/RecentlyViewed.tsx
@ -28,7 +28,7 @@ import {
 } from '../../../../utils/CommonUtils';
 import entityUtilClassBase from '../../../../utils/EntityUtilClassBase';
 import { getEntityName } from '../../../../utils/EntityUtils';
-import { getEntityIcon } from '../../../../utils/TableUtils';
+import searchClassBase from '../../../../utils/SearchClassBase';
 import ErrorPlaceHolder from '../../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import EntityListSkeleton from '../../../common/Skeleton/MyData/EntityListSkeleton/EntityListSkeleton.component';
 import './recently-viewed.less';
@ -143,7 +143,7 @@ const RecentlyViewed = ({
                          className="entity-button flex-center p-0 m--ml-1"
                          icon={
                            <div className="entity-button-icon m-r-xs">
-                              {getEntityIcon(item.type || '')}
+                              {searchClassBase.getEntityIcon(item.type ?? '')}
                            </div>
                          }
                          title={getEntityName(
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/CustomPropertyTable/PropertyValue.tsx
@ -50,7 +50,7 @@ import { EntityReference } from '../../../generated/entity/type';
 import { EnumConfig } from '../../../generated/type/customProperty';
 import entityUtilClassBase from '../../../utils/EntityUtilClassBase';
 import { getEntityName } from '../../../utils/EntityUtils';
-import { getEntityIcon } from '../../../utils/TableUtils';
+import searchClassBase from '../../../utils/SearchClassBase';
 import { showErrorToast } from '../../../utils/ToastUtils';
 import DataAssetAsyncSelectList from '../../DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList';
 import { DataAssetOption } from '../../DataAssets/DataAssetAsyncSelectList/DataAssetAsyncSelectList.interface';
@ -702,7 +702,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
                                width="18"
                              />
                            ) : (
-                              getEntityIcon(item.type)
+                              searchClassBase.getEntityIcon(item.type)
                            )}
                          </div>
                        }
@ -753,7 +753,7 @@ export const PropertyValue: FC<PropertyValueProps> = ({
                        width="18"
                      />
                    ) : (
-                      getEntityIcon(item.type)
+                      searchClassBase.getEntityIcon(item.type)
                    )}
                  </div>
                }
--- a/openmetadata-ui/src/main/resources/ui/src/constants/Assets.constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/Assets.constants.ts
@ -178,4 +178,5 @@ export const NON_SERVICE_TYPE_ASSETS = [
  EntityType.PERSONA,
  EntityType.ROLE,
  EntityType.POLICY,
+  EntityType.KPI,
 ];
--- a/openmetadata-ui/src/main/resources/ui/src/pages/AlertDetailsPage/AlertDetailsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/AlertDetailsPage/AlertDetailsPage.tsx
@ -55,7 +55,7 @@ import {
  getObservabilityAlertsEditPath,
  getSettingPath,
 } from '../../utils/RouterUtils';
-import { getEntityIcon } from '../../utils/TableUtils';
+import searchClassBase from '../../utils/SearchClassBase';
 import { AlertDetailsPageProps } from './AlertDetailsPage.interface';

 function AlertDetailsPage({
@ -366,7 +366,7 @@ function AlertDetailsPage({
                  subHeading={t('message.alerts-source-description')}>
                  <div className="d-flex items-center gap-2 m-l-sm">
                    <div className="d-flex h-4 w-4">
-                      {getEntityIcon(resource ?? '')}
+                      {searchClassBase.getEntityIcon(resource ?? '')}
                    </div>
                    <span data-testid="resource-name">
                      {startCase(resource)}
--- a/openmetadata-ui/src/main/resources/ui/src/utils/Alerts/AlertsUtil.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/Alerts/AlertsUtil.tsx
@ -50,7 +50,6 @@ import { getEntityName, getEntityNameLabel } from '../EntityUtils';
 import { handleEntityCreationError } from '../formUtils';
 import { getConfigFieldFromDestinationType } from '../ObservabilityUtils';
 import searchClassBase from '../SearchClassBase';
-import { getEntityIcon } from '../TableUtils';
 import { showSuccessToast } from '../ToastUtils';

 export const getAlertsActionTypeIcon = (type?: SubscriptionType) => {
@ -880,7 +879,7 @@ export const getSourceOptionsFromResourceList = (
  selectedResource?: string[]
 ) =>
  resources.map((resource) => {
-    const sourceIcon = getEntityIcon(resource ?? '');
+    const sourceIcon = searchClassBase.getEntityIcon(resource ?? '');

    return {
      label: (
--- a/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/EntityUtils.tsx
@ -48,6 +48,7 @@ import {
  getBotsPath,
  getEntityDetailsPath,
  getGlossaryTermDetailsPath,
+  getKpiPath,
  getServiceDetailsPath,
  getTagsDetailsPath,
  NO_DATA,
@ -69,6 +70,7 @@ import { ExplorePageTabs } from '../enums/Explore.enum';
 import { SearchIndex } from '../enums/search.enum';
 import { ServiceCategory, ServiceCategoryPlural } from '../enums/service.enum';
 import { PrimaryTableDataTypes } from '../enums/table.enum';
+import { Kpi } from '../generated/dataInsight/kpi/kpi';
 import { Classification } from '../generated/entity/classification/classification';
 import { APICollection } from '../generated/entity/data/apiCollection';
 import { APIEndpoint } from '../generated/entity/data/apiEndpoint';
@ -110,6 +112,7 @@ import { EntityReference } from '../generated/type/entityUsage';
 import { TagLabel } from '../generated/type/tagLabel';
 import { UsageDetails } from '../generated/type/usageDetails';
 import { Votes } from '../generated/type/votes';
+import { DataInsightTabs } from '../interface/data-insight.interface';
 import { SearchSourceAlias } from '../interface/search.interface';
 import { DataQualityPageTabs } from '../pages/DataQuality/DataQualityPage.interface';
 import {
@ -117,6 +120,7 @@ import {
  getPartialNameFromTableFQN,
  getTableFQNFromColumnFQN,
 } from './CommonUtils';
+import { getDataInsightPathWithFqn } from './DataInsightUtils';
 import EntityLink from './EntityLink';
 import { BasicEntityOverviewInfo } from './EntityUtils.interface';
 import Fqn from './Fqn';
@ -1558,6 +1562,8 @@ export const getEntityLinkFromType = (
      return getPolicyWithFqnPath(fullyQualifiedName);
    case EntityType.PERSONA:
      return getPersonaDetailsPath(fullyQualifiedName);
+    case EntityType.KPI:
+      return getKpiPath(fullyQualifiedName);
    default:
      return '';
  }
@ -1780,6 +1786,19 @@ export const getBreadcrumbForTestSuite = (entity: TestSuite) => {
      ];
 };

+export const getBreadCrumbForKpi = (entity: Kpi) => {
+  return [
+    {
+      name: i18next.t('label.kpi-uppercase'),
+      url: getDataInsightPathWithFqn(DataInsightTabs.KPIS),
+    },
+    {
+      name: getEntityName(entity),
+      url: getKpiPath(entity.name),
+    },
+  ];
+};
+
 export const getEntityBreadcrumbs = (
  entity:
    | SearchedDataProps['data'][number]['_source']
@ -2141,6 +2160,9 @@ export const getEntityBreadcrumbs = (
    case EntityType.API_ENDPOINT:
      return getBreadCrumbForAPIEndpoint(entity as APIEndpoint);

+    case EntityType.KPI:
+      return getBreadCrumbForKpi(entity as Kpi);
+
    case EntityType.TOPIC:
    case EntityType.DASHBOARD:
    case EntityType.PIPELINE:
--- a/openmetadata-ui/src/main/resources/ui/src/utils/SearchClassBase.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/SearchClassBase.ts
@ -76,7 +76,7 @@ import {
  getEntityName,
 } from './EntityUtils';
 import i18n from './i18next/LocalUtil';
-import { getServiceIcon } from './TableUtils';
+import { getEntityIcon, getServiceIcon } from './TableUtils';
 import { getTestSuiteDetailsPath, getTestSuiteFQN } from './TestSuiteUtils';

 class SearchClassBase {
@ -484,6 +484,10 @@ class SearchClassBase {
    return getServiceIcon(source);
  }

+  public getEntityIcon(indexType: string, iconClass = '', iconStyle = {}) {
+    return getEntityIcon(indexType, iconClass, iconStyle);
+  }
+
  public getListOfEntitiesWithoutDomain(): string[] {
    return [EntityType.TEST_CASE];
  }
--- a/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/TableUtils.tsx
@ -68,6 +68,7 @@ import { ReactComponent as IconNotNull } from '../assets/svg/icon-not-null.svg';
 import { ReactComponent as RoleIcon } from '../assets/svg/icon-role-grey.svg';
 import { ReactComponent as IconUniqueLineThrough } from '../assets/svg/icon-unique-line-through.svg';
 import { ReactComponent as IconUnique } from '../assets/svg/icon-unique.svg';
+import { ReactComponent as KPIIcon } from '../assets/svg/kpi.svg';
 import { ReactComponent as LocationIcon } from '../assets/svg/location.svg';
 import { ReactComponent as MetadataServiceIcon } from '../assets/svg/metadata-service.svg';
 import { ReactComponent as NotificationIcon } from '../assets/svg/notification.svg';
@ -99,6 +100,7 @@ import {
  sortTagsCaseInsensitive,
 } from './CommonUtils';
 import EntityLink from './EntityLink';
+import searchClassBase from './SearchClassBase';
 import serviceUtilClassBase from './ServiceUtilClassBase';
 import { ordinalize } from './StringsUtils';
 import { TableFieldsInfoCommonEntities } from './TableUtils.interface';
@ -265,6 +267,7 @@ export const getEntityIcon = (
    [EntityType.INGESTION_PIPELINE]: PipelineIcon,
    [SearchIndex.INGESTION_PIPELINE]: PipelineIcon,
    [EntityType.ALERT]: AlertIcon,
+    [EntityType.KPI]: KPIIcon,
    ['tagCategory']: ClassificationIcon,
    ['announcement']: AnnouncementIcon,
    ['conversation']: ConversationIcon,
@ -308,9 +311,13 @@ export const getServiceIcon = (source: SourceType) => {
  );

  if (isDataAsset) {
-    return getEntityIcon(source.entityType ?? '', 'service-icon w-7 h-7', {
-      color: DE_ACTIVE_COLOR,
-    });
+    return searchClassBase.getEntityIcon(
+      source.entityType ?? '',
+      'service-icon w-7 h-7',
+      {
+        color: DE_ACTIVE_COLOR,
+      }
+    );
  } else {
    return (
      <img