yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-17 21:14:34 +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

108
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,42 +318,47 @@ export const EntityHeader = ({ showDeprecateOption }: Props) => {
)} )}
</div> </div>
</MainHeaderContent> </MainHeaderContent>
{hasExternalUrl && ( <SideHeaderContent>
<ExternalLinkButton href={externalUrl} onClick={sendAnalytics}> <TopButtonsWrapper>
View in {platformName} <Tooltip title="Copy URN. An URN uniquely identifies an entity on DataHub.">
</ExternalLinkButton> <Button
)} icon={copiedUrn ? <CheckOutlined /> : <CopyOutlined />}
<Tooltip title="Copy URN. An URN uniquely identifies an entity on DataHub."> onClick={() => {
<Button navigator.clipboard.writeText(urn);
icon={copiedUrn ? <CheckOutlined /> : <CopyOutlined />} setCopiedUrn(true);
onClick={() => { }}
navigator.clipboard.writeText(urn); />
setCopiedUrn(true); </Tooltip>
}} {showAdditionalOptions && (
/> <Dropdown
</Tooltip> overlay={
{showAdditionalOptions && ( <Menu>
<Dropdown <Menu.Item key="0">
overlay={ {!entityData?.deprecation?.deprecated ? (
<Menu> <MenuItem onClick={() => setShowAddDeprecationDetailsModal(true)}>
<Menu.Item key="0"> Mark as deprecated
{!entityData?.deprecation?.deprecated ? ( </MenuItem>
<MenuItem onClick={() => setShowAddDeprecationDetailsModal(true)}> ) : (
Mark as deprecated <MenuItem onClick={() => handleUpdateDeprecation(false)}>
</MenuItem> Mark as un-deprecated
) : ( </MenuItem>
<MenuItem onClick={() => handleUpdateDeprecation(false)}> )}
Mark as un-deprecated </Menu.Item>
</MenuItem> </Menu>
)} }
</Menu.Item> trigger={['click']}
</Menu> >
} <MenuIcon />
trigger={['click']} </Dropdown>
> )}
<MenuIcon /> </TopButtonsWrapper>
</Dropdown> {hasExternalUrl && (
)} <Button href={externalUrl} onClick={sendAnalytics}>
View in {platformName}
<RightOutlined style={{ fontSize: 12 }} />
</Button>
)}
</SideHeaderContent>
</HeaderContainer> </HeaderContainer>
<AddDeprecationDetailsModal <AddDeprecationDetailsModal
visible={showAddDeprecationDetailsModal} visible={showAddDeprecationDetailsModal}