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

feat(ui): Display 'View in Github' if externalUrl is link to GitHub (#6253)

Browse Source
This commit is contained in:
Chris Collins 2022-10-24 00:29:35 -04:00 committed by GitHub
parent f1aeafa462
commit a28fc1ede8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 94 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
datahub-web-react/src/app/entity/chart/preview/ChartPreview.tsx
View File

@ -68,6 +68,7 @@ export const ChartPreview = ({
<DefaultPreviewCard
url={entityRegistry.getEntityUrl(EntityType.Chart, urn)}
name={name || ''}
urn={urn}
description={description || ''}
type="Chart"
typeIcon={entityRegistry.getIcon(EntityType.Chart, 14, IconStyleType.ACCENT)}

1
datahub-web-react/src/app/entity/container/preview/Preview.tsx
View File

@ -67,6 +67,7 @@ export const Preview = ({
<DefaultPreviewCard
url={entityRegistry.getEntityUrl(EntityType.Container, urn)}
name={name || ''}
urn={urn}
platform={platformName}
platformInstanceId={platformInstanceId}
description={description || ''}

1
datahub-web-react/src/app/entity/dashboard/preview/DashboardPreview.tsx
View File

@ -72,6 +72,7 @@ export const DashboardPreview = ({
<DefaultPreviewCard
url={entityRegistry.getEntityUrl(EntityType.Dashboard, urn)}
name={name || ''}
urn={urn}
description={description || ''}
type={capitalizeFirstLetterOnly(subtype) || 'Dashboard'}
typeIcon={entityRegistry.getIcon(EntityType.Dashboard, 14, IconStyleType.ACCENT)}

1
datahub-web-react/src/app/entity/dataFlow/preview/Preview.tsx
View File

@ -49,6 +49,7 @@ export const Preview = ({
<DefaultPreviewCard
url={entityRegistry.getEntityUrl(EntityType.DataFlow, urn)}
name={name}
urn={urn}
description={description || ''}
platformInstanceId={platformInstanceId}
type="Data Pipeline"

1
datahub-web-react/src/app/entity/dataJob/preview/Preview.tsx
View File

@ -52,6 +52,7 @@ export const Preview = ({
<DefaultPreviewCard
url={entityRegistry.getEntityUrl(EntityType.DataJob, urn)}
name={name}
urn={urn}
description={description || ''}
type="Data Task"
typeIcon={entityRegistry.getIcon(EntityType.DataJob, 14, IconStyleType.ACCENT)}

1
datahub-web-react/src/app/entity/dataset/preview/Preview.tsx
View File

@ -74,6 +74,7 @@ export const Preview = ({
<DefaultPreviewCard
url={entityRegistry.getEntityUrl(EntityType.Dataset, urn)}
name={name || ''}
urn={urn}
description={description || ''}
type={capitalizeFirstLetterOnly(subtype) || 'Dataset'}
logoUrl={platformLogo || ''}

1
datahub-web-react/src/app/entity/domain/preview/Preview.tsx
View File

@ -26,6 +26,7 @@ export const Preview = ({
<DefaultPreviewCard
url={entityRegistry.getEntityUrl(EntityType.Domain, urn)}
name={name || ''}
urn={urn}
description={description || ''}
type="Domain"
typeIcon={entityRegistry.getIcon(EntityType.Domain, 14, IconStyleType.ACCENT)}

1
datahub-web-react/src/app/entity/glossaryNode/preview/Preview.tsx
View File

@ -22,6 +22,7 @@ export const Preview = ({
<DefaultPreviewCard
url={entityRegistry.getEntityUrl(EntityType.GlossaryNode, urn)}
name={name || ''}
urn={urn}
description={description || ''}
owners={owners}
logoComponent={<FolderOutlined style={{ fontSize: '20px' }} />}

1
datahub-web-react/src/app/entity/glossaryTerm/preview/Preview.tsx
View File

@ -28,6 +28,7 @@ export const Preview = ({
previewType={previewType}
url={entityRegistry.getEntityUrl(EntityType.GlossaryTerm, urn)}
name={name || ''}
urn={urn}
description={description || ''}
owners={owners}
logoComponent={<BookOutlined style={{ fontSize: '20px' }} />}

1
datahub-web-react/src/app/entity/mlFeature/preview/Preview.tsx
View File

@ -27,6 +27,7 @@ export const Preview = ({
<DefaultPreviewCard
url={entityRegistry.getEntityUrl(EntityType.Mlfeature, urn)}
name={name}
urn={urn}
platformInstanceId={platformInstanceId}
description={description || ''}
platform={capitalizeFirstLetterOnly(platform?.properties?.displayName) || featureNamespace}

1
datahub-web-react/src/app/entity/mlFeatureTable/preview/Preview.tsx
View File

@ -26,6 +26,7 @@ export const Preview = ({
<DefaultPreviewCard
url={entityRegistry.getEntityUrl(EntityType.MlfeatureTable, urn)}
name={name}
urn={urn}
description={description || ''}
type={entityRegistry.getEntityName(EntityType.MlfeatureTable)}
typeIcon={entityRegistry.getIcon(EntityType.MlfeatureTable, 14, IconStyleType.ACCENT)}

1
datahub-web-react/src/app/entity/mlModel/preview/Preview.tsx
View File

@ -13,6 +13,7 @@ export const Preview = ({ model }: { model: MlModel }): JSX.Element => {
<DefaultPreviewCard
url={entityRegistry.getEntityUrl(EntityType.Mlmodel, model.urn)}
name={model.name || ''}
urn={model.urn}
description={model.description || ''}
platformInstanceId={model.dataPlatformInstance?.instanceId}
type={entityRegistry.getEntityName(EntityType.Mlmodel)}

1
datahub-web-react/src/app/entity/mlModelGroup/preview/Preview.tsx
View File

@ -12,6 +12,7 @@ export const Preview = ({ group }: { group: MlModelGroup }): JSX.Element => {
<DefaultPreviewCard
url={entityRegistry.getEntityUrl(EntityType.MlmodelGroup, group.urn)}
name={group?.name || ''}
urn={group.urn}
platformInstanceId={group.dataPlatformInstance?.instanceId}
description={group?.description || ''}
type="MLModel Group"

1
datahub-web-react/src/app/entity/mlPrimaryKey/preview/Preview.tsx
View File

@ -27,6 +27,7 @@ export const Preview = ({
<DefaultPreviewCard
url={entityRegistry.getEntityUrl(EntityType.MlprimaryKey, urn)}
name={name}
urn={urn}
description={description || ''}
platform={capitalizeFirstLetterOnly(platform?.properties?.displayName) || featureNamespace}
logoUrl={platform?.properties?.logoUrl || ''}

61
datahub-web-react/src/app/entity/shared/ExternalUrlButton.tsx Normal file
View File

@ -0,0 +1,61 @@
import { ArrowRightOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import React from 'react';
import styled from 'styled-components/macro';
import { EntityType } from '../../../types.generated';
import analytics, { EventType, EntityActionType } from '../../analytics';
const GITHUB_LINK = 'github.com';
const GITHUB = 'GitHub';
const ExternalUrlWrapper = styled.span`
font-size: 12px;
`;
const StyledButton = styled(Button)`
> :hover {
text-decoration: underline;
}
&&& {
padding-bottom: 0px;
}
padding-left: 12px;
padding-right: 12px;
`;
interface Props {
externalUrl: string;
platformName?: string;
entityUrn: string;
entityType?: string;
}
export default function ExternalUrlButton({ externalUrl, platformName, entityType, entityUrn }: Props) {
function sendAnalytics() {
analytics.event({
type: EventType.EntityActionEvent,
actionType: EntityActionType.ClickExternalUrl,
entityType: entityType as EntityType,
entityUrn,
});
}
let displayedName = platformName;
if (externalUrl.toLocaleLowerCase().includes(GITHUB_LINK)) {
displayedName = GITHUB;
}
return (
<ExternalUrlWrapper>
<StyledButton
type="link"
href={externalUrl}
target="_blank"
rel="noreferrer noopener"
onClick={sendAnalytics}
>
View in {displayedName} <ArrowRightOutlined style={{ fontSize: 12 }} />
</StyledButton>
</ExternalUrlWrapper>
);
}

39
datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeader.tsx
View File

@ -1,10 +1,7 @@
import React, { useState } from 'react';
import { ArrowRightOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import styled from 'styled-components/macro';
import { capitalizeFirstLetterOnly } from '../../../../../shared/textUtil';
import { useEntityData, useRefetch } from '../../../EntityContext';
import analytics, { EventType, EntityActionType } from '../../../../../analytics';
import { EntityHealthStatus } from './EntityHealthStatus';
import EntityDropdown, { EntityMenuItems } from '../../../EntityDropdown/EntityDropdown';
import PlatformContent from './PlatformContent';
@ -18,6 +15,7 @@ import { DeprecationPill } from '../../../components/styled/DeprecationPill';
import CompactContext from '../../../../../shared/CompactContext';
import { EntitySubHeaderSection } from '../../../types';
import EntityActions, { EntityActionItem } from '../../../entity/EntityActions';
import ExternalUrlButton from '../../../ExternalUrlButton';
const TitleWrapper = styled.div`
display: flex;
@ -57,18 +55,6 @@ const TopButtonsWrapper = styled.div`
margin-bottom: 8px;
`;
const ExternalUrlContainer = styled.span`
font-size: 14px;
`;
const ExternalUrlButton = styled(Button)`
> :hover {
text-decoration: underline;
}
padding-left: 12px;
padding-right: 12px;
`;
export function getCanEditName(entityType: EntityType, privileges?: PlatformPrivileges) {
switch (entityType) {
case EntityType.GlossaryTerm:
@ -106,15 +92,6 @@ export const EntityHeader = ({
const entityCount = entityData?.entityCount;
const isCompact = React.useContext(CompactContext);
const sendAnalytics = () => {
analytics.event({
type: EventType.EntityActionEvent,
actionType: EntityActionType.ClickExternalUrl,
entityType,
entityUrn: urn,
});
};
const canEditName = isNameEditable && getCanEditName(entityType, me?.platformPrivileges as PlatformPrivileges);
return (
@ -146,16 +123,12 @@ export const EntityHeader = ({
<SideHeaderContent>
<TopButtonsWrapper>
{externalUrl && (
<ExternalUrlContainer>
<ExternalUrlButton
type="link"
href={externalUrl}
target="_blank"
onClick={sendAnalytics}
>
View in {platformName} <ArrowRightOutlined style={{ fontSize: 12 }} />
</ExternalUrlButton>
</ExternalUrlContainer>
externalUrl={externalUrl}
entityUrn={urn}
platformName={platformName}
entityType={entityType}
/>
)}
{headerActionItems && (
<EntityActions urn={urn} actionItems={headerActionItems} refetchForEntity={refetch} />

1
datahub-web-react/src/app/entity/tag/Tag.tsx
View File

@ -57,6 +57,7 @@ export class TagEntity implements Entity<Tag> {
<DefaultPreviewCard
description={data.description || ''}
name={data.name}
urn={data.urn}
url={`/${this.getPathName()}/${urlEncodeUrn(data.urn)}`}
logoComponent={<PreviewTagIcon />}
type="Tag"

32
datahub-web-react/src/app/preview/DefaultPreviewCard.tsx
View File

@ -1,8 +1,7 @@
import React, { ReactNode, useState } from 'react';
import { Button, Divider, Tooltip, Typography } from 'antd';
import { Divider, Tooltip, Typography } from 'antd';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { ArrowRightOutlined } from '@ant-design/icons';
import {
GlobalTags,
@ -28,6 +27,7 @@ import EntityCount from '../entity/shared/containers/profile/header/EntityCount'
import { ExpandedActorGroup } from '../entity/shared/components/styled/ExpandedActorGroup';
import { DeprecationPill } from '../entity/shared/components/styled/DeprecationPill';
import { PreviewType } from '../entity/Entity';
import ExternalUrlButton from '../entity/shared/ExternalUrlButton';
const PreviewContainer = styled.div`
display: flex;
@ -129,21 +129,6 @@ const InsightIconContainer = styled.span`
margin-right: 4px;
`;
const ExternalUrlContainer = styled.span`
font-size: 12px;
`;
const ExternalUrlButton = styled(Button)`
> :hover {
text-decoration: underline;
}
&&& {
padding-bottom: 0px;
}
padding-left: 12px;
padding-right: 12px;
`;
const UserListContainer = styled.div`
display: flex;
flex-direction: column;
@ -164,6 +149,7 @@ const UserListTitle = styled(Typography.Text)`
interface Props {
name: string;
urn: string;
logoUrl?: string;
logoComponent?: JSX.Element;
url: string;
@ -200,6 +186,7 @@ interface Props {
export default function DefaultPreviewCard({
name,
urn,
logoUrl,
logoComponent,
url,
@ -292,11 +279,12 @@ export default function DefaultPreviewCard({
<DeprecationPill deprecation={deprecation} urn="" showUndeprecate={false} preview />
)}
{externalUrl && (
<ExternalUrlContainer>
<ExternalUrlButton type="link" href={externalUrl} target="_blank">
View in {platform} <ArrowRightOutlined style={{ fontSize: 12 }} />
</ExternalUrlButton>
</ExternalUrlContainer>
<ExternalUrlButton
externalUrl={externalUrl}
platformName={platform}
entityUrn={urn}
entityType={type}
/>
)}
</EntityTitleContainer>

1
datahub-web-react/src/app/recommendations/renderer/component/EntityNameList.tsx
View File

@ -140,6 +140,7 @@ export const EntityNameList = ({
)}
<DefaultPreviewCard
name={displayName}
urn={entity.urn}
logoUrl={platformLogoUrl || undefined}
logoComponent={fallbackIcon}
url={url}