fix(ui): Fix compact view styling; fix context path link overflow; standardize type icons in context path (datahub-project#14284)

asikowitz · web-flow · commit 1e765cb7f923 · 2025-08-04T10:18:26.000-07:00
diff --git a/datahub-web-react/src/app/entityV2/Access/RoleEntity.tsx b/datahub-web-react/src/app/entityV2/Access/RoleEntity.tsx
@@ -32,10 +32,7 @@ export class RoleEntity implements Entity<Role> {
         return (
             <TagOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/application/ApplicationEntity.tsx b/datahub-web-react/src/app/entityV2/application/ApplicationEntity.tsx
@@ -57,10 +57,7 @@ export class ApplicationEntity implements Entity<Application> {
         return (
             <AppWindow
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/businessAttribute/BusinessAttributeEntity.tsx b/datahub-web-react/src/app/entityV2/businessAttribute/BusinessAttributeEntity.tsx
@@ -41,14 +41,7 @@ export class BusinessAttributeEntity implements Entity<BusinessAttribute> {
             );
         }
 
-        return (
-            <GlobalOutlined
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
-            />
-        );
+        return <GlobalOutlined style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }} />;
     };
 
     displayName = (data: BusinessAttribute) => {
diff --git a/datahub-web-react/src/app/entityV2/chart/ChartEntity.tsx b/datahub-web-react/src/app/entityV2/chart/ChartEntity.tsx
@@ -94,10 +94,7 @@ export class ChartEntity implements Entity<Chart> {
         return (
             <LineChartOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/container/ContainerEntity.tsx b/datahub-web-react/src/app/entityV2/container/ContainerEntity.tsx
@@ -59,10 +59,7 @@ export class ContainerEntity implements Entity<Container> {
         return (
             <FolderOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/dashboard/DashboardEntity.tsx b/datahub-web-react/src/app/entityV2/dashboard/DashboardEntity.tsx
@@ -93,14 +93,7 @@ export class DashboardEntity implements Entity<Dashboard> {
             );
         }
 
-        return (
-            <DashboardOutlined
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
-            />
-        );
+        return <DashboardOutlined style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }} />;
     };
 
     isSearchEnabled = () => true;
diff --git a/datahub-web-react/src/app/entityV2/dataContract/DataContractEntity.tsx b/datahub-web-react/src/app/entityV2/dataContract/DataContractEntity.tsx
@@ -24,10 +24,7 @@ export class DataContractEntity implements Entity<DataContract> {
         return (
             <FileOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/dataFlow/DataFlowEntity.tsx b/datahub-web-react/src/app/entityV2/dataFlow/DataFlowEntity.tsx
@@ -58,10 +58,7 @@ export class DataFlowEntity implements Entity<DataFlow> {
         return (
             <ShareAltOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/dataJob/DataJobEntity.tsx b/datahub-web-react/src/app/entityV2/dataJob/DataJobEntity.tsx
@@ -73,10 +73,7 @@ export class DataJobEntity implements Entity<DataJob> {
         return (
             <ConsoleSqlOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/dataPlatform/DataPlatformEntity.tsx b/datahub-web-react/src/app/entityV2/dataPlatform/DataPlatformEntity.tsx
@@ -21,10 +21,7 @@ export class DataPlatformEntity implements Entity<DataPlatform> {
         return (
             <DatabaseOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/dataProcessInstance/DataProcessInstanceEntity.tsx b/datahub-web-react/src/app/entityV2/dataProcessInstance/DataProcessInstanceEntity.tsx
@@ -46,14 +46,7 @@ export class DataProcessInstanceEntity implements Entity<DataProcessInstance> {
             return <ArrowsClockwise style={{ fontSize, color: color || '#B37FEB' }} />;
         }
 
-        return (
-            <ArrowsClockwise
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
-            />
-        );
+        return <ArrowsClockwise style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }} />;
     };
 
     isSearchEnabled = () => false;
diff --git a/datahub-web-react/src/app/entityV2/dataProduct/DataProductEntity.tsx b/datahub-web-react/src/app/entityV2/dataProduct/DataProductEntity.tsx
@@ -69,10 +69,7 @@ export class DataProductEntity implements Entity<DataProduct> {
         return (
             <FileDoneOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/dataset/DatasetEntity.tsx b/datahub-web-react/src/app/entityV2/dataset/DatasetEntity.tsx
@@ -112,10 +112,7 @@ export class DatasetEntity implements Entity<Dataset> {
         return (
             <ViewComfyOutlinedIcon
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/domain/DomainEntity.tsx b/datahub-web-react/src/app/entityV2/domain/DomainEntity.tsx
@@ -60,14 +60,7 @@ export class DomainEntity implements Entity<Domain> {
             );
         }
 
-        return (
-            <DomainIcon
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
-            />
-        );
+        return <DomainIcon style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }} />;
     };
 
     isSearchEnabled = () => true;
diff --git a/datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx b/datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx
@@ -56,10 +56,7 @@ class GlossaryNodeEntity implements Entity<GlossaryNode> {
         return (
             <BookmarksSimple
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/glossaryTerm/GlossaryTermEntity.tsx b/datahub-web-react/src/app/entityV2/glossaryTerm/GlossaryTermEntity.tsx
@@ -68,10 +68,7 @@ export class GlossaryTermEntity implements Entity<GlossaryTerm> {
         return (
             <BookmarkSimple
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/group/Group.tsx b/datahub-web-react/src/app/entityV2/group/Group.tsx
@@ -28,10 +28,7 @@ export class GroupEntity implements Entity<CorpGroup> {
         return (
             <TeamOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/mlFeature/MLFeatureEntity.tsx b/datahub-web-react/src/app/entityV2/mlFeature/MLFeatureEntity.tsx
@@ -59,10 +59,7 @@ export class MLFeatureEntity implements Entity<MlFeature> {
         return (
             <ChartScatter
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
                 weight="regular"
             />
         );
diff --git a/datahub-web-react/src/app/entityV2/mlFeatureTable/MLFeatureTableEntity.tsx b/datahub-web-react/src/app/entityV2/mlFeatureTable/MLFeatureTableEntity.tsx
@@ -55,10 +55,7 @@ export class MLFeatureTableEntity implements Entity<MlFeatureTable> {
         return (
             <ChartScatter
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
                 weight="regular"
             />
         );
diff --git a/datahub-web-react/src/app/entityV2/mlModel/MLModelEntity.tsx b/datahub-web-react/src/app/entityV2/mlModel/MLModelEntity.tsx
@@ -61,10 +61,7 @@ export class MLModelEntity implements Entity<MlModel> {
         return (
             <CodeSandboxOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/mlModelGroup/MLModelGroupEntity.tsx b/datahub-web-react/src/app/entityV2/mlModelGroup/MLModelGroupEntity.tsx
@@ -56,10 +56,7 @@ export class MLModelGroupEntity implements Entity<MlModelGroup> {
         return (
             <CodeSandboxOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/mlPrimaryKey/MLPrimaryKeyEntity.tsx b/datahub-web-react/src/app/entityV2/mlPrimaryKey/MLPrimaryKeyEntity.tsx
@@ -45,10 +45,7 @@ export class MLPrimaryKeyEntity implements Entity<MlPrimaryKey> {
         return (
             <DotChartOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/query/QueryEntity.tsx b/datahub-web-react/src/app/entityV2/query/QueryEntity.tsx
@@ -27,10 +27,7 @@ export class QueryEntity implements Entity<Query> {
         return (
             <ConsoleSqlOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/schemaField/SchemaFieldEntity.tsx b/datahub-web-react/src/app/entityV2/schemaField/SchemaFieldEntity.tsx
@@ -28,7 +28,7 @@ export class SchemaFieldEntity implements Entity<SchemaField> {
     type: EntityType = EntityType.SchemaField;
 
     icon = (fontSize?: number, styleType?: IconStyleType, color = 'inherit') => (
-        <PicCenterOutlined style={{ fontSize, color }} />
+        <PicCenterOutlined style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }} />
     );
 
     isSearchEnabled = () => true;
diff --git a/datahub-web-react/src/app/entityV2/shared/components/subtypes.tsx b/datahub-web-react/src/app/entityV2/shared/components/subtypes.tsx
@@ -5,7 +5,6 @@ import Icon, {
     FilterOutlined,
     LineChartOutlined,
 } from '@ant-design/icons';
-import ViewComfyOutlinedIcon from '@mui/icons-material/ViewComfyOutlined';
 import React from 'react';
 
 import TableauEmbeddedDataSourceLogo from '@images/tableau-embedded-data-source.svg?react';
@@ -47,9 +46,6 @@ export function getSubTypeIcon(subType?: string): JSX.Element | undefined {
     if (lowerSubType === SubType.Project.toLowerCase()) {
         return <DeploymentUnitOutlined className={TYPE_ICON_CLASS_NAME} />;
     }
-    if (lowerSubType === SubType.Table.toLowerCase()) {
-        return <ViewComfyOutlinedIcon fontSize="inherit" className={TYPE_ICON_CLASS_NAME} />;
-    }
     if (lowerSubType === SubType.View.toLowerCase()) {
         return <FilterOutlined className={TYPE_ICON_CLASS_NAME} />;
     }
diff --git a/datahub-web-react/src/app/entityV2/structuredProperty/StructuredPropertyEntity.tsx b/datahub-web-react/src/app/entityV2/structuredProperty/StructuredPropertyEntity.tsx
@@ -32,10 +32,7 @@ export class StructuredPropertyEntity implements Entity<StructuredProperty> {
         return (
             <TableIcon
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/tag/Tag.tsx b/datahub-web-react/src/app/entityV2/tag/Tag.tsx
@@ -33,10 +33,7 @@ export class TagEntity implements Entity<Tag> {
         return (
             <TagOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/entityV2/user/User.tsx b/datahub-web-react/src/app/entityV2/user/User.tsx
@@ -27,10 +27,7 @@ export class UserEntity implements Entity<CorpUser> {
         return (
             <UserOutlined
                 className={TYPE_ICON_CLASS_NAME}
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
             />
         );
     };
diff --git a/datahub-web-react/src/app/previewV2/ColoredBackgroundPlatformIconGroup.tsx b/datahub-web-react/src/app/previewV2/ColoredBackgroundPlatformIconGroup.tsx
@@ -32,6 +32,7 @@ interface Props {
     icon?: React.ReactNode;
     backgroundSize?: number;
     imgSize?: number;
+    className?: string;
 }
 
 export default function ColoredBackgroundPlatformIconGroup(props: Props) {
@@ -45,6 +46,7 @@ export default function ColoredBackgroundPlatformIconGroup(props: Props) {
         icon,
         imgSize = 18,
         backgroundSize = 32,
+        className,
     } = props;
 
     const shouldShowSeparateSiblings = useIsShowSeparateSiblingsEnabled();
@@ -97,5 +99,5 @@ export default function ColoredBackgroundPlatformIconGroup(props: Props) {
         );
     };
 
-    return <PlatformContentWrapper>{renderLogoIcon()}</PlatformContentWrapper>;
+    return <PlatformContentWrapper className={className}>{renderLogoIcon()}</PlatformContentWrapper>;
 }
diff --git a/datahub-web-react/src/app/previewV2/CompactView.tsx b/datahub-web-react/src/app/previewV2/CompactView.tsx
diff --git a/datahub-web-react/src/app/previewV2/ContextPath.tsx b/datahub-web-react/src/app/previewV2/ContextPath.tsx
diff --git a/datahub-web-react/src/app/previewV2/ContextPathEntry.tsx b/datahub-web-react/src/app/previewV2/ContextPathEntry.tsx
