feat(ui) Show source documentation when editing entity documentation (#8516)

Co-authored-by: Aseem Bansal <asmbansal2@gmail.com>

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

@@ -19,18 +19,20 @@ const ContentWrapper = styled.div`
 
 interface Props {
     description: string;
+    isExpandable?: boolean;
+    limit?: number;
 }
 
-export default function DescriptionSection({ description }: Props) {
+export default function DescriptionSection({ description, isExpandable, limit }: Props) {
     const isOverLimit = description && removeMarkdown(description).length > ABBREVIATED_LIMIT;
     const [isExpanded, setIsExpanded] = useState(!isOverLimit);
     const routeToTab = useRouteToTab();
     const isCompact = React.useContext(CompactContext);
-    const shouldShowReadMore = !useIsOnTab('Documentation');
+    const shouldShowReadMore = !useIsOnTab('Documentation') || isExpandable;
 
     // if we're not in compact mode, route them to the Docs tab for the best documentation viewing experience
     function readMore() {
-        if (isCompact) {
+        if (isCompact || isExpandable) {
             setIsExpanded(true);
         } else {
             routeToTab({ tabName: 'Documentation' });
@@ -47,7 +49,7 @@ export default function DescriptionSection({ description }: Props) {
             )}
             {!isExpanded && (
                 <NoMarkdownViewer
-                    limit={ABBREVIATED_LIMIT}
+                    limit={limit || ABBREVIATED_LIMIT}
                     readMore={
                         shouldShowReadMore ? <Typography.Link onClick={readMore}>Read More</Typography.Link> : undefined
                     }

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { message } from 'antd';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import analytics, { EventType, EntityActionType } from '../../../../../analytics';
 import { GenericEntityUpdate } from '../../../types';
 import { useEntityData, useEntityUpdate, useMutationUrn, useRefetch } from '../../../EntityContext';
@@ -9,10 +9,17 @@ import { DiscardDescriptionModal } from './DiscardDescriptionModal';
 import { EDITED_DESCRIPTIONS_CACHE_NAME } from '../../../utils';
 import { DescriptionEditorToolbar } from './DescriptionEditorToolbar';
 import { Editor } from './editor/Editor';
+import SourceDescription from './SourceDesription';
 
 const EditorContainer = styled.div`
+    flex: 1;
+`;
+
+const EditorSourceWrapper = styled.div`
     overflow: auto;
-    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
 `;
 
 type DescriptionEditorProps = {
@@ -138,9 +145,12 @@ export const DescriptionEditor = ({ onComplete }: DescriptionEditorProps) => {
                 onClose={handleConfirmClose}
                 disableSave={!isDescriptionUpdated}
             />
+            <EditorSourceWrapper>
                 <EditorContainer>
                     <Editor content={updatedDescription} onChange={handleEditorChange} />
                 </EditorContainer>
+                <SourceDescription />
+            </EditorSourceWrapper>
             {confirmCloseModalVisible && (
                 <DiscardDescriptionModal
                     cancelModalVisible={confirmCloseModalVisible}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useEntityData } from '../../../EntityContext';
+import { ANTD_GRAY } from '../../../constants';
+import DescriptionSection from '../../../containers/profile/sidebar/AboutSection/DescriptionSection';
+import { getPlatformName } from '../../../utils';
+
+const SourceDescriptionWrapper = styled.div`
+    border-top: 1px solid ${ANTD_GRAY[4]};
+    padding: 16px 0 16px 32px;
+`;
+
+const Title = styled.div`
+    font-weight: 700;
+    padding-bottom: 16px;
+`;
+
+export default function SourceDescription() {
+    const { entityData } = useEntityData();
+    const platformName = getPlatformName(entityData);
+    const sourceDescription = entityData?.properties?.description;
+
+    if (!sourceDescription || !entityData?.platform) return null;
+
+    return (
+        <SourceDescriptionWrapper>
+            <Title>{platformName ? <span>{platformName}</span> : <>Source</>} Documentation:</Title>
+            <DescriptionSection description={sourceDescription} limit={200} isExpandable />
+        </SourceDescriptionWrapper>
+    );
+}

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

@@ -11,7 +11,8 @@ export const OnChangeMarkdown = ({ onChange }: OnChangeMarkdownProps): null => {
 
     const onDocChanged = useCallback(
         ({ state }) => {
-            const markdown = getMarkdown(state);
+            let markdown = getMarkdown(state);
+            if (markdown === ' ') markdown = '';
             onChange(markdown);
         },
         [onChange, getMarkdown],