From 2f8145496b9f95f0b248f49e5c9ab047b09a2c5f Mon Sep 17 00:00:00 2001
From: Gabe Lyons <itsgabelyons@gmail.com>
Date: Mon, 25 Oct 2021 14:06:39 -0700
Subject: [PATCH] fix(browse): disable breadcrumb links on non-browsable
 entities (#3447)

---
 .../profile/nav/EntityProfileNavBar.tsx       |  5 ++
 .../profile/nav/ProfileNavBrowsePath.tsx      | 51 ++++++++++++++-----
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/nav/EntityProfileNavBar.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/nav/EntityProfileNavBar.tsx
index 211f7eb4c1..6cf9fb514c 100644
--- a/datahub-web-react/src/app/entity/shared/containers/profile/nav/EntityProfileNavBar.tsx
+++ b/datahub-web-react/src/app/entity/shared/containers/profile/nav/EntityProfileNavBar.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { useGetBrowsePathsQuery } from '../../../../../../graphql/browse.generated';
 import { EntityType } from '../../../../../../types.generated';
+import { useEntityRegistry } from '../../../../../useEntityRegistry';
 import { useLineageData } from '../../../EntityContext';
 import { ProfileNavBrowsePath } from './ProfileNavBrowsePath';
 
@@ -15,11 +16,15 @@ const AffixWithHeight = styled(Affix)``;
 
 export const EntityProfileNavBar = ({ urn, entityType }: Props) => {
     const { data: browseData } = useGetBrowsePathsQuery({ variables: { input: { urn, type: entityType } } });
+    const entityRegistry = useEntityRegistry();
+
+    const isBrowsable = entityRegistry.getBrowseEntityTypes().includes(entityType);
     const lineage = useLineageData();
 
     return (
         <AffixWithHeight offsetTop={60}>
             <ProfileNavBrowsePath
+                breadcrumbLinksEnabled={isBrowsable}
                 type={entityType}
                 path={browseData?.browsePaths?.[0]?.path || []}
                 upstreams={lineage?.upstreamChildren?.length || 0}
diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/nav/ProfileNavBrowsePath.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/nav/ProfileNavBrowsePath.tsx
index 8c75bf66b2..c778f6dcdc 100644
--- a/datahub-web-react/src/app/entity/shared/containers/profile/nav/ProfileNavBrowsePath.tsx
+++ b/datahub-web-react/src/app/entity/shared/containers/profile/nav/ProfileNavBrowsePath.tsx
@@ -16,6 +16,7 @@ type Props = {
     path: Array<string>;
     upstreams: number;
     downstreams: number;
+    breadcrumbLinksEnabled: boolean;
 };
 
 const LineageIconGroup = styled.div`
@@ -79,11 +80,23 @@ const LineageBadge = styled(Badge)`
     }
 `;
 
+const BreadcrumbItem = styled(Breadcrumb.Item)<{ disabled: boolean }>`
+    &&& :hover {
+        color: ${(props) => (props.disabled ? ANTD_GRAY[7] : props.theme.styles['primary-color'])};
+    }
+`;
+
 /**
  * Responsible for rendering a clickable browse path view.
  */
 // TODO(Gabe): use this everywhere
-export const ProfileNavBrowsePath = ({ type, path, upstreams, downstreams }: Props): JSX.Element => {
+export const ProfileNavBrowsePath = ({
+    type,
+    path,
+    upstreams,
+    downstreams,
+    breadcrumbLinksEnabled,
+}: Props): JSX.Element => {
     const entityRegistry = useEntityRegistry();
     const history = useHistory();
     const location = useLocation();
@@ -96,15 +109,21 @@ export const ProfileNavBrowsePath = ({ type, path, upstreams, downstreams }: Pro
     const baseBrowsePath = `${PageRoutes.BROWSE}/${entityRegistry.getPathName(type)}`;
 
     const pathCrumbs = path.map((part, index) => (
-        <Breadcrumb.Item key={`${part || index}`}>
-            <Link
-                to={
-                    index === path.length - 1 ? '#' : `${baseBrowsePath}/${createPartialPath(path.slice(0, index + 1))}`
-                }
-            >
-                {part}
-            </Link>
-        </Breadcrumb.Item>
+        <BreadcrumbItem key={`${part || index}`} disabled={!breadcrumbLinksEnabled}>
+            {breadcrumbLinksEnabled ? (
+                <Link
+                    to={
+                        index === path.length - 1
+                            ? '#'
+                            : `${baseBrowsePath}/${createPartialPath(path.slice(0, index + 1))}`
+                    }
+                >
+                    {part}
+                </Link>
+            ) : (
+                part
+            )}
+        </BreadcrumbItem>
     ));
 
     const hasLineage = upstreams > 0 || downstreams > 0;
@@ -115,9 +134,15 @@ export const ProfileNavBrowsePath = ({ type, path, upstreams, downstreams }: Pro
     return (
         <BrowseRow>
             <Breadcrumb style={{ fontSize: '16px' }} separator=">">
-                <Breadcrumb.Item>
-                    <Link to={baseBrowsePath}>{entityRegistry.getCollectionName(type)}</Link>
-                </Breadcrumb.Item>
+                <BreadcrumbItem disabled={!breadcrumbLinksEnabled}>
+                    {breadcrumbLinksEnabled ? (
+                        <Link to={breadcrumbLinksEnabled ? baseBrowsePath : undefined}>
+                            {entityRegistry.getCollectionName(type)}
+                        </Link>
+                    ) : (
+                        entityRegistry.getCollectionName(type)
+                    )}
+                </BreadcrumbItem>
                 {pathCrumbs}
             </Breadcrumb>
             <LineageNavContainer>