Added column icon in explore page (#27672)

* Added column icon in explore page

* updated the column icon in all the pages

* address gitar comment

* added column with bg icon

* fix the column icon color in explore page

* addressed gitar comment

* rename the column icon

* removed unused column icon

* lint fixes

Author: Rohit0301

openmetadata-ui/src/main/resources/ui/src/assets/svg/chart.svg

@@ -25,7 +25,7 @@ import { isString } from 'lodash';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as IconEdit } from '../../../assets/svg/edit-new.svg';
-import { ReactComponent as ColumnIcon } from '../../../assets/svg/ic-column-new.svg';
+import { ReactComponent as ColumnIcon } from '../../../assets/svg/ic-column.svg';
 import { ReactComponent as KeyIcon } from '../../../assets/svg/icon-key.svg';
 import {
   DE_ACTIVE_COLOR,

openmetadata-ui/src/main/resources/ui/src/assets/svg/column-colored.svg

@@ -122,7 +122,7 @@ jest.mock('../../../assets/svg/up-arrow-icon.svg', () => ({
   ReactComponent: () => <div data-testid="arrow-up-icon">ArrowUp</div>,
 }));
 
-jest.mock('../../../assets/svg/ic-column-new.svg', () => ({
+jest.mock('../../../assets/svg/ic-column.svg', () => ({
   ReactComponent: () => <div data-testid="column-icon">ColumnIcon</div>,
 }));
 

openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-column-new.svg

@@ -14,7 +14,7 @@ import { Badge } from '@openmetadata/ui-core-components';
 import { Typography } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as ColumnIcon } from '../../../assets/svg/ic-column-new.svg';
+import { ReactComponent as ColumnIcon } from '../../../assets/svg/ic-column.svg';
 import { Column } from '../../../generated/entity/data/table';
 import { getEntityName } from '../../../utils/EntityUtils';
 import { getNestedSectionTitle } from '../../../utils/TableUtils';

openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-column.svg

@@ -178,9 +178,10 @@ const ExploreTree = ({ onFieldValueSelect }: ExploreTreeProps) => {
           let type = null;
           let logo = undefined;
           if (isEntityType) {
+            const isColumn = bucket.key === EntityType.TABLE_COLUMN;
             logo = searchClassBase.getEntityIcon(
               bucket.key,
-              'service-icon w-4 h-4'
+              classNames('service-icon w-4 h-4', { 'text-grey-500': isColumn })
             ) ?? <></>;
           } else if (isServiceType) {
             const serviceIcon = serviceUtilClassBase.getServiceLogo(bucket.key);

openmetadata-ui/src/main/resources/ui/src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx

@@ -207,10 +207,6 @@ const ExploreSearchCard: React.FC<ExploreSearchCardProps> = forwardRef<
       return _otherDetails;
     }, [source]);
 
-    const serviceIcon = useMemo(() => {
-      return searchClassBase.getServiceIcon(source);
-    }, [source]);
-
     const breadcrumbs = useMemo(
       () =>
         searchClassBase.getEntityBreadcrumbs(
@@ -242,14 +238,21 @@ const ExploreSearchCard: React.FC<ExploreSearchCardProps> = forwardRef<
 
         return (
           <span className="w-6 h-6 m-r-xs d-inline-flex text-xl align-middle">
-            {searchClassBase.getEntityIcon(source.entityType ?? '')}
+            {searchClassBase.getEntityIcon(
+              source.entityType ?? '',
+              'text-link-color'
+            )}
           </span>
         );
       }
 
       return null;
     }, [source, showEntityIcon]);
 
+    const serviceIcon = useMemo(() => {
+      return searchClassBase.getServiceIcon(source);
+    }, [source]);
+
     const entityLink = useMemo(
       () => searchClassBase.getEntityLink(source),
       [source]

openmetadata-ui/src/main/resources/ui/src/components/Database/ColumnDetailPanel/ColumnDetailPanel.test.tsx

@@ -64,6 +64,7 @@ const SearchedData: React.FC<SearchedDataProps> = ({
       return (
         <div className="m-b-md" key={`tabledatacard${index}`}>
           <ExploreSearchCard
+            showEntityIcon
             className={classNames(
               table.id === selectedEntityId && isSummaryPanelVisible
                 ? 'highlight-card'