diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/CreateGlossaryEntityModal.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/CreateGlossaryEntityModal.tsx index ebbd1843d4b512..f41cad97381636 100644 --- a/datahub-web-react/src/app/entity/shared/EntityDropdown/CreateGlossaryEntityModal.tsx +++ b/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 ( + + Documentation (optional) + + } + > + setIsDocumentationModalVisible(true)}> + + {sanitizedDocumentation ? 'Edit' : 'Add'} Documentation + + {isDocumentationModalVisible && ( + setIsDocumentationModalVisible(false)} + onSubmit={addDocumentation} + description={documentation} + /> + )} + );