diff --git a/datahub-web-react/.eslintignore b/datahub-web-react/.eslintignore new file mode 100644 index 0000000000..d55ffbac20 --- /dev/null +++ b/datahub-web-react/.eslintignore @@ -0,0 +1 @@ +**/*.graphql diff --git a/datahub-web-react/src/components/entity/dataset/profile/DatasetHeader.tsx b/datahub-web-react/src/components/entity/dataset/profile/DatasetHeader.tsx new file mode 100644 index 0000000000..84fab2ecef --- /dev/null +++ b/datahub-web-react/src/components/entity/dataset/profile/DatasetHeader.tsx @@ -0,0 +1,65 @@ +import { Avatar, Badge, Popover, Space, Tooltip, Typography } from 'antd'; +import React from 'react'; +import { Link } from 'react-router-dom'; +import { Dataset, EntityType } from '../../../../types.generated'; +import { useEntityRegistry } from '../../../useEntityRegistry'; +import defaultAvatar from '../../../../images/default_avatar.png'; + +export type Props = { + dataset: Dataset; +}; + +export default function DatasetHeader({ dataset: { description, ownership, deprecation } }: Props) { + const entityRegistry = useEntityRegistry(); + + return ( + <> + {description} + + + {ownership && + ownership.owners && + ownership.owners.map((owner: any) => ( + + + + + + ))} + +
+ {deprecation?.deprecated && ( + + By: {deprecation?.actor} + {deprecation.decommissionTime && ( + + On: {new Date(deprecation?.decommissionTime).toUTCString()} + + )} + {deprecation?.note && ( + {deprecation.note} + )} + + } + title="Deprecated" + > + + + )} +
+ + + ); +} diff --git a/datahub-web-react/src/components/entity/dataset/profile/Profile.tsx b/datahub-web-react/src/components/entity/dataset/profile/Profile.tsx index 3a49dadad4..283a738849 100644 --- a/datahub-web-react/src/components/entity/dataset/profile/Profile.tsx +++ b/datahub-web-react/src/components/entity/dataset/profile/Profile.tsx @@ -1,17 +1,14 @@ import React from 'react'; -import { Avatar, Tooltip, Typography } from 'antd'; -import { Link } from 'react-router-dom'; import { useGetDatasetQuery, useUpdateDatasetMutation } from '../../../../graphql/dataset.generated'; -import defaultAvatar from '../../../../images/default_avatar.png'; import { Ownership as OwnershipView } from './Ownership'; import SchemaView from './schema/Schema'; import { EntityProfile } from '../../../shared/EntityProfile'; -import { Dataset, EntityType } from '../../../../types.generated'; -import { useEntityRegistry } from '../../../useEntityRegistry'; +import { Dataset } from '../../../../types.generated'; import LineageView from './Lineage'; import PropertiesView from './Properties'; import DocumentsView from './Documentation'; import { sampleDownstreamEntities, sampleUpstreamEntities } from './stories/lineageEntities'; +import DatasetHeader from './DatasetHeader'; export enum TabType { Ownership = 'Ownership', @@ -28,37 +25,10 @@ const EMPTY_ARR: never[] = []; * Responsible for display the Dataset Page */ export const Profile = ({ urn }: { urn: string }): JSX.Element => { - const entityRegistry = useEntityRegistry(); - const { loading, error, data } = useGetDatasetQuery({ variables: { urn } }); - const [updateDataset] = useUpdateDatasetMutation(); - const getBody = (description: string, ownership: any) => ( - <> - {description} - - {ownership && - ownership.owners && - ownership.owners.map((owner: any) => ( - - - - - - ))} - - - ); + const getHeader = (dataset: Dataset) => ; const getTabs = ({ ownership, properties, institutionalMemory, schema }: Dataset) => { return [ @@ -118,8 +88,8 @@ export const Profile = ({ urn }: { urn: string }): JSX.Element => { )} {error &&

Failed to load dataset with urn {urn}

} diff --git a/datahub-web-react/src/components/entity/dataset/profile/stories/DatasetHeader.stories.tsx b/datahub-web-react/src/components/entity/dataset/profile/stories/DatasetHeader.stories.tsx new file mode 100644 index 0000000000..7a126924f9 --- /dev/null +++ b/datahub-web-react/src/components/entity/dataset/profile/stories/DatasetHeader.stories.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { Story, Meta } from '@storybook/react'; + +import TestPageContainer from '../../../../../utils/test-utils/TestPageContainer'; +import DatasetHeader, { Props } from '../DatasetHeader'; +import { sampleDataset, sampleDeprecatedDataset } from './sampleDataset'; + +export default { + title: 'Dataset Profile / DatasetHeader', + component: DatasetHeader, +} as Meta; + +const Template: Story = (args) => ; + +export const DescriptionAndOwner = Template.bind({}); +DescriptionAndOwner.args = { dataset: sampleDataset }; +DescriptionAndOwner.decorators = [ + (InnerStory) => ( + <> + + + + + ), +]; + +export const Deprecated = Template.bind({}); +Deprecated.args = { dataset: sampleDeprecatedDataset }; +Deprecated.decorators = [ + (InnerStory) => ( + <> + + + + + ), +]; diff --git a/datahub-web-react/src/components/entity/dataset/profile/stories/sampleDataset.ts b/datahub-web-react/src/components/entity/dataset/profile/stories/sampleDataset.ts new file mode 100644 index 0000000000..cdedbb1081 --- /dev/null +++ b/datahub-web-react/src/components/entity/dataset/profile/stories/sampleDataset.ts @@ -0,0 +1,53 @@ +import { Dataset, EntityType, FabricType, OwnershipType } from '../../../../../types.generated'; + +export const sampleDataset: Dataset = { + __typename: 'Dataset', + urn: 'test:urn', + platform: { + type: EntityType.DataPlatform, + urn: 'test:hive:urn', + name: 'hive', + }, + name: 'hive dataset', + origin: FabricType.Prod, + description: 'Some description', + type: EntityType.Dataset, + created: { time: 1 }, + lastModified: { time: 1 }, + tags: [], + ownership: { + owners: [ + { owner: { urn: 'user:urn', type: EntityType.CorpUser, username: 'UserA' }, type: OwnershipType.Dataowner }, + ], + lastModified: { time: 1 }, + }, +}; + +export const sampleDeprecatedDataset: Dataset = { + __typename: 'Dataset', + urn: 'test:urn', + platform: { + type: EntityType.DataPlatform, + urn: 'test:hive:urn', + name: 'hive', + }, + name: 'hive dataset', + origin: FabricType.Prod, + description: 'Some deprecated description', + type: EntityType.Dataset, + created: { time: 1 }, + lastModified: { time: 1 }, + tags: [], + ownership: { + owners: [ + { owner: { urn: 'user:urn', type: EntityType.CorpUser, username: 'UserA' }, type: OwnershipType.Dataowner }, + ], + lastModified: { time: 1 }, + }, + deprecation: { + actor: 'UserB', + deprecated: true, + note: "Don't touch this dataset with a 10 foot pole", + decommissionTime: 1612565520292, + }, +}; diff --git a/datahub-web-react/src/components/shared/EntityProfile.tsx b/datahub-web-react/src/components/shared/EntityProfile.tsx index 58cc2a2379..172b16681e 100644 --- a/datahub-web-react/src/components/shared/EntityProfile.tsx +++ b/datahub-web-react/src/components/shared/EntityProfile.tsx @@ -5,7 +5,7 @@ import { RoutedTabs } from './RoutedTabs'; export interface EntityProfileProps { title: string; tags?: Array; - body: React.ReactNode; + header: React.ReactNode; tabs?: Array<{ name: string; path: string; @@ -21,8 +21,8 @@ const defaultProps = { /** * A default container view for presenting Entity details. */ -export const EntityProfile = ({ title: _title, tags: _tags, body: _body, tabs: _tabs }: EntityProfileProps) => { - const defaultTabPath = _tabs && _tabs?.length > 0 ? _tabs[0].path : ''; +export const EntityProfile = ({ title, tags, header, tabs }: EntityProfileProps) => { + const defaultTabPath = tabs && tabs?.length > 0 ? tabs[0].path : ''; /* eslint-disable spaced-comment */ return ( @@ -30,18 +30,18 @@ export const EntityProfile = ({ title: _title, tags: _tags, body: _body, tabs: _
-

{_title}

+

{title}

- {_tags && _tags.map((t) => {t})} + {tags && tags.map((t) => {t})}
- {_body} + {header} - + diff --git a/datahub-web-react/src/graphql/dataset.graphql b/datahub-web-react/src/graphql/dataset.graphql index fb96ac3a40..e39e357250 100644 --- a/datahub-web-react/src/graphql/dataset.graphql +++ b/datahub-web-react/src/graphql/dataset.graphql @@ -78,6 +78,12 @@ query getDataset($urn: String!) { } primaryKeys } + deprecation { + actor + deprecated + note + decommissionTime + } } } @@ -146,5 +152,11 @@ mutation updateDataset($input: DatasetUpdateInput!) { } primaryKeys } + deprecation { + actor + deprecated + note + decommissionTime + } } } diff --git a/datahub-web-react/src/utils/test-utils/TestPageContainer.tsx b/datahub-web-react/src/utils/test-utils/TestPageContainer.tsx index ccba22c168..babaa417e1 100644 --- a/datahub-web-react/src/utils/test-utils/TestPageContainer.tsx +++ b/datahub-web-react/src/utils/test-utils/TestPageContainer.tsx @@ -22,7 +22,7 @@ export default ({ children }: Props) => { return ( - {children}; + {children} ); };