yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-17 13:04:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(entity header): Fixes two issues in the EntityHeader - update UI and remove link (#4720)

Browse Source 
Co-authored-by: Chris Collins <chriscollins@Chriss-MBP.lan>
This commit is contained in:
Chris Collins 2022-04-22 16:46:09 -04:00 committed by GitHub
parent 7bcc2d9f62
commit 40cb83f583
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 62 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
datahub-web-react/src/app/entity/shared/containers/profile/header/EntityHeader.tsx
View File

@ -1,5 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { CheckOutlined, CopyOutlined, FolderOpenOutlined, InfoCircleOutlined, MoreOutlined } from '@ant-design/icons'; import {
CheckOutlined,
CopyOutlined,
FolderOpenOutlined,
InfoCircleOutlined,
MoreOutlined,
RightOutlined,
} from '@ant-design/icons';
import { Typography, Image, Button, Tooltip, Menu, Dropdown, message, Popover } from 'antd'; import { Typography, Image, Button, Tooltip, Menu, Dropdown, message, Popover } from 'antd';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
@ -11,7 +18,6 @@ import { useEntityRegistry } from '../../../../../useEntityRegistry';
import { IconStyleType } from '../../../../Entity'; import { IconStyleType } from '../../../../Entity';
import { ANTD_GRAY } from '../../../constants'; import { ANTD_GRAY } from '../../../constants';
import { useEntityData, useRefetch } from '../../../EntityContext'; import { useEntityData, useRefetch } from '../../../EntityContext';
import { useEntityPath } from '../utils';
import analytics, { EventType, EntityActionType } from '../../../../../analytics'; import analytics, { EventType, EntityActionType } from '../../../../../analytics';
import { EntityHealthStatus } from './EntityHealthStatus'; import { EntityHealthStatus } from './EntityHealthStatus';
import { useUpdateDeprecationMutation } from '../../../../../../graphql/mutations.generated'; import { useUpdateDeprecationMutation } from '../../../../../../graphql/mutations.generated';
@ -40,6 +46,7 @@ const PlatformContent = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 8px;
flex-wrap: wrap;
`; `;
const PlatformText = styled(Typography.Text)` const PlatformText = styled(Typography.Text)`
@ -76,10 +83,6 @@ const MainHeaderContent = styled.div`
flex: 1; flex: 1;
`; `;
const ExternalLinkButton = styled(Button)`
margin-right: 12px;
`;
const TypeIcon = styled.span` const TypeIcon = styled.span`
margin-right: 8px; margin-right: 8px;
`; `;
@ -146,6 +149,17 @@ const Divider = styled.div`
padding-top: 5px; padding-top: 5px;
`; `;
const SideHeaderContent = styled.div`
display: flex;
flex-direction: column;
`;
const TopButtonsWrapper = styled.div`
display: flex;
justify-content: flex-end;
margin-bottom: 8px;
`;
type Props = { type Props = {
showDeprecateOption?: boolean; showDeprecateOption?: boolean;
}; };
@ -164,7 +178,6 @@ export const EntityHeader = ({ showDeprecateOption }: Props) => {
const entityTypeCased = const entityTypeCased =
(entityData?.subTypes?.typeNames?.length && capitalizeFirstLetterOnly(entityData?.subTypes.typeNames[0])) || (entityData?.subTypes?.typeNames?.length && capitalizeFirstLetterOnly(entityData?.subTypes.typeNames[0])) ||
entityRegistry.getEntityName(entityType); entityRegistry.getEntityName(entityType);
const entityPath = useEntityPath(entityType, urn);
const externalUrl = entityData?.externalUrl || undefined; const externalUrl = entityData?.externalUrl || undefined;
const hasExternalUrl = !!externalUrl; const hasExternalUrl = !!externalUrl;
@ -264,9 +277,7 @@ export const EntityHeader = ({ showDeprecateOption }: Props) => {
) : null} ) : null}
</PlatformContent> </PlatformContent>
<div style={{ display: 'flex', justifyContent: 'left', alignItems: 'center' }}> <div style={{ display: 'flex', justifyContent: 'left', alignItems: 'center' }}>
<Link to={entityPath}>
<EntityTitle level={3}>{entityData?.name || ' '}</EntityTitle> <EntityTitle level={3}>{entityData?.name || ' '}</EntityTitle>
</Link>
{entityData?.deprecation?.deprecated && ( {entityData?.deprecation?.deprecated && (
<Popover <Popover
overlayStyle={{ maxWidth: 240 }} overlayStyle={{ maxWidth: 240 }}
@ -307,11 +318,8 @@ export const EntityHeader = ({ showDeprecateOption }: Props) => {
)} )}
</div> </div>
</MainHeaderContent> </MainHeaderContent>
{hasExternalUrl && ( <SideHeaderContent>
<ExternalLinkButton href={externalUrl} onClick={sendAnalytics}> <TopButtonsWrapper>
View in {platformName}
</ExternalLinkButton>
)}
<Tooltip title="Copy URN. An URN uniquely identifies an entity on DataHub."> <Tooltip title="Copy URN. An URN uniquely identifies an entity on DataHub.">
<Button <Button
icon={copiedUrn ? <CheckOutlined /> : <CopyOutlined />} icon={copiedUrn ? <CheckOutlined /> : <CopyOutlined />}
@ -343,6 +351,14 @@ export const EntityHeader = ({ showDeprecateOption }: Props) => {
<MenuIcon /> <MenuIcon />
</Dropdown> </Dropdown>
)} )}
</TopButtonsWrapper>
{hasExternalUrl && (
<Button href={externalUrl} onClick={sendAnalytics}>
View in {platformName}
<RightOutlined style={{ fontSize: 12 }} />
</Button>
)}
</SideHeaderContent>
</HeaderContainer> </HeaderContainer>
<AddDeprecationDetailsModal <AddDeprecationDetailsModal
visible={showAddDeprecationDetailsModal} visible={showAddDeprecationDetailsModal}