Add links to glossary term cards without counts (#8705)

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

@@ -4,6 +4,8 @@ import { Deprecation, Domain, EntityType, Owner, ParentNodesResult } from '../..
 import DefaultPreviewCard from '../../../preview/DefaultPreviewCard';
 import { useEntityRegistry } from '../../../useEntityRegistry';
 import { IconStyleType, PreviewType } from '../../Entity';
+import UrlButton from '../../shared/UrlButton';
+import { getRelatedEntitiesUrl } from '../utils';
 
 export const Preview = ({
     urn,
@@ -39,6 +41,9 @@ export const Preview = ({
             deprecation={deprecation}
             parentNodes={parentNodes}
             domain={domain}
+            entityTitleSuffix={
+                <UrlButton href={getRelatedEntitiesUrl(entityRegistry, urn)}>View Related Entities</UrlButton>
+            }
         />
     );
 };

datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedEntity.tsx

@@ -5,7 +5,7 @@ import { EmbeddedListSearchSection } from '../../shared/components/styled/search
 import { useEntityData } from '../../shared/EntityContext';
 
 export default function GlossaryRelatedEntity() {
-    const { entityData }: any = useEntityData();
+    const { entityData } = useEntityData();
 
     const entityUrn = entityData?.urn;
 

datahub-web-react/src/app/entity/glossaryTerm/utils.ts

@@ -6,3 +6,7 @@ export function sortGlossaryTerms(entityRegistry: EntityRegistry, nodeA?: Entity
     const nodeBName = entityRegistry.getDisplayName(EntityType.GlossaryTerm, nodeB) || '';
     return nodeAName.localeCompare(nodeBName);
 }
+
+export function getRelatedEntitiesUrl(entityRegistry: EntityRegistry, urn: string) {
+    return `${entityRegistry.getEntityUrl(EntityType.GlossaryTerm, urn)}/${encodeURIComponent('Related Entities')}`;
+}

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

@@ -1,28 +1,11 @@
-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';
+import UrlButton from './UrlButton';
 
 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;
@@ -46,17 +29,8 @@ export default function ExternalUrlButton({ externalUrl, platformName, entityTyp
     }
 
     return (
-        <ExternalUrlWrapper>
+        <UrlButton href={externalUrl} onClick={sendAnalytics}>
-            <StyledButton
+            {displayedName ? `View in ${displayedName}` : 'View link'}
-                type="link"
+        </UrlButton>
-                href={externalUrl}
-                target="_blank"
-                rel="noreferrer noopener"
-                onClick={sendAnalytics}
-            >
-                {displayedName ? `View in ${displayedName}` : 'View link'}{' '}
-                <ArrowRightOutlined style={{ fontSize: 12 }} />
-            </StyledButton>
-        </ExternalUrlWrapper>
     );
 }

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

@@ -0,0 +1,37 @@
+import React, { ReactNode } from 'react';
+import { ArrowRightOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import styled from 'styled-components/macro';
+
+const UrlButtonContainer = styled.span`
+    font-size: 12px;
+`;
+
+const StyledButton = styled(Button)`
+    > :hover {
+        text-decoration: underline;
+    }
+    &&& {
+        padding-bottom: 0px;
+    }
+    padding-left: 12px;
+    padding-right: 12px;
+`;
+
+interface Props {
+    href: string;
+    children: ReactNode;
+    onClick?: () => void;
+}
+
+const NOOP = () => {};
+
+export default function UrlButton({ href, children, onClick = NOOP }: Props) {
+    return (
+        <UrlButtonContainer>
+            <StyledButton type="link" href={href} target="_blank" rel="noreferrer noopener" onClick={onClick}>
+                {children} <ArrowRightOutlined style={{ fontSize: 12 }} />
+            </StyledButton>
+        </UrlButtonContainer>
+    );
+}

datahub-web-react/src/app/preview/DefaultPreviewCard.tsx

@@ -174,6 +174,7 @@ interface Props {
     deprecation?: Deprecation | null;
     topUsers?: Array<CorpUser> | null;
     externalUrl?: string | null;
+    entityTitleSuffix?: React.ReactNode;
     subHeader?: React.ReactNode;
     snippet?: React.ReactNode;
     insights?: Array<SearchInsight> | null;
@@ -226,6 +227,7 @@ export default function DefaultPreviewCard({
     titleSizePx,
     dataTestID,
     externalUrl,
+    entityTitleSuffix,
     onClick,
     degree,
     parentContainers,
@@ -306,6 +308,7 @@ export default function DefaultPreviewCard({
                                 entityType={type}
                             />
                         )}
+                        {entityTitleSuffix}
                     </EntityTitleContainer>
                     {degree !== undefined && degree !== null && (
                         <Tooltip