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

Adds tabs for "Contained by" and "Inherited by" on the Glossary Related Terms tab.

datahub-web-react/src/app/entity/glossaryTerm/profile/GlossaryRelatedTermsResult.tsx

@@ -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>
+                        {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()} />

datahub-web-react/src/app/entity/glossaryTerm/profile/RelatedTerm.tsx

@@ -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,6 +55,7 @@ function RelatedTerm(props: Props) {
         <ListItem>
             <Profile>
                 {entityRegistry.renderPreview(EntityType.GlossaryTerm, PreviewType.PREVIEW, data?.glossaryTerm)}
+                {isEditable && (
                     <Dropdown
                         overlay={
                             <Menu>
@@ -68,6 +70,7 @@ function RelatedTerm(props: Props) {
                     >
                         <MenuIcon />
                     </Dropdown>
+                )}
             </Profile>
             <Divider style={{ margin: '20px 0' }} />
         </ListItem>

datahub-web-react/src/app/entity/shared/constants.ts

@@ -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;

datahub-web-react/src/graphql/glossaryTerm.graphql

@@ -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
         }