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 ( ; 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) => ( - - - {part} - - + + {breadcrumbLinksEnabled ? ( + + {part} + + ) : ( + part + )} + )); const hasLineage = upstreams > 0 || downstreams > 0; @@ -115,9 +134,15 @@ export const ProfileNavBrowsePath = ({ type, path, upstreams, downstreams }: Pro return ( - - {entityRegistry.getCollectionName(type)} - + + {breadcrumbLinksEnabled ? ( + + {entityRegistry.getCollectionName(type)} + + ) : ( + entityRegistry.getCollectionName(type) + )} + {pathCrumbs}