feat : markdown support for group description (datahub-project#9455)

acryldata · Dec 18, 2023 · b4fe451 · b4fe451
1 parent e58e2bf
commit b4fe451
Show file tree

Hide file tree

Showing 4 changed files with 261 additions and 60 deletions.
diff --git a/datahub-web-react/src/app/entity/group/EditGroupDescriptionModal.tsx b/datahub-web-react/src/app/entity/group/EditGroupDescriptionModal.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { Button, Modal, Form } from 'antd';
+import styled from 'styled-components';
+
+import { Editor } from '../shared/tabs/Documentation/components/editor/Editor';
+import { ANTD_GRAY } from '../shared/constants';
+
+type Props = {
+    onClose: () => void;
+    onSaveAboutMe: () => void;
+    setStagedDescription: (des: string) => void;
+    stagedDescription: string | undefined;
+};
+const StyledEditor = styled(Editor)`
+    border: 1px solid ${ANTD_GRAY[4]};
+`;
+
+export default function EditGroupDescriptionModal({
+    onClose,
+    onSaveAboutMe,
+    setStagedDescription,
+    stagedDescription,
+}: Props) {
+    const [form] = Form.useForm();
+    const [aboutText,setAboutText] = useState(stagedDescription)
+
+    function updateDescription(description: string) {
+        setAboutText(aboutText)
+        setStagedDescription(description);
+
+    }
+
+    const saveDescription = () => {
+        onSaveAboutMe();
+        onClose();
+    };
+
+    return (
+        <Modal
+            width={700}
+            title="Edit Description"
+            visible
+            onCancel={onClose}
+            footer={
+                <>
+                    <Button onClick={onClose} type="text">
+                        Cancel
+                    </Button>
+                    <Button id="updateGroupButton" onClick={saveDescription} disabled={!stagedDescription}>
+                        Update
+                    </Button>
+                </>
+            }
+        >
+            <Form form={form} initialValues={{}} layout="vertical">
+                <Form.Item name="description" rules={[{ whitespace: true }, { min: 1, max: 500 }]} hasFeedback>
+                    <div>
+                        <StyledEditor content={aboutText} onChange={updateDescription} />
+                    </div>
+                </Form.Item>
+            </Form>
+        </Modal>
+    );
+}
diff --git a/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx b/datahub-web-react/src/app/entity/group/GroupInfoSideBar.tsx
@@ -16,14 +16,15 @@ import {
     EmptyValue,
     SocialDetails,
     EditButton,
-    AboutSection,
-    AboutSectionText,
     GroupsSection,
+    AboutSection,
 } from '../shared/SidebarStyledComponents';
 import GroupMembersSideBarSection from './GroupMembersSideBarSection';
 import { useUserContext } from '../../context/useUserContext';
-
-const { Paragraph } = Typography;
+import StripMarkdownText, { removeMarkdown } from '../shared/components/styled/StripMarkdownText';
+import { Editor } from '../shared/tabs/Documentation/components/editor/Editor';
+import EditGroupDescriptionModal from './EditGroupDescriptionModal';
+import { REDESIGN_COLORS } from '../shared/constants';
 
 type SideBarData = {
     photoUrl: string | undefined;
@@ -80,6 +81,61 @@ const GroupTitle = styled(Typography.Title)`
     }
 `;
 
+const EditIcon = styled(EditOutlined)`
+    cursor: pointer;
+    color: ${REDESIGN_COLORS.BLUE};
+`;
+const AddNewDescription = styled(Button)`
+    display: none;
+    margin: -4px;
+    width: 140px;
+`;
+
+const StyledViewer = styled(Editor)`
+    padding-right: 8px;
+    display: block;
+
+    .remirror-editor.ProseMirror {
+        padding: 0;
+    }
+`;
+
+const DescriptionContainer = styled.div`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    text-align:left;
+    font-weight: normal;
+    font
+    min-height: 22px;
+
+    &:hover ${AddNewDescription} {
+        display: block;
+    }
+    & ins.diff {
+        background-color: #b7eb8f99;
+        text-decoration: none;
+        &:hover {
+            background-color: #b7eb8faa;
+        }
+    }
+    & del.diff {
+        background-color: #ffa39e99;
+        text-decoration: line-through;
+        &: hover {
+            background-color: #ffa39eaa;
+        }
+    }
+`;
+
+const ExpandedActions = styled.div`
+    height: 10px;
+`;
+const ReadLessText = styled(Typography.Link)`
+    margin-right: 4px;
+`;
+
 /**
  * Responsible for reading & writing users.
  */
@@ -106,7 +162,17 @@ export default function GroupInfoSidebar({ sideBarData, refetch }: Props) {
     const me = useUserContext();
     const canEditGroup = me?.platformPrivileges?.manageIdentities;
     const [groupTitle, setGroupTitle] = useState(name);
+    const [expanded, setExpanded] = useState(false);
+    const [isUpdatingDescription, SetIsUpdatingDescription] = useState(false);
+    const [stagedDescription, setStagedDescription] = useState(aboutText);
+
     const [updateName] = useUpdateNameMutation();
+    const overLimit = removeMarkdown(aboutText || '').length > 80;
+    const ABBREVIATED_LIMIT = 80;
+
+    useEffect(() => {
+        setStagedDescription(aboutText);
+    }, [aboutText]);
 
     useEffect(() => {
         setGroupTitle(groupTitle);
@@ -136,12 +202,12 @@ export default function GroupInfoSidebar({ sideBarData, refetch }: Props) {
     };
 
     // About Text save
-    const onSaveAboutMe = (inputString) => {
+    const onSaveAboutMe = () => {
         updateCorpGroupPropertiesMutation({
             variables: {
                 urn: urn || '',
                 input: {
-                    description: inputString,
+                    description: stagedDescription,
                 },
             },
         })
@@ -201,16 +267,65 @@ export default function GroupInfoSidebar({ sideBarData, refetch }: Props) {
                     </SocialDetails>
                     <Divider className="divider-aboutSection" />
                     <AboutSection>
-                        {TITLES.about}
-                        <AboutSectionText>
-                            <Paragraph
-                                editable={canEditGroup ? { onChange: onSaveAboutMe } : false}
-                                ellipsis={{ rows: 2, expandable: true, symbol: 'Read more' }}
-                            >
-                                {aboutText || <EmptyValue />}
-                            </Paragraph>
-                        </AboutSectionText>
+                        <Row>
+                            <Col span={22}>{TITLES.about}</Col>
+                            <Col span={2}>
+                                <EditIcon onClick={() => SetIsUpdatingDescription(true)} data-testid="edit-icon" />
+                            </Col>
+                        </Row>
                     </AboutSection>
+                    <DescriptionContainer>
+                        {(aboutText && expanded) || !overLimit ? (
+                            <>
+                                {/* Read only viewer for displaying group description */}
+                                <StyledViewer content={aboutText} readOnly />
+                                <ExpandedActions>
+                                    {overLimit && (
+                                        <ReadLessText
+                                            onClick={() => {
+                                                setExpanded(false);
+                                            }}
+                                        >
+                                            Read Less
+                                        </ReadLessText>
+                                    )}
+                                </ExpandedActions>
+                            </>
+                        ) : (
+                            <>
+                                {/* Display abbreviated description with option to read more */}
+                                <StripMarkdownText
+                                    limit={ABBREVIATED_LIMIT}
+                                    readMore={
+                                        <>
+                                            <Typography.Link
+                                                onClick={() => {
+                                                    setExpanded(true);
+                                                }}
+                                            >
+                                                Read More
+                                            </Typography.Link>
+                                        </>
+                                    }
+                                    shouldWrap
+                                >
+                                    {aboutText}
+                                </StripMarkdownText>
+                            </>
+                        )}
+                    </DescriptionContainer>
+                    {/* Modal for updating group description */}
+                    {isUpdatingDescription && (
+                        <EditGroupDescriptionModal
+                            onClose={() => {
+                                SetIsUpdatingDescription(false);
+                                setStagedDescription(aboutText);
+                            }}
+                            onSaveAboutMe={onSaveAboutMe}
+                            setStagedDescription={setStagedDescription}
+                            stagedDescription={stagedDescription}
+                        />
+                    )}
                     <Divider className="divider-groupsSection" />
                     <GroupsSection>
                         <GroupOwnerSideBarSection ownership={ownership} urn={urn || ''} refetch={refetch} />