feat(frontend): show browse paths for business attributes related entities - schema fields

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

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}
         />
     );
 };

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;

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

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

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

@@ -980,6 +980,12 @@ fragment entityField on SchemaFieldEntity {
             platform {
                 ...platformFields
             }
+            dataPlatformInstance {
+                ...dataPlatformInstanceFields
+            }
+            parentContainers {
+                ...parentContainersFields
+            }
         }
     }
     fieldPath