diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/AboutSection/DescriptionSection.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/AboutSection/DescriptionSection.tsx index 1278b8ef09..a9c4063068 100644 --- a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/AboutSection/DescriptionSection.tsx +++ b/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 && ( Read More : undefined } diff --git a/datahub-web-react/src/app/entity/shared/tabs/Documentation/components/DescriptionEditor.tsx b/datahub-web-react/src/app/entity/shared/tabs/Documentation/components/DescriptionEditor.tsx index a0faa348d3..49bf682944 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Documentation/components/DescriptionEditor.tsx +++ b/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} /> - - - + + + + + + {confirmCloseModalVisible && ( + {platformName ? <span>{platformName}</span> : <>Source</>} Documentation: + + + ); +} diff --git a/datahub-web-react/src/app/entity/shared/tabs/Documentation/components/editor/OnChangeMarkdown.tsx b/datahub-web-react/src/app/entity/shared/tabs/Documentation/components/editor/OnChangeMarkdown.tsx index 0c4fe8cd97..b6a090f892 100644 --- a/datahub-web-react/src/app/entity/shared/tabs/Documentation/components/editor/OnChangeMarkdown.tsx +++ b/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],