refactor(ui): Show message when related glossary terms are empty. (#5285)

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

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components/macro';
 import { TermRelationshipType } from '../../../../types.generated';
 import { Message } from '../../../shared/Message';
+import { EmptyTab } from '../../shared/components/styled/EmptyTab';
 import { ANTD_GRAY } from '../../shared/constants';
 import AddRelatedTermsModal from './AddRelatedTermsModal';
 import RelatedTerm from './RelatedTerm';
@@ -62,6 +63,9 @@ export default function GlossaryRelatedTermsResult({ glossaryRelatedTermType, gl
                     {glossaryRelatedTermUrns.map((urn) => (
                         <RelatedTerm key={urn} urn={urn} relationshipType={relationshipType} />
                     ))}
+                    {glossaryRelatedTermUrns.length === 0 && (
+                        <EmptyTab tab={glossaryRelatedTermType.toLocaleLowerCase()} />
+                    )}
                 </ListContainer>
             )}
             {isShowingAddModal && (

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

@@ -47,4 +47,12 @@ export const EMPTY_MESSAGES = {
         title: 'No domain set',
         description: 'Group related entities based on your organizational structure using by adding them to a Domain.',
     },
+    contains: {
+        title: 'Contains no Terms',
+        description: 'Terms can contain other terms to represent an "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.',
+    },
 };

datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx

@@ -6,6 +6,7 @@ import { Maybe } from 'graphql/jsutils/Maybe';
 import { Container } from '../../../../../../../types.generated';
 import { ANTD_GRAY } from '../../../../constants';
 import ContainerLink from './ContainerLink';
+import { capitalizeFirstLetter } from '../../../../../../shared/textUtil';
 
 const LogoIcon = styled.span`
     display: flex;
@@ -119,7 +120,7 @@ function PlatformContentView(props: Props) {
     return (
         <PlatformContentWrapper>
             {typeIcon && <LogoIcon>{typeIcon}</LogoIcon>}
-            <PlatformText>{entityType}</PlatformText>
+            <PlatformText>{capitalizeFirstLetter(entityType)}</PlatformText>
             {(!!platformName || !!instanceId || !!parentContainers?.length) && <PlatformDivider />}
             {platformName && (
                 <LogoIcon>