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

feat(glossary) Add empty state for the Business Glossary home page (#5217)

Browse Source
This commit is contained in:
Chris Collins 2022-06-21 18:56:24 -04:00 committed by GitHub
parent 77f94cd349
commit 4c33f2d733
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
datahub-web-react/src/app/glossary/BusinessGlossaryPage.tsx
View File

@ -10,6 +10,7 @@ import GlossaryEntitiesList from './GlossaryEntitiesList';
import GlossaryBrowser from './GlossaryBrowser/GlossaryBrowser';
import GlossarySearch from './GlossarySearch';
import { ProfileSidebarResizer } from '../entity/shared/containers/profile/sidebar/ProfileSidebarResizer';
import EmptyGlossarySection from './EmptyGlossarySection';
export const HeaderWrapper = styled(TabToolbar)`
padding: 15px 45px 10px 24px;
@ -44,6 +45,8 @@ function BusinessGlossaryPage() {
const terms = termsData?.getRootGlossaryTerms?.terms;
const nodes = nodesData?.getRootGlossaryNodes?.nodes;
const hasTermsOrNodes = !!nodes?.length || !!terms?.length;
return (
<SearchablePage>
<GlossaryWrapper>
@ -68,7 +71,10 @@ function BusinessGlossaryPage() {
refetchForNodes={refetchForNodes}
/>
</HeaderWrapper>
<GlossaryEntitiesList nodes={nodes || []} terms={terms || []} />
{hasTermsOrNodes && <GlossaryEntitiesList nodes={nodes || []} terms={terms || []} />}
{!hasTermsOrNodes && (
<EmptyGlossarySection refetchForTerms={refetchForTerms} refetchForNodes={refetchForNodes} />
)}
</MainContentWrapper>
</GlossaryWrapper>
</SearchablePage>

69
datahub-web-react/src/app/glossary/EmptyGlossarySection.tsx Normal file
View File

@ -0,0 +1,69 @@
import { PlusOutlined } from '@ant-design/icons';
import { Button, Empty, Typography } from 'antd';
import React, { useState } from 'react';
import styled from 'styled-components/macro';
import { EntityType } from '../../types.generated';
import CreateGlossaryEntityModal from '../entity/shared/EntityDropdown/CreateGlossaryEntityModal';
const StyledEmpty = styled(Empty)`
padding: 80px 40px;
.ant-empty-footer {
.ant-btn:not(:last-child) {
margin-right: 8px;
}
}
`;
const StyledButton = styled(Button)`
margin-right: 8px;
`;
interface Props {
refetchForTerms?: () => void;
refetchForNodes?: () => void;
}
function EmptyGlossarySection(props: Props) {
const { refetchForTerms, refetchForNodes } = props;
const [isCreateTermModalVisible, setIsCreateTermModalVisible] = useState(false);
const [isCreateNodeModalVisible, setIsCreateNodeModalVisible] = useState(false);
return (
<>
<StyledEmpty
description={
<>
<Typography.Title level={4}>Empty Glossary</Typography.Title>
<Typography.Paragraph type="secondary">
Create Terms and Term Groups to organize data assets using a shared vocabulary.
</Typography.Paragraph>
</>
}
>
<StyledButton onClick={() => setIsCreateTermModalVisible(true)}>
<PlusOutlined /> Add Term
</StyledButton>
<StyledButton onClick={() => setIsCreateNodeModalVisible(true)}>
<PlusOutlined /> Add Term Group
</StyledButton>
</StyledEmpty>
{isCreateTermModalVisible && (
<CreateGlossaryEntityModal
entityType={EntityType.GlossaryTerm}
onClose={() => setIsCreateTermModalVisible(false)}
refetchData={refetchForTerms}
/>
)}
{isCreateNodeModalVisible && (
<CreateGlossaryEntityModal
entityType={EntityType.GlossaryNode}
onClose={() => setIsCreateNodeModalVisible(false)}
refetchData={refetchForNodes}
/>
)}
</>
);
}
export default EmptyGlossarySection;