feat(ui) Add full support for structured properties on assets

datahub-web-react/src/app/entity/EntityRegistry.tsx

@@ -7,6 +7,7 @@ import { Entity, EntityCapabilityType, IconStyleType, PreviewType } from './Enti
 import { GLOSSARY_ENTITY_TYPES } from './shared/constants';
 import { EntitySidebarSection, GenericEntityProperties } from './shared/types';
 import { dictToQueryStringParams, getFineGrainedLineageWithSiblings, urlEncodeUrn } from './shared/utils';
+import PreviewContext from './shared/PreviewContext';
 
 function validatedGet<K, V>(key: K, map: Map<K, V>): V {
     if (map.has(key)) {
@@ -142,13 +143,24 @@ export default class EntityRegistry {
 
     renderPreview<T>(entityType: EntityType, type: PreviewType, data: T): JSX.Element {
         const entity = validatedGet(entityType, this.entityTypeToEntity);
-        return entity.renderPreview(type, data);
+        const genericEntityData = entity.getGenericEntityProperties(data);
+        return (
+            <PreviewContext.Provider value={genericEntityData}>
+                {entity.renderPreview(type, data)}
+            </PreviewContext.Provider>
+        );
     }
 
     renderSearchResult(type: EntityType, searchResult: SearchResult): JSX.Element {
         const entity = validatedGet(type, this.entityTypeToEntity);
+        const genericEntityData = entity.getGenericEntityProperties(searchResult.entity);
+
         return (
-            <SearchResultProvider searchResult={searchResult}>{entity.renderSearch(searchResult)}</SearchResultProvider>
+            <SearchResultProvider searchResult={searchResult}>
+                <PreviewContext.Provider value={genericEntityData}>
+                    {entity.renderSearch(searchResult)}
+                </PreviewContext.Provider>
+            </SearchResultProvider>
         );
     }
 
@@ -205,6 +217,7 @@ export default class EntityRegistry {
                 schemaMetadata: genericEntityProperties?.schemaMetadata,
                 inputFields: genericEntityProperties?.inputFields,
                 canEditLineage: genericEntityProperties?.privileges?.canEditLineage,
+                structuredProperties: genericEntityProperties?.structuredProperties,
             } as FetchedEntity) || undefined
         );
     }
