fixing tag color in recs (#4274)

datahub-web-react/src/app/recommendations/renderer/component/TagSearchList.tsx

@@ -2,9 +2,10 @@ import { Button } from 'antd';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
-import { RecommendationContent, Tag } from '../../../../types.generated';
+import { EntityType, RecommendationContent, Tag } from '../../../../types.generated';
 import { StyledTag } from '../../../entity/shared/components/styled/StyledTag';
 import { navigateToSearchUrl } from '../../../search/utils/navigateToSearchUrl';
+import { useEntityRegistry } from '../../../useEntityRegistry';
 
 const TagSearchListContainer = styled.div`
     display: flex;
@@ -30,6 +31,7 @@ type Props = {
 
 export const TagSearchList = ({ content, onClick }: Props) => {
     const history = useHistory();
+    const entityRegistry = useEntityRegistry();
 
     const tags: Array<Tag> = content
         .map((cnt) => cnt.entity)
@@ -55,7 +57,7 @@ export const TagSearchList = ({ content, onClick }: Props) => {
                 <TagContainer>
                     <TagButton type="link" key={tag.urn} onClick={() => onClickTag(tag, index)}>
                         <StyledTag $colorHash={tag?.urn} $color={tag?.properties?.colorHex} closable={false}>
-                            {tag?.name}
+                            {entityRegistry.getDisplayName(EntityType.Tag, tag)}
                         </StyledTag>
                     </TagButton>
                 </TagContainer>

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

@@ -247,6 +247,11 @@ fragment entityPreview on Entity {
     ... on Tag {
         name
         description
+        properties {
+            name
+            description
+            colorHex
+        }
     }
     ... on DataPlatform {
         ...nonConflictingPlatformFields