Skip to content

Commit

Permalink
feat: improve Watchlist form UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@maelgangloff
maelgangloff committed Aug 3, 2024
1 parent b103d80 commit eac73b0
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 181 deletions.
178 changes: 64 additions & 114 deletions assets/components/tracking/WatchlistForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import {Button, Form, FormInstance, Input, Select, Space} from "antd";
import {Button, Form, FormInstance, Input, Select, SelectProps, Space, Tag} from "antd";
import {t} from "ttag";
import {ApiOutlined, MinusCircleOutlined, PlusOutlined, ThunderboltFilled} from "@ant-design/icons";
import {ApiOutlined, MinusCircleOutlined, PlusOutlined} from "@ant-design/icons";
import React from "react";
import {EventAction} from "../../utils/api";
import {Connector} from "../../utils/api/connectors";
import {actionToColor, domainEvent} from "../search/EventTimeline";

type TagRender = SelectProps['tagRender'];

const formItemLayout = {
labelCol: {
Expand All @@ -27,60 +28,51 @@ const formItemLayoutWithOutLabel = {
export function WatchlistForm({form, connectors, onCreateWatchlist}: {
form: FormInstance,
connectors: (Connector & { id: string })[]
onCreateWatchlist: (values: { domains: string[], triggers: { event: string, action: string }[] }) => void
onCreateWatchlist: (values: { domains: string[], emailTriggers: string[] }) => void
}) {
const domainEventTranslated = domainEvent()

const triggerEventItems: { label: string, value: EventAction }[] = [
{
label: t`When a domain is expired`,
value: 'expiration'
},
{
label: t`When a domain is deleted`,
value: 'deletion'
},
{
label: t`When a domain is updated`,
value: 'last changed'
},
{
label: t`When a domain is transferred`,
value: 'transfer'
},
{
label: t`When a domain is locked`,
value: 'locked'
},
{
label: t`When a domain is unlocked`,
value: 'unlocked'
},
{
label: t`When a domain is reregistered`,
value: 'reregistration'
},
{
label: t`When a domain is reinstantiated`,
value: 'reinstantiation'
},
{
label: t`When a domain is registered`,
value: 'registration'
}
]

const triggerActionItems = [
{
label: t`Send me an email`,
value: 'email'
}
]
const triggerTagRenderer: TagRender = (props) => {
const {value, closable, onClose} = props;
const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
event.preventDefault();
event.stopPropagation();
};
return (
<Tag
color={actionToColor(value)}
onMouseDown={onPreventMouseDown}
closable={closable}
onClose={onClose}
style={{marginInlineEnd: 4}}
>
{domainEventTranslated[value as keyof typeof domainEventTranslated]}
</Tag>
)
}

return <Form
{...formItemLayoutWithOutLabel}
form={form}
onFinish={onCreateWatchlist}
initialValues={{emailTriggers: ['last changed', 'transfer', 'expiration', 'deletion']}}
>
<Form.Item label={t`Name`}
name='name'
labelCol={{
xs: {span: 24},
sm: {span: 4},
}}
wrapperCol={{
md: {span: 12},
sm: {span: 20},
}}
>
<Input placeholder={t`Watchlist Name`}
title={t`Naming the watchlist makes it easier to find in the list below.`}
autoComplete='off'
/>
</Form.Item>
<Form.List
name="domains"
rules={[
Expand Down Expand Up @@ -140,73 +132,30 @@ export function WatchlistForm({form, connectors, onCreateWatchlist}: {
</>
)}
</Form.List>
<Form.List
name="triggers"
rules={[
{
validator: async (_, domains) => {
if (!domains || domains.length < 1) {
return Promise.reject(new Error(t`At least one domain trigger`));
}
},
},
]}
<Form.Item label={t`Tracked events`}
name='emailTriggers'
rules={[{required: true, message: t`At least one trigger`, type: 'array'}]}
labelCol={{
xs: {span: 24},
sm: {span: 4},
}}
wrapperCol={{
md: {span: 12},
sm: {span: 20},
}}
required
>
{(fields, {add, remove}, {errors}) => (
<>
{fields.map((field, index) => (
<Form.Item
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
label={index === 0 ? t`Domain trigger` : ''}
required={true}
key={field.key}
>
<Space wrap>
<Form.Item {...field}
validateTrigger={['onChange', 'onBlur']}
rules={[{
required: true,
message: t`Required`
}]}
noStyle name={[field.name, 'event']}>
<Select style={{minWidth: 300}} options={triggerEventItems} showSearch
placeholder={t`If this happens`} optionFilterProp="label"/>
</Form.Item>
<Form.Item {...field}
validateTrigger={['onChange', 'onBlur']}
rules={[{
required: true,
message: t`Required`
}]}
noStyle name={[field.name, 'action']}>
<Select style={{minWidth: 300}} options={triggerActionItems} showSearch
placeholder={t`Then do that`}
optionFilterProp="label"/>
</Form.Item>
</Space>
<Select
mode="multiple"
tagRender={triggerTagRenderer}
style={{width: '100%'}}
options={Object.keys(domainEventTranslated).map(e => ({
value: e,
label: domainEventTranslated[e as keyof typeof domainEventTranslated]
}))}
/>
</Form.Item>

{fields.length > 1 ? (
<MinusCircleOutlined
className="dynamic-delete-button"
onClick={() => remove(field.name)}
/>
) : null}
</Form.Item>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{width: '60%'}}
icon={<ThunderboltFilled/>}
>
{t`Add a Trigger`}
</Button>
<Form.ErrorList errors={errors}/>
</Form.Item>
</>
)}
</Form.List>
<Form.Item label={t`Connector`}
name='connector'
labelCol={{
Expand All @@ -217,6 +166,7 @@ export function WatchlistForm({form, connectors, onCreateWatchlist}: {
md: {span: 12},
sm: {span: 20},
}}
help={t`Please make sure the connector information is valid to purchase a domain that may be available soon.`}
>
<Select showSearch
allowClear
Expand Down
4 changes: 2 additions & 2 deletions assets/pages/tracking/WatchlistPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@ export default function WatchlistPage() {

const onCreateWatchlist = (values: {
domains: string[],
triggers: { event: string, action: string, connector?: string }[]
emailTriggers: string[]
connector?: string
}) => {
const domainsURI = values.domains.map(d => '/api/domains/' + d)
postWatchlist({
domains: domainsURI,
triggers: values.triggers,
triggers: values.emailTriggers.map(t => ({event: t, action: 'email'})),
connector: values.connector !== undefined ? '/api/connectors/' + values.connector : undefined
}).then((w) => {
form.resetFields()
Expand Down
91 changes: 26 additions & 65 deletions translations/translations.pot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,16 +56,14 @@ msgstr ""
#: assets/components/tracking/ConnectorForm.tsx:97
#: assets/components/tracking/ConnectorForm.tsx:110
#: assets/components/tracking/ConnectorForm.tsx:119
#: assets/components/tracking/WatchlistForm.tsx:110
#: assets/components/tracking/WatchlistForm.tsx:169
#: assets/components/tracking/WatchlistForm.tsx:179
#: assets/components/tracking/WatchlistForm.tsx:102
#: assets/pages/LoginPage.tsx:60
#: assets/pages/LoginPage.tsx:68
msgid "Required"
msgstr ""

#: assets/components/search/DomainSearchBar.tsx:26
#: assets/components/tracking/WatchlistForm.tsx:113
#: assets/components/tracking/WatchlistForm.tsx:105
msgid "This domain name does not appear to be valid"
msgstr ""

Expand Down Expand Up @@ -113,96 +111,63 @@ msgstr ""
msgid "Noc"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:35
msgid "When a domain is expired"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:39
msgid "When a domain is deleted"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:43
msgid "When a domain is updated"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:47
msgid "When a domain is transferred"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:51
msgid "When a domain is locked"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:55
msgid "When a domain is unlocked"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:59
msgid "When a domain is reregistered"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:63
msgid "When a domain is reinstantiated"
#: assets/components/tracking/WatchlistForm.tsx:60
msgid "Name"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:67
msgid "When a domain is registered"
#: assets/components/tracking/WatchlistForm.tsx:71
msgid "Watchlist Name"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:74
msgid "Send me an email"
#: assets/components/tracking/WatchlistForm.tsx:72
msgid "Naming the watchlist makes it easier to find in the list below."
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:90
#: assets/components/tracking/WatchlistForm.tsx:82
msgid "At least one domain name"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:101
#: assets/components/tracking/WatchlistForm.tsx:93
#: assets/components/tracking/WatchlistsList.tsx:21
msgid "Domain names"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:119
#: assets/components/tracking/WatchlistForm.tsx:111
msgid "Domain name"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:136
#: assets/components/tracking/WatchlistForm.tsx:128
msgid "Add a Domain name"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:149
msgid "At least one domain trigger"
#: assets/components/tracking/WatchlistForm.tsx:135
#: assets/components/tracking/WatchlistsList.tsx:25
msgid "Tracked events"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:160
msgid "Domain trigger"
#: assets/components/tracking/WatchlistForm.tsx:137
msgid "At least one trigger"
msgstr ""

#: assets/components/tracking/ConnectorsList.tsx:28
#: assets/components/tracking/WatchlistForm.tsx:159
#: assets/components/tracking/WatchlistForm.tsx:173
msgid "If this happens"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:183
msgid "Then do that"
msgstr ""

#: assets/components/tracking/WatchlistForm.tsx:203
msgid "Add a Trigger"
msgid "Connector"
msgstr ""

#: assets/components/tracking/ConnectorsList.tsx:28
#: assets/components/tracking/WatchlistForm.tsx:210
#: assets/components/tracking/WatchlistForm.tsx:223
msgid "Connector"
#: assets/components/tracking/WatchlistForm.tsx:169
msgid ""
"Please make sure the connector information is valid to purchase a domain "
"that may be available soon."
msgstr ""

#: assets/components/tracking/ConnectorForm.tsx:131
#: assets/components/tracking/WatchlistForm.tsx:235
#: assets/components/tracking/WatchlistForm.tsx:185
msgid "Create"
msgstr ""

#: assets/components/tracking/ConnectorForm.tsx:134
#: assets/components/tracking/WatchlistForm.tsx:238
#: assets/components/tracking/WatchlistForm.tsx:188
msgid "Reset"
msgstr ""

Expand Down Expand Up @@ -257,10 +222,6 @@ msgid ""
"names via the Provider's API"
msgstr ""

#: assets/components/tracking/WatchlistsList.tsx:25
msgid "Tracked events"
msgstr ""

#: assets/components/tracking/WatchlistsList.tsx:34
msgid "Watchlist"
msgstr ""
Expand Down

0 comments on commit eac73b0

Please sign in to comment.