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}
+ />
+ )}
+
);