From 25a4eefe6bf5436afbaaeff1ee22b9e62ade5a16 Mon Sep 17 00:00:00 2001
From: kartikey-visa <164213341+kartikey-visa@users.noreply.github.com>
Date: Mon, 28 Oct 2024 23:59:07 +0530
Subject: [PATCH] feat(frontend): show browse paths for business attributes
 related entities - schema fields (#11585)

---
 .../SchemaFieldPropertiesEntity.tsx           | 33 +++++++++++--
 .../entity/schemaField/preview/Preview.tsx    | 17 ++++++-
 .../header/PlatformContent/DatasetLink.tsx    | 46 +++++++++++++++++++
 .../PlatformContent/PlatformContentView.tsx   | 11 ++++-
 .../src/app/preview/DefaultPreviewCard.tsx    |  4 ++
 datahub-web-react/src/graphql/search.graphql  |  6 +++
 6 files changed, 111 insertions(+), 6 deletions(-)
 create mode 100644 datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/DatasetLink.tsx

diff --git a/datahub-web-react/src/app/entity/schemaField/SchemaFieldPropertiesEntity.tsx b/datahub-web-react/src/app/entity/schemaField/SchemaFieldPropertiesEntity.tsx
index 7e74b43e68afb..88743012ddbc8 100644
--- a/datahub-web-react/src/app/entity/schemaField/SchemaFieldPropertiesEntity.tsx
+++ b/datahub-web-react/src/app/entity/schemaField/SchemaFieldPropertiesEntity.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { PicCenterOutlined } from '@ant-design/icons';
-import { EntityType, SchemaFieldEntity, SearchResult } from '../../../types.generated';
+import { Dataset, EntityType, SchemaFieldEntity, SearchResult } from '../../../types.generated';
 import { Entity, IconStyleType, PreviewType } from '../Entity';
 import { getDataForEntityType } from '../shared/containers/profile/utils';
 import { Preview } from './preview/Preview';
+import { capitalizeFirstLetterOnly } from '../../shared/textUtil';
 
 export class SchemaFieldPropertiesEntity implements Entity<SchemaFieldEntity> {
     type: EntityType = EntityType.SchemaField;
@@ -18,6 +19,16 @@ export class SchemaFieldPropertiesEntity implements Entity<SchemaFieldEntity> {
 
     isLineageEnabled = () => false;
 
+    getParentDataset = (parent) => {
+        return {
+            urn: parent?.urn,
+            name: parent?.name,
+            type: parent?.type,
+            platform: parent?.platfrom,
+            properties: parent?.properties,
+        } as Dataset;
+    };
+
     // Currently unused.
     getAutoCompleteFieldName = () => 'schemaField';
 
@@ -33,9 +44,23 @@ export class SchemaFieldPropertiesEntity implements Entity<SchemaFieldEntity> {
     // Currently unused.
     renderProfile = (_: string) => <></>;
 
-    renderPreview = (previewType: PreviewType, data: SchemaFieldEntity) => (
-        <Preview previewType={previewType} datasetUrn={data.parent.urn} name={data.fieldPath} />
-    );
+    renderPreview = (previewType: PreviewType, data: SchemaFieldEntity) => {
+        const parent = data.parent as Dataset;
+        return (
+            <Preview
+                previewType={previewType}
+                datasetUrn={data.parent.urn}
+                name={data.fieldPath}
+                parentContainers={parent?.parentContainers}
+                platformName={
+                    parent?.platform?.properties?.displayName || capitalizeFirstLetterOnly(parent?.platform?.name)
+                }
+                platformLogo={parent?.platform?.properties?.logoUrl || ''}
+                platformInstanceId={parent?.dataPlatformInstance?.instanceId}
+                parentDataset={this.getParentDataset(parent)}
+            />
+        );
+    };
 
     renderSearch = (result: SearchResult) => this.renderPreview(PreviewType.SEARCH, result.entity as SchemaFieldEntity);
 
diff --git a/datahub-web-react/src/app/entity/schemaField/preview/Preview.tsx b/datahub-web-react/src/app/entity/schemaField/preview/Preview.tsx
index b22e988c76672..086b1a3802188 100644
--- a/datahub-web-react/src/app/entity/schemaField/preview/Preview.tsx
+++ b/datahub-web-react/src/app/entity/schemaField/preview/Preview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { PicCenterOutlined } from '@ant-design/icons';
-import { EntityType, Owner } from '../../../../types.generated';
+import { Dataset, EntityType, Owner, ParentContainersResult } from '../../../../types.generated';
 import DefaultPreviewCard from '../../../preview/DefaultPreviewCard';
 import { useEntityRegistry } from '../../../useEntityRegistry';
 import { IconStyleType, PreviewType } from '../../Entity';
@@ -11,12 +11,22 @@ export const Preview = ({
     description,
     owners,
     previewType,
+    parentContainers,
+    platformName,
+    platformLogo,
+    platformInstanceId,
+    parentDataset,
 }: {
     datasetUrn: string;
     name: string;
     description?: string | null;
     owners?: Array<Owner> | null;
     previewType: PreviewType;
+    parentContainers?: ParentContainersResult | null;
+    platformName?: string;
+    platformLogo?: string | null;
+    platformInstanceId?: string;
+    parentDataset?: Dataset;
 }): JSX.Element => {
     const entityRegistry = useEntityRegistry();
 
@@ -35,6 +45,11 @@ export const Preview = ({
             logoComponent={<PicCenterOutlined style={{ fontSize: '20px' }} />}
             type="Column"
             typeIcon={entityRegistry.getIcon(EntityType.SchemaField, 14, IconStyleType.ACCENT)}
+            logoUrl={platformLogo || ''}
+            platform={platformName}
+            platformInstanceId={platformInstanceId}
+            parentContainers={parentContainers}
+            parentDataset={parentDataset}
         />
     );
 };
diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/DatasetLink.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/DatasetLink.tsx
new file mode 100644
index 0000000000000..cf4891acd384d
--- /dev/null
+++ b/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/DatasetLink.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { Typography } from 'antd';
+import { Dataset, EntityType } from '../../../../../../../types.generated';
+import { ANTD_GRAY } from '../../../../constants';
+import { useEntityRegistry } from '../../../../../../useEntityRegistry';
+import { IconStyleType } from '../../../../../Entity';
+
+const DatasetText = styled(Typography.Text)`
+    font-size: 12px;
+    line-height: 20px;
+    color: ${ANTD_GRAY[7]};
+`;
+
+export const DatasetIcon = styled.span`
+    color: ${ANTD_GRAY[7]};
+    margin-right: 4px;
+    font-size: 12px;
+`;
+
+const StyledLink = styled(Link)`
+    white-space: nowrap;
+`;
+
+interface Props {
+    parentDataset: Dataset;
+}
+
+function DatasetLink(props: Props) {
+    const { parentDataset } = props;
+    const entityRegistry = useEntityRegistry();
+    if (!parentDataset) return null;
+
+    const datasetUrl = entityRegistry.getEntityUrl(EntityType.Dataset, parentDataset.urn);
+    const datasetName = entityRegistry.getDisplayName(EntityType.Dataset, parentDataset);
+
+    return (
+        <StyledLink to={datasetUrl} data-testid="dataset">
+            <DatasetIcon>{entityRegistry.getIcon(EntityType.Dataset, 14, IconStyleType.ACCENT)}</DatasetIcon>
+            <DatasetText>{datasetName}</DatasetText>
+        </StyledLink>
+    );
+}
+
+export default DatasetLink;
diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx
index 3104dfd911aab..70cc5fa3b36d1 100644
--- a/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx
+++ b/datahub-web-react/src/app/entity/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import styled from 'styled-components';
 import { Typography, Image } from 'antd';
 import { Maybe } from 'graphql/jsutils/Maybe';
-import { Container, Entity } from '../../../../../../../types.generated';
+import { Container, Dataset, Entity } from '../../../../../../../types.generated';
 import { ANTD_GRAY } from '../../../../constants';
 import ContainerLink from './ContainerLink';
+import DatasetLink from './DatasetLink';
 import {
     StyledRightOutlined,
     ParentNodesWrapper as ParentContainersWrapper,
@@ -80,6 +81,7 @@ interface Props {
     parentEntities?: Entity[] | null;
     parentContainersRef: React.RefObject<HTMLDivElement>;
     areContainersTruncated: boolean;
+    parentDataset?: Dataset;
 }
 
 function PlatformContentView(props: Props) {
@@ -96,6 +98,7 @@ function PlatformContentView(props: Props) {
         parentContainers,
         parentContainersRef,
         areContainersTruncated,
+        parentDataset,
     } = props;
 
     const directParentContainer = parentContainers && parentContainers[0];
@@ -152,6 +155,12 @@ function PlatformContentView(props: Props) {
                 </ParentContainersWrapper>
                 {directParentContainer && <ContainerLink container={directParentContainer} />}
             </StyledTooltip>
+            {parentDataset && (
+                <span>
+                    <StyledRightOutlined data-testid="right-arrow" />
+                    <DatasetLink parentDataset={parentDataset} />
+                </span>
+            )}
             <ParentEntities parentEntities={parentEntities || []} numVisible={3} />
         </PlatformContentWrapper>
     );
diff --git a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx
index ee29e92e06a22..0d5cfaaf42b9a 100644
--- a/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx
+++ b/datahub-web-react/src/app/preview/DefaultPreviewCard.tsx
@@ -9,6 +9,7 @@ import {
     GlossaryTerms,
     SearchInsight,
     Container,
+    Dataset,
     ParentContainersResult,
     Maybe,
     CorpUser,
@@ -196,6 +197,7 @@ interface Props {
     previewType?: Maybe<PreviewType>;
     paths?: EntityPath[];
     health?: Health[];
+    parentDataset?: Dataset;
 }
 
 export default function DefaultPreviewCard({
@@ -238,6 +240,7 @@ export default function DefaultPreviewCard({
     previewType,
     paths,
     health,
+    parentDataset,
 }: Props) {
     // sometimes these lists will be rendered inside an entity container (for example, in the case of impact analysis)
     // in those cases, we may want to enrich the preview w/ context about the container entity
@@ -284,6 +287,7 @@ export default function DefaultPreviewCard({
                         parentEntities={parentEntities}
                         parentContainersRef={contentRef}
                         areContainersTruncated={isContentTruncated}
+                        parentDataset={parentDataset}
                     />
                     <EntityTitleContainer>
                         <Link to={url}>
diff --git a/datahub-web-react/src/graphql/search.graphql b/datahub-web-react/src/graphql/search.graphql
index 38c9df0a636d0..4a10d5fe250de 100644
--- a/datahub-web-react/src/graphql/search.graphql
+++ b/datahub-web-react/src/graphql/search.graphql
@@ -980,6 +980,12 @@ fragment entityField on SchemaFieldEntity {
             platform {
                 ...platformFields
             }
+            dataPlatformInstance {
+                ...dataPlatformInstanceFields
+            }
+            parentContainers {
+                ...parentContainersFields
+            }
         }
     }
     fieldPath