From 1e765cb7f923e6e77858c169ddf20c3c78f3b34f Mon Sep 17 00:00:00 2001 From: Andrew Sikowitz Date: Mon, 4 Aug 2025 10:18:26 -0700 Subject: [PATCH] fix(ui): Fix compact view styling; fix context path link overflow; standardize type icons in context path (#14284) --- .../src/app/entityV2/Access/RoleEntity.tsx | 5 +--- .../application/ApplicationEntity.tsx | 5 +--- .../BusinessAttributeEntity.tsx | 9 +------ .../src/app/entityV2/chart/ChartEntity.tsx | 5 +--- .../entityV2/container/ContainerEntity.tsx | 5 +--- .../entityV2/dashboard/DashboardEntity.tsx | 9 +------ .../dataContract/DataContractEntity.tsx | 5 +--- .../app/entityV2/dataFlow/DataFlowEntity.tsx | 5 +--- .../app/entityV2/dataJob/DataJobEntity.tsx | 5 +--- .../dataPlatform/DataPlatformEntity.tsx | 5 +--- .../DataProcessInstanceEntity.tsx | 9 +------ .../dataProduct/DataProductEntity.tsx | 5 +--- .../app/entityV2/dataset/DatasetEntity.tsx | 5 +--- .../src/app/entityV2/domain/DomainEntity.tsx | 9 +------ .../glossaryNode/GlossaryNodeEntity.tsx | 5 +--- .../glossaryTerm/GlossaryTermEntity.tsx | 5 +--- .../src/app/entityV2/group/Group.tsx | 5 +--- .../entityV2/mlFeature/MLFeatureEntity.tsx | 5 +--- .../mlFeatureTable/MLFeatureTableEntity.tsx | 5 +--- .../app/entityV2/mlModel/MLModelEntity.tsx | 5 +--- .../mlModelGroup/MLModelGroupEntity.tsx | 5 +--- .../mlPrimaryKey/MLPrimaryKeyEntity.tsx | 5 +--- .../src/app/entityV2/query/QueryEntity.tsx | 5 +--- .../schemaField/SchemaFieldEntity.tsx | 2 +- .../entityV2/shared/components/subtypes.tsx | 4 ---- .../StructuredPropertyEntity.tsx | 5 +--- .../src/app/entityV2/tag/Tag.tsx | 5 +--- .../src/app/entityV2/user/User.tsx | 5 +--- .../ColoredBackgroundPlatformIconGroup.tsx | 4 +++- .../src/app/previewV2/CompactView.tsx | 24 +++++++++---------- .../src/app/previewV2/ContextPath.tsx | 2 +- .../src/app/previewV2/ContextPathEntry.tsx | 8 +++++-- 32 files changed, 49 insertions(+), 141 deletions(-) diff --git a/datahub-web-react/src/app/entityV2/Access/RoleEntity.tsx b/datahub-web-react/src/app/entityV2/Access/RoleEntity.tsx index 25fcad36fd..258af7aea8 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/application/ApplicationEntity.tsx b/datahub-web-react/src/app/entityV2/application/ApplicationEntity.tsx index 68d8209851..38a89d1efb 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/businessAttribute/BusinessAttributeEntity.tsx b/datahub-web-react/src/app/entityV2/businessAttribute/BusinessAttributeEntity.tsx index 115dc95174..8d575ca7c4 100644 --- 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 { ); } - return ( - - ); + return ; }; 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 index d96b58a674..46f51736b5 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/container/ContainerEntity.tsx b/datahub-web-react/src/app/entityV2/container/ContainerEntity.tsx index 12a99f86ee..069da5fb21 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/dashboard/DashboardEntity.tsx b/datahub-web-react/src/app/entityV2/dashboard/DashboardEntity.tsx index 7fd35970cd..9c08d5ed48 100644 --- 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 { ); } - return ( - - ); + return ; }; isSearchEnabled = () => true; diff --git a/datahub-web-react/src/app/entityV2/dataContract/DataContractEntity.tsx b/datahub-web-react/src/app/entityV2/dataContract/DataContractEntity.tsx index 5970ed5c67..8d78a7bff0 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/dataFlow/DataFlowEntity.tsx b/datahub-web-react/src/app/entityV2/dataFlow/DataFlowEntity.tsx index d9c78b610e..0e109f291c 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/dataJob/DataJobEntity.tsx b/datahub-web-react/src/app/entityV2/dataJob/DataJobEntity.tsx index 481b55a0e8..f9dc36805e 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/dataPlatform/DataPlatformEntity.tsx b/datahub-web-react/src/app/entityV2/dataPlatform/DataPlatformEntity.tsx index 213210fc26..74a958e242 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/dataProcessInstance/DataProcessInstanceEntity.tsx b/datahub-web-react/src/app/entityV2/dataProcessInstance/DataProcessInstanceEntity.tsx index c20151bbba..05c4a03844 100644 --- 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 { return ; } - return ( - - ); + return ; }; isSearchEnabled = () => false; diff --git a/datahub-web-react/src/app/entityV2/dataProduct/DataProductEntity.tsx b/datahub-web-react/src/app/entityV2/dataProduct/DataProductEntity.tsx index 8c77e6960e..c2eca66fd9 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/dataset/DatasetEntity.tsx b/datahub-web-react/src/app/entityV2/dataset/DatasetEntity.tsx index 7130d8565a..51c0088135 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/domain/DomainEntity.tsx b/datahub-web-react/src/app/entityV2/domain/DomainEntity.tsx index 4d9b0260b8..5d65bc76d0 100644 --- 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 { ); } - return ( - - ); + return ; }; isSearchEnabled = () => true; diff --git a/datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx b/datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx index 4bb72c6c86..4ece818fb6 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/glossaryTerm/GlossaryTermEntity.tsx b/datahub-web-react/src/app/entityV2/glossaryTerm/GlossaryTermEntity.tsx index 23a02ab7a2..e329f4101d 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/group/Group.tsx b/datahub-web-react/src/app/entityV2/group/Group.tsx index b5d8309cce..e210abf415 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/mlFeature/MLFeatureEntity.tsx b/datahub-web-react/src/app/entityV2/mlFeature/MLFeatureEntity.tsx index 14004942c1..102c5400bf 100644 --- 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 { return ( ); diff --git a/datahub-web-react/src/app/entityV2/mlFeatureTable/MLFeatureTableEntity.tsx b/datahub-web-react/src/app/entityV2/mlFeatureTable/MLFeatureTableEntity.tsx index 89de4f2a06..08f46db6e9 100644 --- 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 { return ( ); diff --git a/datahub-web-react/src/app/entityV2/mlModel/MLModelEntity.tsx b/datahub-web-react/src/app/entityV2/mlModel/MLModelEntity.tsx index e0848e31bf..e87d858107 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/mlModelGroup/MLModelGroupEntity.tsx b/datahub-web-react/src/app/entityV2/mlModelGroup/MLModelGroupEntity.tsx index edf1241a40..b253ee4733 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/mlPrimaryKey/MLPrimaryKeyEntity.tsx b/datahub-web-react/src/app/entityV2/mlPrimaryKey/MLPrimaryKeyEntity.tsx index 1689758945..d2821b9589 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/query/QueryEntity.tsx b/datahub-web-react/src/app/entityV2/query/QueryEntity.tsx index ac2af08c16..20937aa182 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/schemaField/SchemaFieldEntity.tsx b/datahub-web-react/src/app/entityV2/schemaField/SchemaFieldEntity.tsx index 03106aad8c..f696db3fee 100644 --- 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 { type: EntityType = EntityType.SchemaField; icon = (fontSize?: number, styleType?: IconStyleType, 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 index 35c1319650..461bb3e5cc 100644 --- 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 ; } - if (lowerSubType === SubType.Table.toLowerCase()) { - return ; - } if (lowerSubType === SubType.View.toLowerCase()) { return ; } diff --git a/datahub-web-react/src/app/entityV2/structuredProperty/StructuredPropertyEntity.tsx b/datahub-web-react/src/app/entityV2/structuredProperty/StructuredPropertyEntity.tsx index adccf052d1..2562def98b 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/tag/Tag.tsx b/datahub-web-react/src/app/entityV2/tag/Tag.tsx index e57138e241..b1e12ba4d2 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/entityV2/user/User.tsx b/datahub-web-react/src/app/entityV2/user/User.tsx index dbafb6314e..fd9f35bd6f 100644 --- 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 { return ( ); }; diff --git a/datahub-web-react/src/app/previewV2/ColoredBackgroundPlatformIconGroup.tsx b/datahub-web-react/src/app/previewV2/ColoredBackgroundPlatformIconGroup.tsx index a1ddc9a999..53f5988364 100644 --- 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 {renderLogoIcon()}; + return {renderLogoIcon()}; } diff --git a/datahub-web-react/src/app/previewV2/CompactView.tsx b/datahub-web-react/src/app/previewV2/CompactView.tsx index 64176a59a8..3c3a2312a0 100644 --- a/datahub-web-react/src/app/previewV2/CompactView.tsx +++ b/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 = ({ )} - + {isIconPresent ? (
- - |
) : (
@@ -158,7 +158,7 @@ export const CompactView = ({ entityTitleWidth={previewType === PreviewType.HOVER_CARD ? 150 : 200} isCompactView /> - + ); }; diff --git a/datahub-web-react/src/app/previewV2/ContextPath.tsx b/datahub-web-react/src/app/previewV2/ContextPath.tsx index 97ef2a4b21..5134d469c3 100644 --- a/datahub-web-react/src/app/previewV2/ContextPath.tsx +++ b/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; diff --git a/datahub-web-react/src/app/previewV2/ContextPathEntry.tsx b/datahub-web-react/src/app/previewV2/ContextPathEntry.tsx index fb67036fb6..be2d1b3e2c 100644 --- a/datahub-web-react/src/app/previewV2/ContextPathEntry.tsx +++ b/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 ( {showLink ? ( - + {contents} - + ) : ( contents )}