Worked on the pop-over of matched entity (#5851)

Author: Ankit-Keshari-Vituity

datahub-web-react/src/app/entity/dataset/DatasetEntity.tsx

@@ -28,6 +28,8 @@ import { OperationsTab } from './profile/OperationsTab';
 import { EntityMenuItems } from '../shared/EntityDropdown/EntityDropdown';
 import { SidebarSiblingsSection } from '../shared/containers/profile/sidebar/SidebarSiblingsSection';
 import { DatasetStatsSummarySubHeader } from './profile/stats/stats/DatasetStatsSummarySubHeader';
+import { TagSummary } from './shared/TagSummary';
+import { TermSummary } from './shared/TermSummary';
 
 const SUBTYPES = {
     VIEW: 'view',
@@ -253,6 +255,19 @@ export class DatasetEntity implements Entity<Dataset> {
     renderSearch = (result: SearchResult) => {
         const data = result.entity as Dataset;
         const genericProperties = this.getGenericEntityProperties(data);
+
+        let snippet: React.ReactNode;
+
+        if (result.matchedFields.length > 0) {
+            if (result.matchedFields[0].value.includes('urn:li:tag')) {
+                snippet = <TagSummary urn={result.matchedFields[0].value} />;
+            } else if (result.matchedFields[0].value.includes('urn:li:glossaryTerm')) {
+                snippet = <TermSummary urn={result.matchedFields[0].value} />;
+            } else {
+                snippet = <b>{result.matchedFields[0].value}</b>;
+            }
+        }
+
         return (
             <Preview
                 urn={data.urn}
@@ -279,8 +294,7 @@ export class DatasetEntity implements Entity<Dataset> {
                     result.matchedFields.length > 0 &&
                     result.matchedFields.every((field) => FIELDS_TO_HIGHLIGHT.has(field.name)) && (
                         <Typography.Text>
-                            Matches {FIELDS_TO_HIGHLIGHT.get(result.matchedFields[0].name)}{' '}
-                            <b>{result.matchedFields[0].value}</b>
+                            Matches {FIELDS_TO_HIGHLIGHT.get(result.matchedFields[0].name)} {snippet}
                         </Typography.Text>
                     )
                 }

datahub-web-react/src/app/entity/dataset/shared/TagSummary.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useGetTagQuery } from '../../../../graphql/tag.generated';
+import { EntityType, Tag } from '../../../../types.generated';
+import { HoverEntityTooltip } from '../../../recommendations/renderer/component/HoverEntityTooltip';
+import { useEntityRegistry } from '../../../useEntityRegistry';
+import { StyledTag } from '../../shared/components/styled/StyledTag';
+
+const TagLink = styled.span`
+    display: inline-block;
+`;
+
+type Props = {
+    urn: string;
+};
+
+export const TagSummary = ({ urn }: Props) => {
+    const entityRegistry = useEntityRegistry();
+    const { data } = useGetTagQuery({ variables: { urn } });
+    return (
+        <>
+            {data && (
+                <HoverEntityTooltip entity={data?.tag as Tag}>
+                    <TagLink key={data?.tag?.urn}>
+                        <StyledTag
+                            style={{ cursor: 'pointer' }}
+                            $colorHash={data?.tag?.urn}
+                            $color={data?.tag?.properties?.colorHex}
+                            closable={false}
+                        >
+                            {entityRegistry.getDisplayName(EntityType.Tag, data?.tag)}
+                        </StyledTag>
+                    </TagLink>
+                </HoverEntityTooltip>
+            )}
+        </>
+    );
+};

datahub-web-react/src/app/entity/dataset/shared/TermSummary.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Tag } from 'antd';
+import { BookOutlined } from '@ant-design/icons';
+import styled from 'styled-components';
+import { useGetGlossaryTermQuery } from '../../../../graphql/glossaryTerm.generated';
+import { HoverEntityTooltip } from '../../../recommendations/renderer/component/HoverEntityTooltip';
+import { EntityType, GlossaryTerm } from '../../../../types.generated';
+import { useEntityRegistry } from '../../../useEntityRegistry';
+
+const TermLink = styled.span`
+    display: inline-block;
+`;
+
+type Props = {
+    urn: string;
+};
+
+export const TermSummary = ({ urn }: Props) => {
+    const entityRegistry = useEntityRegistry();
+    const { data } = useGetGlossaryTermQuery({ variables: { urn } });
+
+    return (
+        <>
+            {data && (
+                <HoverEntityTooltip entity={data?.glossaryTerm as GlossaryTerm}>
+                    <TermLink key={data?.glossaryTerm?.urn}>
+                        <Tag closable={false} style={{ cursor: 'pointer' }}>
+                            <BookOutlined style={{ marginRight: '3%' }} />
+                            {entityRegistry.getDisplayName(EntityType.GlossaryTerm, data?.glossaryTerm)}
+                        </Tag>
+                    </TermLink>
+                </HoverEntityTooltip>
+            )}
+        </>
+    );
+};

datahub-web-react/src/app/entity/glossaryNode/GlossaryNodeEntity.tsx

@@ -114,7 +114,6 @@ class GlossaryNodeEntity implements Entity<GlossaryNode> {
     };
 
     renderPreview = (_: PreviewType, data: GlossaryNode) => {
-        console.log(data);
         return (
             <Preview
                 urn={data?.urn}