feat(frontend): add additional tabs to glossary terms view (#7392)

Adds tabs for "Contained by" and "Inherited by" on the Glossary Related Terms tab.
This commit is contained in:
Alexey Kravtsov 2023-02-23 00:30:47 +03:00 committed by GitHub
parent d436ab9f9b
commit 79aa66ab0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 21 deletions

View File

@ -12,6 +12,8 @@ import RelatedTerm from './RelatedTerm';
export enum RelatedTermTypes {
hasRelatedTerms = 'Contains',
isRelatedTerms = 'Inherits',
containedBy = 'Contained by',
isAChildren = 'Inherited by',
}
export type Props = {
@ -42,9 +44,13 @@ export default function GlossaryRelatedTermsResult({ glossaryRelatedTermType, gl
});
const contentLoading = false;
const relationshipType =
glossaryRelatedTermType === RelatedTermTypes.hasRelatedTerms
glossaryRelatedTermType === RelatedTermTypes.hasRelatedTerms ||
glossaryRelatedTermType === RelatedTermTypes.containedBy
? TermRelationshipType.HasA
: TermRelationshipType.IsA;
const canEditRelatedTerms =
glossaryRelatedTermType === RelatedTermTypes.isRelatedTerms ||
glossaryRelatedTermType === RelatedTermTypes.hasRelatedTerms;
return (
<>
@ -56,12 +62,19 @@ export default function GlossaryRelatedTermsResult({ glossaryRelatedTermType, gl
<Typography.Title style={{ margin: '0' }} level={3}>
{glossaryRelatedTermType}
</Typography.Title>
<Button type="text" onClick={() => setIsShowingAddModal(true)}>
<PlusOutlined /> Add Terms
</Button>
{canEditRelatedTerms && (
<Button type="text" onClick={() => setIsShowingAddModal(true)}>
<PlusOutlined /> Add Terms
</Button>
)}
</TitleContainer>
{glossaryRelatedTermUrns.map((urn) => (
<RelatedTerm key={urn} urn={urn} relationshipType={relationshipType} />
<RelatedTerm
key={urn}
urn={urn}
relationshipType={relationshipType}
isEditable={canEditRelatedTerms}
/>
))}
{glossaryRelatedTermUrns.length === 0 && (
<EmptyTab tab={glossaryRelatedTermType.toLocaleLowerCase()} />

View File

@ -35,10 +35,11 @@ const MenuItem = styled.div`
interface Props {
urn: string;
relationshipType: TermRelationshipType;
isEditable: boolean;
}
function RelatedTerm(props: Props) {
const { urn, relationshipType } = props;
const { urn, relationshipType, isEditable } = props;
const entityRegistry = useEntityRegistry();
const { data, loading } = useGetGlossaryTermQuery({ variables: { urn } });
@ -54,20 +55,22 @@ function RelatedTerm(props: Props) {
<ListItem>
<Profile>
{entityRegistry.renderPreview(EntityType.GlossaryTerm, PreviewType.PREVIEW, data?.glossaryTerm)}
<Dropdown
overlay={
<Menu>
<Menu.Item key="0">
<MenuItem onClick={onRemove}>
<DeleteOutlined /> &nbsp; Remove Term
</MenuItem>
</Menu.Item>
</Menu>
}
trigger={['click']}
>
<MenuIcon />
</Dropdown>
{isEditable && (
<Dropdown
overlay={
<Menu>
<Menu.Item key="0">
<MenuItem onClick={onRemove}>
<DeleteOutlined /> &nbsp; Remove Term
</MenuItem>
</Menu.Item>
</Menu>
}
trigger={['click']}
>
<MenuIcon />
</Dropdown>
)}
</Profile>
<Divider style={{ margin: '20px 0' }} />
</ListItem>

View File

@ -51,12 +51,20 @@ export const EMPTY_MESSAGES = {
},
contains: {
title: 'Contains no Terms',
description: 'Terms can contain other terms to represent an "Has A" style relationship.',
description: 'Terms can contain other terms to represent a "Has A" style relationship.',
},
inherits: {
title: 'Does not inherit from any terms',
description: 'Terms can inherit from other terms to represent an "Is A" style relationship.',
},
'contained by': {
title: 'Is not contained by any terms',
description: 'Terms can be contained by other terms to represent a "Has A" style relationship.',
},
'inherited by': {
title: 'Is not inherited by any terms',
description: 'Terms can be inherited by other terms to represent an "Is A" style relationship.',
},
};
export const ELASTIC_MAX_COUNT = 10000;

View File

@ -42,6 +42,18 @@ query getGlossaryTerm($urn: String!, $start: Int, $count: Int) {
}
}
}
containedBy: relationships(input: { types: ["HasA"], direction: INCOMING, start: $start, count: $count }) {
start
count
total
relationships {
entity {
... on GlossaryTerm {
urn
}
}
}
}
parentNodes {
...parentNodesFields
}