feat(ui) Add structured properties support in the UI (#9695)

datahub-web-react/src/Mocks.tsx

@@ -297,6 +297,7 @@ export const dataset1 = {
     embed: null,
     browsePathV2: { path: [{ name: 'test', entity: null }], __typename: 'BrowsePathV2' },
     autoRenderAspects: [],
+    structuredProperties: null,
 };
 
 export const dataset2 = {
@@ -393,6 +394,7 @@ export const dataset2 = {
     embed: null,
     browsePathV2: { path: [{ name: 'test', entity: null }], __typename: 'BrowsePathV2' },
     autoRenderAspects: [],
+    structuredProperties: null,
 };
 
 export const dataset3 = {
@@ -626,6 +628,7 @@ export const dataset3 = {
     dataProduct: null,
     lastProfile: null,
     lastOperation: null,
+    structuredProperties: null,
 } as Dataset;
 
 export const dataset3WithSchema = {
@@ -650,6 +653,7 @@ export const dataset3WithSchema = {
                     globalTags: null,
                     glossaryTerms: null,
                     label: 'hi',
+                    schemaFieldEntity: null,
                 },
                 {
                     __typename: 'SchemaField',
@@ -665,6 +669,7 @@ export const dataset3WithSchema = {
                     globalTags: null,
                     glossaryTerms: null,
                     label: 'hi',
+                    schemaFieldEntity: null,
                 },
             ],
             hash: '',

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

@@ -86,6 +86,7 @@ type Props = {
         description: string,
     ) => Promise<FetchResult<UpdateDatasetMutation, Record<string, any>, Record<string, any>> | void>;
     isEdited?: boolean;
+    isReadOnly?: boolean;
 };
 
 const ABBREVIATED_LIMIT = 80;
@@ -97,10 +98,11 @@ export default function DescriptionField({
     onUpdate,
     isEdited = false,
     original,
+    isReadOnly,
 }: Props) {
     const [showAddModal, setShowAddModal] = useState(false);
     const overLimit = removeMarkdown(description).length > 80;
-    const isSchemaEditable = React.useContext(SchemaEditableContext);
+    const isSchemaEditable = React.useContext(SchemaEditableContext) && !isReadOnly;
     const onCloseModal = () => setShowAddModal(false);
     const { urn, entityType } = useEntityData();
 
@@ -140,11 +142,12 @@ export default function DescriptionField({
             {expanded || !overLimit ? (
                 <>
                     {!!description && <StyledViewer content={description} readOnly />}
-                    {!!description && (
+                    {!!description && (EditButton || overLimit) && (
                         <ExpandedActions>
                             {overLimit && (
                                 <ReadLessText
-                                    onClick={() => {
+                                    onClick={(e) => {
+                                        e.stopPropagation();
                                         handleExpanded(false);
                                     }}
                                 >
@@ -162,7 +165,8 @@ export default function DescriptionField({
                         readMore={
                             <>
                                 <Typography.Link
-                                    onClick={() => {
+                                    onClick={(e) => {
+                                        e.stopPropagation();
                                         handleExpanded(true);
                                     }}
                                 >
@@ -177,7 +181,7 @@ export default function DescriptionField({
                     </StripMarkdownText>
                 </>
             )}
-            {isSchemaEditable && isEdited && <EditedLabel>(edited)</EditedLabel>}
+            {isEdited && <EditedLabel>(edited)</EditedLabel>}
             {showAddModal && (
                 <div>
                     <UpdateDescriptionModal

datahub-web-react/src/app/entity/shared/components/legacy/DescriptionModal.tsx

@@ -53,7 +53,7 @@ export default function UpdateDescriptionModal({ title, description, original, o
         >
             <Form layout="vertical">
                 <Form.Item>
-                    <StyledEditor content={updatedDesc} onChange={setDesc} />
+                    <StyledEditor content={updatedDesc} onChange={setDesc} dataTestId="description-editor" />
                 </Form.Item>
                 {!isAddDesc && description && original && (
                     <Form.Item label={<FormLabel>Original:</FormLabel>}>

datahub-web-react/src/app/entity/shared/components/styled/EntityIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useEntityRegistry } from '../../../../useEntityRegistry';
+import { PlatformIcon } from '../../../../search/filters/utils';
+import { Entity } from '../../../../../types.generated';
+import { IconStyleType } from '../../../Entity';
+import { ANTD_GRAY } from '../../constants';
+
+interface Props {
+    entity: Entity;
+    size?: number;
+}
+
+export default function EntityIcon({ entity, size = 14 }: Props) {
+    const entityRegistry = useEntityRegistry();
+    const genericEntityProps = entityRegistry.getGenericEntityProperties(entity.type, entity);
+    const logoUrl = genericEntityProps?.platform?.properties?.logoUrl;
+    const icon = logoUrl ? (
+        <PlatformIcon src={logoUrl} size={size} />
+    ) : (
+        entityRegistry.getIcon(entity.type, size, IconStyleType.ACCENT, ANTD_GRAY[9])
+    );
+
+    return <>{icon}</>;
+}

datahub-web-react/src/app/entity/shared/containers/profile/EntityProfile.tsx

@@ -30,7 +30,6 @@ import LineageExplorer from '../../../../lineage/LineageExplorer';
 import CompactContext from '../../../../shared/CompactContext';
 import DynamicTab from '../../tabs/Entity/weaklyTypedAspects/DynamicTab';
 import analytics, { EventType } from '../../../../analytics';
-import { ProfileSidebarResizer } from './sidebar/ProfileSidebarResizer';
 import { EntityMenuItems } from '../../EntityDropdown/EntityDropdown';
 import { useIsSeparateSiblingsMode } from '../../siblingUtils';
 import { EntityActionItem } from '../../entity/EntityActions';
@@ -45,6 +44,7 @@ import {
 } from '../../../../onboarding/config/LineageGraphOnboardingConfig';
 import { useAppConfig } from '../../../../useAppConfig';
 import { useUpdateDomainEntityDataOnChange } from '../../../../domain/utils';
+import ProfileSidebar from './sidebar/ProfileSidebar';
 
 type Props<T, U> = {
     urn: string;
@@ -75,8 +75,6 @@ type Props<T, U> = {
     isNameEditable?: boolean;
 };
 
-const MAX_SIDEBAR_WIDTH = 800;
-const MIN_SIDEBAR_WIDTH = 200;
 const MAX_COMPACT_WIDTH = 490 - 24 * 2;
 
 const ContentContainer = styled.div`
@@ -85,6 +83,7 @@ const ContentContainer = styled.div`
     min-height: 100%;
     flex: 1;
     min-width: 0;
+    overflow: hidden;
 `;
 
 const HeaderAndTabs = styled.div`
@@ -113,15 +112,6 @@ const HeaderAndTabsFlex = styled.div`
         -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
     }
 `;
-const Sidebar = styled.div<{ $width: number }>`
-    max-height: 100%;
-    overflow: auto;
-    width: ${(props) => props.$width}px;
-    min-width: ${(props) => props.$width}px;
-    padding-left: 20px;
-    padding-right: 20px;
-    padding-bottom: 20px;
-`;
 
 const Header = styled.div`
     border-bottom: 1px solid ${ANTD_GRAY[4.5]};
@@ -145,7 +135,7 @@ const defaultTabDisplayConfig = {
     enabled: (_, _1) => true,
 };
 
-const defaultSidebarSection = {
+export const DEFAULT_SIDEBAR_SECTION = {
     visible: (_, _1) => true,
 };
 
@@ -176,11 +166,10 @@ export const EntityProfile = <T, U>({
     const sortedTabs = sortEntityProfileTabs(appConfig.config, entityType, tabsWithDefaults);
     const sideBarSectionsWithDefaults = sidebarSections.map((sidebarSection) => ({
         ...sidebarSection,
-        display: { ...defaultSidebarSection, ...sidebarSection.display },
+        display: { ...DEFAULT_SIDEBAR_SECTION, ...sidebarSection.display },
     }));
 
     const [shouldRefetchEmbeddedListSearch, setShouldRefetchEmbeddedListSearch] = useState(false);
-    const [sidebarWidth, setSidebarWidth] = useState(window.innerWidth * 0.25);
     const entityStepIds: string[] = getOnboardingStepIdsForEntityType(entityType);
     const lineageGraphStepIds: string[] = [LINEAGE_GRAPH_INTRO_ID, LINEAGE_GRAPH_TIME_FILTER_ID];
     const stepIds = isLineageMode ? lineageGraphStepIds : entityStepIds;
@@ -344,15 +333,7 @@ export const EntityProfile = <T, U>({
                                         </TabContent>
                                     </HeaderAndTabsFlex>
                                 </HeaderAndTabs>
-                                <ProfileSidebarResizer
+                                <ProfileSidebar sidebarSections={sidebarSections} />
-                                    setSidePanelWidth={(width) =>
-                                        setSidebarWidth(Math.min(Math.max(width, MIN_SIDEBAR_WIDTH), MAX_SIDEBAR_WIDTH))
-                                    }
-                                    initialSize={sidebarWidth}
-                                />
-                                <Sidebar $width={sidebarWidth}>
-                                    <EntitySidebar sidebarSections={sideBarSectionsWithDefaults} />
-                                </Sidebar>
                             </>
                         )}
                     </ContentContainer>

datahub-web-react/src/app/entity/shared/containers/profile/sidebar/EntitySidebar.tsx

@@ -36,14 +36,16 @@ const LastIngestedSection = styled.div`
 
 type Props = {
     sidebarSections: EntitySidebarSection[];
+    topSection?: EntitySidebarSection;
 };
 
-export const EntitySidebar = <T,>({ sidebarSections }: Props) => {
+export const EntitySidebar = <T,>({ sidebarSections, topSection }: Props) => {
     const { entityData } = useEntityData();
     const baseEntity = useBaseEntity<T>();
 
     return (
         <>
+            {topSection && <topSection.component key={`${topSection.component}`} properties={topSection.properties} />}
             {entityData?.lastIngested && (
                 <LastIngestedSection>
                     <LastIngested lastIngested={entityData.lastIngested} />

datahub-web-react/src/app/entity/shared/containers/profile/sidebar/ProfileSidebar.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { ProfileSidebarResizer } from './ProfileSidebarResizer';
+import { EntitySidebar } from './EntitySidebar';
+import { EntitySidebarSection } from '../../../types';
+
+export const MAX_SIDEBAR_WIDTH = 800;
+export const MIN_SIDEBAR_WIDTH = 200;
+
+const Sidebar = styled.div<{ $width: number; backgroundColor?: string }>`
+    max-height: 100%;
+    position: relative;
+    width: ${(props) => props.$width}px;
+    min-width: ${(props) => props.$width}px;
+    ${(props) => props.backgroundColor && `background-color: ${props.backgroundColor};`}
+`;
+
+const ScrollWrapper = styled.div`
+    overflow: auto;
+    max-height: 100%;
+    padding: 0 20px 20px 20px;
+`;
+
+const DEFAULT_SIDEBAR_SECTION = {
+    visible: (_, _1) => true,
+};
+
+interface Props {
+    sidebarSections: EntitySidebarSection[];
+    backgroundColor?: string;
+    topSection?: EntitySidebarSection;
+    alignLeft?: boolean;
+}
+
+export default function ProfileSidebar({ sidebarSections, backgroundColor, topSection, alignLeft }: Props) {
+    const sideBarSectionsWithDefaults = sidebarSections.map((sidebarSection) => ({
+        ...sidebarSection,
+        display: { ...DEFAULT_SIDEBAR_SECTION, ...sidebarSection.display },
+    }));
+
+    const [sidebarWidth, setSidebarWidth] = useState(window.innerWidth * 0.25);
+
+    if (alignLeft) {
+        return (
+            <>
+                <Sidebar $width={sidebarWidth} backgroundColor={backgroundColor} id="entity-profile-sidebar">
+                    <ScrollWrapper>
+                        <EntitySidebar sidebarSections={sideBarSectionsWithDefaults} topSection={topSection} />
+                    </ScrollWrapper>
+                </Sidebar>
+                <ProfileSidebarResizer
+                    setSidePanelWidth={(width) =>
+                        setSidebarWidth(Math.min(Math.max(width, MIN_SIDEBAR_WIDTH), MAX_SIDEBAR_WIDTH))
+                    }
+                    initialSize={sidebarWidth}
+                    isSidebarOnLeft
+                />
+            </>
+        );
+    }
+
+    return (
+        <>
+            <ProfileSidebarResizer
+                setSidePanelWidth={(width) =>
+                    setSidebarWidth(Math.min(Math.max(width, MIN_SIDEBAR_WIDTH), MAX_SIDEBAR_WIDTH))
+                }
+                initialSize={sidebarWidth}
+            />
+            <Sidebar $width={sidebarWidth} backgroundColor={backgroundColor} id="entity-profile-sidebar">
+                <ScrollWrapper>
+                    <EntitySidebar sidebarSections={sideBarSectionsWithDefaults} topSection={topSection} />
+                </ScrollWrapper>
+            </Sidebar>
+        </>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTab.tsx

@@ -76,6 +76,14 @@ export const SchemaTab = ({ properties }: { properties?: any }) => {
         [schemaMetadata],
     );
 
+    const hasProperties = useMemo(
+        () =>
+            entityWithSchema?.schemaMetadata?.fields.some(
+                (schemaField) => !!schemaField.schemaFieldEntity?.structuredProperties?.properties?.length,
+            ),
+        [entityWithSchema],
+    );
+
     const [showKeySchema, setShowKeySchema] = useState(false);
     const [showSchemaAuditView, setShowSchemaAuditView] = useState(false);
 
@@ -190,13 +198,13 @@ export const SchemaTab = ({ properties }: { properties?: any }) => {
                                 <SchemaTable
                                     schemaMetadata={schemaMetadata}
                                     rows={rows}
-                                    editMode={editMode}
                                     editableSchemaMetadata={editableSchemaMetadata}
                                     usageStats={usageStats}
                                     schemaFieldBlameList={schemaFieldBlameList}
                                     showSchemaAuditView={showSchemaAuditView}
                                     expandedRowsFromFilter={expandedRowsFromFilter as any}
                                     filterText={filterText as any}
+                                    hasProperties={hasProperties}
                                 />
                             </SchemaEditableContext.Provider>
                         </>

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/SchemaTable.tsx

@@ -21,9 +21,10 @@ import { StyledTable } from '../../../components/styled/StyledTable';
 import { SchemaRow } from './components/SchemaRow';
 import { FkContext } from './utils/selectedFkContext';
 import useSchemaBlameRenderer from './utils/useSchemaBlameRenderer';
-import { ANTD_GRAY } from '../../../constants';
+import { ANTD_GRAY, ANTD_GRAY_V2 } from '../../../constants';
-import MenuColumn from './components/MenuColumn';
 import translateFieldPath from '../../../../dataset/profile/schema/utils/translateFieldPath';
+import PropertiesColumn from './components/PropertiesColumn';
+import SchemaFieldDrawer from './components/SchemaFieldDrawer/SchemaFieldDrawer';
 
 const TableContainer = styled.div`
     overflow: inherit;
@@ -41,18 +42,36 @@ const TableContainer = styled.div`
         padding-bottom: 600px;
         vertical-align: top;
     }
+
+    &&& .ant-table-cell {
+        background-color: inherit;
+        cursor: pointer;
+    }
+
+    &&& tbody > tr:hover > td {
+        background-color: ${ANTD_GRAY_V2[2]};
+    }
+
+    &&& .expanded-row {
+        background-color: ${(props) => props.theme.styles['highlight-color']} !important;
+
+        td {
+            background-color: ${(props) => props.theme.styles['highlight-color']} !important;
+        }
+    }
 `;
 
 export type Props = {
     rows: Array<ExtendedSchemaFields>;
     schemaMetadata: SchemaMetadata | undefined | null;
     editableSchemaMetadata?: EditableSchemaMetadata | null;
-    editMode?: boolean;
     usageStats?: UsageQueryResult | null;
     schemaFieldBlameList?: Array<SchemaFieldBlame> | null;
     showSchemaAuditView: boolean;
     expandedRowsFromFilter?: Set<string>;
     filterText?: string;
+    hasProperties?: boolean;
+    inputFields?: SchemaField[];
 };
 
 const EMPTY_SET: Set<string> = new Set();
@@ -63,56 +82,46 @@ export default function SchemaTable({
     schemaMetadata,
     editableSchemaMetadata,
     usageStats,
-    editMode = true,
     schemaFieldBlameList,
     showSchemaAuditView,
     expandedRowsFromFilter = EMPTY_SET,
     filterText = '',
+    hasProperties,
+    inputFields,
 }: Props): JSX.Element {
     const hasUsageStats = useMemo(() => (usageStats?.aggregations?.fields?.length || 0) > 0, [usageStats]);
     const [tableHeight, setTableHeight] = useState(0);
-    const [tagHoveredIndex, setTagHoveredIndex] = useState<string | undefined>(undefined);
+    const [selectedFkFieldPath, setSelectedFkFieldPath] = useState<null | {
-    const [selectedFkFieldPath, setSelectedFkFieldPath] =
+        fieldPath: string;
-        useState<null | { fieldPath: string; constraint?: ForeignKeyConstraint | null }>(null);
+        constraint?: ForeignKeyConstraint | null;
+    }>(null);
+    const [expandedDrawerFieldPath, setExpandedDrawerFieldPath] = useState<string | null>(null);
+
+    const schemaFields = schemaMetadata ? schemaMetadata.fields : inputFields;
 
     const descriptionRender = useDescriptionRenderer(editableSchemaMetadata);
     const usageStatsRenderer = useUsageStatsRenderer(usageStats);
     const tagRenderer = useTagsAndTermsRenderer(
         editableSchemaMetadata,
-        tagHoveredIndex,
-        setTagHoveredIndex,
         {
             showTags: true,
             showTerms: false,
         },
         filterText,
+        false,
     );
     const termRenderer = useTagsAndTermsRenderer(
         editableSchemaMetadata,
-        tagHoveredIndex,
-        setTagHoveredIndex,
         {
             showTags: false,
             showTerms: true,
         },
         filterText,
+        false,
     );
     const schemaTitleRenderer = useSchemaTitleRenderer(schemaMetadata, setSelectedFkFieldPath, filterText);
     const schemaBlameRenderer = useSchemaBlameRenderer(schemaFieldBlameList);
 
-    const onTagTermCell = (record: SchemaField) => ({
-        onMouseEnter: () => {
-            if (editMode) {
-                setTagHoveredIndex(record.fieldPath);
-            }
-        },
-        onMouseLeave: () => {
-            if (editMode) {
-                setTagHoveredIndex(undefined);
-            }
-        },
-    });
-
     const fieldColumn = {
         width: '22%',
         title: 'Field',
@@ -139,7 +148,6 @@ export default function SchemaTable({
         dataIndex: 'globalTags',
         key: 'tag',
         render: tagRenderer,
-        onCell: onTagTermCell,
     };
 
     const termColumn = {
@@ -148,7 +156,6 @@ export default function SchemaTable({
         dataIndex: 'globalTags',
         key: 'tag',
         render: termRenderer,
-        onCell: onTagTermCell,
     };
 
     const blameColumn = {
@@ -184,16 +191,20 @@ export default function SchemaTable({
         sorter: (sourceA, sourceB) => getCount(sourceA.fieldPath) - getCount(sourceB.fieldPath),
     };
 
-    const menuColumn = {
+    const propertiesColumn = {
-        width: '5%',
+        width: '13%',
-        title: '',
+        title: 'Properties',
         dataIndex: '',
         key: 'menu',
-        render: (field: SchemaField) => <MenuColumn field={field} />,
+        render: (field: SchemaField) => <PropertiesColumn field={field} />,
     };
 
     let allColumns: ColumnsType<ExtendedSchemaFields> = [fieldColumn, descriptionColumn, tagColumn, termColumn];
 
+    if (hasProperties) {
+        allColumns = [...allColumns, propertiesColumn];
+    }
+
     if (hasUsageStats) {
         allColumns = [...allColumns, usageColumn];
     }
@@ -202,8 +213,6 @@ export default function SchemaTable({
         allColumns = [...allColumns, blameColumn];
     }
 
-    allColumns = [...allColumns, menuColumn];
-
     const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
 
     useEffect(() => {
@@ -224,9 +233,15 @@ export default function SchemaTable({
             <TableContainer>
                 <ResizeObserver onResize={(dimensions) => setTableHeight(dimensions.height - TABLE_HEADER_HEIGHT)}>
                     <StyledTable
-                        rowClassName={(record) =>
+                        rowClassName={(record) => {
-                            record.fieldPath === selectedFkFieldPath?.fieldPath ? 'open-fk-row' : ''
+                            if (record.fieldPath === selectedFkFieldPath?.fieldPath) {
+                                return 'open-fk-row';
                             }
+                            if (expandedDrawerFieldPath === record.fieldPath) {
+                                return 'expanded-row';
+                            }
+                            return '';
+                        }}
                         columns={allColumns}
                         dataSource={rows}
                         rowKey="fieldPath"
@@ -250,9 +265,27 @@ export default function SchemaTable({
                             indentSize: 0,
                         }}
                         pagination={false}
+                        onRow={(record) => ({
+                            onClick: () => {
+                                setExpandedDrawerFieldPath(
+                                    expandedDrawerFieldPath === record.fieldPath ? null : record.fieldPath,
+                                );
+                            },
+                            style: {
+                                backgroundColor: expandedDrawerFieldPath === record.fieldPath ? `` : 'white',
+                            },
+                        })}
                     />
                 </ResizeObserver>
             </TableContainer>
+            {!!schemaFields && (
+                <SchemaFieldDrawer
+                    schemaFields={schemaFields}
+                    expandedDrawerFieldPath={expandedDrawerFieldPath}
+                    editableSchemaMetadata={editableSchemaMetadata}
+                    setExpandedDrawerFieldPath={setExpandedDrawerFieldPath}
+                />
+            )}
         </FkContext.Provider>
     );
 }

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/ChildCountLabel.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Badge } from 'antd';
+import styled from 'styled-components';
+
+import { ANTD_GRAY_V2 } from '../../../../constants';
+
+type Props = {
+    count: number;
+};
+
+const ChildCountBadge = styled(Badge)`
+    margin-left: 10px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    &&& .ant-badge-count {
+        background-color: ${ANTD_GRAY_V2[1]};
+        color: ${ANTD_GRAY_V2[8]};
+        box-shadow: 0 2px 1px -1px ${ANTD_GRAY_V2[6]};
+        border-radius: 4px 4px 4px 4px;
+        font-size: 12px;
+        font-weight: 500;
+        height: 22px;
+        font-family: 'Manrope';
+    }
+`;
+
+export default function ChildCountLabel({ count }: Props) {
+    const propertyString = count > 1 ? ' properties' : ' property';
+
+    // eslint-disable-next-line
+    return <ChildCountBadge count={count.toString() + propertyString} />;
+}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PropertiesColumn.tsx

@@ -0,0 +1,30 @@
+import { ControlOutlined } from '@ant-design/icons';
+import React from 'react';
+import styled from 'styled-components';
+import { SchemaField } from '../../../../../../../types.generated';
+
+const ColumnWrapper = styled.div`
+    font-size: 14px;
+`;
+
+const StyledIcon = styled(ControlOutlined)`
+    margin-right: 4px;
+`;
+
+interface Props {
+    field: SchemaField;
+}
+
+export default function PropertiesColumn({ field }: Props) {
+    const { schemaFieldEntity } = field;
+    const numProperties = schemaFieldEntity?.structuredProperties?.properties?.length;
+
+    if (!schemaFieldEntity || !numProperties) return null;
+
+    return (
+        <ColumnWrapper>
+            <StyledIcon />
+            {numProperties} {numProperties === 1 ? 'property' : 'properties'}
+        </ColumnWrapper>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/PropertyTypeLabel.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Badge } from 'antd';
+import styled from 'styled-components';
+import { capitalizeFirstLetterOnly } from '../../../../../../shared/textUtil';
+import { DataTypeEntity, SchemaFieldDataType } from '../../../../../../../types.generated';
+import { truncate } from '../../../../utils';
+import { ANTD_GRAY, ANTD_GRAY_V2 } from '../../../../constants';
+import { TypeData } from '../../../Properties/types';
+
+type Props = {
+    type: TypeData;
+    dataType?: DataTypeEntity;
+};
+
+export const PropertyTypeBadge = styled(Badge)`
+    margin: 4px 0 4px 8px;
+    &&& .ant-badge-count {
+        background-color: ${ANTD_GRAY[1]};
+        color: ${ANTD_GRAY_V2[8]};
+        border: 1px solid ${ANTD_GRAY_V2[6]};
+        font-size: 12px;
+        font-weight: 500;
+        height: 22px;
+        font-family: 'Manrope';
+    }
+`;
+
+export default function PropertyTypeLabel({ type, dataType }: Props) {
+    // if unable to match type to DataHub, display native type info by default
+    const { nativeDataType } = type;
+    const nativeFallback = type.type === SchemaFieldDataType.Null;
+
+    const typeText =
+        dataType?.info.displayName ||
+        dataType?.info.type ||
+        (nativeFallback ? truncate(250, nativeDataType) : type.type);
+
+    return <PropertyTypeBadge count={capitalizeFirstLetterOnly(typeText)} />;
+}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/DrawerHeader.tsx

@@ -0,0 +1,106 @@
+import { CaretLeftOutlined, CaretRightOutlined, CloseOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { ANTD_GRAY_V2 } from '../../../../../constants';
+import { SchemaField } from '../../../../../../../../types.generated';
+import { pluralize } from '../../../../../../../shared/textUtil';
+
+const HeaderWrapper = styled.div`
+    border-bottom: 1px solid ${ANTD_GRAY_V2[4]};
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 16px;
+`;
+
+const StyledButton = styled(Button)`
+    font-size: 12px;
+    padding: 0;
+    height: 26px;
+    width: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+        height: 10px;
+        width: 10px;
+    }
+`;
+
+const FieldIndexText = styled.span`
+    font-size: 14px;
+    color: ${ANTD_GRAY_V2[8]};
+    margin: 0 8px;
+`;
+
+const ButtonsWrapper = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+interface Props {
+    schemaFields?: SchemaField[];
+    expandedFieldIndex?: number;
+    setExpandedDrawerFieldPath: (fieldPath: string | null) => void;
+}
+
+export default function DrawerHeader({ schemaFields = [], expandedFieldIndex = 0, setExpandedDrawerFieldPath }: Props) {
+    function showNextField() {
+        if (expandedFieldIndex !== undefined && expandedFieldIndex !== -1) {
+            if (expandedFieldIndex === schemaFields.length - 1) {
+                const newField = schemaFields[0];
+                setExpandedDrawerFieldPath(newField.fieldPath);
+            } else {
+                const newField = schemaFields[expandedFieldIndex + 1];
+                const { fieldPath } = newField;
+                setExpandedDrawerFieldPath(fieldPath);
+            }
+        }
+    }
+
+    function showPreviousField() {
+        if (expandedFieldIndex !== undefined && expandedFieldIndex !== -1) {
+            if (expandedFieldIndex === 0) {
+                const newField = schemaFields[schemaFields.length - 1];
+                setExpandedDrawerFieldPath(newField.fieldPath);
+            } else {
+                const newField = schemaFields[expandedFieldIndex - 1];
+                setExpandedDrawerFieldPath(newField.fieldPath);
+            }
+        }
+    }
+
+    function handleArrowKeys(event: KeyboardEvent) {
+        if (event.code === 'ArrowUp' || event.code === 'ArrowLeft') {
+            showPreviousField();
+        } else if (event.code === 'ArrowDown' || event.code === 'ArrowRight') {
+            showNextField();
+        }
+    }
+
+    useEffect(() => {
+        document.addEventListener('keydown', handleArrowKeys);
+
+        return () => document.removeEventListener('keydown', handleArrowKeys);
+    });
+
+    return (
+        <HeaderWrapper>
+            <ButtonsWrapper>
+                <StyledButton onClick={showPreviousField}>
+                    <CaretLeftOutlined />
+                </StyledButton>
+                <FieldIndexText>
+                    {expandedFieldIndex + 1} of {schemaFields.length} {pluralize(schemaFields.length, 'field')}
+                </FieldIndexText>
+                <StyledButton onClick={showNextField}>
+                    <CaretRightOutlined />
+                </StyledButton>
+            </ButtonsWrapper>
+            <StyledButton onClick={() => setExpandedDrawerFieldPath(null)}>
+                <CloseOutlined />
+            </StyledButton>
+        </HeaderWrapper>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldDescription.tsx

@@ -0,0 +1,115 @@
+import { EditOutlined } from '@ant-design/icons';
+import { Button, message } from 'antd';
+import DOMPurify from 'dompurify';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { SectionHeader, StyledDivider } from './components';
+import UpdateDescriptionModal from '../../../../../components/legacy/DescriptionModal';
+import { EditableSchemaFieldInfo, SchemaField, SubResourceType } from '../../../../../../../../types.generated';
+import DescriptionSection from '../../../../../containers/profile/sidebar/AboutSection/DescriptionSection';
+import { useEntityData, useMutationUrn, useRefetch } from '../../../../../EntityContext';
+import { useSchemaRefetch } from '../../SchemaContext';
+import { useUpdateDescriptionMutation } from '../../../../../../../../graphql/mutations.generated';
+import analytics, { EntityActionType, EventType } from '../../../../../../../analytics';
+import SchemaEditableContext from '../../../../../../../shared/SchemaEditableContext';
+
+const DescriptionWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+`;
+
+const EditIcon = styled(Button)`
+    border: none;
+    box-shadow: none;
+    height: 20px;
+    width: 20px;
+`;
+
+interface Props {
+    expandedField: SchemaField;
+    editableFieldInfo?: EditableSchemaFieldInfo;
+}
+
+export default function FieldDescription({ expandedField, editableFieldInfo }: Props) {
+    const isSchemaEditable = React.useContext(SchemaEditableContext);
+    const urn = useMutationUrn();
+    const refetch = useRefetch();
+    const schemaRefetch = useSchemaRefetch();
+    const [updateDescription] = useUpdateDescriptionMutation();
+    const [isModalVisible, setIsModalVisible] = useState(false);
+    const { entityType } = useEntityData();
+
+    const sendAnalytics = () => {
+        analytics.event({
+            type: EventType.EntityActionEvent,
+            actionType: EntityActionType.UpdateSchemaDescription,
+            entityType,
+            entityUrn: urn,
+        });
+    };
+
+    const refresh: any = () => {
+        refetch?.();
+        schemaRefetch?.();
+    };
+
+    const onSuccessfulMutation = () => {
+        refresh();
+        sendAnalytics();
+        message.destroy();
+        message.success({ content: 'Updated!', duration: 2 });
+    };
+
+    const onFailMutation = (e) => {
+        message.destroy();
+        if (e instanceof Error) message.error({ content: `Proposal Failed! \n ${e.message || ''}`, duration: 2 });
+    };
+
+    const generateMutationVariables = (updatedDescription: string) => ({
+        variables: {
+            input: {
+                description: DOMPurify.sanitize(updatedDescription),
+                resourceUrn: urn,
+                subResource: expandedField.fieldPath,
+                subResourceType: SubResourceType.DatasetField,
+            },
+        },
+    });
+
+    const displayedDescription = editableFieldInfo?.description || expandedField.description;
+
+    return (
+        <>
+            <DescriptionWrapper>
+                <div>
+                    <SectionHeader>Description</SectionHeader>
+                    <DescriptionSection description={displayedDescription || ''} isExpandable />
+                </div>
+                {isSchemaEditable && (
+                    <EditIcon
+                        data-testid="edit-field-description"
+                        onClick={() => setIsModalVisible(true)}
+                        icon={<EditOutlined />}
+                    />
+                )}
+                {isModalVisible && (
+                    <UpdateDescriptionModal
+                        title={displayedDescription ? 'Update description' : 'Add description'}
+                        description={displayedDescription || ''}
+                        original={expandedField.description || ''}
+                        onClose={() => setIsModalVisible(false)}
+                        onSubmit={(updatedDescription: string) => {
+                            message.loading({ content: 'Updating...' });
+                            updateDescription(generateMutationVariables(updatedDescription))
+                                .then(onSuccessfulMutation)
+                                .catch(onFailMutation);
+                            setIsModalVisible(false);
+                        }}
+                        isAddDesc={!displayedDescription}
+                    />
+                )}
+            </DescriptionWrapper>
+            <StyledDivider />
+        </>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldHeader.tsx

@@ -0,0 +1,60 @@
+import { Typography } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+import translateFieldPath from '../../../../../../dataset/profile/schema/utils/translateFieldPath';
+import TypeLabel from '../TypeLabel';
+import PrimaryKeyLabel from '../PrimaryKeyLabel';
+import PartitioningKeyLabel from '../PartitioningKeyLabel';
+import NullableLabel from '../NullableLabel';
+import MenuColumn from '../MenuColumn';
+import { ANTD_GRAY_V2 } from '../../../../../constants';
+import { SchemaField } from '../../../../../../../../types.generated';
+
+const FieldHeaderWrapper = styled.div`
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid ${ANTD_GRAY_V2[4]};
+`;
+
+const FieldName = styled(Typography.Text)`
+    font-size: 16px;
+    font-family: 'Roboto Mono', monospace;
+`;
+
+const TypesSection = styled.div`
+    margin-left: -4px;
+    margin-top: 8px;
+`;
+
+const NameTypesWrapper = styled.div`
+    overflow: hidden;
+`;
+
+const MenuWrapper = styled.div`
+    margin-right: 5px;
+`;
+
+interface Props {
+    expandedField: SchemaField;
+}
+
+export default function FieldHeader({ expandedField }: Props) {
+    const displayName = translateFieldPath(expandedField.fieldPath || '');
+    return (
+        <FieldHeaderWrapper>
+            <NameTypesWrapper>
+                <FieldName>{displayName}</FieldName>
+                <TypesSection>
+                    <TypeLabel type={expandedField.type} nativeDataType={expandedField.nativeDataType} />
+                    {expandedField.isPartOfKey && <PrimaryKeyLabel />}
+                    {expandedField.isPartitioningKey && <PartitioningKeyLabel />}
+                    {expandedField.nullable && <NullableLabel />}
+                </TypesSection>
+            </NameTypesWrapper>
+            <MenuWrapper>
+                <MenuColumn field={expandedField} />
+            </MenuWrapper>
+        </FieldHeaderWrapper>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldProperties.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import styled from 'styled-components';
+import { SchemaField, StdDataType } from '../../../../../../../../types.generated';
+import { SectionHeader, StyledDivider } from './components';
+import { mapStructuredPropertyValues } from '../../../../Properties/useStructuredProperties';
+import StructuredPropertyValue from '../../../../Properties/StructuredPropertyValue';
+
+const PropertyTitle = styled.div`
+    font-size: 14px;
+    font-weight: 700;
+    margin-bottom: 4px;
+`;
+
+const PropertyWrapper = styled.div`
+    margin-bottom: 12px;
+`;
+
+const PropertiesWrapper = styled.div`
+    padding-left: 16px;
+`;
+
+const StyledList = styled.ul`
+    padding-left: 24px;
+`;
+
+interface Props {
+    expandedField: SchemaField;
+}
+
+export default function FieldProperties({ expandedField }: Props) {
+    const { schemaFieldEntity } = expandedField;
+
+    if (!schemaFieldEntity?.structuredProperties?.properties?.length) return null;
+
+    return (
+        <>
+            <SectionHeader>Properties</SectionHeader>
+            <PropertiesWrapper>
+                {schemaFieldEntity.structuredProperties.properties.map((structuredProp) => {
+                    const isRichText =
+                        structuredProp.structuredProperty.definition.valueType?.info.type === StdDataType.RichText;
+                    const valuesData = mapStructuredPropertyValues(structuredProp);
+                    const hasMultipleValues = valuesData.length > 1;
+
+                    return (
+                        <PropertyWrapper>
+                            <PropertyTitle>{structuredProp.structuredProperty.definition.displayName}</PropertyTitle>
+                            {hasMultipleValues ? (
+                                <StyledList>
+                                    {valuesData.map((value) => (
+                                        <li>
+                                            <StructuredPropertyValue value={value} isRichText={isRichText} />
+                                        </li>
+                                    ))}
+                                </StyledList>
+                            ) : (
+                                <>
+                                    {valuesData.map((value) => (
+                                        <StructuredPropertyValue value={value} isRichText={isRichText} />
+                                    ))}
+                                </>
+                            )}
+                        </PropertyWrapper>
+                    );
+                })}
+            </PropertiesWrapper>
+            <StyledDivider />
+        </>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldTags.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { EditableSchemaMetadata, GlobalTags, SchemaField } from '../../../../../../../../types.generated';
+import useTagsAndTermsRenderer from '../../utils/useTagsAndTermsRenderer';
+import { SectionHeader, StyledDivider } from './components';
+import SchemaEditableContext from '../../../../../../../shared/SchemaEditableContext';
+
+interface Props {
+    expandedField: SchemaField;
+    editableSchemaMetadata?: EditableSchemaMetadata | null;
+}
+
+export default function FieldTags({ expandedField, editableSchemaMetadata }: Props) {
+    const isSchemaEditable = React.useContext(SchemaEditableContext);
+    const tagRenderer = useTagsAndTermsRenderer(
+        editableSchemaMetadata,
+        {
+            showTags: true,
+            showTerms: false,
+        },
+        '',
+        isSchemaEditable,
+    );
+
+    return (
+        <>
+            <SectionHeader>Tags</SectionHeader>
+            <div data-testid={`schema-field-${expandedField.fieldPath}-tags`}>
+                {tagRenderer(expandedField.globalTags as GlobalTags, expandedField)}
+            </div>
+            <StyledDivider />
+        </>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldTerms.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { EditableSchemaMetadata, GlobalTags, SchemaField } from '../../../../../../../../types.generated';
+import useTagsAndTermsRenderer from '../../utils/useTagsAndTermsRenderer';
+import { SectionHeader, StyledDivider } from './components';
+import SchemaEditableContext from '../../../../../../../shared/SchemaEditableContext';
+
+interface Props {
+    expandedField: SchemaField;
+    editableSchemaMetadata?: EditableSchemaMetadata | null;
+}
+
+export default function FieldTerms({ expandedField, editableSchemaMetadata }: Props) {
+    const isSchemaEditable = React.useContext(SchemaEditableContext);
+    const termRenderer = useTagsAndTermsRenderer(
+        editableSchemaMetadata,
+        {
+            showTags: false,
+            showTerms: true,
+        },
+        '',
+        isSchemaEditable,
+    );
+
+    return (
+        <>
+            <SectionHeader>Glossary Terms</SectionHeader>
+            {/* pass in globalTags since this is a shared component, tags will not be shown or used */}
+            <div data-testid={`schema-field-${expandedField.fieldPath}-terms`}>
+                {termRenderer(expandedField.globalTags as GlobalTags, expandedField)}
+            </div>
+            <StyledDivider />
+        </>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldUsageStats.tsx

@@ -0,0 +1,59 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { GetDatasetQuery } from '../../../../../../../../graphql/dataset.generated';
+import { useBaseEntity } from '../../../../../EntityContext';
+import { ANTD_GRAY_V2 } from '../../../../../constants';
+import { SectionHeader, StyledDivider } from './components';
+import { pathMatchesNewPath } from '../../../../../../dataset/profile/schema/utils/utils';
+import { UsageBar } from '../../utils/useUsageStatsRenderer';
+import { SchemaField } from '../../../../../../../../types.generated';
+
+const USAGE_BAR_MAX_WIDTH = 100;
+
+const UsageBarWrapper = styled.div`
+    display: flex;
+    align-items: center;
+`;
+
+const UsageBarBackground = styled.div`
+    background-color: ${ANTD_GRAY_V2[3]};
+    border-radius: 2px;
+    height: 4px;
+    width: ${USAGE_BAR_MAX_WIDTH}px;
+`;
+
+const UsageTextWrapper = styled.span`
+    margin-left: 8px;
+`;
+
+interface Props {
+    expandedField: SchemaField;
+}
+
+export default function FieldUsageStats({ expandedField }: Props) {
+    const baseEntity = useBaseEntity<GetDatasetQuery>();
+    const usageStats = baseEntity?.dataset?.usageStats;
+    const hasUsageStats = useMemo(() => (usageStats?.aggregations?.fields?.length || 0) > 0, [usageStats]);
+    const maxFieldUsageCount = useMemo(
+        () => Math.max(...(usageStats?.aggregations?.fields?.map((field) => field?.count || 0) || [])),
+        [usageStats],
+    );
+    const relevantUsageStats = usageStats?.aggregations?.fields?.find((fieldStats) =>
+        pathMatchesNewPath(fieldStats?.fieldName, expandedField.fieldPath),
+    );
+
+    if (!hasUsageStats || !relevantUsageStats) return null;
+
+    return (
+        <>
+            <SectionHeader>Usage</SectionHeader>
+            <UsageBarWrapper>
+                <UsageBarBackground>
+                    <UsageBar width={((relevantUsageStats.count || 0) / maxFieldUsageCount) * USAGE_BAR_MAX_WIDTH} />
+                </UsageBarBackground>
+                <UsageTextWrapper>{relevantUsageStats.count || 0} queries / month</UsageTextWrapper>
+            </UsageBarWrapper>
+            <StyledDivider />
+        </>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/SchemaFieldDrawer.tsx

@@ -0,0 +1,83 @@
+import { Drawer } from 'antd';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import DrawerHeader from './DrawerHeader';
+import FieldHeader from './FieldHeader';
+import FieldDescription from './FieldDescription';
+import { EditableSchemaMetadata, SchemaField } from '../../../../../../../../types.generated';
+import { pathMatchesNewPath } from '../../../../../../dataset/profile/schema/utils/utils';
+import FieldUsageStats from './FieldUsageStats';
+import FieldTags from './FieldTags';
+import FieldTerms from './FieldTerms';
+import FieldProperties from './FieldProperties';
+
+const StyledDrawer = styled(Drawer)`
+    position: absolute;
+
+    &&& .ant-drawer-body {
+        padding: 0;
+    }
+
+    &&& .ant-drawer-content-wrapper {
+        border-left: 3px solid ${(props) => props.theme.styles['primary-color']};
+    }
+`;
+
+const MetadataSections = styled.div`
+    padding: 16px 24px;
+`;
+
+interface Props {
+    schemaFields: SchemaField[];
+    editableSchemaMetadata?: EditableSchemaMetadata | null;
+    expandedDrawerFieldPath: string | null;
+    setExpandedDrawerFieldPath: (fieldPath: string | null) => void;
+}
+
+export default function SchemaFieldDrawer({
+    schemaFields,
+    editableSchemaMetadata,
+    expandedDrawerFieldPath,
+    setExpandedDrawerFieldPath,
+}: Props) {
+    const expandedFieldIndex = useMemo(
+        () => schemaFields.findIndex((row) => row.fieldPath === expandedDrawerFieldPath),
+        [expandedDrawerFieldPath, schemaFields],
+    );
+    const expandedField =
+        expandedFieldIndex !== undefined && expandedFieldIndex !== -1 ? schemaFields[expandedFieldIndex] : undefined;
+    const editableFieldInfo = editableSchemaMetadata?.editableSchemaFieldInfo.find((candidateEditableFieldInfo) =>
+        pathMatchesNewPath(candidateEditableFieldInfo.fieldPath, expandedField?.fieldPath),
+    );
+
+    return (
+        <StyledDrawer
+            open={!!expandedDrawerFieldPath}
+            onClose={() => setExpandedDrawerFieldPath(null)}
+            getContainer={() => document.getElementById('entity-profile-sidebar') as HTMLElement}
+            contentWrapperStyle={{ width: '100%', boxShadow: 'none' }}
+            mask={false}
+            maskClosable={false}
+            placement="right"
+            closable={false}
+        >
+            <DrawerHeader
+                setExpandedDrawerFieldPath={setExpandedDrawerFieldPath}
+                schemaFields={schemaFields}
+                expandedFieldIndex={expandedFieldIndex}
+            />
+            {expandedField && (
+                <>
+                    <FieldHeader expandedField={expandedField} />
+                    <MetadataSections>
+                        <FieldDescription expandedField={expandedField} editableFieldInfo={editableFieldInfo} />
+                        <FieldUsageStats expandedField={expandedField} />
+                        <FieldTags expandedField={expandedField} editableSchemaMetadata={editableSchemaMetadata} />
+                        <FieldTerms expandedField={expandedField} editableSchemaMetadata={editableSchemaMetadata} />
+                        <FieldProperties expandedField={expandedField} />
+                    </MetadataSections>
+                </>
+            )}
+        </StyledDrawer>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/components.ts

@@ -0,0 +1,12 @@
+import { Divider } from 'antd';
+import styled from 'styled-components';
+
+export const SectionHeader = styled.div`
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 8px;
+`;
+
+export const StyledDivider = styled(Divider)`
+    margin: 12px 0;
+`;

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/utils/useDescriptionRenderer.tsx

@@ -48,8 +48,8 @@ export default function useDescriptionRenderer(editableSchemaMetadata: EditableS
                         },
                     }).then(refresh)
                 }
+                isReadOnly
             />
         );
     };
 }
-//

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/utils/useTagsAndTermsRenderer.tsx

@@ -2,15 +2,14 @@ import React from 'react';
 import { EditableSchemaMetadata, EntityType, GlobalTags, SchemaField } from '../../../../../../../types.generated';
 import TagTermGroup from '../../../../../../shared/tags/TagTermGroup';
 import { pathMatchesNewPath } from '../../../../../dataset/profile/schema/utils/utils';
-import { useMutationUrn, useRefetch } from '../../../../EntityContext';
 import { useSchemaRefetch } from '../SchemaContext';
+import { useMutationUrn, useRefetch } from '../../../../EntityContext';
 
 export default function useTagsAndTermsRenderer(
     editableSchemaMetadata: EditableSchemaMetadata | null | undefined,
-    tagHoveredIndex: string | undefined,
-    setTagHoveredIndex: (index: string | undefined) => void,
     options: { showTags: boolean; showTerms: boolean },
     filterText: string,
+    canEdit: boolean,
 ) {
     const urn = useMutationUrn();
     const refetch = useRefetch();
@@ -27,24 +26,21 @@ export default function useTagsAndTermsRenderer(
         );
 
         return (
-            <div data-testid={`schema-field-${record.fieldPath}-${options.showTags ? 'tags' : 'terms'}`}>
             <TagTermGroup
                 uneditableTags={options.showTags ? tags : null}
                 editableTags={options.showTags ? relevantEditableFieldInfo?.globalTags : null}
                 uneditableGlossaryTerms={options.showTerms ? record.glossaryTerms : null}
                 editableGlossaryTerms={options.showTerms ? relevantEditableFieldInfo?.glossaryTerms : null}
-                    canRemove
+                canRemove={canEdit}
                 buttonProps={{ size: 'small' }}
-                    canAddTag={tagHoveredIndex === record.fieldPath && options.showTags}
+                canAddTag={canEdit && options.showTags}
-                    canAddTerm={tagHoveredIndex === record.fieldPath && options.showTerms}
+                canAddTerm={canEdit && options.showTerms}
-                    onOpenModal={() => setTagHoveredIndex(undefined)}
                 entityUrn={urn}
                 entityType={EntityType.Dataset}
                 entitySubresource={record.fieldPath}
                 highlightText={filterText}
                 refetch={refresh}
             />
-            </div>
         );
     };
     return tagAndTermRender;

datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/utils/useUsageStatsRenderer.tsx

@@ -7,7 +7,7 @@ import { pathMatchesNewPath } from '../../../../../dataset/profile/schema/utils/
 
 const USAGE_BAR_MAX_WIDTH = 50;
 
-const UsageBar = styled.div<{ width: number }>`
+export const UsageBar = styled.div<{ width: number }>`
     width: ${(props) => props.width}px;
     height: 4px;
     background-color: ${geekblue[3]};

datahub-web-react/src/app/entity/shared/tabs/Documentation/components/editor/Editor.tsx

@@ -40,10 +40,11 @@ type EditorProps = {
     onChange?: (md: string) => void;
     className?: string;
     doNotFocus?: boolean;
+    dataTestId?: string;
 };
 
 export const Editor = forwardRef((props: EditorProps, ref) => {
-    const { content, readOnly, onChange, className } = props;
+    const { content, readOnly, onChange, className, dataTestId } = props;
     const { manager, state, getContext } = useRemirror({
         extensions: () => [
             new BlockquoteExtension(),
@@ -98,7 +99,7 @@ export const Editor = forwardRef((props: EditorProps, ref) => {
     }, [readOnly, content]);
 
     return (
-        <EditorContainer className={className}>
+        <EditorContainer className={className} data-testid={dataTestId}>
             <ThemeProvider theme={EditorTheme}>
                 <Remirror classNames={['ant-typography']} editable={!readOnly} manager={manager} initialContent={state}>
                     {!readOnly && (

datahub-web-react/src/app/entity/shared/tabs/Properties/CardinalityLabel.tsx

@@ -0,0 +1,43 @@
+import { Tooltip } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+import { PropertyCardinality, StructuredPropertyEntity } from '../../../../../types.generated';
+import { PropertyTypeBadge } from '../Dataset/Schema/components/PropertyTypeLabel';
+import { getStructuredPropertyValue } from '../../utils';
+
+const Header = styled.div`
+    font-size: 10px;
+`;
+
+const List = styled.ul`
+    padding: 0 24px;
+    max-height: 500px;
+    overflow: auto;
+`;
+
+interface Props {
+    structuredProperty: StructuredPropertyEntity;
+}
+
+export default function CardinalityLabel({ structuredProperty }: Props) {
+    const labelText =
+        structuredProperty.definition.cardinality === PropertyCardinality.Single ? 'Single-Select' : 'Multi-Select';
+
+    return (
+        <Tooltip
+            color="#373D44"
+            title={
+                <>
+                    <Header>Property Options</Header>
+                    <List>
+                        {structuredProperty.definition.allowedValues?.map((value) => (
+                            <li>{getStructuredPropertyValue(value.value)}</li>
+                        ))}
+                    </List>
+                </>
+            }
+        >
+            <PropertyTypeBadge count={labelText} />
+        </Tooltip>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Properties/NameColumn.tsx

@@ -0,0 +1,87 @@
+import { Tooltip, Typography } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+import Highlight from 'react-highlighter';
+import { PropertyRow } from './types';
+import ChildCountLabel from '../Dataset/Schema/components/ChildCountLabel';
+import PropertyTypeLabel from '../Dataset/Schema/components/PropertyTypeLabel';
+import StructuredPropertyTooltip from './StructuredPropertyTooltip';
+import CardinalityLabel from './CardinalityLabel';
+
+const ParentNameText = styled(Typography.Text)`
+    color: #373d44;
+    font-size: 16px;
+    font-family: Manrope;
+    font-weight: 600;
+    line-height: 20px;
+    word-wrap: break-word;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+`;
+
+const ChildNameText = styled(Typography.Text)`
+    align-self: stretch;
+    color: #373d44;
+    font-size: 14px;
+    font-family: Manrope;
+    font-weight: 500;
+    line-height: 18px;
+    word-wrap: break-word;
+    padding-left: 16px;
+    display: flex;
+    align-items: center;
+`;
+
+const NameLabelWrapper = styled.span`
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+`;
+
+interface Props {
+    propertyRow: PropertyRow;
+    filterText?: string;
+}
+
+export default function NameColumn({ propertyRow, filterText }: Props) {
+    const { structuredProperty } = propertyRow;
+    return (
+        <>
+            {propertyRow.children ? (
+                <NameLabelWrapper>
+                    <ParentNameText>
+                        <Highlight search={filterText}>{propertyRow.displayName}</Highlight>
+                    </ParentNameText>
+                    {propertyRow.childrenCount ? <ChildCountLabel count={propertyRow.childrenCount} /> : <span />}
+                </NameLabelWrapper>
+            ) : (
+                <NameLabelWrapper>
+                    <Tooltip
+                        color="#373D44"
+                        placement="topRight"
+                        title={
+                            structuredProperty ? (
+                                <StructuredPropertyTooltip structuredProperty={structuredProperty} />
+                            ) : (
+                                ''
+                            )
+                        }
+                    >
+                        <ChildNameText>
+                            <Highlight search={filterText}>{propertyRow.displayName}</Highlight>
+                        </ChildNameText>
+                    </Tooltip>
+                    {propertyRow.type ? (
+                        <PropertyTypeLabel type={propertyRow.type} dataType={propertyRow.dataType} />
+                    ) : (
+                        <span />
+                    )}
+                    {structuredProperty?.definition.allowedValues && (
+                        <CardinalityLabel structuredProperty={structuredProperty} />
+                    )}
+                </NameLabelWrapper>
+            )}
+        </>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Properties/PropertiesTab.tsx

@@ -1,52 +1,79 @@
-import React from 'react';
-import { Typography } from 'antd';
 import styled from 'styled-components';
-
+import React, { useState } from 'react';
-import { ANTD_GRAY } from '../../constants';
+import ExpandIcon from '../Dataset/Schema/components/ExpandIcon';
-import { StyledTable } from '../../components/styled/StyledTable';
+import { StyledTable as Table } from '../../components/styled/StyledTable';
 import { useEntityData } from '../../EntityContext';
+import { PropertyRow } from './types';
+import useStructuredProperties from './useStructuredProperties';
+import { getFilteredCustomProperties, mapCustomPropertiesToPropertyRows } from './utils';
+import ValuesColumn from './ValuesColumn';
+import NameColumn from './NameColumn';
+import TabHeader from './TabHeader';
+import useUpdateExpandedRowsFromFilter from './useUpdateExpandedRowsFromFilter';
+import { useEntityRegistry } from '../../../../useEntityRegistry';
 
-const NameText = styled(Typography.Text)`
+const StyledTable = styled(Table)`
-    font-family: 'Roboto Mono', monospace;
+    &&& .ant-table-cell-with-append {
-    font-weight: 600;
+        padding: 4px;
-    font-size: 12px;
+    }
-    color: ${ANTD_GRAY[9]};
+` as typeof Table;
-`;
-
-const ValueText = styled(Typography.Text)`
-    font-family: 'Roboto Mono', monospace;
-    font-weight: 400;
-    font-size: 12px;
-    color: ${ANTD_GRAY[8]};
-`;
 
 export const PropertiesTab = () => {
+    const [filterText, setFilterText] = useState('');
     const { entityData } = useEntityData();
+    const entityRegistry = useEntityRegistry();
 
     const propertyTableColumns = [
         {
-            width: 210,
+            width: '40%',
             title: 'Name',
-            dataIndex: 'key',
-            sorter: (a, b) => a?.key.localeCompare(b?.key || '') || 0,
             defaultSortOrder: 'ascend',
-            render: (name: string) => <NameText>{name}</NameText>,
+            render: (propertyRow: PropertyRow) => <NameColumn propertyRow={propertyRow} filterText={filterText} />,
         },
         {
             title: 'Value',
-            dataIndex: 'value',
+            render: (propertyRow: PropertyRow) => <ValuesColumn propertyRow={propertyRow} filterText={filterText} />,
-            render: (value: string) => <ValueText>{value}</ValueText>,
         },
     ];
 
+    const { structuredPropertyRows, expandedRowsFromFilter } = useStructuredProperties(entityRegistry, filterText);
+    const customProperties = getFilteredCustomProperties(filterText, entityData) || [];
+    const customPropertyRows = mapCustomPropertiesToPropertyRows(customProperties);
+    const dataSource: PropertyRow[] = structuredPropertyRows.concat(customPropertyRows);
+
+    const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
+
+    useUpdateExpandedRowsFromFilter({ expandedRowsFromFilter, setExpandedRows });
+
     return (
+        <>
+            <TabHeader setFilterText={setFilterText} />
             <StyledTable
                 pagination={false}
                 // typescript is complaining that default sort order is not a valid column field- overriding this here
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 columns={propertyTableColumns}
-            dataSource={entityData?.customProperties || undefined}
+                dataSource={dataSource}
+                rowKey="qualifiedName"
+                expandable={{
+                    expandedRowKeys: [...Array.from(expandedRows)],
+                    defaultExpandAllRows: false,
+                    expandRowByClick: false,
+                    expandIcon: ExpandIcon,
+                    onExpand: (expanded, record) => {
+                        if (expanded) {
+                            setExpandedRows((previousRows) => new Set(previousRows.add(record.qualifiedName)));
+                        } else {
+                            setExpandedRows((previousRows) => {
+                                previousRows.delete(record.qualifiedName);
+                                return new Set(previousRows);
+                            });
+                        }
+                    },
+                    indentSize: 0,
+                }}
             />
+        </>
     );
 };

datahub-web-react/src/app/entity/shared/tabs/Properties/StructuredPropertyTooltip.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import { StructuredPropertyEntity } from '../../../../../types.generated';
+
+const ContentWrapper = styled.div`
+    font-size: 12px;
+`;
+
+const Header = styled.div`
+    font-size: 10px;
+`;
+
+const Description = styled.div`
+    padding-left: 16px;
+`;
+
+interface Props {
+    structuredProperty: StructuredPropertyEntity;
+}
+
+export default function StructuredPropertyTooltip({ structuredProperty }: Props) {
+    return (
+        <ContentWrapper>
+            <Header>Structured Property</Header>
+            <div>{structuredProperty.definition.displayName || structuredProperty.definition.qualifiedName}</div>
+            {structuredProperty.definition.description && (
+                <Description>{structuredProperty.definition.description}</Description>
+            )}
+        </ContentWrapper>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Properties/StructuredPropertyValue.tsx

@@ -0,0 +1,69 @@
+import Icon from '@ant-design/icons/lib/components/Icon';
+import React from 'react';
+import Highlight from 'react-highlighter';
+import { Typography } from 'antd';
+import styled from 'styled-components';
+import { ValueColumnData } from './types';
+import { ANTD_GRAY } from '../../constants';
+import { useEntityRegistry } from '../../../../useEntityRegistry';
+import ExternalLink from '../../../../../images/link-out.svg?react';
+import MarkdownViewer, { MarkdownView } from '../../components/legacy/MarkdownViewer';
+import EntityIcon from '../../components/styled/EntityIcon';
+
+const ValueText = styled(Typography.Text)`
+    font-family: 'Manrope';
+    font-weight: 400;
+    font-size: 14px;
+    color: ${ANTD_GRAY[9]};
+    display: block;
+
+    ${MarkdownView} {
+        font-size: 14px;
+    }
+`;
+
+const StyledIcon = styled(Icon)`
+    margin-left: 6px;
+`;
+
+const IconWrapper = styled.span`
+    margin-right: 4px;
+`;
+
+interface Props {
+    value: ValueColumnData;
+    isRichText?: boolean;
+    filterText?: string;
+}
+
+export default function StructuredPropertyValue({ value, isRichText, filterText }: Props) {
+    const entityRegistry = useEntityRegistry();
+
+    return (
+        <ValueText>
+            {value.entity ? (
+                <>
+                    <IconWrapper>
+                        <EntityIcon entity={value.entity} />
+                    </IconWrapper>
+                    {entityRegistry.getDisplayName(value.entity.type, value.entity)}
+                    <Typography.Link
+                        href={entityRegistry.getEntityUrl(value.entity.type, value.entity.urn)}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <StyledIcon component={ExternalLink} />
+                    </Typography.Link>
+                </>
+            ) : (
+                <>
+                    {isRichText ? (
+                        <MarkdownViewer source={value.value as string} />
+                    ) : (
+                        <Highlight search={filterText}>{value.value?.toString()}</Highlight>
+                    )}
+                </>
+            )}
+        </ValueText>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Properties/TabHeader.tsx

@@ -0,0 +1,32 @@
+import { SearchOutlined } from '@ant-design/icons';
+import { Input } from 'antd';
+import React from 'react';
+import styled from 'styled-components';
+import { ANTD_GRAY } from '../../constants';
+
+const StyledInput = styled(Input)`
+    border-radius: 70px;
+    max-width: 300px;
+`;
+
+const TableHeader = styled.div`
+    padding: 8px 16px;
+    border-bottom: 1px solid ${ANTD_GRAY[4.5]};
+`;
+
+interface Props {
+    setFilterText: (text: string) => void;
+}
+
+export default function TabHeader({ setFilterText }: Props) {
+    return (
+        <TableHeader>
+            <StyledInput
+                placeholder="Search in properties..."
+                onChange={(e) => setFilterText(e.target.value)}
+                allowClear
+                prefix={<SearchOutlined />}
+            />
+        </TableHeader>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Properties/ValuesColumn.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { PropertyRow } from './types';
+import { StdDataType } from '../../../../../types.generated';
+import StructuredPropertyValue from './StructuredPropertyValue';
+
+interface Props {
+    propertyRow: PropertyRow;
+    filterText?: string;
+}
+
+export default function ValuesColumn({ propertyRow, filterText }: Props) {
+    const { values } = propertyRow;
+    const isRichText = propertyRow.dataType?.info.type === StdDataType.RichText;
+
+    return (
+        <>
+            {values ? (
+                values.map((v) => <StructuredPropertyValue value={v} isRichText={isRichText} filterText={filterText} />)
+            ) : (
+                <span />
+            )}
+        </>
+    );
+}

datahub-web-react/src/app/entity/shared/tabs/Properties/__tests__/utils.test.ts

@@ -0,0 +1,87 @@
+import { getTestEntityRegistry } from '../../../../../../utils/test-utils/TestPageContainer';
+import { PropertyRow } from '../types';
+import { filterStructuredProperties } from '../utils';
+
+describe('filterSchemaRows', () => {
+    const testEntityRegistry = getTestEntityRegistry();
+    const rows = [
+        {
+            displayName: 'Has PII',
+            qualifiedName: 'io.acryl.ads.data_protection.has_pii',
+            values: [{ value: 'yes', entity: null }],
+        },
+        {
+            displayName: 'Discovery Date Utc',
+            qualifiedName: 'io.acryl.ads.change_management.discovery_date_utc',
+            values: [{ value: '2023-10-31', entity: null }],
+        },
+        {
+            displayName: 'Link Data Location',
+            qualifiedName: 'io.acryl.ads.context.data_location',
+            values: [{ value: 'New York City', entity: null }],
+        },
+        {
+            displayName: 'Number Prop',
+            qualifiedName: 'io.acryl.ads.number',
+            values: [{ value: 100, entity: null }],
+        },
+    ] as PropertyRow[];
+
+    it('should properly filter structured properties based on field name', () => {
+        const filterText = 'has pi';
+        const { filteredRows, expandedRowsFromFilter } = filterStructuredProperties(
+            testEntityRegistry,
+            rows,
+            filterText,
+        );
+
+        expect(filteredRows).toMatchObject([
+            {
+                displayName: 'Has PII',
+                qualifiedName: 'io.acryl.ads.data_protection.has_pii',
+                values: [{ value: 'yes', entity: null }],
+            },
+        ]);
+        expect(expandedRowsFromFilter).toMatchObject(
+            new Set(['io', 'io.acryl', 'io.acryl.ads', 'io.acryl.ads.data_protection']),
+        );
+    });
+
+    it('should properly filter structured properties based on field value', () => {
+        const filterText = 'new york';
+        const { filteredRows, expandedRowsFromFilter } = filterStructuredProperties(
+            testEntityRegistry,
+            rows,
+            filterText,
+        );
+
+        expect(filteredRows).toMatchObject([
+            {
+                displayName: 'Link Data Location',
+                qualifiedName: 'io.acryl.ads.context.data_location',
+                values: [{ value: 'New York City', entity: null }],
+            },
+        ]);
+        expect(expandedRowsFromFilter).toMatchObject(
+            new Set(['io', 'io.acryl', 'io.acryl.ads', 'io.acryl.ads.context']),
+        );
+    });
+
+    it('should properly filter structured properties based on field value even for numbers', () => {
+        const filterText = '100';
+        const { filteredRows, expandedRowsFromFilter } = filterStructuredProperties(
+            testEntityRegistry,
+            rows,
+            filterText,
+        );
+
+        expect(filteredRows).toMatchObject([
+            {
+                displayName: 'Number Prop',
+                qualifiedName: 'io.acryl.ads.number',
+                values: [{ value: 100, entity: null }],
+            },
+        ]);
+        expect(expandedRowsFromFilter).toMatchObject(new Set(['io', 'io.acryl', 'io.acryl.ads']));
+    });
+});

datahub-web-react/src/app/entity/shared/tabs/Properties/types.ts

@@ -0,0 +1,25 @@
+import { DataTypeEntity, Entity, StructuredPropertyEntity } from '../../../../../types.generated';
+
+export interface ValueColumnData {
+    value: string | number | null;
+    entity: Entity | null;
+}
+
+export interface TypeData {
+    type: string;
+    nativeDataType: string;
+}
+
+export interface PropertyRow {
+    displayName: string;
+    qualifiedName: string;
+    values?: ValueColumnData[];
+    children?: PropertyRow[];
+    childrenCount?: number;
+    parent?: PropertyRow;
+    depth?: number;
+    type?: TypeData;
+    dataType?: DataTypeEntity;
+    isParentRow?: boolean;
+    structuredProperty?: StructuredPropertyEntity;
+}

datahub-web-react/src/app/entity/shared/tabs/Properties/useStructuredProperties.tsx

@@ -0,0 +1,215 @@
+import { PropertyValue, StructuredPropertiesEntry } from '../../../../../types.generated';
+import EntityRegistry from '../../../EntityRegistry';
+import { useEntityData } from '../../EntityContext';
+import { GenericEntityProperties } from '../../types';
+import { getStructuredPropertyValue } from '../../utils';
+import { PropertyRow } from './types';
+import { filterStructuredProperties } from './utils';
+
+const typeNameToType = {
+    StringValue: { type: 'string', nativeDataType: 'text' },
+    NumberValue: { type: 'number', nativeDataType: 'float' },
+};
+
+export function mapStructuredPropertyValues(structuredPropertiesEntry: StructuredPropertiesEntry) {
+    return structuredPropertiesEntry.values
+        .filter((value) => !!value)
+        .map((value) => ({
+            value: getStructuredPropertyValue(value as PropertyValue),
+            entity:
+                structuredPropertiesEntry.valueEntities?.find(
+                    (entity) => entity?.urn === getStructuredPropertyValue(value as PropertyValue),
+                ) || null,
+        }));
+}
+
+// map the properties map into a list of PropertyRow objects to render in a table
+function getStructuredPropertyRows(entityData?: GenericEntityProperties | null) {
+    const structuredPropertyRows: PropertyRow[] = [];
+
+    entityData?.structuredProperties?.properties?.forEach((structuredPropertiesEntry) => {
+        const { displayName, qualifiedName } = structuredPropertiesEntry.structuredProperty.definition;
+        structuredPropertyRows.push({
+            displayName: displayName || qualifiedName,
+            qualifiedName,
+            values: mapStructuredPropertyValues(structuredPropertiesEntry),
+            dataType: structuredPropertiesEntry.structuredProperty.definition.valueType,
+            structuredProperty: structuredPropertiesEntry.structuredProperty,
+            type:
+                structuredPropertiesEntry.values[0] && structuredPropertiesEntry.values[0].__typename
+                    ? {
+                          type: typeNameToType[structuredPropertiesEntry.values[0].__typename].type,
+                          nativeDataType: typeNameToType[structuredPropertiesEntry.values[0].__typename].nativeDataType,
+                      }
+                    : undefined,
+        });
+    });
+
+    return structuredPropertyRows;
+}
+
+export function findAllSubstrings(s: string): Array<string> {
+    const substrings: Array<string> = [];
+
+    for (let i = 0; i < s.length; i++) {
+        if (s[i] === '.') {
+            substrings.push(s.substring(0, i));
+        }
+    }
+    substrings.push(s);
+    return substrings;
+}
+
+export function createParentPropertyRow(displayName: string, qualifiedName: string): PropertyRow {
+    return {
+        displayName,
+        qualifiedName,
+        isParentRow: true,
+    };
+}
+
+export function identifyAndAddParentRows(rows?: Array<PropertyRow>): Array<PropertyRow> {
+    /**
+     * This function takes in an array of PropertyRow objects and determines which rows are parents. These parents need
+     * to be extracted in order to organize the rows into a properly nested structure later on. The final product returned
+     * is a list of parent rows, without values or children assigned.
+     */
+    const qualifiedNames: Array<string> = [];
+
+    // Get list of fqns
+    if (rows) {
+        rows.forEach((row) => {
+            qualifiedNames.push(row.qualifiedName);
+        });
+    }
+
+    const finalParents: PropertyRow[] = [];
+    const finalParentNames = new Set();
+
+    // Loop through list of fqns and find all substrings.
+    // e.g. a.b.c.d becomes a, a.b, a.b.c, a.b.c.d
+    qualifiedNames.forEach((fqn) => {
+        let previousCount: number | null = null;
+        let previousParentName = '';
+
+        const substrings = findAllSubstrings(fqn);
+
+        // Loop through substrings and count how many other fqns have that substring in them. Use this to determine
+        // if a property should be nested. If the count is equal then we should not nest, because there's no split
+        // that would tell us to nest. If the count is not equal, we should nest the child properties.
+        for (let index = 0; index < substrings.length; index++) {
+            const token = substrings[index];
+            const currentCount = qualifiedNames.filter((name) => name.startsWith(token)).length;
+
+            // If we're at the beginning of the path and there is no nesting, break
+            if (index === 0 && currentCount === 1) {
+                break;
+            }
+
+            // Add previous fqn, or,previousParentName, if we have found a viable parent path
+            if (previousCount !== null && previousCount !== currentCount) {
+                if (!finalParentNames.has(previousParentName)) {
+                    const parent: PropertyRow = createParentPropertyRow(previousParentName, previousParentName);
+                    parent.childrenCount = previousCount;
+                    finalParentNames.add(previousParentName);
+                    finalParents.push(parent);
+                }
+            }
+
+            previousCount = currentCount;
+            previousParentName = token;
+        }
+    });
+
+    return finalParents;
+}
+
+export function groupByParentProperty(rows?: Array<PropertyRow>): Array<PropertyRow> {
+    /**
+     * This function takes in an array of PropertyRow objects, representing parent and child properties. Parent properties
+     * will not have values, but child properties will. It organizes the rows into the parent and child structure and
+     * returns a list of PropertyRow objects representing it.
+     */
+    const outputRows: Array<PropertyRow> = [];
+    const outputRowByPath = {};
+
+    if (rows) {
+        // Iterate through all rows
+        for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+            let parentRow: null | PropertyRow = null;
+            const row = { children: undefined, ...rows[rowIndex], depth: 0 };
+
+            // Iterate through a row's characters, and split the row's path into tokens
+            // e.g. a, b, c for the example a.b.c
+            for (let j = rowIndex - 1; j >= 0; j--) {
+                const rowTokens = row.qualifiedName.split('.');
+                let parentPath: null | string = null;
+                let previousParentPath = rowTokens.slice(0, rowTokens.length - 1).join('.');
+
+                // Iterate through a row's path backwards, and check if the previous row's path has been seen. If it has,
+                // populate parentRow. If not, move on to the next path token.
+                // e.g. for a.b.c.d, first evaluate a.b.c to see if it has been seen. If it hasn't, move to a.b
+                for (
+                    let lastParentTokenIndex = rowTokens.length - 2;
+                    lastParentTokenIndex >= 0;
+                    --lastParentTokenIndex
+                ) {
+                    const lastParentToken: string = rowTokens[lastParentTokenIndex];
+                    if (lastParentToken && Object.keys(outputRowByPath).includes(previousParentPath)) {
+                        parentPath = rowTokens.slice(0, lastParentTokenIndex + 1).join('.');
+                        break;
+                    }
+                    previousParentPath = rowTokens.slice(0, lastParentTokenIndex).join('.');
+                }
+
+                if (parentPath && rows[j].qualifiedName === parentPath) {
+                    parentRow = outputRowByPath[rows[j].qualifiedName];
+                    break;
+                }
+            }
+
+            // If the parent row exists in the ouput, add the current row as a child. If not, add the current row
+            // to the final output.
+            if (parentRow) {
+                row.depth = (parentRow.depth || 0) + 1;
+                row.parent = parentRow;
+                if (row.isParentRow) {
+                    row.displayName = row.displayName.replace(`${parentRow.displayName}.`, '');
+                }
+                parentRow.children = [...(parentRow.children || []), row];
+            } else {
+                outputRows.push(row);
+            }
+            outputRowByPath[row.qualifiedName] = row;
+        }
+    }
+    return outputRows;
+}
+
+export default function useStructuredProperties(entityRegistry: EntityRegistry, filterText?: string) {
+    const { entityData } = useEntityData();
+
+    let structuredPropertyRowsRaw = getStructuredPropertyRows(entityData);
+    const parentRows = identifyAndAddParentRows(structuredPropertyRowsRaw);
+
+    structuredPropertyRowsRaw = [...structuredPropertyRowsRaw, ...parentRows];
+
+    const { filteredRows, expandedRowsFromFilter } = filterStructuredProperties(
+        entityRegistry,
+        structuredPropertyRowsRaw,
+        filterText,
+    );
+
+    // Sort by fqn before nesting algorithm
+    const copy = [...filteredRows].sort((a, b) => {
+        return a.qualifiedName.localeCompare(b.qualifiedName);
+    });
+
+    // group properties by path
+    const structuredPropertyRows = groupByParentProperty(copy);
+
+    return {
+        structuredPropertyRows,
+        expandedRowsFromFilter: expandedRowsFromFilter as Set<string>,
+    };
+}

datahub-web-react/src/app/entity/shared/tabs/Properties/useUpdateExpandedRowsFromFilter.ts

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { isEqual } from 'lodash';
+import usePrevious from '../../../../shared/usePrevious';
+
+interface Props {
+    expandedRowsFromFilter: Set<string>;
+    setExpandedRows: React.Dispatch<React.SetStateAction<Set<string>>>;
+}
+
+export default function useUpdateExpandedRowsFromFilter({ expandedRowsFromFilter, setExpandedRows }: Props) {
+    const previousExpandedRowsFromFilter = usePrevious(expandedRowsFromFilter);
+
+    useEffect(() => {
+        if (!isEqual(expandedRowsFromFilter, previousExpandedRowsFromFilter)) {
+            setExpandedRows((previousRows) => {
+                const finalRowsSet = new Set();
+                expandedRowsFromFilter.forEach((row) => finalRowsSet.add(row));
+                previousRows.forEach((row) => finalRowsSet.add(row));
+                return finalRowsSet as Set<string>;
+            });
+        }
+    }, [expandedRowsFromFilter, previousExpandedRowsFromFilter, setExpandedRows]);
+}

datahub-web-react/src/app/entity/shared/tabs/Properties/utils.ts

@@ -0,0 +1,68 @@
+import { CustomPropertiesEntry } from '../../../../../types.generated';
+import EntityRegistry from '../../../EntityRegistry';
+import { GenericEntityProperties } from '../../types';
+import { PropertyRow, ValueColumnData } from './types';
+
+export function mapCustomPropertiesToPropertyRows(customProperties: CustomPropertiesEntry[]) {
+    return (customProperties?.map((customProp) => ({
+        displayName: customProp.key,
+        values: [{ value: customProp.value || '' }],
+        type: { type: 'string', nativeDataType: 'string' },
+    })) || []) as PropertyRow[];
+}
+
+function matchesName(name: string, filterText: string) {
+    return name.toLocaleLowerCase().includes(filterText.toLocaleLowerCase());
+}
+
+function matchesAnyFromValues(values: ValueColumnData[], filterText: string, entityRegistry: EntityRegistry) {
+    return values.some(
+        (value) =>
+            matchesName(value.value?.toString() || '', filterText) ||
+            matchesName(value.entity ? entityRegistry.getDisplayName(value.entity.type, value.entity) : '', filterText),
+    );
+}
+
+export function getFilteredCustomProperties(filterText: string, entityData?: GenericEntityProperties | null) {
+    return entityData?.customProperties?.filter(
+        (property) => matchesName(property.key, filterText) || matchesName(property.value || '', filterText),
+    );
+}
+
+export function filterStructuredProperties(
+    entityRegistry: EntityRegistry,
+    propertyRows: PropertyRow[],
+    filterText?: string,
+) {
+    if (!propertyRows) return { filteredRows: [], expandedRowsFromFilter: new Set() };
+    if (!filterText) return { filteredRows: propertyRows, expandedRowsFromFilter: new Set() };
+    const formattedFilterText = filterText.toLocaleLowerCase();
+
+    const finalQualifiedNames = new Set<string>();
+    const expandedRowsFromFilter = new Set<string>();
+
+    propertyRows.forEach((row) => {
+        // if we match on the qualified name (maybe from a parent) do not filter out
+        if (matchesName(row.qualifiedName, formattedFilterText)) {
+            finalQualifiedNames.add(row.qualifiedName);
+        }
+        // if we match specifically on this property (not just its parent), add and expand all parents
+        if (
+            matchesName(row.displayName, formattedFilterText) ||
+            matchesAnyFromValues(row.values || [], formattedFilterText, entityRegistry)
+        ) {
+            finalQualifiedNames.add(row.qualifiedName);
+
+            const splitFieldPath = row.qualifiedName.split('.');
+            splitFieldPath.reduce((previous, current) => {
+                finalQualifiedNames.add(previous);
+                expandedRowsFromFilter.add(previous);
+                return `${previous}.${current}`;
+            });
+        }
+    });
+
+    const filteredRows = propertyRows.filter((row) => finalQualifiedNames.has(row.qualifiedName));
+
+    return { filteredRows, expandedRowsFromFilter };
+}

datahub-web-react/src/app/entity/shared/types.ts

@@ -38,6 +38,7 @@ import {
     BrowsePathV2,
     DataJobInputOutput,
     ParentDomainsResult,
+    StructuredProperties,
 } from '../../../types.generated';
 import { FetchedEntity } from '../../lineage/types';
 
@@ -84,6 +85,7 @@ export type GenericEntityProperties = {
     platform?: Maybe<DataPlatform>;
     dataPlatformInstance?: Maybe<DataPlatformInstance>;
     customProperties?: Maybe<CustomPropertiesEntry[]>;
+    structuredProperties?: Maybe<StructuredProperties>;
     institutionalMemory?: Maybe<InstitutionalMemory>;
     schemaMetadata?: Maybe<SchemaMetadata>;
     externalUrl?: Maybe<string>;

datahub-web-react/src/app/entity/shared/utils.ts

@@ -1,6 +1,6 @@
 import { Maybe } from 'graphql/jsutils/Maybe';
 
-import { Entity, EntityType, EntityRelationshipsResult, DataProduct } from '../../../types.generated';
+import { Entity, EntityType, EntityRelationshipsResult, DataProduct, PropertyValue } from '../../../types.generated';
 import { capitalizeFirstLetterOnly } from '../../shared/textUtil';
 import { GenericEntityProperties } from './types';
 
@@ -130,3 +130,13 @@ export function getDataProduct(dataProductResult: Maybe<EntityRelationshipsResul
     }
     return null;
 }
+
+export function getStructuredPropertyValue(value: PropertyValue) {
+    if (value.__typename === 'StringValue') {
+        return value.stringValue;
+    }
+    if (value.__typename === 'NumberValue') {
+        return value.numberValue;
+    }
+    return null;
+}

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

@@ -245,6 +245,11 @@ fragment nonRecursiveDatasetFields on Dataset {
             actor
         }
     }
+    structuredProperties {
+        properties {
+            ...structuredPropertiesFields
+        }
+    }
     editableProperties {
         description
     }
@@ -709,6 +714,15 @@ fragment schemaFieldFields on SchemaField {
     glossaryTerms {
         ...glossaryTerms
     }
+    schemaFieldEntity {
+        urn
+        type
+        structuredProperties {
+            properties {
+                ...structuredPropertiesFields
+            }
+        }
+    }
 }
 
 fragment schemaMetadataFields on SchemaMetadata {
@@ -1163,6 +1177,69 @@ fragment entityDisplayNameFields on Entity {
     }
 }
 
+fragment structuredPropertyFields on StructuredPropertyEntity {
+    urn
+    type
+    definition {
+        displayName
+        qualifiedName
+        description
+        cardinality
+        valueType {
+            info {
+                type
+                displayName
+            }
+        }
+        entityTypes {
+            info {
+                type
+            }
+        }
+        cardinality
+        typeQualifier {
+            allowedTypes {
+                urn
+                type
+                info {
+                    type
+                    displayName
+                }
+            }
+        }
+        allowedValues {
+            value {
+                ... on StringValue {
+                    stringValue
+                }
+                ... on NumberValue {
+                    numberValue
+                }
+            }
+            description
+        }
+    }
+}
+
+fragment structuredPropertiesFields on StructuredPropertiesEntry {
+    structuredProperty {
+        ...structuredPropertyFields
+    }
+    values {
+        ... on StringValue {
+            stringValue
+        }
+        ... on NumberValue {
+            numberValue
+        }
+    }
+    valueEntities {
+        urn
+        type
+        ...entityDisplayNameFields
+    }
+}
+
 fragment autoRenderAspectFields on RawAspect {
     aspectName
     payload

smoke-test/tests/cypress/cypress/e2e/login/login.js

@@ -1,8 +1,8 @@
 describe('login', () => {
   it('logs in', () => {
     cy.visit('/');
-    cy.get('input[data-testid=username]').type(Cypress.env('ADMIN_USERNAME'));
+    cy.get('input[data-testid=username]').type('datahub');
-    cy.get('input[data-testid=password]').type(Cypress.env('ADMIN_PASSWORD'));
+    cy.get('input[data-testid=password]').type('datahub');
     cy.contains('Sign In').click();
     cy.contains('Welcome back, ' + Cypress.env('ADMIN_DISPLAYNAME'));
   });

smoke-test/tests/cypress/cypress/e2e/mutations/edit_documentation.js

@@ -78,17 +78,18 @@ describe("edit documentation and link to dataset", () => {
     cy.visit(
       "/dataset/urn:li:dataset:(urn:li:dataPlatform:hive,SampleCypressHiveDataset,PROD)/Schema"
     );
-    cy.get("tbody [data-icon='edit']").first().click({ force: true });
+    cy.clickOptionWithText("field_foo");
+    cy.clickOptionWithTestId("edit-field-description");
     cy.waitTextVisible("Update description");
     cy.waitTextVisible("Foo field description has changed");
-    cy.focused().clear().wait(1000);
+    cy.getWithTestId("description-editor").clear().wait(1000);
     cy.focused().type(documentation_edited);
     cy.clickOptionWithTestId("description-modal-update-button");
     cy.waitTextVisible("Updated!");
     cy.waitTextVisible(documentation_edited);
     cy.waitTextVisible("(edited)");
-    cy.get("tbody [data-icon='edit']").first().click({ force: true });
+    cy.clickOptionWithTestId("edit-field-description");
-    cy.focused().clear().wait(1000);
+    cy.getWithTestId("description-editor").clear().wait(1000);
     cy.focused().type("Foo field description has changed");
     cy.clickOptionWithTestId("description-modal-update-button");
     cy.waitTextVisible("Updated!");

smoke-test/tests/cypress/cypress/e2e/mutations/mutations.js

@@ -77,7 +77,7 @@ describe("mutations", () => {
     cy.login();
     cy.viewport(2000, 800);
     cy.goToDataset("urn:li:dataset:(urn:li:dataPlatform:hive,cypress_logging_events,PROD)", "cypress_logging_events");
-    cy.mouseover('[data-testid="schema-field-event_name-tags"]');
+    cy.clickOptionWithText("event_name");
     cy.get('[data-testid="schema-field-event_name-tags"]').within(() =>
       cy.contains("Add Tag").click()
     );
@@ -116,7 +116,8 @@ describe("mutations", () => {
     // verify dataset shows up in search now
     cy.contains("of 1 result").click();
     cy.contains("cypress_logging_events").click();
-    cy.get('[data-testid="tag-CypressTestAddTag2"]').within(() =>
+    cy.clickOptionWithText("event_name");
+    cy.get('[data-testid="schema-field-event_name-tags"]').within(() =>
       cy
         .get("span[aria-label=close]")
         .trigger("mouseover", { force: true })
@@ -134,10 +135,7 @@ describe("mutations", () => {
     // make space for the glossary term column
     cy.viewport(2000, 800);
     cy.goToDataset("urn:li:dataset:(urn:li:dataPlatform:hive,cypress_logging_events,PROD)", "cypress_logging_events");
-    cy.get('[data-testid="schema-field-event_name-terms"]').trigger(
+    cy.clickOptionWithText("event_name");
-      "mouseover",
-      { force: true }
-    );
     cy.get('[data-testid="schema-field-event_name-terms"]').within(() =>
       cy.contains("Add Term").click({ force: true })
     );
@@ -146,9 +144,12 @@ describe("mutations", () => {
 
     cy.contains("CypressTerm");
 
-    cy.get(
+    cy.get('[data-testid="schema-field-event_name-terms"]').within(() =>
-      'a[href="/glossaryTerm/urn:li:glossaryTerm:CypressNode.CypressTerm"]'
+      cy
-    ).within(() => cy.get("span[aria-label=close]").click({ force: true }));
+        .get("span[aria-label=close]")
+        .trigger("mouseover", { force: true })
+        .click({ force: true })
+    );
     cy.contains("Yes").click({ force: true });
 
     cy.contains("CypressTerm").should("not.exist");

smoke-test/tests/cypress/cypress/e2e/schema_blame/schema_blame.js

@@ -14,6 +14,7 @@ describe('schema blame', () => {
       cy.contains('field_bar').should('not.exist');
       cy.contains('Foo field description has changed');
       cy.contains('Baz field description');
+      cy.clickOptionWithText("field_foo");
       cy.get('[data-testid="schema-field-field_foo-tags"]').contains('Legacy');
 
       // Make sure the schema blame is accurate
@@ -41,6 +42,7 @@ describe('schema blame', () => {
     cy.contains('field_baz').should('not.exist');
     cy.contains('Foo field description');
     cy.contains('Bar field description');
+    cy.clickOptionWithText("field_foo");
     cy.get('[data-testid="schema-field-field_foo-tags"]').contains('Legacy').should('not.exist');
 
     // Make sure the schema blame is accurate

smoke-test/tests/cypress/cypress/support/commands.js

@@ -218,6 +218,10 @@ Cypress.Commands.add( 'multiSelect', (within_data_id , text) => {
   cy.clickOptionWithText(text);
 });
 
+Cypress.Commands.add("getWithTestId", (id) => {
+  return cy.get(selectorWithtestId(id));
+});
+
 Cypress.Commands.add("enterTextInTestId", (id, text) => {
   cy.get(selectorWithtestId(id)).type(text);
 })