Skip to content

Commit 7f2ca12

Browse files
gabe-lyonsgabe-lyons
authored
feat(React): deprecation status in header (datahub-project#2097)
1 parent c2698b9 commit 7f2ca12

File tree

8 files changed

+180
-42
lines changed

8 files changed

+180
-42
lines changed

‎datahub-web-react/.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
**/*.graphql

‎datahub-web-react/src/components/entity/dataset/profile/DatasetHeader.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { Avatar, Badge, Popover, Space, Tooltip, Typography } from 'antd';
2+
import React from 'react';
3+
import { Link } from 'react-router-dom';
4+
import { Dataset, EntityType } from '../../../../types.generated';
5+
import { useEntityRegistry } from '../../../useEntityRegistry';
6+
import defaultAvatar from '../../../../images/default_avatar.png';
7+
8+
export type Props = {
9+
dataset: Dataset;
10+
};
11+
12+
export default function DatasetHeader({ dataset: { description, ownership, deprecation } }: Props) {
13+
const entityRegistry = useEntityRegistry();
14+
15+
return (
16+
<>
17+
<Typography.Paragraph>{description}</Typography.Paragraph>
18+
<Space direction="vertical">
19+
<Avatar.Group maxCount={6} size="large">
20+
{ownership &&
21+
ownership.owners &&
22+
ownership.owners.map((owner: any) => (
23+
<Tooltip title={owner.owner.info?.fullName}>
24+
<Link to={`/${entityRegistry.getPathName(EntityType.CorpUser)}/${owner.owner.urn}`}>
25+
<Avatar
26+
style={{
27+
color: '#f56a00',
28+
backgroundColor: '#fde3cf',
29+
}}
30+
src={
31+
(owner.owner.editableInfo && owner.owner.editableInfo.pictureLink) ||
32+
defaultAvatar
33+
}
34+
/>
35+
</Link>
36+
</Tooltip>
37+
))}
38+
</Avatar.Group>
39+
<div>
40+
{deprecation?.deprecated && (
41+
<Popover
42+
placement="bottomLeft"
43+
content={
44+
<>
45+
<Typography.Paragraph>By: {deprecation?.actor}</Typography.Paragraph>
46+
{deprecation.decommissionTime && (
47+
<Typography.Paragraph>
48+
On: {new Date(deprecation?.decommissionTime).toUTCString()}
49+
</Typography.Paragraph>
50+
)}
51+
{deprecation?.note && (
52+
<Typography.Paragraph>{deprecation.note}</Typography.Paragraph>
53+
)}
54+
</>
55+
}
56+
title="Deprecated"
57+
>
58+
<Badge count="Deprecated" />
59+
</Popover>
60+
)}
61+
</div>
62+
</Space>
63+
</>
64+
);
65+
}

‎datahub-web-react/src/components/entity/dataset/profile/Profile.tsx

+4-34
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
import React from 'react';
2-
import { Avatar, Tooltip, Typography } from 'antd';
3-
import { Link } from 'react-router-dom';
42
import { useGetDatasetQuery, useUpdateDatasetMutation } from '../../../../graphql/dataset.generated';
5-
import defaultAvatar from '../../../../images/default_avatar.png';
63
import { Ownership as OwnershipView } from './Ownership';
74
import SchemaView from './schema/Schema';
85
import { EntityProfile } from '../../../shared/EntityProfile';
9-
import { Dataset, EntityType } from '../../../../types.generated';
10-
import { useEntityRegistry } from '../../../useEntityRegistry';
6+
import { Dataset } from '../../../../types.generated';
117
import LineageView from './Lineage';
128
import PropertiesView from './Properties';
139
import DocumentsView from './Documentation';
1410
import { sampleDownstreamEntities, sampleUpstreamEntities } from './stories/lineageEntities';
11+
import DatasetHeader from './DatasetHeader';
1512

1613
export enum TabType {
1714
Ownership = 'Ownership',
@@ -28,37 +25,10 @@ const EMPTY_ARR: never[] = [];
2825
* Responsible for display the Dataset Page
2926
*/
3027
export const Profile = ({ urn }: { urn: string }): JSX.Element => {
31-
const entityRegistry = useEntityRegistry();
32-
3328
const { loading, error, data } = useGetDatasetQuery({ variables: { urn } });
34-
3529
const [updateDataset] = useUpdateDatasetMutation();
3630

37-
const getBody = (description: string, ownership: any) => (
38-
<>
39-
<Typography.Paragraph>{description}</Typography.Paragraph>
40-
<Avatar.Group maxCount={6} size="large">
41-
{ownership &&
42-
ownership.owners &&
43-
ownership.owners.map((owner: any) => (
44-
<Tooltip title={owner.owner.info?.fullName}>
45-
<Link to={`/${entityRegistry.getPathName(EntityType.CorpUser)}/${owner.owner.urn}`}>
46-
<Avatar
47-
style={{
48-
color: '#f56a00',
49-
backgroundColor: '#fde3cf',
50-
}}
51-
src={
52-
(owner.owner.editableInfo && owner.owner.editableInfo.pictureLink) ||
53-
defaultAvatar
54-
}
55-
/>
56-
</Link>
57-
</Tooltip>
58-
))}
59-
</Avatar.Group>
60-
</>
61-
);
31+
const getHeader = (dataset: Dataset) => <DatasetHeader dataset={dataset} />;
6232

6333
const getTabs = ({ ownership, properties, institutionalMemory, schema }: Dataset) => {
6434
return [
@@ -118,8 +88,8 @@ export const Profile = ({ urn }: { urn: string }): JSX.Element => {
11888
<EntityProfile
11989
title={data.dataset.name}
12090
tags={data.dataset.tags}
121-
body={getBody(data.dataset?.description || '', data.dataset?.ownership)}
12291
tabs={getTabs(data.dataset as Dataset)}
92+
header={getHeader(data.dataset as Dataset)}
12393
/>
12494
)}
12595
{error && <p>Failed to load dataset with urn {urn}</p>}

‎datahub-web-react/src/components/entity/dataset/profile/stories/DatasetHeader.stories.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import { Story, Meta } from '@storybook/react';
3+
4+
import TestPageContainer from '../../../../../utils/test-utils/TestPageContainer';
5+
import DatasetHeader, { Props } from '../DatasetHeader';
6+
import { sampleDataset, sampleDeprecatedDataset } from './sampleDataset';
7+
8+
export default {
9+
title: 'Dataset Profile / DatasetHeader',
10+
component: DatasetHeader,
11+
} as Meta;
12+
13+
const Template: Story<Props> = (args) => <DatasetHeader {...args} />;
14+
15+
export const DescriptionAndOwner = Template.bind({});
16+
DescriptionAndOwner.args = { dataset: sampleDataset };
17+
DescriptionAndOwner.decorators = [
18+
(InnerStory) => (
19+
<>
20+
<TestPageContainer>
21+
<InnerStory />
22+
</TestPageContainer>
23+
</>
24+
),
25+
];
26+
27+
export const Deprecated = Template.bind({});
28+
Deprecated.args = { dataset: sampleDeprecatedDataset };
29+
Deprecated.decorators = [
30+
(InnerStory) => (
31+
<>
32+
<TestPageContainer>
33+
<InnerStory />
34+
</TestPageContainer>
35+
</>
36+
),
37+
];

‎datahub-web-react/src/components/entity/dataset/profile/stories/sampleDataset.ts

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Dataset, EntityType, FabricType, OwnershipType } from '../../../../../types.generated';
2+
3+
export const sampleDataset: Dataset = {
4+
__typename: 'Dataset',
5+
urn: 'test:urn',
6+
platform: {
7+
type: EntityType.DataPlatform,
8+
urn: 'test:hive:urn',
9+
name: 'hive',
10+
},
11+
name: 'hive dataset',
12+
origin: FabricType.Prod,
13+
description: 'Some description',
14+
type: EntityType.Dataset,
15+
created: { time: 1 },
16+
lastModified: { time: 1 },
17+
tags: [],
18+
ownership: {
19+
owners: [
20+
{ owner: { urn: 'user:urn', type: EntityType.CorpUser, username: 'UserA' }, type: OwnershipType.Dataowner },
21+
],
22+
lastModified: { time: 1 },
23+
},
24+
};
25+
26+
export const sampleDeprecatedDataset: Dataset = {
27+
__typename: 'Dataset',
28+
urn: 'test:urn',
29+
platform: {
30+
type: EntityType.DataPlatform,
31+
urn: 'test:hive:urn',
32+
name: 'hive',
33+
},
34+
name: 'hive dataset',
35+
origin: FabricType.Prod,
36+
description: 'Some deprecated description',
37+
type: EntityType.Dataset,
38+
created: { time: 1 },
39+
lastModified: { time: 1 },
40+
tags: [],
41+
ownership: {
42+
owners: [
43+
{ owner: { urn: 'user:urn', type: EntityType.CorpUser, username: 'UserA' }, type: OwnershipType.Dataowner },
44+
],
45+
lastModified: { time: 1 },
46+
},
47+
deprecation: {
48+
actor: 'UserB',
49+
deprecated: true,
50+
note: "Don't touch this dataset with a 10 foot pole",
51+
decommissionTime: 1612565520292,
52+
},
53+
};

‎datahub-web-react/src/components/shared/EntityProfile.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { RoutedTabs } from './RoutedTabs';
55
export interface EntityProfileProps {
66
title: string;
77
tags?: Array<string>;
8-
body: React.ReactNode;
8+
header: React.ReactNode;
99
tabs?: Array<{
1010
name: string;
1111
path: string;
@@ -21,27 +21,27 @@ const defaultProps = {
2121
/**
2222
* A default container view for presenting Entity details.
2323
*/
24-
export const EntityProfile = ({ title: _title, tags: _tags, body: _body, tabs: _tabs }: EntityProfileProps) => {
25-
const defaultTabPath = _tabs && _tabs?.length > 0 ? _tabs[0].path : '';
24+
export const EntityProfile = ({ title, tags, header, tabs }: EntityProfileProps) => {
25+
const defaultTabPath = tabs && tabs?.length > 0 ? tabs[0].path : '';
2626

2727
/* eslint-disable spaced-comment */
2828
return (
2929
<Layout.Content style={{ backgroundColor: 'white', padding: '0px 100px' }}>
3030
<Row style={{ padding: '20px 0px 10px 0px' }}>
3131
<Col span={24}>
3232
<div>
33-
<h1 style={{ float: 'left' }}>{_title}</h1>
33+
<h1 style={{ float: 'left' }}>{title}</h1>
3434
<div style={{ float: 'left', margin: '5px 20px' }}>
35-
{_tags && _tags.map((t) => <Tag color="blue">{t}</Tag>)}
35+
{tags && tags.map((t) => <Tag color="blue">{t}</Tag>)}
3636
</div>
3737
</div>
3838
</Col>
3939
</Row>
40-
{_body}
40+
{header}
4141
<Divider style={{ marginBottom: '0px' }} />
4242
<Row style={{ padding: '0px 0px 10px 0px' }}>
4343
<Col span={24}>
44-
<RoutedTabs defaultPath={defaultTabPath} tabs={_tabs || []} />
44+
<RoutedTabs defaultPath={defaultTabPath} tabs={tabs || []} />
4545
</Col>
4646
</Row>
4747
</Layout.Content>

‎datahub-web-react/src/graphql/dataset.graphql

+12
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,12 @@ query getDataset($urn: String!) {
7878
}
7979
primaryKeys
8080
}
81+
deprecation {
82+
actor
83+
deprecated
84+
note
85+
decommissionTime
86+
}
8187
}
8288
}
8389

@@ -146,5 +152,11 @@ mutation updateDataset($input: DatasetUpdateInput!) {
146152
}
147153
primaryKeys
148154
}
155+
deprecation {
156+
actor
157+
deprecated
158+
note
159+
decommissionTime
160+
}
149161
}
150162
}

‎datahub-web-react/src/utils/test-utils/TestPageContainer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default ({ children }: Props) => {
2222

2323
return (
2424
<MemoryRouter>
25-
<EntityRegistryContext.Provider value={entityRegistry}>{children}</EntityRegistryContext.Provider>;
25+
<EntityRegistryContext.Provider value={entityRegistry}>{children}</EntityRegistryContext.Provider>
2626
</MemoryRouter>
2727
);
2828
};

0 commit comments

Comments
 (0)