yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-08-18 06:06:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gabe Lyons 2021-10-25 14:06:39 -07:00 committed by GitHub
parent d3d7593bb4
commit 2f8145496b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
datahub-web-react/src/app/entity/shared/containers/profile/nav/EntityProfileNavBar.tsx
View File

@ -3,6 +3,7 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { useGetBrowsePathsQuery } from '../../../../../../graphql/browse.generated'; import { useGetBrowsePathsQuery } from '../../../../../../graphql/browse.generated';
import { EntityType } from '../../../../../../types.generated'; import { EntityType } from '../../../../../../types.generated';
import { useEntityRegistry } from '../../../../../useEntityRegistry';
import { useLineageData } from '../../../EntityContext'; import { useLineageData } from '../../../EntityContext';
import { ProfileNavBrowsePath } from './ProfileNavBrowsePath'; import { ProfileNavBrowsePath } from './ProfileNavBrowsePath';
@ -15,11 +16,15 @@ const AffixWithHeight = styled(Affix)``;
export const EntityProfileNavBar = ({ urn, entityType }: Props) => { export const EntityProfileNavBar = ({ urn, entityType }: Props) => {
const { data: browseData } = useGetBrowsePathsQuery({ variables: { input: { urn, type: entityType } } }); const { data: browseData } = useGetBrowsePathsQuery({ variables: { input: { urn, type: entityType } } });
const entityRegistry = useEntityRegistry();
const isBrowsable = entityRegistry.getBrowseEntityTypes().includes(entityType);
const lineage = useLineageData(); const lineage = useLineageData();
return ( return (
<AffixWithHeight offsetTop={60}> <AffixWithHeight offsetTop={60}>
<ProfileNavBrowsePath <ProfileNavBrowsePath
breadcrumbLinksEnabled={isBrowsable}
type={entityType} type={entityType}
path={browseData?.browsePaths?.[0]?.path || []} path={browseData?.browsePaths?.[0]?.path || []}
upstreams={lineage?.upstreamChildren?.length || 0} upstreams={lineage?.upstreamChildren?.length || 0}

51
datahub-web-react/src/app/entity/shared/containers/profile/nav/ProfileNavBrowsePath.tsx
View File

@ -16,6 +16,7 @@ type Props = {
path: Array<string>; path: Array<string>;
upstreams: number; upstreams: number;
downstreams: number; downstreams: number;
breadcrumbLinksEnabled: boolean;
}; };
const LineageIconGroup = styled.div` 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. * Responsible for rendering a clickable browse path view.
*/ */
// TODO(Gabe): use this everywhere // 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 entityRegistry = useEntityRegistry();
const history = useHistory(); const history = useHistory();
const location = useLocation(); const location = useLocation();
@ -96,15 +109,21 @@ export const ProfileNavBrowsePath = ({ type, path, upstreams, downstreams }: Pro
const baseBrowsePath = `${PageRoutes.BROWSE}/${entityRegistry.getPathName(type)}`; const baseBrowsePath = `${PageRoutes.BROWSE}/${entityRegistry.getPathName(type)}`;
const pathCrumbs = path.map((part, index) => ( const pathCrumbs = path.map((part, index) => (
<Breadcrumb.Item key={`${part || index}`}> <BreadcrumbItem key={`${part || index}`} disabled={!breadcrumbLinksEnabled}>
<Link {breadcrumbLinksEnabled ? (
to={ <Link
index === path.length - 1 ? '#' : `${baseBrowsePath}/${createPartialPath(path.slice(0, index + 1))}` to={
} index === path.length - 1
> ? '#'
{part} : `${baseBrowsePath}/${createPartialPath(path.slice(0, index + 1))}`
</Link> }
</Breadcrumb.Item> >
{part}
</Link>
) : (
part
)}
</BreadcrumbItem>
)); ));
const hasLineage = upstreams > 0 || downstreams > 0; const hasLineage = upstreams > 0 || downstreams > 0;
@ -115,9 +134,15 @@ export const ProfileNavBrowsePath = ({ type, path, upstreams, downstreams }: Pro
return ( return (
<BrowseRow> <BrowseRow>
<Breadcrumb style={{ fontSize: '16px' }} separator=">"> <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} {pathCrumbs}
</Breadcrumb> </Breadcrumb>
<LineageNavContainer> <LineageNavContainer>