diff --git a/datahub-web-react/src/app/entity/chart/preview/ChartPreview.tsx b/datahub-web-react/src/app/entity/chart/preview/ChartPreview.tsx index d0d21726bf282..87e145a83c6b7 100644 --- a/datahub-web-react/src/app/entity/chart/preview/ChartPreview.tsx +++ b/datahub-web-react/src/app/entity/chart/preview/ChartPreview.tsx @@ -68,6 +68,7 @@ export const ChartPreview = ({ } diff --git a/datahub-web-react/src/app/entity/glossaryTerm/preview/Preview.tsx b/datahub-web-react/src/app/entity/glossaryTerm/preview/Preview.tsx index 4daf4c0899ec2..e0f0169fc4052 100644 --- a/datahub-web-react/src/app/entity/glossaryTerm/preview/Preview.tsx +++ b/datahub-web-react/src/app/entity/glossaryTerm/preview/Preview.tsx @@ -28,6 +28,7 @@ export const Preview = ({ previewType={previewType} url={entityRegistry.getEntityUrl(EntityType.GlossaryTerm, urn)} name={name || ''} + urn={urn} description={description || ''} owners={owners} logoComponent={} diff --git a/datahub-web-react/src/app/entity/mlFeature/preview/Preview.tsx b/datahub-web-react/src/app/entity/mlFeature/preview/Preview.tsx index 163831d6c6564..5d763a0fe64fa 100644 --- a/datahub-web-react/src/app/entity/mlFeature/preview/Preview.tsx +++ b/datahub-web-react/src/app/entity/mlFeature/preview/Preview.tsx @@ -27,6 +27,7 @@ export const Preview = ({ { { :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 ( + + + View in {displayedName} + + + ); +} diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeader.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeader.tsx index 740386fac2553..c32a77d2eb1d8 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeader.tsx +++ b/datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeader.tsx @@ -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 = ({ {externalUrl && ( - - - View in {platformName} - - + )} {headerActionItems && ( diff --git a/datahub-web-react/src/app/entity/tag/Tag.tsx b/datahub-web-react/src/app/entity/tag/Tag.tsx index 57a9043953235..e8de4d55d1d6a 100644 --- a/datahub-web-react/src/app/entity/tag/Tag.tsx +++ b/datahub-web-react/src/app/entity/tag/Tag.tsx @@ -57,6 +57,7 @@ export class TagEntity implements Entity { } type="Tag" diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx index ca313df209f02..8b5c2cb6160e7 100644 --- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx +++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx @@ -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({ )} {externalUrl && ( - - - View in {platform} - - + )} diff --git a/datahub-web-react/src/app/recommendations/renderer/component/EntityNameList.tsx b/datahub-web-react/src/app/recommendations/renderer/component/EntityNameList.tsx index 93956fbf214e7..06c6781e001c3 100644 --- a/datahub-web-react/src/app/recommendations/renderer/component/EntityNameList.tsx +++ b/datahub-web-react/src/app/recommendations/renderer/component/EntityNameList.tsx @@ -140,6 +140,7 @@ export const EntityNameList = ({ )}