feat(frontend): show browse paths for business attributes related ent…

…ities - schema fields
datahub-project · Oct 22, 2024 · c4904fe · c4904fe
1 parent c09f13b
commit c4904fe
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 6 deletions.
diff --git a/datahub-graphql-core/src/main/resources/entity.graphql b/datahub-graphql-core/src/main/resources/entity.graphql
@@ -1886,6 +1886,21 @@ type ParentContainersResult {
     containers: [Container!]!
 }
 
+"""
+Additional properties about EntityName
+"""
+type EntityNameProperties {
+    """
+    The name of the entity used in display
+    """
+    name: String!
+
+    """
+    Fully-qualified name of the Entity
+    """
+    qualifiedName: String
+}
+
 """
 A Dataset entity, which encompasses Relational Tables, Document store collections, streaming topics, and other sets of data having an independent lifecycle
 """

diff --git 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, EntityNameProperties, 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;
@@ -33,9 +34,24 @@ 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;
+        const properties = parent.properties as EntityNameProperties;
+        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}
+                parentDatasetProperties={properties}
+            />
+        );
+    };
 
     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
@@ -1,6 +1,6 @@
 import React from 'react';
 import { PicCenterOutlined } from '@ant-design/icons';
-import { EntityType, Owner } from '../../../../types.generated';
+import { EntityNameProperties, 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,
+    parentDatasetProperties,
 }: {
     datasetUrn: string;
     name: string;
     description?: string | null;
     owners?: Array<Owner> | null;
     previewType: PreviewType;
+    parentContainers?: ParentContainersResult | null;
+    platformName?: string;
+    platformLogo?: string | null;
+    platformInstanceId?: string;
+    parentDatasetProperties?: EntityNameProperties;
 }): JSX.Element => {
     const entityRegistry = useEntityRegistry();
 
@@ -35,6 +45,12 @@ 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}
+            parentDatasetIcon={entityRegistry.getIcon(EntityType.Dataset, 14, IconStyleType.ACCENT)}
+            parentDatasetProperties={parentDatasetProperties}
         />
     );
 };
diff --git a/...web-react/src/app/entity/shared/containers/profile/header/PlatformContent/DatasetLink.tsx b/...web-react/src/app/entity/shared/containers/profile/header/PlatformContent/DatasetLink.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { Typography } from 'antd';
+import { EntityNameProperties, EntityType } from '../../../../../../../types.generated';
+import { ANTD_GRAY } from '../../../../constants';
+import { useEntityRegistry } from '../../../../../../useEntityRegistry';
+
+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 {
+    parentDatasetUrn: string | '';
+    parentDatasetProperties: EntityNameProperties;
+    parentDatasetIcon: JSX.Element;
+}
+
+function DatasetLink(props: Props) {
+    const { parentDatasetUrn, parentDatasetProperties, parentDatasetIcon } = props;
+    const entityRegistry = useEntityRegistry();
+    if (!parentDatasetUrn && !parentDatasetProperties) return null;
+
+    const datasetUrl = entityRegistry.getEntityUrl(EntityType.Dataset, parentDatasetUrn);
+    const datasetName = entityRegistry.getDisplayName(EntityType.Dataset, parentDatasetProperties);
+
+    return (
+        <StyledLink to={datasetUrl} data-testid="dataset">
+            <DatasetIcon>{parentDatasetIcon}</DatasetIcon>
+            <DatasetText>{datasetName}</DatasetText>
+        </StyledLink>
+    );
+}
+
+export default DatasetLink;
diff --git a/...t/src/app/entity/shared/containers/profile/header/PlatformContent/PlatformContentView.tsx b/...t/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, Entity, EntityNameProperties } from '../../../../../../../types.generated';
 import { ANTD_GRAY } from '../../../../constants';
 import ContainerLink from './ContainerLink';
+import DatasetLink from './DatasetLink';
 import {
     StyledRightOutlined,
     ParentNodesWrapper as ParentContainersWrapper,
@@ -80,6 +81,9 @@ interface Props {
     parentEntities?: Entity[] | null;
     parentContainersRef: React.RefObject<HTMLDivElement>;
     areContainersTruncated: boolean;
+    parentDatasetUrn?: string;
+    parentDatasetIcon?: JSX.Element;
+    parentDatasetProperties?: EntityNameProperties;
 }
 
 function PlatformContentView(props: Props) {
@@ -96,6 +100,9 @@ function PlatformContentView(props: Props) {
         parentContainers,
         parentContainersRef,
         areContainersTruncated,
+        parentDatasetUrn,
+        parentDatasetIcon,
+        parentDatasetProperties,
     } = props;
 
     const directParentContainer = parentContainers && parentContainers[0];
@@ -152,6 +159,16 @@ function PlatformContentView(props: Props) {
                 </ParentContainersWrapper>
                 {directParentContainer && <ContainerLink container={directParentContainer} />}
             </StyledTooltip>
+            {parentDatasetUrn && parentDatasetProperties && parentDatasetIcon && (
+                <span>
+                    <StyledRightOutlined data-testid="right-arrow" />
+                    <DatasetLink
+                        parentDatasetUrn={parentDatasetUrn}
+                        parentDatasetProperties={parentDatasetProperties}
+                        parentDatasetIcon={parentDatasetIcon}
+                    />
+                </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
@@ -9,6 +9,7 @@ import {
     GlossaryTerms,
     SearchInsight,
     Container,
+    EntityNameProperties,
     ParentContainersResult,
     Maybe,
     CorpUser,
@@ -196,6 +197,8 @@ interface Props {
     previewType?: Maybe<PreviewType>;
     paths?: EntityPath[];
     health?: Health[];
+    parentDatasetIcon?: JSX.Element;
+    parentDatasetProperties?: EntityNameProperties;
 }
 
 export default function DefaultPreviewCard({
@@ -238,6 +241,8 @@ export default function DefaultPreviewCard({
     previewType,
     paths,
     health,
+    parentDatasetIcon,
+    parentDatasetProperties,
 }: 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 +289,9 @@ export default function DefaultPreviewCard({
                         parentEntities={parentEntities}
                         parentContainersRef={contentRef}
                         areContainersTruncated={isContentTruncated}
+                        parentDatasetUrn={urn}
+                        parentDatasetIcon={parentDatasetIcon}
+                        parentDatasetProperties={parentDatasetProperties}
                     />
                     <EntityTitleContainer>
                         <Link to={url}>

diff --git 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