Skip to content

Commit

Permalink
fix(glossary) Fix Glossary success messages and sort Glossary (#5533)
Browse files Browse the repository at this point in the history
* show error and success messages in glossary properly

* sort glossary nodes and terms alphabetically

Co-authored-by: Chris Collins <[email protected]>
  • Loading branch information
chriscollins3456 and Chris Collins authored Aug 1, 2022
1 parent d1f0c7a commit d9d7764
Show file tree
Hide file tree
Showing 8 changed files with 55 additions and 14 deletions.
6 changes: 6 additions & 0 deletions datahub-web-react/src/app/entity/glossaryNode/ChildrenTab.tsx
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
8 changes: 8 additions & 0 deletions datahub-web-react/src/app/entity/glossaryNode/utils.ts
Original file line number Diff line number Diff line change
@@ -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 changes: 8 additions & 0 deletions datahub-web-react/src/app/entity/glossaryTerm/utils.ts
Original file line number Diff line number Diff line change
@@ -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);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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();
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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();
}
Expand Down
12 changes: 10 additions & 2 deletions datahub-web-react/src/app/glossary/BusinessGlossaryPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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();
Expand All @@ -53,7 +60,7 @@ function GlossaryBrowser(props: Props) {

return (
<BrowserWrapper>
{displayedNodes.map((node) => (
{sortedNodes.map((node) => (
<NodeItem
key={node.urn}
node={node}
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit d9d7764

Please sign in to comment.