yujunjun/datahub
2
0
Fork 0
mirror of https://github.com/datahub-project/datahub.git synced 2025-12-15 20:16:52 +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 { 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 { Link } from 'react-router-dom';
import styled from 'styled-components';
@ -11,7 +18,6 @@ import { useEntityRegistry } from '../../../../../useEntityRegistry';
import { IconStyleType } from '../../../../Entity';
import { ANTD_GRAY } from '../../../constants';
import { useEntityData, useRefetch } from '../../../EntityContext';
import { useEntityPath } from '../utils';
import analytics, { EventType, EntityActionType } from '../../../../../analytics';
import { EntityHealthStatus } from './EntityHealthStatus';
import { useUpdateDeprecationMutation } from '../../../../../../graphql/mutations.generated';
@ -40,6 +46,7 @@ const PlatformContent = styled.div`
display: flex;
align-items: center;
margin-bottom: 8px;
flex-wrap: wrap;
`;
const PlatformText = styled(Typography.Text)`
@ -76,10 +83,6 @@ const MainHeaderContent = styled.div`
flex: 1;
`;
const ExternalLinkButton = styled(Button)`
margin-right: 12px;
`;
const TypeIcon = styled.span`
margin-right: 8px;
`;
@ -146,6 +149,17 @@ const Divider = styled.div`
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 = {
showDeprecateOption?: boolean;
};
@ -164,7 +178,6 @@ export const EntityHeader = ({ showDeprecateOption }: Props) => {
const entityTypeCased =
(entityData?.subTypes?.typeNames?.length && capitalizeFirstLetterOnly(entityData?.subTypes.typeNames[0])) ||
entityRegistry.getEntityName(entityType);
const entityPath = useEntityPath(entityType, urn);
const externalUrl = entityData?.externalUrl || undefined;
const hasExternalUrl = !!externalUrl;
@ -264,9 +277,7 @@ export const EntityHeader = ({ showDeprecateOption }: Props) => {
) : null}
</PlatformContent>
<div style={{ display: 'flex', justifyContent: 'left', alignItems: 'center' }}>
<Link to={entityPath}>
<EntityTitle level={3}>{entityData?.name || ' '}</EntityTitle>
</Link>
<EntityTitle level={3}>{entityData?.name || ' '}</EntityTitle>
{entityData?.deprecation?.deprecated && (
<Popover
overlayStyle={{ maxWidth: 240 }}
@ -307,42 +318,47 @@ export const EntityHeader = ({ showDeprecateOption }: Props) => {
)}
</div>
</MainHeaderContent>
{hasExternalUrl && (
<ExternalLinkButton href={externalUrl} onClick={sendAnalytics}>
View in {platformName}
</ExternalLinkButton>
)}
<Tooltip title="Copy URN. An URN uniquely identifies an entity on DataHub.">
<Button
icon={copiedUrn ? <CheckOutlined /> : <CopyOutlined />}
onClick={() => {
navigator.clipboard.writeText(urn);
setCopiedUrn(true);
}}
/>
</Tooltip>
{showAdditionalOptions && (
<Dropdown
overlay={
<Menu>
<Menu.Item key="0">
{!entityData?.deprecation?.deprecated ? (
<MenuItem onClick={() => setShowAddDeprecationDetailsModal(true)}>
Mark as deprecated
</MenuItem>
) : (
<MenuItem onClick={() => handleUpdateDeprecation(false)}>
Mark as un-deprecated
</MenuItem>
)}
</Menu.Item>
</Menu>
}
trigger={['click']}
>
<MenuIcon />
</Dropdown>
)}
<SideHeaderContent>
<TopButtonsWrapper>
<Tooltip title="Copy URN. An URN uniquely identifies an entity on DataHub.">
<Button
icon={copiedUrn ? <CheckOutlined /> : <CopyOutlined />}
onClick={() => {
navigator.clipboard.writeText(urn);
setCopiedUrn(true);
}}
/>
</Tooltip>
{showAdditionalOptions && (
<Dropdown
overlay={
<Menu>
<Menu.Item key="0">
{!entityData?.deprecation?.deprecated ? (
<MenuItem onClick={() => setShowAddDeprecationDetailsModal(true)}>
Mark as deprecated
</MenuItem>
) : (
<MenuItem onClick={() => handleUpdateDeprecation(false)}>
Mark as un-deprecated
</MenuItem>
)}
</Menu.Item>
</Menu>
}
trigger={['click']}
>
<MenuIcon />
</Dropdown>
)}
</TopButtonsWrapper>
{hasExternalUrl && (
<Button href={externalUrl} onClick={sendAnalytics}>
View in {platformName}
<RightOutlined style={{ fontSize: 12 }} />
</Button>
)}
</SideHeaderContent>
</HeaderContainer>
<AddDeprecationDetailsModal
visible={showAddDeprecationDetailsModal}