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

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

datahub-web-react/src/app/entityV2/businessAttribute/BusinessAttributeEntity.tsx

@@ -41,14 +41,7 @@ export class BusinessAttributeEntity implements Entity<BusinessAttribute> {
             );
         }
 
-        return (
+        return <GlobalOutlined style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }} />;
-            <GlobalOutlined
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
-            />
-        );
     };
 
     displayName = (data: BusinessAttribute) => {

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

datahub-web-react/src/app/entityV2/dashboard/DashboardEntity.tsx

@@ -93,14 +93,7 @@ export class DashboardEntity implements Entity<Dashboard> {
             );
         }
 
-        return (
+        return <DashboardOutlined style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }} />;
-            <DashboardOutlined
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
-            />
-        );
     };
 
     isSearchEnabled = () => true;

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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 (
+        return <ArrowsClockwise style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }} />;
-            <ArrowsClockwise
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
-            />
-        );
     };
 
     isSearchEnabled = () => false;

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

datahub-web-react/src/app/entityV2/domain/DomainEntity.tsx

@@ -60,14 +60,7 @@ export class DomainEntity implements Entity<Domain> {
             );
         }
 
-        return (
+        return <DomainIcon style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }} />;
-            <DomainIcon
-                style={{
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
-            />
-        );
     };
 
     isSearchEnabled = () => true;

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
                 weight="regular"
             />
         );

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
                 weight="regular"
             />
         );

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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;

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} />;
     }

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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={{
+                style={{ fontSize: fontSize || 'inherit', color: color || 'inherit' }}
-                    fontSize,
-                    color: color || '#BFBFBF',
-                }}
             />
         );
     };

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>;
 }

datahub-web-react/src/app/previewV2/CompactView.tsx

@@ -7,7 +7,6 @@ import { GenericEntityProperties } from '@app/entity/shared/types';
 import { EntityMenuActions } from '@app/entityV2/Entity';
 import { EntityMenuItems } from '@app/entityV2/shared/EntityDropdown/EntityMenuActions';
 import MoreOptionsMenuAction from '@app/entityV2/shared/EntityDropdown/MoreOptionsMenuAction';
-import { REDESIGN_COLORS } from '@app/entityV2/shared/constants';
 import ViewInPlatform from '@app/entityV2/shared/externalUrl/ViewInPlatform';
 import ColoredBackgroundPlatformIconGroup, {
     PlatformContentWrapper,
@@ -32,18 +31,20 @@ const RowContainer = styled.div`
     }
 `;
 
+const StyledPlatformIconGroup = styled(ColoredBackgroundPlatformIconGroup)`
+    margin: 0;
+`;
+
+const ContextPathRowContainer = styled(RowContainer)`
+    align-items: center;
+    justify-content: start;
+`;
+
 const CompactActionsAndStatusSection = styled(ActionsAndStatusSection)`
     justify-content: end;
     margin-right: -0.3rem;
 `;
 
-const PlatformDivider = styled.div`
-    font-size: 16px;
-    margin-right: 0.5rem;
-    margin-top: -3px;
-    color: ${REDESIGN_COLORS.TEXT_GREY};
-`;
-
 interface Props {
     name: string;
     urn: string;
@@ -132,10 +133,10 @@ export const CompactView = ({
                     )}
                 </CompactActionsAndStatusSection>
             </RowContainer>
-            <RowContainer>
+            <ContextPathRowContainer>
                 {isIconPresent ? (
                     <div style={{ display: 'flex', alignItems: 'center' }}>
-                        <ColoredBackgroundPlatformIconGroup
+                        <StyledPlatformIconGroup
                             platformName={platform}
                             platformLogoUrl={logoUrl}
                             platformNames={platforms}
@@ -145,7 +146,6 @@ export const CompactView = ({
                             imgSize={10}
                             backgroundSize={20}
                         />
-                        <PlatformDivider> | </PlatformDivider>
                     </div>
                 ) : (
                     <div />
@@ -158,7 +158,7 @@ export const CompactView = ({
                     entityTitleWidth={previewType === PreviewType.HOVER_CARD ? 150 : 200}
                     isCompactView
                 />
-            </RowContainer>
+            </ContextPathRowContainer>
         </>
     );
 };

datahub-web-react/src/app/previewV2/ContextPath.tsx

@@ -92,7 +92,7 @@ export default function ContextPath(props: Props) {
 
     const entityRegistry = useEntityRegistryV2();
     const entityTypeIcon =
-        getSubTypeIcon(displayedEntityType) || entityRegistry.getIcon(entityType, 16, IconStyleType.ACCENT, '#8d95b1');
+        getSubTypeIcon(displayedEntityType) || entityRegistry.getIcon(entityType, undefined, IconStyleType.ACCENT);
 
     const hasBrowsePath = !!browsePaths?.path?.length && !isDefaultBrowsePath(browsePaths);
     const hasParentEntities = !!parentEntities?.length;

datahub-web-react/src/app/previewV2/ContextPathEntry.tsx

@@ -49,6 +49,10 @@ const Contents = styled.div<{ $disabled?: boolean }>`
     }
 `;
 
+const StyledLink = styled(Link)`
+    overflow: hidden;
+`;
+
 interface Props {
     name?: string;
     linkUrl?: string;
@@ -93,9 +97,9 @@ function ContextPathEntry(props: Props) {
     return (
         <Path isLast={isLast} className={className}>
             {showLink ? (
-                <Link to={linkUrl} data-testid="container" {...linkProps}>
+                <StyledLink to={linkUrl} data-testid="container" {...linkProps}>
                     {contents}
-                </Link>
+                </StyledLink>
             ) : (
                 contents
             )}