fix(browse): disable breadcrumb links on non-browsable entities (#3447)

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}

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}`}>
+        <BreadcrumbItem key={`${part || index}`} disabled={!breadcrumbLinksEnabled}>
+            {breadcrumbLinksEnabled ? (
                 <Link
                     to={
-                    index === path.length - 1 ? '#' : `${baseBrowsePath}/${createPartialPath(path.slice(0, index + 1))}`
+                        index === path.length - 1
+                            ? '#'
+                            : `${baseBrowsePath}/${createPartialPath(path.slice(0, index + 1))}`
                     }
                 >
                     {part}
                 </Link>
-        </Breadcrumb.Item>
+            ) : (
+                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>
+                <BreadcrumbItem disabled={!breadcrumbLinksEnabled}>
-                    <Link to={baseBrowsePath}>{entityRegistry.getCollectionName(type)}</Link>
+                    {breadcrumbLinksEnabled ? (
-                </Breadcrumb.Item>
+                        <Link to={breadcrumbLinksEnabled ? baseBrowsePath : undefined}>
+                            {entityRegistry.getCollectionName(type)}
+                        </Link>
+                    ) : (
+                        entityRegistry.getCollectionName(type)
+                    )}
+                </BreadcrumbItem>
                 {pathCrumbs}
             </Breadcrumb>
             <LineageNavContainer>