@@ -239,7 +252,7 @@ export default class EntityRegistry {
 
     getCustomCardUrlPath(type: EntityType): string | undefined {
         const entity = validatedGet(type, this.entityTypeToEntity);
-        return entity.getCustomCardUrlPath?.();
+        return entity.getCustomCardUrlPath?.() as string | undefined;
     }
 
     getGraphNameFromType(type: EntityType): string {

datahub-web-react/src/app/entity/chart/ChartEntity.tsx

@@ -29,6 +29,7 @@ import { MatchedFieldList } from '../../search/matches/MatchedFieldList';
 import { matchedInputFieldRenderer } from '../../search/matches/matchedInputFieldRenderer';
 import { IncidentTab } from '../shared/tabs/Incident/IncidentTab';
 import { ChartQueryTab } from './ChartQueryTab';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 /**
  * Definition of the DataHub Chart entity.
@@ -99,6 +100,9 @@ export class ChartEntity implements Entity<Chart> {
         {
             component: DataProductSection,
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
     ];
 
     renderProfile = (urn: string) => (

datahub-web-react/src/app/entity/container/ContainerEntity.tsx

@@ -19,6 +19,7 @@ import { getDataProduct } from '../shared/utils';
 import EmbeddedProfile from '../shared/embed/EmbeddedProfile';
 import AccessManagement from '../shared/tabs/Dataset/AccessManagement/AccessManagement';
 import { useAppConfig } from '../../useAppConfig';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 /**
  * Definition of the DataHub Container entity.
@@ -133,6 +134,9 @@ export class ContainerEntity implements Entity<Container> {
         {
             component: DataProductSection,
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
         // TODO: Add back once entity-level recommendations are complete.
         // {
         //    component: SidebarRecommendationsSection,

datahub-web-react/src/app/entity/dashboard/DashboardEntity.tsx

@@ -32,6 +32,7 @@ import { LOOKER_URN } from '../../ingest/source/builder/constants';
 import { MatchedFieldList } from '../../search/matches/MatchedFieldList';
 import { matchedInputFieldRenderer } from '../../search/matches/matchedInputFieldRenderer';
 import { IncidentTab } from '../shared/tabs/Incident/IncidentTab';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 /**
  * Definition of the DataHub Dashboard entity.
@@ -103,6 +104,9 @@ export class DashboardEntity implements Entity<Dashboard> {
         {
             component: DataProductSection,
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
     ];
 
     renderProfile = (urn: string) => (

datahub-web-react/src/app/entity/dataFlow/DataFlowEntity.tsx

@@ -19,6 +19,7 @@ import { capitalizeFirstLetterOnly } from '../../shared/textUtil';
 import DataProductSection from '../shared/containers/profile/sidebar/DataProduct/DataProductSection';
 import { getDataProduct } from '../shared/utils';
 import { IncidentTab } from '../shared/tabs/Incident/IncidentTab';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 /**
  * Definition of the DataHub DataFlow entity.
@@ -123,6 +124,9 @@ export class DataFlowEntity implements Entity<DataFlow> {
         {
             component: DataProductSection,
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
     ];
 
     getOverridePropertiesFromEntity = (dataFlow?: DataFlow | null): GenericEntityProperties => {

datahub-web-react/src/app/entity/dataJob/DataJobEntity.tsx

@@ -22,6 +22,7 @@ import { capitalizeFirstLetterOnly } from '../../shared/textUtil';
 import DataProductSection from '../shared/containers/profile/sidebar/DataProduct/DataProductSection';
 import { getDataProduct } from '../shared/utils';
 import { IncidentTab } from '../shared/tabs/Incident/IncidentTab';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 const getDataJobPlatformName = (data?: DataJob): string => {
     return (
@@ -143,6 +144,9 @@ export class DataJobEntity implements Entity<DataJob> {
         {
             component: DataProductSection,
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
     ];
 
     getOverridePropertiesFromEntity = (dataJob?: DataJob | null): GenericEntityProperties => {

datahub-web-react/src/app/entity/dataProduct/DataProductEntity.tsx

@@ -17,6 +17,7 @@ import { DataProductEntitiesTab } from './DataProductEntitiesTab';
 import { EntityActionItem } from '../shared/entity/EntityActions';
 import { EntityMenuItems } from '../shared/EntityDropdown/EntityDropdown';
 import { PropertiesTab } from '../shared/tabs/Properties/PropertiesTab';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 /**
  * Definition of the DataHub Data Product entity.
@@ -123,6 +124,9 @@ export class DataProductEntity implements Entity<DataProduct> {
                 updateOnly: true,
             },
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
     ];
 
     renderPreview = (_: PreviewType, data: DataProduct) => {

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

@@ -37,6 +37,7 @@ import { matchedFieldPathsRenderer } from '../../search/matches/matchedFieldPath
 import { getLastUpdatedMs } from './shared/utils';
 import { IncidentTab } from '../shared/tabs/Incident/IncidentTab';
 import { GovernanceTab } from '../shared/tabs/Dataset/Governance/GovernanceTab';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 const SUBTYPES = {
     VIEW: 'view',
@@ -260,7 +261,11 @@ export class DatasetEntity implements Entity<Dataset> {
         },
         {
             component: DataProductSection,
-        }, // TODO: Add back once entity-level recommendations are complete.
+        },
+        {
+            component: SidebarStructuredPropsSection,
+        },
+        // TODO: Add back once entity-level recommendations are complete.
         // {
         //    component: SidebarRecommendationsSection,
         // },

datahub-web-react/src/app/entity/dataset/profile/schema/components/StructuredPropValues.tsx

@@ -0,0 +1,69 @@
+import StructuredPropertyValue from '@src/app/entity/shared/tabs/Properties/StructuredPropertyValue';
+import { mapStructuredPropertyToPropertyRow } from '@src/app/entity/shared/tabs/Properties/useStructuredProperties';
+import { useEntityRegistry } from '@src/app/useEntityRegistry';
+import { SchemaFieldEntity, SearchResult, StdDataType } from '@src/types.generated';
+import { Tooltip } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+
+const ValuesContainer = styled.span`
+    max-width: 120px;
+    display: flex;
+`;
+
+const MoreIndicator = styled.span`
+    float: right;
+`;
+
+interface Props {
+    schemaFieldEntity: SchemaFieldEntity;
+    propColumn: SearchResult | undefined;
+}
+
+const StructuredPropValues = ({ schemaFieldEntity, propColumn }: Props) => {
+    const entityRegistry = useEntityRegistry();
+
+    const property = schemaFieldEntity.structuredProperties?.properties?.find(
+        (prop) => prop.structuredProperty.urn === propColumn?.entity.urn,
+    );
+    const propRow = property ? mapStructuredPropertyToPropertyRow(property) : undefined;
+    const values = propRow?.values;
+    const isRichText = propRow?.dataType?.info.type === StdDataType.RichText;
+
+    const hasMoreValues = values && values.length > 2;
+    const displayedValues = hasMoreValues ? values.slice(0, 1) : values;
+    const tooltipContent = values?.map((value) => {
+        const title = value.entity
+            ? entityRegistry.getDisplayName(value.entity.type, value.entity)
+            : value.value?.toString();
+        return <div>{title}</div>;
+    });
+
+    return (
+        <>
+            {values && (
+                <>
+                    {displayedValues?.map((val) => {
+                        return (
+                            <ValuesContainer>
+                                <StructuredPropertyValue
+                                    value={val}
+                                    isRichText={isRichText}
+                                    truncateText
+                                    isFieldColumn
+                                />
+                            </ValuesContainer>
+                        );
+                    })}
+                    {hasMoreValues && (
+                        <Tooltip title={tooltipContent} showArrow={false}>
+                            <MoreIndicator>...</MoreIndicator>
+                        </Tooltip>
+                    )}
+                </>
+            )}
+        </>
+    );
+};
+
+export default StructuredPropValues;

datahub-web-react/src/app/entity/domain/DomainEntity.tsx

@@ -15,6 +15,7 @@ import DataProductsTab from './DataProductsTab/DataProductsTab';
 import { EntityProfileTab } from '../shared/constants';
 import DomainIcon from '../../domain/DomainIcon';
 import { PropertiesTab } from '../shared/tabs/Properties/PropertiesTab';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 /**
  * Definition of the DataHub Domain entity.
@@ -112,6 +113,9 @@ export class DomainEntity implements Entity<Domain> {
         {
             component: SidebarOwnerSection,
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
     ];
 
     renderPreview = (_: PreviewType, data: Domain) => {

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

@@ -12,6 +12,7 @@ import { DocumentationTab } from '../shared/tabs/Documentation/DocumentationTab'
 import ChildrenTab from './ChildrenTab';
 import { Preview } from './preview/Preview';
 import { PropertiesTab } from '../shared/tabs/Properties/PropertiesTab';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 class GlossaryNodeEntity implements Entity<GlossaryNode> {
     type: EntityType = EntityType.GlossaryNode;
@@ -100,6 +101,9 @@ class GlossaryNodeEntity implements Entity<GlossaryNode> {
         {
             component: SidebarOwnerSection,
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
     ];
 
     displayName = (data: GlossaryNode) => {

datahub-web-react/src/app/entity/glossaryTerm/GlossaryTermEntity.tsx

@@ -18,6 +18,7 @@ import { EntityMenuItems } from '../shared/EntityDropdown/EntityDropdown';
 import { EntityActionItem } from '../shared/entity/EntityActions';
 import { SidebarDomainSection } from '../shared/containers/profile/sidebar/Domain/SidebarDomainSection';
 import { PageRoutes } from '../../../conf/Global';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 /**
  * Definition of the DataHub Dataset entity.
@@ -129,6 +130,9 @@ export class GlossaryTermEntity implements Entity<GlossaryTerm> {
                 hideOwnerType: true,
             },
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
     ];
 
     getOverridePropertiesFromEntity = (glossaryTerm?: GlossaryTerm | null): GenericEntityProperties => {

datahub-web-react/src/app/entity/mlFeature/MLFeatureEntity.tsx

@@ -18,6 +18,7 @@ import { EntityMenuItems } from '../shared/EntityDropdown/EntityDropdown';
 import DataProductSection from '../shared/containers/profile/sidebar/DataProduct/DataProductSection';
 import { getDataProduct } from '../shared/utils';
 import { PropertiesTab } from '../shared/tabs/Properties/PropertiesTab';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 /**
  * Definition of the DataHub MLFeature entity.
@@ -122,6 +123,9 @@ export class MLFeatureEntity implements Entity<MlFeature> {
         {
             component: DataProductSection,
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
     ];
 
     renderPreview = (_: PreviewType, data: MlFeature) => {

datahub-web-react/src/app/entity/mlFeatureTable/MLFeatureTableEntity.tsx

@@ -19,6 +19,7 @@ import { EntityMenuItems } from '../shared/EntityDropdown/EntityDropdown';
 import { capitalizeFirstLetterOnly } from '../../shared/textUtil';
 import DataProductSection from '../shared/containers/profile/sidebar/DataProduct/DataProductSection';
 import { getDataProduct } from '../shared/utils';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 /**
  * Definition of the DataHub MLFeatureTable entity.
@@ -90,6 +91,9 @@ export class MLFeatureTableEntity implements Entity<MlFeatureTable> {
         {
             component: DataProductSection,
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
     ];
 
     renderProfile = (urn: string) => (

datahub-web-react/src/app/entity/mlModel/MLModelEntity.tsx

@@ -18,6 +18,7 @@ import { DocumentationTab } from '../shared/tabs/Documentation/DocumentationTab'
 import MlModelFeaturesTab from './profile/MlModelFeaturesTab';
 import { EntityMenuItems } from '../shared/EntityDropdown/EntityDropdown';
 import DataProductSection from '../shared/containers/profile/sidebar/DataProduct/DataProductSection';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 /**
  * Definition of the DataHub MlModel entity.
@@ -91,6 +92,9 @@ export class MLModelEntity implements Entity<MlModel> {
         {
             component: DataProductSection,
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
     ];
 
     renderProfile = (urn: string) => (

datahub-web-react/src/app/entity/mlModelGroup/MLModelGroupEntity.tsx

@@ -16,6 +16,7 @@ import { DocumentationTab } from '../shared/tabs/Documentation/DocumentationTab'
 import { EntityMenuItems } from '../shared/EntityDropdown/EntityDropdown';
 import DataProductSection from '../shared/containers/profile/sidebar/DataProduct/DataProductSection';
 import { PropertiesTab } from '../shared/tabs/Properties/PropertiesTab';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 /**
  * Definition of the DataHub MlModelGroup entity.
@@ -87,6 +88,9 @@ export class MLModelGroupEntity implements Entity<MlModelGroup> {
         {
             component: DataProductSection,
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
     ];
 
     renderProfile = (urn: string) => (

datahub-web-react/src/app/entity/mlPrimaryKey/MLPrimaryKeyEntity.tsx

@@ -17,6 +17,7 @@ import { LineageTab } from '../shared/tabs/Lineage/LineageTab';
 import DataProductSection from '../shared/containers/profile/sidebar/DataProduct/DataProductSection';
 import { getDataProduct } from '../shared/utils';
 import { PropertiesTab } from '../shared/tabs/Properties/PropertiesTab';
+import SidebarStructuredPropsSection from '../shared/containers/profile/sidebar/StructuredProperties/SidebarStructuredPropsSection';
 
 /**
  * Definition of the DataHub MLPrimaryKey entity.
@@ -120,6 +121,9 @@ export class MLPrimaryKeyEntity implements Entity<MlPrimaryKey> {
         {
             component: DataProductSection,
         },
+        {
+            component: SidebarStructuredPropsSection,
+        },
     ];
 
     renderPreview = (_: PreviewType, data: MlPrimaryKey) => {