feat: Deprecation 'Note' changed to Markdown Renderable (#9396)

Setting auto merge after test cases are passed

datahub-web-react/src/app/entity/shared/EntityDropdown/UpdateDeprecationModal.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
-import { Button, DatePicker, Form, Input, message, Modal } from 'antd';
+import { Button, DatePicker, Form, message, Modal } from 'antd';
+import styled from 'styled-components';
 import { useBatchUpdateDeprecationMutation } from '../../../../graphql/mutations.generated';
 import { handleBatchError } from '../utils';
+import { Editor } from '../tabs/Documentation/components/editor/Editor';
+import { ANTD_GRAY } from '../constants';
 
 type Props = {
     urns: string[];
@@ -9,6 +12,10 @@ type Props = {
     refetch?: () => void;
 };
 
+const StyledEditor = styled(Editor)`
+    border: 1px solid ${ANTD_GRAY[4.5]};
+`;
+
 export const UpdateDeprecationModal = ({ urns, onClose, refetch }: Props) => {
     const [batchUpdateDeprecation] = useBatchUpdateDeprecationMutation();
     const [form] = Form.useForm();
@@ -64,10 +71,11 @@ export const UpdateDeprecationModal = ({ urns, onClose, refetch }: Props) => {
                     </Button>
                 </>
             }
+            width='40%'
         >
             <Form form={form} name="addDeprecationForm" onFinish={handleOk} layout="vertical">
-                <Form.Item name="note" label="Note" rules={[{ whitespace: true }, { min: 0, max: 100 }]}>
+                <Form.Item name="note" label="Note" rules={[{ whitespace: true }]}>
-                    <Input placeholder="Add Note" autoFocus />
+                    <StyledEditor/>
                 </Form.Item>
                 <Form.Item name="decommissionTime" label="Decommission Date">
                     <DatePicker style={{ width: '100%' }} />

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Divider, message, Modal, Popover, Tooltip, Typography } from 'antd';
 import { blue } from '@ant-design/colors';
@@ -8,6 +8,8 @@ import { Deprecation } from '../../../../../types.generated';
 import { getLocaleTimezone } from '../../../../shared/time/timeUtils';
 import { ANTD_GRAY } from '../../constants';
 import { useBatchUpdateDeprecationMutation } from '../../../../../graphql/mutations.generated';
+import { Editor } from '../../tabs/Documentation/components/editor/Editor';
+import StripMarkdownText, { removeMarkdown } from './StripMarkdownText';
 
 const DeprecatedContainer = styled.div`
     height: 18px;
@@ -38,11 +40,6 @@ const DeprecatedTitle = styled(Typography.Text)`
     font-weight: bold;
 `;
 
-const DeprecatedSubTitle = styled(Typography.Text)`
-    display: block;
-    margin-bottom: 5px;
-`;
-
 const LastEvaluatedAtLabel = styled.div`
     padding: 0;
     margin: 0;
@@ -70,15 +67,42 @@ const IconGroup = styled.div`
     }
 `;
 
+const DescriptionContainer = styled.div`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 22px;
+    margin-bottom: 14px;
+`;
+const StyledViewer = styled(Editor)`
+    padding-right: 8px;
+    display: block;
+
+    .remirror-editor.ProseMirror {
+        padding: 0;
+    }
+`;
+
+const ExpandedActions = styled.div`
+    height: 10px;
+`;
+const ReadLessText = styled(Typography.Link)`
+    margin-right: 4px;
+`;
 type Props = {
     urn: string;
     deprecation: Deprecation;
     refetch?: () => void;
     showUndeprecate: boolean | null;
 };
+const ABBREVIATED_LIMIT = 80;
 
 export const DeprecationPill = ({ deprecation, urn, refetch, showUndeprecate }: Props) => {
     const [batchUpdateDeprecationMutation] = useBatchUpdateDeprecationMutation();
+    const [expanded, setExpanded] = useState(false);
+    const overLimit = deprecation?.note && removeMarkdown(deprecation?.note).length > 80;
     /**
      * Deprecation Decommission Timestamp
      */
@@ -131,14 +155,56 @@ export const DeprecationPill = ({ deprecation, urn, refetch, showUndeprecate }:
 
     return (
         <Popover
-            overlayStyle={{ maxWidth: 240 }}
+            overlayStyle={{ maxWidth: 480 }}
             placement="right"
             content={
                 hasDetails ? (
                     <>
                         {deprecation?.note !== '' && <DeprecatedTitle>Deprecation note</DeprecatedTitle>}
                         {isDividerNeeded && <ThinDivider />}
-                        {deprecation?.note !== '' && <DeprecatedSubTitle>{deprecation.note}</DeprecatedSubTitle>}
+                        <DescriptionContainer>
+                            {expanded || !overLimit ? (
+                                <>
+                                    {
+                                        deprecation?.note && deprecation?.note !== '' &&
+                                        <>
+                                            <StyledViewer content={deprecation.note} readOnly />
+                                            <ExpandedActions>
+                                                {overLimit && (
+                                                    <ReadLessText
+                                                        onClick={() => {
+                                                            setExpanded(false);
+                                                        }}
+                                                    >
+                                                        Read Less
+                                                    </ReadLessText>
+                                                )}
+                                            </ExpandedActions>
+                                        </>
+                                    }
+                                </>
+                            ) : (
+                                <>
+                                    <StripMarkdownText
+                                        limit={ABBREVIATED_LIMIT}
+                                        readMore={
+                                            <>
+                                                <Typography.Link
+                                                    onClick={() => {
+                                                        setExpanded(true);
+                                                    }}
+                                                >
+                                                    Read More
+                                                </Typography.Link>
+                                            </>
+                                        }
+                                        shouldWrap
+                                    >
+                                        {deprecation.note}
+                                    </StripMarkdownText>
+                                </>
+                            )}
+                        </DescriptionContainer>
                         {deprecation?.decommissionTime !== null && (
                             <Typography.Text type="secondary">
                                 <Tooltip placement="right" title={decommissionTimeGMT}>

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

@@ -171,7 +171,7 @@ Cypress.Commands.add("deleteFromDropdown", () => {
 
 Cypress.Commands.add("addViaFormModal", (text, modelHeader) => {
   cy.waitTextVisible(modelHeader);
-  cy.get(".ant-form-item-control-input-content > input[type='text']").first().type(text);
+  cy.get('.ProseMirror-focused').type(text);
   cy.get(".ant-modal-footer > button:nth-child(2)").click();
 });