yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-10-12 17:36:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Andrew Sikowitz 2025-08-04 10:18:26 -07:00 committed by GitHub
parent b6437b6c95
commit 1e765cb7f9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
32 changed files with 49 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
datahub-web-react/src/app/entityV2/Access/RoleEntity.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/application/ApplicationEntity.tsx
View File

@ -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' }}
/>
);
};

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

@ -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) => {

5
datahub-web-react/src/app/entityV2/chart/ChartEntity.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/container/ContainerEntity.tsx
View File

@ -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' }}
/>
);
};

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

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

5
datahub-web-react/src/app/entityV2/dataContract/DataContractEntity.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/dataFlow/DataFlowEntity.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/dataJob/DataJobEntity.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/dataPlatform/DataPlatformEntity.tsx
View File

@ -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' }}
/>
);
};

9
datahub-web-react/src/app/entityV2/dataProcessInstance/DataProcessInstanceEntity.tsx
View File

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

5
datahub-web-react/src/app/entityV2/dataProduct/DataProductEntity.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/dataset/DatasetEntity.tsx
View File

@ -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' }}
/>
);
};

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

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

5
datahub-web-react/src/app/entityV2/glossaryNode/GlossaryNodeEntity.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/glossaryTerm/GlossaryTermEntity.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/group/Group.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/mlFeature/MLFeatureEntity.tsx
View File

@ -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"
/>
);

5
datahub-web-react/src/app/entityV2/mlFeatureTable/MLFeatureTableEntity.tsx
View File

@ -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"
/>
);

5
datahub-web-react/src/app/entityV2/mlModel/MLModelEntity.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/mlModelGroup/MLModelGroupEntity.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/mlPrimaryKey/MLPrimaryKeyEntity.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/query/QueryEntity.tsx
View File

@ -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' }}
/>
);
};

2
datahub-web-react/src/app/entityV2/schemaField/SchemaFieldEntity.tsx
View File

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

4
datahub-web-react/src/app/entityV2/shared/components/subtypes.tsx
View File

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

5
datahub-web-react/src/app/entityV2/structuredProperty/StructuredPropertyEntity.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/tag/Tag.tsx
View File

@ -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' }}
/>
);
};

5
datahub-web-react/src/app/entityV2/user/User.tsx
View File

@ -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' }}
/>
);
};

4
datahub-web-react/src/app/previewV2/ColoredBackgroundPlatformIconGroup.tsx
View File

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

24
datahub-web-react/src/app/previewV2/CompactView.tsx
View File

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

2
datahub-web-react/src/app/previewV2/ContextPath.tsx
View File

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

8
datahub-web-react/src/app/previewV2/ContextPathEntry.tsx
View File

@ -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
)}