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 { 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}

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

@ -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>