2022-01-27 22:02:41 -08:00
|
|
|
import React, { useState } from 'react';
|
|
|
|
import styled from 'styled-components';
|
|
|
|
import { message, Button, Input, Modal, Typography, Form, Collapse, Tag } from 'antd';
|
|
|
|
import { useCreateDomainMutation } from '../../graphql/domain.generated';
|
2022-02-17 04:30:54 +05:30
|
|
|
import { useEnterKeyListener } from '../shared/useEnterKeyListener';
|
2022-03-24 02:05:45 +05:30
|
|
|
import { groupIdTextValidation } from '../shared/textUtil';
|
2022-10-18 15:48:10 -07:00
|
|
|
import analytics, { EventType } from '../analytics';
|
2022-01-27 22:02:41 -08:00
|
|
|
|
|
|
|
const SuggestedNamesGroup = styled.div`
|
|
|
|
margin-top: 12px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const ClickableTag = styled(Tag)`
|
|
|
|
:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
onClose: () => void;
|
2022-11-23 12:31:31 -08:00
|
|
|
onCreate: (urn: string, id: string | undefined, name: string, description: string) => void;
|
2022-01-27 22:02:41 -08:00
|
|
|
};
|
|
|
|
|
|
|
|
const SUGGESTED_DOMAIN_NAMES = ['Engineering', 'Marketing', 'Sales', 'Product'];
|
|
|
|
|
2022-11-23 12:31:31 -08:00
|
|
|
const ID_FIELD_NAME = 'id';
|
|
|
|
const NAME_FIELD_NAME = 'name';
|
|
|
|
const DESCRIPTION_FIELD_NAME = 'description';
|
|
|
|
|
2022-06-29 22:41:41 -04:00
|
|
|
export default function CreateDomainModal({ onClose, onCreate }: Props) {
|
2022-01-27 22:02:41 -08:00
|
|
|
const [createDomainMutation] = useCreateDomainMutation();
|
2022-12-01 15:25:52 -08:00
|
|
|
const [createButtonEnabled, setCreateButtonEnabled] = useState(false);
|
2022-03-24 02:05:45 +05:30
|
|
|
const [form] = Form.useForm();
|
2022-01-27 22:02:41 -08:00
|
|
|
|
|
|
|
const onCreateDomain = () => {
|
|
|
|
createDomainMutation({
|
|
|
|
variables: {
|
|
|
|
input: {
|
2022-11-23 12:31:31 -08:00
|
|
|
id: form.getFieldValue(ID_FIELD_NAME),
|
|
|
|
name: form.getFieldValue(NAME_FIELD_NAME),
|
|
|
|
description: form.getFieldValue(DESCRIPTION_FIELD_NAME),
|
2022-01-27 22:02:41 -08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
})
|
2022-11-23 12:31:31 -08:00
|
|
|
.then(({ data, errors }) => {
|
2022-10-18 15:48:10 -07:00
|
|
|
if (!errors) {
|
|
|
|
analytics.event({
|
|
|
|
type: EventType.CreateDomainEvent,
|
|
|
|
});
|
2022-11-23 12:31:31 -08:00
|
|
|
message.success({
|
|
|
|
content: `Created domain!`,
|
|
|
|
duration: 3,
|
|
|
|
});
|
|
|
|
onCreate(
|
|
|
|
data?.createDomain || '',
|
|
|
|
form.getFieldValue(ID_FIELD_NAME),
|
|
|
|
form.getFieldValue(NAME_FIELD_NAME),
|
|
|
|
form.getFieldValue(DESCRIPTION_FIELD_NAME),
|
|
|
|
);
|
|
|
|
form.resetFields();
|
2022-10-18 15:48:10 -07:00
|
|
|
}
|
|
|
|
})
|
2022-01-27 22:02:41 -08:00
|
|
|
.catch((e) => {
|
|
|
|
message.destroy();
|
|
|
|
message.error({ content: `Failed to create Domain!: \n ${e.message || ''}`, duration: 3 });
|
|
|
|
});
|
|
|
|
onClose();
|
|
|
|
};
|
|
|
|
|
2022-02-17 04:30:54 +05:30
|
|
|
// Handle the Enter press
|
|
|
|
useEnterKeyListener({
|
|
|
|
querySelectorToExecuteClick: '#createDomainButton',
|
|
|
|
});
|
|
|
|
|
2022-01-27 22:02:41 -08:00
|
|
|
return (
|
|
|
|
<Modal
|
|
|
|
title="Create new Domain"
|
2022-06-29 22:41:41 -04:00
|
|
|
visible
|
2022-01-27 22:02:41 -08:00
|
|
|
onCancel={onClose}
|
|
|
|
footer={
|
|
|
|
<>
|
|
|
|
<Button onClick={onClose} type="text">
|
|
|
|
Cancel
|
|
|
|
</Button>
|
2022-12-01 15:25:52 -08:00
|
|
|
<Button id="createDomainButton" onClick={onCreateDomain} disabled={!createButtonEnabled}>
|
2022-01-27 22:02:41 -08:00
|
|
|
Create
|
|
|
|
</Button>
|
|
|
|
</>
|
|
|
|
}
|
|
|
|
>
|
2022-03-24 02:05:45 +05:30
|
|
|
<Form
|
|
|
|
form={form}
|
|
|
|
initialValues={{}}
|
|
|
|
layout="vertical"
|
2022-12-01 15:25:52 -08:00
|
|
|
onFieldsChange={() => {
|
|
|
|
setCreateButtonEnabled(!form.getFieldsError().some((field) => field.errors.length > 0));
|
|
|
|
}}
|
2022-03-24 02:05:45 +05:30
|
|
|
>
|
|
|
|
<Form.Item label={<Typography.Text strong>Name</Typography.Text>}>
|
2022-01-27 22:02:41 -08:00
|
|
|
<Typography.Paragraph>Give your new Domain a name. </Typography.Paragraph>
|
2022-03-24 02:05:45 +05:30
|
|
|
<Form.Item
|
2022-11-23 12:31:31 -08:00
|
|
|
name={NAME_FIELD_NAME}
|
2022-03-24 02:05:45 +05:30
|
|
|
rules={[
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
message: 'Enter a Domain name.',
|
|
|
|
},
|
|
|
|
{ whitespace: true },
|
2022-04-15 19:33:25 +02:00
|
|
|
{ min: 1, max: 50 },
|
2022-03-24 02:05:45 +05:30
|
|
|
]}
|
|
|
|
hasFeedback
|
|
|
|
>
|
2022-11-23 12:31:31 -08:00
|
|
|
<Input placeholder="A name for your domain" />
|
2022-03-24 02:05:45 +05:30
|
|
|
</Form.Item>
|
2022-01-27 22:02:41 -08:00
|
|
|
<SuggestedNamesGroup>
|
|
|
|
{SUGGESTED_DOMAIN_NAMES.map((name) => {
|
2022-11-23 12:31:31 -08:00
|
|
|
return (
|
2022-12-01 15:25:52 -08:00
|
|
|
<ClickableTag
|
|
|
|
key={name}
|
|
|
|
onClick={() => {
|
|
|
|
form.setFieldsValue({
|
|
|
|
name,
|
|
|
|
});
|
|
|
|
setCreateButtonEnabled(true);
|
|
|
|
}}
|
|
|
|
>
|
2022-11-23 12:31:31 -08:00
|
|
|
{name}
|
|
|
|
</ClickableTag>
|
|
|
|
);
|
2022-01-27 22:02:41 -08:00
|
|
|
})}
|
|
|
|
</SuggestedNamesGroup>
|
|
|
|
</Form.Item>
|
2022-03-24 02:05:45 +05:30
|
|
|
<Form.Item label={<Typography.Text strong>Description</Typography.Text>}>
|
2022-01-27 22:02:41 -08:00
|
|
|
<Typography.Paragraph>
|
|
|
|
An optional description for your new domain. You can change this later.
|
|
|
|
</Typography.Paragraph>
|
2022-11-23 12:31:31 -08:00
|
|
|
<Form.Item
|
|
|
|
name={DESCRIPTION_FIELD_NAME}
|
|
|
|
rules={[{ whitespace: true }, { min: 1, max: 500 }]}
|
|
|
|
hasFeedback
|
|
|
|
>
|
2022-12-01 15:25:52 -08:00
|
|
|
<Input.TextArea placeholder="A description for your domain" />
|
2022-03-24 02:05:45 +05:30
|
|
|
</Form.Item>
|
2022-01-27 22:02:41 -08:00
|
|
|
</Form.Item>
|
|
|
|
<Collapse ghost>
|
|
|
|
<Collapse.Panel header={<Typography.Text type="secondary">Advanced</Typography.Text>} key="1">
|
|
|
|
<Form.Item label={<Typography.Text strong>Domain Id</Typography.Text>}>
|
|
|
|
<Typography.Paragraph>
|
|
|
|
By default, a random UUID will be generated to uniquely identify this domain. If
|
|
|
|
you'd like to provide a custom id instead to more easily keep track of this domain,
|
|
|
|
you may provide it here. Be careful, you cannot easily change the domain id after
|
|
|
|
creation.
|
|
|
|
</Typography.Paragraph>
|
2022-03-24 02:05:45 +05:30
|
|
|
<Form.Item
|
2022-11-23 12:31:31 -08:00
|
|
|
name={ID_FIELD_NAME}
|
2022-03-24 02:05:45 +05:30
|
|
|
rules={[
|
|
|
|
() => ({
|
|
|
|
validator(_, value) {
|
|
|
|
if (value && groupIdTextValidation(value)) {
|
|
|
|
return Promise.resolve();
|
|
|
|
}
|
2022-11-23 12:31:31 -08:00
|
|
|
return Promise.reject(new Error('Please enter a valid Domain id'));
|
2022-03-24 02:05:45 +05:30
|
|
|
},
|
|
|
|
}),
|
|
|
|
]}
|
|
|
|
>
|
2022-11-23 12:31:31 -08:00
|
|
|
<Input placeholder="engineering" />
|
2022-03-24 02:05:45 +05:30
|
|
|
</Form.Item>
|
2022-01-27 22:02:41 -08:00
|
|
|
</Form.Item>
|
|
|
|
</Collapse.Panel>
|
|
|
|
</Collapse>
|
|
|
|
</Form>
|
|
|
|
</Modal>
|
|
|
|
);
|
|
|
|
}
|