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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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={<BookOutlined style={{ fontSize: '20px' }} />}

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

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

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

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

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

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

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

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

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

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

datahub-web-react/src/app/entity/shared/ExternalUrlButton.tsx

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

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 = ({
                 <SideHeaderContent>
                     <TopButtonsWrapper>
                         {externalUrl && (
-                            <ExternalUrlContainer>
+                            <ExternalUrlButton
-                                <ExternalUrlButton
+                                externalUrl={externalUrl}
-                                    type="link"
+                                entityUrn={urn}
-                                    href={externalUrl}
+                                platformName={platformName}
-                                    target="_blank"
+                                entityType={entityType}
-                                    onClick={sendAnalytics}
+                            />
-                                >
-                                    View in {platformName} <ArrowRightOutlined style={{ fontSize: 12 }} />
-                                </ExternalUrlButton>
-                            </ExternalUrlContainer>
                         )}
                         {headerActionItems && (
                             <EntityActions urn={urn} actionItems={headerActionItems} refetchForEntity={refetch} />

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

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

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({
                             <DeprecationPill deprecation={deprecation} urn="" showUndeprecate={false} preview />
                         )}
                         {externalUrl && (
-                            <ExternalUrlContainer>
+                            <ExternalUrlButton
-                                <ExternalUrlButton type="link" href={externalUrl} target="_blank">
+                                externalUrl={externalUrl}
-                                    View in {platform} <ArrowRightOutlined style={{ fontSize: 12 }} />
+                                platformName={platform}
-                                </ExternalUrlButton>
+                                entityUrn={urn}
-                            </ExternalUrlContainer>
+                                entityType={type}
+                            />
                         )}
                     </EntityTitleContainer>
 

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

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