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 26d3cf456a..b6802e3765 100644
--- a/datahub-web-react/src/app/entity/glossaryTerm/preview/Preview.tsx
+++ b/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={
+ View Related Entities
+ }
/>
);
};
diff --git a/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedEntity.tsx b/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedEntity.tsx
index d0e8de0928..098e97e526 100644
--- a/datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedEntity.tsx
+++ b/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;
diff --git a/datahub-web-react/src/app/entity/glossaryTerm/utils.ts b/datahub-web-react/src/app/entity/glossaryTerm/utils.ts
index 3a2a3d35a8..cbfa76fa34 100644
--- a/datahub-web-react/src/app/entity/glossaryTerm/utils.ts
+++ b/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')}`;
+}
diff --git a/datahub-web-react/src/app/entity/shared/ExternalUrlButton.tsx b/datahub-web-react/src/app/entity/shared/ExternalUrlButton.tsx
index 9677af0776..dce74c02cd 100644
--- a/datahub-web-react/src/app/entity/shared/ExternalUrlButton.tsx
+++ b/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 (
-
-
- {displayedName ? `View in ${displayedName}` : 'View link'}{' '}
-
-
-
+
+ {displayedName ? `View in ${displayedName}` : 'View link'}
+
);
}
diff --git a/datahub-web-react/src/app/entity/shared/UrlButton.tsx b/datahub-web-react/src/app/entity/shared/UrlButton.tsx
new file mode 100644
index 0000000000..a6f6da4a60
--- /dev/null
+++ b/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 (
+
+
+ {children}
+
+
+ );
+}
diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx
index 5c7500f0bc..0d0a32f775 100644
--- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx
+++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx
@@ -174,6 +174,7 @@ interface Props {
deprecation?: Deprecation | null;
topUsers?: Array | null;
externalUrl?: string | null;
+ entityTitleSuffix?: React.ReactNode;
subHeader?: React.ReactNode;
snippet?: React.ReactNode;
insights?: Array | 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}
{degree !== undefined && degree !== null && (