Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui): Support defining the ID for Glossary Term and Glossary Term Group in UI #6830

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions datahub-web-react/src/app/domain/CreateDomainModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styled from 'styled-components';
import { message, Button, Input, Modal, Typography, Form, Collapse, Tag } from 'antd';
import { useCreateDomainMutation } from '../../graphql/domain.generated';
import { useEnterKeyListener } from '../shared/useEnterKeyListener';
import { groupIdTextValidation } from '../shared/textUtil';
import { validateCustomUrnId } from '../shared/textUtil';
import analytics, { EventType } from '../analytics';

const SuggestedNamesGroup = styled.div`
Expand Down Expand Up @@ -156,7 +156,7 @@ export default function CreateDomainModal({ onClose, onCreate }: Props) {
rules={[
() => ({
validator(_, value) {
if (value && groupIdTextValidation(value)) {
if (value && validateCustomUrnId(value)) {
return Promise.resolve();
}
return Promise.reject(new Error('Please enter a valid Domain id'));
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
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 { message, Button, Input, Modal, Typography, Form, Collapse } from 'antd';
import DOMPurify from 'dompurify';
import {
useCreateGlossaryTermMutation,
Expand All @@ -13,6 +13,7 @@ import NodeParentSelect from './NodeParentSelect';
import { useEntityData, useRefetch } from '../EntityContext';
import analytics, { EventType } from '../../../analytics';
import DescriptionModal from '../components/legacy/DescriptionModal';
import { validateCustomUrnId } from '../../../shared/textUtil';

const StyledItem = styled(Form.Item)`
margin-bottom: 0;
Expand All @@ -37,6 +38,7 @@ function CreateGlossaryEntityModal(props: Props) {
const entityData = useEntityData();
const [form] = Form.useForm();
const entityRegistry = useEntityRegistry();
const [stagedId, setStagedId] = useState<string | undefined>(undefined);
const [stagedName, setStagedName] = useState('');
const [selectedParentUrn, setSelectedParentUrn] = useState(entityData.urn);
const [documentation, setDocumentation] = useState('');
Expand All @@ -55,6 +57,7 @@ function CreateGlossaryEntityModal(props: Props) {
mutation({
variables: {
input: {
id: stagedId?.length ? stagedId : undefined,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was going to mention that we should ensure it's not a string with only whitespace but validateCustomUrnId already does that for us!

name: stagedName,
parentNode: selectedParentUrn || null,
description: sanitizedDescription || null,
Expand Down Expand Up @@ -167,6 +170,42 @@ function CreateGlossaryEntityModal(props: Props) {
/>
)}
</StyledItem>
<Collapse ghost>
<Collapse.Panel header={<Typography.Text type="secondary">Advanced</Typography.Text>} key="1">
<Form.Item
label={
<Typography.Text strong>
{entityRegistry.getEntityName(props.entityType)} Id
</Typography.Text>
}
>
<Typography.Paragraph>
By default, a random UUID will be generated to uniquely identify this entity. If
you&apos;d like to provide a custom id, you may provide it here. Note that it should be
unique across the entire Glossary. Be careful, you cannot easily change the id after
creation.
</Typography.Paragraph>
<Form.Item
name="id"
rules={[
() => ({
validator(_, value) {
if (value && validateCustomUrnId(value)) {
return Promise.resolve();
}
return Promise.reject(new Error('Please enter a valid entity id'));
},
}),
]}
>
<Input
placeholder="classification"
onChange={(event) => setStagedId(event.target.value)}
/>
</Form.Item>
</Form.Item>
</Collapse.Panel>
</Collapse>
</Form>
</Modal>
);
Expand Down
4 changes: 2 additions & 2 deletions datahub-web-react/src/app/identity/group/CreateGroupModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { message, Button, Input, Modal, Typography, Form, Collapse } from 'antd';
import { useCreateGroupMutation } from '../../../graphql/group.generated';
import { useEnterKeyListener } from '../../shared/useEnterKeyListener';
import { groupIdTextValidation } from '../../shared/textUtil';
import { validateCustomUrnId } from '../../shared/textUtil';
import analytics, { EventType } from '../../analytics';
import { CorpGroup, EntityType } from '../../../types.generated';

Expand Down Expand Up @@ -134,7 +134,7 @@ export default function CreateGroupModal({ onClose, onCreate }: Props) {
rules={[
() => ({
validator(_, value) {
if (value && groupIdTextValidation(value)) {
if (value && validateCustomUrnId(value)) {
return Promise.resolve();
}
return Promise.reject(new Error('Please enter correct Group name'));
Expand Down
2 changes: 1 addition & 1 deletion datahub-web-react/src/app/shared/textUtil.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function capitalizeFirstLetterOnly(str?: string | null) {
return str.charAt(0).toUpperCase() + str.slice(1);
}

export function groupIdTextValidation(str: string) {
export function validateCustomUrnId(str: string) {
if (str.indexOf(' ') > 0) return false;
if (str.indexOf(',') > 0) return false;
if (str.indexOf('(') > 0) return false;
Expand Down