fix(react): update schema description edit behavior

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

@@ -25,6 +25,9 @@ import DescriptionField from './SchemaDescriptionField';
 import analytics, { EventType, EntityActionType } from '../../../../analytics';
 
 const MAX_FIELD_PATH_LENGTH = 100;
+const SchemaContainer = styled.div`
+    margin-bottom: 100px;
+`;
 const ViewRawButtonContainer = styled.div`
     display: flex;
     justify-content: flex-end;
@@ -259,7 +262,7 @@ export default function SchemaView({ urn, schema, editableSchemaMetadata, update
     };
 
     return (
-        <>
+        <SchemaContainer>
             {schema?.platformSchema?.__typename === 'TableSchema' && schema?.platformSchema?.schema?.length > 0 && (
                 <ViewRawButtonContainer>
                     <Button onClick={() => setShowRaw(!showRaw)}>{showRaw ? 'Tabular' : 'Raw'}</Button>
@@ -285,6 +288,6 @@ export default function SchemaView({ urn, schema, editableSchemaMetadata, update
                     />
                 )
             )}
-        </>
+        </SchemaContainer>
     );
 }

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

@@ -1,4 +1,5 @@
-import { Typography, message } from 'antd';
+import { Typography, message, Tag } from 'antd';
+import { EditOutlined } from '@ant-design/icons';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { FetchResult } from '@apollo/client';
@@ -7,10 +8,33 @@ import { UpdateDatasetMutation } from '../../../../../graphql/dataset.generated'
 import UpdateDescriptionModal from '../../../shared/DescriptionModal';
 import MarkdownViewer from '../../../shared/MarkdownViewer';
 
+const EditIcon = styled(EditOutlined)`
+    cursor: pointer;
+    padding: 2px;
+    margin-top: 4px;
+    margin-left: 8px;
+    display: none;
+`;
+
+const AddNewDescription = styled(Tag)`
+    cursor: pointer;
+    display: none;
+`;
+
 const DescriptionContainer = styled.div`
     position: relative;
     display: flex;
     flex-direction: row;
+    width: 100%;
+    height: 100%;
+    min-height: 22px;
+    &:hover ${EditIcon} {
+        display: block;
+    }
+
+    &:hover ${AddNewDescription} {
+        display: block;
+    }
 `;
 
 const DescriptionText = styled(MarkdownViewer)`
@@ -37,11 +61,18 @@ export default function DescriptionField({ description, updatedDescription, onUp
     const [showAddModal, setShowAddModal] = useState(false);
 
     const onCloseModal = () => setShowAddModal(false);
+    const currentDesc: string = updatedDescription || description;
 
     const onUpdateModal = async (desc: string | null) => {
         message.loading({ content: 'Updating...' });
-        await onUpdate(desc || '');
-        message.success({ content: 'Updated!', duration: 2 });
+        try {
+            await onUpdate(desc || '');
+            message.destroy();
+            message.success({ content: 'Updated!', duration: 2 });
+        } catch (e) {
+            message.destroy();
+            message.error({ content: `Update Failed! \n ${e.message || ''}`, duration: 2 });
+        }
         onCloseModal();
     };
 
@@ -52,23 +83,26 @@ export default function DescriptionField({ description, updatedDescription, onUp
                 e.stopPropagation();
             }}
         >
-            <DescriptionText
-                source={updatedDescription || description}
-                editable
-                onEditClicked={() => setShowAddModal(true)}
-            />
+            <DescriptionText source={currentDesc} />
+            {currentDesc && <EditIcon twoToneColor="#52c41a" onClick={() => setShowAddModal(true)} />}
             {updatedDescription && <EditedLabel>(edited)</EditedLabel>}
             {showAddModal && (
                 <div>
                     <UpdateDescriptionModal
-                        title="Update description"
-                        description={updatedDescription || description}
+                        title={currentDesc ? 'Update description' : 'Add description'}
+                        description={currentDesc}
                         original={description}
                         onClose={onCloseModal}
                         onSubmit={onUpdateModal}
+                        isAddDesc={!currentDesc}
                     />
                 </div>
             )}
+            {!currentDesc && (
+                <AddNewDescription color="success" onClick={() => setShowAddModal(true)}>
+                    + Add Description
+                </AddNewDescription>
+            )}
         </DescriptionContainer>
     );
 }

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

@@ -29,7 +29,7 @@ type Props = {
 };
 
 export default function UpdateDescriptionModal({ title, description, original, onClose, onSubmit, isAddDesc }: Props) {
-    const [updatedDesc, setDesc] = useState(description || original);
+    const [updatedDesc, setDesc] = useState(description || description === '' ? description : original);
 
     return (
         <Modal
@@ -42,7 +42,10 @@ export default function UpdateDescriptionModal({ title, description, original, o
             footer={
                 <>
                     <Button onClick={onClose}>Cancel</Button>
-                    <Button onClick={() => onSubmit(updatedDesc || null)} disabled={updatedDesc === description}>
+                    <Button
+                        onClick={() => onSubmit(updatedDesc || null)}
+                        disabled={updatedDesc === description || !updatedDesc}
+                    >
                         Update
                     </Button>
                 </>

datahub-web-react/src/app/entity/shared/MarkdownViewer.tsx

@@ -4,8 +4,6 @@ import { EditOutlined } from '@ant-design/icons';
 import MDEditor from '@uiw/react-md-editor';
 import styled from 'styled-components';
 
-// const { Text } = Typography;
-
 const EditIcon = styled(EditOutlined)`
     cursor: pointer;
     position: absolute;
@@ -111,7 +109,7 @@ export default function MarkdownViewer({ source, limit = 150, editable, onEditCl
                     {showAll ? 'show less' : 'show more'}
                 </CustomButton>
             )}
-            <EditIcon twoToneColor="#52c41a" onClick={onEditClicked} />
+            {editable && <EditIcon twoToneColor="#52c41a" onClick={onEditClicked} />}
         </MarkdownContainer>
     );
 }