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

fix(glossary) Fix Glossary success messages and sort Glossary (#5533)

Browse Source 
* show error and success messages in glossary properly

* sort glossary nodes and terms alphabetically

Co-authored-by: Chris Collins <chriscollins@Chriss-MBP-2.lan>
This commit is contained in:
Chris Collins 2022-08-01 12:37:34 -04:00 committed by GitHub
parent d1f0c7a6aa
commit d9d77646af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 55 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
datahub-web-react/src/app/entity/glossaryNode/ChildrenTab.tsx
View File

@ -1,16 +1,22 @@
import React from 'react';
import { EntityType, GlossaryNode, GlossaryTerm } from '../../../types.generated';
import GlossaryEntitiesList from '../../glossary/GlossaryEntitiesList';
import { useEntityRegistry } from '../../useEntityRegistry';
import { sortGlossaryTerms } from '../glossaryTerm/utils';
import { useEntityData } from '../shared/EntityContext';
import { sortGlossaryNodes } from './utils';
function ChildrenTab() {
const { entityData } = useEntityData();
const entityRegistry = useEntityRegistry();
const childNodes = entityData?.children?.relationships
.filter((child) => child.entity?.type === EntityType.GlossaryNode)
.sort((nodeA, nodeB) => sortGlossaryNodes(entityRegistry, nodeA.entity, nodeB.entity))
.map((child) => child.entity);
const childTerms = entityData?.children?.relationships
.filter((child) => child.entity?.type === EntityType.GlossaryTerm)
.sort((termA, termB) => sortGlossaryTerms(entityRegistry, termA.entity, termB.entity))
.map((child) => child.entity);
return (

8
datahub-web-react/src/app/entity/glossaryNode/utils.ts Normal file
View File

@ -0,0 +1,8 @@
import { Entity, EntityType } from '../../../types.generated';
import EntityRegistry from '../EntityRegistry';
export function sortGlossaryNodes(entityRegistry: EntityRegistry, nodeA?: Entity | null, nodeB?: Entity | null) {
const nodeAName = entityRegistry.getDisplayName(EntityType.GlossaryNode, nodeA);
const nodeBName = entityRegistry.getDisplayName(EntityType.GlossaryNode, nodeB);
return nodeAName.localeCompare(nodeBName);
}

8
datahub-web-react/src/app/entity/glossaryTerm/utils.ts Normal file
View File

@ -0,0 +1,8 @@
import { Entity, EntityType } from '../../../types.generated';
import EntityRegistry from '../EntityRegistry';
export function sortGlossaryTerms(entityRegistry: EntityRegistry, nodeA?: Entity | null, nodeB?: Entity | null) {
const nodeAName = entityRegistry.getDisplayName(EntityType.GlossaryTerm, nodeA) || '';
const nodeBName = entityRegistry.getDisplayName(EntityType.GlossaryTerm, nodeB) || '';
return nodeAName.localeCompare(nodeBName);
}

10
datahub-web-react/src/app/entity/shared/EntityDropdown/CreateGlossaryEntityModal.tsx
View File

@ -49,11 +49,7 @@ function CreateGlossaryEntityModal(props: Props) {
},
},
})
.catch((e) => {
message.destroy();
message.error({ content: `Failed to create: \n ${e.message || ''}`, duration: 3 });
})
.finally(() => {
.then(() => {
message.loading({ content: 'Updating...', duration: 2 });
setTimeout(() => {
message.success({
@ -65,6 +61,10 @@ function CreateGlossaryEntityModal(props: Props) {
refetchData();
}
}, 2000);
})
.catch((e) => {
message.destroy();
message.error({ content: `Failed to create: \n ${e.message || ''}`, duration: 3 });
});
onClose();
}

10
datahub-web-react/src/app/entity/shared/EntityDropdown/MoveGlossaryEntityModal.tsx
View File

@ -43,11 +43,7 @@ function MoveGlossaryEntityModal(props: Props) {
},
},
})
.catch((e) => {
message.destroy();
message.error({ content: `Failed to move: \n ${e.message || ''}`, duration: 3 });
})
.finally(() => {
.then(() => {
message.loading({ content: 'Updating...', duration: 2 });
setTimeout(() => {
message.success({
@ -59,6 +55,10 @@ function MoveGlossaryEntityModal(props: Props) {
refetchData();
}
}, 2000);
})
.catch((e) => {
message.destroy();
message.error({ content: `Failed to move: \n ${e.message || ''}`, duration: 3 });
});
onClose();
}

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

@ -14,6 +14,9 @@ import EmptyGlossarySection from './EmptyGlossarySection';
import CreateGlossaryEntityModal from '../entity/shared/EntityDropdown/CreateGlossaryEntityModal';
import { EntityType } from '../../types.generated';
import { Message } from '../shared/Message';
import { sortGlossaryTerms } from '../entity/glossaryTerm/utils';
import { useEntityRegistry } from '../useEntityRegistry';
import { sortGlossaryNodes } from '../entity/glossaryNode/utils';
export const HeaderWrapper = styled(TabToolbar)`
padding: 15px 45px 10px 24px;
@ -44,9 +47,14 @@ function BusinessGlossaryPage() {
const [browserWidth, setBrowserWidth] = useState(window.innerWidth * 0.2);
const { data: termsData, refetch: refetchForTerms, loading: termsLoading } = useGetRootGlossaryTermsQuery();
const { data: nodesData, refetch: refetchForNodes, loading: nodesLoading } = useGetRootGlossaryNodesQuery();
const entityRegistry = useEntityRegistry();
const terms = termsData?.getRootGlossaryTerms?.terms;
const nodes = nodesData?.getRootGlossaryNodes?.nodes;
const terms = termsData?.getRootGlossaryTerms?.terms.sort((termA, termB) =>
sortGlossaryTerms(entityRegistry, termA, termB),
);
const nodes = nodesData?.getRootGlossaryNodes?.nodes.sort((nodeA, nodeB) =>
sortGlossaryNodes(entityRegistry, nodeA, nodeB),
);
const hasTermsOrNodes = !!nodes?.length || !!terms?.length;

11
datahub-web-react/src/app/glossary/GlossaryBrowser/GlossaryBrowser.tsx
View File

@ -2,6 +2,9 @@ import React, { useEffect } from 'react';
import styled from 'styled-components/macro';
import { useGetRootGlossaryNodesQuery, useGetRootGlossaryTermsQuery } from '../../../graphql/glossary.generated';
import { GlossaryNode, GlossaryTerm } from '../../../types.generated';
import { sortGlossaryNodes } from '../../entity/glossaryNode/utils';
import { sortGlossaryTerms } from '../../entity/glossaryTerm/utils';
import { useEntityRegistry } from '../../useEntityRegistry';
import NodeItem from './NodeItem';
import TermItem from './TermItem';
@ -44,6 +47,10 @@ function GlossaryBrowser(props: Props) {
const displayedNodes = rootNodes || nodesData?.getRootGlossaryNodes?.nodes || [];
const displayedTerms = rootTerms || termsData?.getRootGlossaryTerms?.terms || [];
const entityRegistry = useEntityRegistry();
const sortedNodes = displayedNodes.sort((nodeA, nodeB) => sortGlossaryNodes(entityRegistry, nodeA, nodeB));
const sortedTerms = displayedTerms.sort((termA, termB) => sortGlossaryTerms(entityRegistry, termA, termB));
useEffect(() => {
if (refreshBrowser) {
refetchNodes();
@ -53,7 +60,7 @@ function GlossaryBrowser(props: Props) {
return (
<BrowserWrapper>
{displayedNodes.map((node) => (
{sortedNodes.map((node) => (
<NodeItem
key={node.urn}
node={node}
@ -67,7 +74,7 @@ function GlossaryBrowser(props: Props) {
/>
))}
{!hideTerms &&
displayedTerms.map((term) => (
sortedTerms.map((term) => (
<TermItem key={term.urn} term={term} isSelecting={isSelecting} selectTerm={selectTerm} />
))}
</BrowserWrapper>

4
datahub-web-react/src/app/glossary/GlossaryBrowser/NodeItem.tsx
View File

@ -7,6 +7,8 @@ import { useEntityRegistry } from '../../useEntityRegistry';
import { useGetGlossaryNodeQuery } from '../../../graphql/glossaryNode.generated';
import TermItem, { TermLink as NodeLink, NameWrapper } from './TermItem';
import { useEntityData } from '../../entity/shared/EntityContext';
import { sortGlossaryNodes } from '../../entity/glossaryNode/utils';
import { sortGlossaryTerms } from '../../entity/glossaryTerm/utils';
const ItemWrapper = styled.div`
display: flex;
@ -93,10 +95,12 @@ function NodeItem(props: Props) {
const childNodes =
(children as any)
?.filter((child) => child.entity?.type === EntityType.GlossaryNode)
.sort((nodeA, nodeB) => sortGlossaryNodes(entityRegistry, nodeA.entity, nodeB.entity))
.map((child) => child.entity) || [];
const childTerms =
(children as any)
?.filter((child) => child.entity?.type === EntityType.GlossaryTerm)
.sort((termA, termB) => sortGlossaryTerms(entityRegistry, termA.entity, termB.entity))
.map((child) => child.entity) || [];
if (shouldHideNode) return null;