feat(ui) Add documentation to term/node creation modal

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

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import styled from 'styled-components/macro';
+import { EditOutlined } from '@ant-design/icons';
 import { message, Button, Input, Modal, Typography, Form } from 'antd';
+import DOMPurify from 'dompurify';
 import {
     useCreateGlossaryTermMutation,
     useCreateGlossaryNodeMutation,
@@ -10,6 +12,7 @@ import { useEntityRegistry } from '../../../useEntityRegistry';
 import NodeParentSelect from './NodeParentSelect';
 import { useEntityData, useRefetch } from '../EntityContext';
 import analytics, { EventType } from '../../../analytics';
+import DescriptionModal from '../components/legacy/DescriptionModal';
 
 const StyledItem = styled(Form.Item)`
     margin-bottom: 0;
@@ -19,6 +22,10 @@ const OptionalWrapper = styled.span`
     font-weight: normal;
 `;
 
+const StyledButton = styled(Button)`
+    padding: 0;
+`;
+
 interface Props {
     entityType: EntityType;
     onClose: () => void;
@@ -32,21 +39,27 @@ function CreateGlossaryEntityModal(props: Props) {
     const entityRegistry = useEntityRegistry();
     const [stagedName, setStagedName] = useState('');
     const [selectedParentUrn, setSelectedParentUrn] = useState(entityData.urn);
+    const [documentation, setDocumentation] = useState('');
+    const [isDocumentationModalVisible, setIsDocumentationModalVisible] = useState(false);
     const [createButtonDisabled, setCreateButtonDisabled] = useState(true);
     const refetch = useRefetch();
 
     const [createGlossaryTermMutation] = useCreateGlossaryTermMutation();
     const [createGlossaryNodeMutation] = useCreateGlossaryNodeMutation();
 
+    const sanitizedDocumentation = DOMPurify.sanitize(documentation);
+
     function createGlossaryEntity() {
         const mutation =
             entityType === EntityType.GlossaryTerm ? createGlossaryTermMutation : createGlossaryNodeMutation;
 
+        const sanitizedDescription = DOMPurify.sanitize(documentation);
         mutation({
             variables: {
                 input: {
                     name: stagedName,
                     parentNode: selectedParentUrn || null,
+                    description: sanitizedDescription || null,
                 },
             },
         })
@@ -75,6 +88,11 @@ function CreateGlossaryEntityModal(props: Props) {
         onClose();
     }
 
+    function addDocumentation(description: string) {
+        setDocumentation(description);
+        setIsDocumentationModalVisible(false);
+    }
+
     return (
         <Modal
             title={`Create ${entityRegistry.getEntityName(entityType)}`}
@@ -131,6 +149,26 @@ function CreateGlossaryEntityModal(props: Props) {
                         />
                     </StyledItem>
                 </Form.Item>
+                <StyledItem
+                    label={
+                        <Typography.Text strong>
+                            Documentation <OptionalWrapper>(optional)</OptionalWrapper>
+                        </Typography.Text>
+                    }
+                >
+                    <StyledButton type="link" onClick={() => setIsDocumentationModalVisible(true)}>
+                        <EditOutlined />
+                        {sanitizedDocumentation ? 'Edit' : 'Add'} Documentation
+                    </StyledButton>
+                    {isDocumentationModalVisible && (
+                        <DescriptionModal
+                            title="Add Documenataion"
+                            onClose={() => setIsDocumentationModalVisible(false)}
+                            onSubmit={addDocumentation}
+                            description={documentation}
+                        />
+                    )}
+                </StyledItem>
             </Form>
         </Modal>
     );