feat(propagation): UI for rendering propagated column documentation

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

@@ -5,6 +5,8 @@ import styled from 'styled-components';
 import { FetchResult } from '@apollo/client';
 
 import { UpdateDatasetMutation } from '../../../../../../graphql/dataset.generated';
+import { StringMapEntry } from '../../../../../../types.generated';
+import PropagationDetails from '../../../../shared/propagation/PropagationDetails';
 import UpdateDescriptionModal from '../../../../shared/components/legacy/DescriptionModal';
 import StripMarkdownText, { removeMarkdown } from '../../../../shared/components/styled/StripMarkdownText';
 import SchemaEditableContext from '../../../../../shared/SchemaEditableContext';
@@ -28,6 +30,11 @@ const ExpandedActions = styled.div`
     height: 10px;
 `;
 
+const DescriptionWrapper = styled.span`
+    display: inline-flex;
+    align-items: center;
+`;
+
 const DescriptionContainer = styled.div`
     position: relative;
     display: flex;
@@ -105,6 +112,8 @@ type Props = {
     isEdited?: boolean;
     isReadOnly?: boolean;
     businessAttributeDescription?: string;
+    isPropagated?: boolean;
+    sourceDetail?: StringMapEntry[] | null;
 };
 
 const ABBREVIATED_LIMIT = 80;
@@ -120,6 +129,8 @@ export default function DescriptionField({
     original,
     isReadOnly,
     businessAttributeDescription,
+    isPropagated,
+    sourceDetail,
 }: Props) {
     const [showAddModal, setShowAddModal] = useState(false);
     const overLimit = removeMarkdown(description).length > 80;
@@ -163,7 +174,7 @@ export default function DescriptionField({
 
     return (
         <DescriptionContainer>
-            {expanded || !overLimit ? (
+            {expanded ? (
                 <>
                     {!!description && <StyledViewer content={description} readOnly />}
                     {!!description && (EditButton || overLimit) && (
@@ -184,25 +195,29 @@ export default function DescriptionField({
                 </>
             ) : (
                 <>
-                    <StripMarkdownText
-                        limit={ABBREVIATED_LIMIT}
-                        readMore={
-                            <>
-                                <Typography.Link
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        handleExpanded(true);
-                                    }}
-                                >
-                                    Read More
-                                </Typography.Link>
-                            </>
-                        }
-                        suffix={EditButton}
-                        shouldWrap
-                    >
-                        {description}
-                    </StripMarkdownText>
+                    <DescriptionWrapper>
+                        {isPropagated && <PropagationDetails sourceDetail={sourceDetail} />}
+                        &nbsp;
+                        <StripMarkdownText
+                            limit={ABBREVIATED_LIMIT}
+                            readMore={
+                                <>
+                                    <Typography.Link
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            handleExpanded(true);
+                                        }}
+                                    >
+                                        Read More
+                                    </Typography.Link>
+                                </>
+                            }
+                            suffix={EditButton}
+                            shouldWrap
+                        >
+                            {description}
+                        </StripMarkdownText>
+                    </DescriptionWrapper>
                 </>
             )}
             {isEdited && <EditedLabel>(edited)</EditedLabel>}

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

@@ -19,16 +19,29 @@ const StyledViewer = styled(Editor)`
     }
 `;
 
+const OriginalDocumentation = styled(Form.Item)`
+    margin-bottom: 0;
+`;
+
 type Props = {
     title: string;
     description?: string | undefined;
     original?: string | undefined;
+    propagatedDescription?: string | undefined;
     onClose: () => void;
     onSubmit: (description: string) => void;
     isAddDesc?: boolean;
 };
 
-export default function UpdateDescriptionModal({ title, description, original, onClose, onSubmit, isAddDesc }: Props) {
+export default function UpdateDescriptionModal({
+    title,
+    description,
+    original,
+    propagatedDescription,
+    onClose,
+    onSubmit,
+    isAddDesc,
+}: Props) {
     const [updatedDesc, setDesc] = useState(description || original || '');
 
     const handleEditorKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -64,17 +77,17 @@ export default function UpdateDescriptionModal({ title, description, original, o
         >
             <Form layout="vertical">
                 <Form.Item>
-                    <StyledEditor
-                        content={updatedDesc}
-                        onChange={setDesc}
-                        dataTestId="description-editor"
-                        onKeyDown={handleEditorKeyDown}
-                    />
+                    <StyledEditor content={updatedDesc} onChange={setDesc} onKeyDown={handleEditorKeyDown} />
                 </Form.Item>
                 {!isAddDesc && description && original && (
-                    <Form.Item label={<FormLabel>Original:</FormLabel>}>
+                    <OriginalDocumentation label={<FormLabel>Original:</FormLabel>}>
                         <StyledViewer content={original || ''} readOnly />
-                    </Form.Item>
+                    </OriginalDocumentation>
+                )}
+                {!isAddDesc && description && propagatedDescription && (
+                    <OriginalDocumentation label={<FormLabel>Propagated:</FormLabel>}>
+                        <StyledViewer content={propagatedDescription || ''} readOnly />
+                    </OriginalDocumentation>
                 )}
             </Form>
         </Modal>

datahub-web-react/src/app/entity/shared/propagation/PropagationDetails.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Popover } from 'antd';
+import { StringMapEntry } from '../../../../types.generated';
+import PropagationEntityLink from './PropagationEntityLink';
+import { usePropagationDetails } from './utils';
+import { ANTD_GRAY } from '../constants';
+import { PropagateThunderbolt, PropagateThunderboltFilled } from './PropagationIcon';
+
+const PopoverWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+const PopoverTitle = styled.div`
+    font-weight: bold;
+    font-size: 14px;
+    padding: 6px 0px;
+`;
+
+const PopoverDescription = styled.div`
+    max-width: 340px;
+    font-size: 14px;
+    color: ${ANTD_GRAY[7]};
+    display: inline;
+    padding: 0px 0px 4px 0px;
+`;
+
+interface Props {
+    sourceDetail?: StringMapEntry[] | null;
+}
+
+export default function PropagationDetails({ sourceDetail }: Props) {
+    const {
+        isPropagated,
+        origin: { entity: originEntity },
+        via: { entity: viaEntity },
+    } = usePropagationDetails(sourceDetail);
+
+    if (!sourceDetail || !isPropagated) return null;
+
+    const popoverContent =
+        originEntity || viaEntity ? (
+            <PopoverWrapper>
+                <PopoverDescription>
+                    This description was automatically propagated{' '}
+                    {originEntity && originEntity.urn !== viaEntity?.urn && (
+                        <>
+                            from <PropagationEntityLink entity={originEntity} />
+                        </>
+                    )}
+                    {viaEntity && (
+                        <>
+                            via <PropagationEntityLink entity={viaEntity} />
+                        </>
+                    )}
+                </PopoverDescription>
+            </PopoverWrapper>
+        ) : undefined;
+
+    return (
+        <Popover
+            showArrow={false}
+            title={
+                <PopoverTitle>
+                    <PropagateThunderboltFilled />
+                    Propagated Description
+                </PopoverTitle>
+            }
+            content={popoverContent}
+        >
+            <PropagateThunderbolt data-testid="docPropagationIndicator" />
+        </Popover>
+    );
+}

datahub-web-react/src/app/entity/shared/propagation/PropagationEntityLink.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { useEntityRegistry } from '../../../useEntityRegistry';
+import { Entity, EntityType, SchemaFieldEntity } from '../../../../types.generated';
+import { GenericEntityProperties } from '../types';
+
+const PreviewImage = styled.img<{ size: number }>`
+    height: ${(props) => props.size}px;
+    width: ${(props) => props.size}px;
+    min-width: ${(props) => props.size}px;
+    object-fit: contain;
+    background-color: transparent;
+    margin: 0 3px;
+`;
+
+const StyledLink = styled(Link)`
+    display: flex;
+    align-items: center;
+`;
+
+interface Props {
+    entity: Entity;
+}
+
+export default function PropagationEntityLink({ entity }: Props) {
+    const entityRegistry = useEntityRegistry();
+
+    const isSchemaField = entity.type === EntityType.SchemaField;
+    const baseEntity = isSchemaField ? (entity as SchemaFieldEntity).parent : entity;
+
+    const logoUrl = (baseEntity as GenericEntityProperties)?.platform?.properties?.logoUrl || '';
+    let entityUrl = entityRegistry.getEntityUrl(baseEntity.type, baseEntity.urn);
+    let entityDisplayName = entityRegistry.getDisplayName(baseEntity.type, baseEntity);
+
+    if (isSchemaField) {
+        entityUrl = `${entityUrl}/${encodeURIComponent('Columns')}?schemaFilter=${encodeURIComponent(
+            (entity as SchemaFieldEntity).fieldPath,
+        )}`;
+        const schemaFieldName = entityRegistry.getDisplayName(entity.type, entity);
+        entityDisplayName = `${entityDisplayName}.${schemaFieldName}`;
+    }
+
+    return (
+        <StyledLink to={entityUrl}>
+            <PreviewImage src={logoUrl} alt="test" size={14} />
+            {entityDisplayName}
+        </StyledLink>
+    );
+}

datahub-web-react/src/app/entity/shared/propagation/PropagationIcon.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+import { ThunderboltFilled } from '@ant-design/icons';
+import { REDESIGN_COLORS } from '../constants';
+
+export const PropagateThunderbolt = styled(ThunderboltFilled)`
+    && {
+        color: #a7c7fa;
+    }
+    font-size: 16px;
+    &:hover {
+        color: ${REDESIGN_COLORS.BLUE};
+    }
+    margin-right: 4px;
+`;
+
+export const PropagateThunderboltFilled = styled(ThunderboltFilled)`
+    && {
+        color: ${REDESIGN_COLORS.BLUE};
+    }
+    font-size: 16px;
+    margin-right: 4px;
+`;

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

@@ -0,0 +1,24 @@
+import { StringMapEntry } from '../../../../types.generated';
+import { useGetEntities } from '../useGetEntities';
+
+export function usePropagationDetails(sourceDetail?: StringMapEntry[] | null) {
+    const isPropagated = !!sourceDetail?.find((mapEntry) => mapEntry.key === 'propagated' && mapEntry.value === 'true');
+    const originEntityUrn = sourceDetail?.find((mapEntry) => mapEntry.key === 'origin')?.value || '';
+    const viaEntityUrn = sourceDetail?.find((mapEntry) => mapEntry.key === 'via')?.value || '';
+
+    const entities = useGetEntities([originEntityUrn, viaEntityUrn]);
+    const originEntity = entities.find((e) => e.urn === originEntityUrn);
+    const viaEntity = entities.find((e) => e.urn === viaEntityUrn);
+
+    return {
+        isPropagated,
+        origin: {
+            urn: originEntityUrn,
+            entity: originEntity,
+        },
+        via: {
+            urn: viaEntityUrn,
+            entity: viaEntity,
+        },
+    };
+}