feat: improve Watchlist form UI

assets/components/tracking/WatchlistForm.tsx

@@ -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: {
@@ -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 }[] = [
+    const triggerTagRenderer: TagRender = (props) => {
-        {
+        const {value, closable, onClose} = props;
-            label: t`When a domain is expired`,
+        const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-            value: 'expiration'
+            event.preventDefault();
-        },
+            event.stopPropagation();
-        {
+        };
-            label: t`When a domain is deleted`,
+        return (
-            value: 'deletion'
+            <Tag
-        },
+                color={actionToColor(value)}
-        {
+                onMouseDown={onPreventMouseDown}
-            label: t`When a domain is updated`,
+                closable={closable}
-            value: 'last changed'
+                onClose={onClose}
-        },
+                style={{marginInlineEnd: 4}}
-        {
+            >
-            label: t`When a domain is transferred`,
+                {domainEventTranslated[value as keyof typeof domainEventTranslated]}
-            value: 'transfer'
+            </Tag>
-        },
+        )
-        {
+    }
-            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'
-        }
-    ]
 
     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={[
@@ -140,73 +132,30 @@ export function WatchlistForm({form, connectors, onCreateWatchlist}: {
                 </>
             )}
         </Form.List>
-        <Form.List
+        <Form.Item label={t`Tracked events`}
-            name="triggers"
+                   name='emailTriggers'
-            rules={[
+                   rules={[{required: true, message: t`At least one trigger`, type: 'array'}]}
-                {
+                   labelCol={{
-                    validator: async (_, domains) => {
+                       xs: {span: 24},
-                        if (!domains || domains.length < 1) {
+                       sm: {span: 4},
-                            return Promise.reject(new Error(t`At least one domain trigger`));
+                   }}
-                        }
+                   wrapperCol={{
-                    },
+                       md: {span: 12},
-                },
+                       sm: {span: 20},
-            ]}
+                   }}
+                   required
         >
-            {(fields, {add, remove}, {errors}) => (
+            <Select
-                <>
+                mode="multiple"
-                    {fields.map((field, index) => (
+                tagRender={triggerTagRenderer}
-                        <Form.Item
+                style={{width: '100%'}}
-                            {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
+                options={Object.keys(domainEventTranslated).map(e => ({
-                            label={index === 0 ? t`Domain trigger` : ''}
+                    value: e,
-                            required={true}
+                    label: domainEventTranslated[e as keyof typeof domainEventTranslated]
-                            key={field.key}
+                }))}
-                        >
+            />
-                            <Space wrap>
+        </Form.Item>
-                                <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>
 
-                            {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={{
@@ -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

assets/pages/tracking/WatchlistPage.tsx

@@ -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()

translations/translations.pot

@@ -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:102
-#: assets/components/tracking/WatchlistForm.tsx:169
-#: assets/components/tracking/WatchlistForm.tsx:179
 #: 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 ""
 
@@ -113,96 +111,63 @@ msgstr ""
 msgid "Noc"
 msgstr ""
 
-#: assets/components/tracking/WatchlistForm.tsx:35
+#: assets/components/tracking/WatchlistForm.tsx:60
-msgid "When a domain is expired"
+msgid "Name"
 msgstr ""
 
-#: assets/components/tracking/WatchlistForm.tsx:39
+#: assets/components/tracking/WatchlistForm.tsx:71
-msgid "When a domain is deleted"
+msgid "Watchlist Name"
 msgstr ""
 
-#: assets/components/tracking/WatchlistForm.tsx:43
+#: assets/components/tracking/WatchlistForm.tsx:72
-msgid "When a domain is updated"
+msgid "Naming the watchlist makes it easier to find in the list below."
 msgstr ""
 
-#: assets/components/tracking/WatchlistForm.tsx:47
+#: assets/components/tracking/WatchlistForm.tsx:82
-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"
-msgstr ""
-
-#: assets/components/tracking/WatchlistForm.tsx:67
-msgid "When a domain is registered"
-msgstr ""
-
-#: assets/components/tracking/WatchlistForm.tsx:74
-msgid "Send me an email"
-msgstr ""
-
-#: assets/components/tracking/WatchlistForm.tsx:90
 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
+#: assets/components/tracking/WatchlistForm.tsx:135
-msgid "At least one domain trigger"
+#: assets/components/tracking/WatchlistsList.tsx:25
+msgid "Tracked events"
 msgstr ""
 
-#: assets/components/tracking/WatchlistForm.tsx:160
+#: assets/components/tracking/WatchlistForm.tsx:137
-msgid "Domain trigger"
+msgid "At least one trigger"
-msgstr ""
-
-#: 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"
 msgstr ""
 
 #: assets/components/tracking/ConnectorsList.tsx:28
-#: assets/components/tracking/WatchlistForm.tsx:210
+#: assets/components/tracking/WatchlistForm.tsx:159
-#: assets/components/tracking/WatchlistForm.tsx:223
+#: assets/components/tracking/WatchlistForm.tsx:173
 msgid "Connector"
 msgstr ""
 
+#: 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 ""
 
@@ -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 ""