feat: add DomainLifecycleSteps

assets/components/search/DomainLifecycleSteps.tsx

@@ -0,0 +1,55 @@
+import {StepProps, Steps, Tooltip} from "antd";
+import React from "react";
+import {t} from "ttag";
+import {
+    CheckOutlined,
+    DeleteOutlined,
+    ExclamationCircleOutlined,
+    ReloadOutlined,
+    SignatureOutlined
+} from "@ant-design/icons";
+import {rdapEventDetailTranslation, rdapStatusCodeDetailTranslation} from "../../utils/functions/rdapTranslation";
+
+export function DomainLifecycleSteps({status}: { status: string[] }) {
+
+    const rdapEventDetailTranslated = rdapEventDetailTranslation()
+    const rdapStatusCodeDetailTranslated = rdapStatusCodeDetailTranslation()
+
+
+    const steps: StepProps[] = [
+        {
+            title: <Tooltip title={rdapEventDetailTranslated.registration}>{t`Registration`}</Tooltip>,
+            icon: <SignatureOutlined/>
+        },
+        {
+            title: <Tooltip title={rdapStatusCodeDetailTranslated.active}>{t`Active`}</Tooltip>,
+            icon: <CheckOutlined/>
+        },
+        {
+            title: <Tooltip title={rdapStatusCodeDetailTranslated["renew period"]}>{t`Renew Period`}</Tooltip>,
+            icon: <ReloadOutlined/>
+        },
+        {
+            title: <Tooltip
+                title={rdapStatusCodeDetailTranslated["redemption period"]}>{t`Redemption Period`}</Tooltip>,
+            icon: <ExclamationCircleOutlined/>
+        },
+        {
+            title: <Tooltip title={rdapStatusCodeDetailTranslated["pending delete"]}>{t`Pending Delete`}</Tooltip>,
+            icon: <DeleteOutlined/>
+        }
+    ]
+
+    let currentStep = 1
+
+    if (status.includes('redemption period')) {
+        currentStep = 4
+    } else if (status.includes('pending delete')) {
+        currentStep = 5
+    }
+
+    return <Steps
+        current={currentStep}
+        items={steps}
+    />
+}

assets/components/search/DomainResult.tsx

@@ -5,15 +5,18 @@ import {EntitiesList} from "./EntitiesList";
 import {DomainDiagram} from "./DomainDiagram";
 import React from "react";
 import {Domain} from "../../utils/api";
-import {rdapStatusCodeDetailTranslation} from "./rdapTranslation";
+import {rdapStatusCodeDetailTranslation} from "../../utils/functions/rdapTranslation";
 import {regionNames} from "../../i18n";
 
 import {getCountryCode} from "../../utils/functions/getCountryCode";
+import {eppStatusCodeToColor} from "../../utils/functions/eppStatusCodeToColor";
+import {DomainLifecycleSteps} from "./DomainLifecycleSteps";
 
 export function DomainResult({domain}: { domain: Domain }) {
 
     const rdapStatusCodeDetailTranslated = rdapStatusCodeDetailTranslation()
-    const {tld} = domain
+    const {tld, events} = domain
+    const domainEvents = events.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
 
     return <Space direction="vertical" size="middle" style={{width: '100%'}}>
 
@@ -34,6 +37,9 @@ export function DomainResult({domain}: { domain: Domain }) {
                 {domain.ldhName}{domain.handle && <Typography.Text code>{domain.handle}</Typography.Text>}
             </Space>}
                   size="small">
+                {
+                    domain.events.length > 0 && <DomainLifecycleSteps status={domain.status}/>
+                }
                 {domain.status.length > 0 &&
                     <>
                         <Divider orientation="left">{t`EPP Status Codes`}</Divider>
@@ -43,15 +49,19 @@ export function DomainResult({domain}: { domain: Domain }) {
                                     <Tooltip
                                         placement='bottomLeft'
                                         title={s in rdapStatusCodeDetailTranslated ? rdapStatusCodeDetailTranslated[s as keyof typeof rdapStatusCodeDetailTranslated] : undefined}>
-                                        <Tag color={['active', 'ok'].includes(s) ? 'green' : 'blue'}>{s}</Tag>
+                                        <Tag color={eppStatusCodeToColor(s)}>{s}</Tag>
                                     </Tooltip>
                                 )
                             }
                         </Flex>
                     </>
                 }
-                <Divider orientation="left">{t`Timeline`}</Divider>
-                <EventTimeline domain={domain}/>
+                {
+                    domain.events.length > 0 && <>
+                        <Divider orientation="left">{t`Timeline`}</Divider>
+                        <EventTimeline events={domainEvents}/>
+                    </>
+                }
                 {
                     domain.entities.length > 0 &&
                     <>

assets/components/search/DomainSearchBar.tsx

@@ -10,10 +10,9 @@ export type FieldType = {
 export function DomainSearchBar({onFinish}: { onFinish: (values: FieldType) => void }) {
 
     return <Form
-        labelCol={{span: 8}}
-        wrapperCol={{span: 16}}
         onFinish={onFinish}
         autoComplete="off"
+        style={{width: '100%'}}
     >
         <Form.Item<FieldType>
             name="ldhName"

assets/components/search/EntitiesList.tsx

@@ -1,7 +1,7 @@
 import {List, Tag, Tooltip} from "antd";
 import React from "react";
 import {Domain} from "../../utils/api";
-import {rdapRoleDetailTranslation, rdapRoleTranslation} from "./rdapTranslation";
+import {rdapRoleDetailTranslation, rdapRoleTranslation} from "../../utils/functions/rdapTranslation";
 import {roleToAvatar} from "../../utils/functions/roleToAvatar";
 import {rolesToColor} from "../../utils/functions/rolesToColor";
 import {entityToName} from "../../utils/functions/entityToName";

assets/components/search/EventTimeline.tsx

@@ -1,53 +1,53 @@
-import {Timeline, Tooltip, Typography} from "antd";
+import {Progress, Timeline, Tooltip, Typography} from "antd";
 import React from "react";
-import {Domain} from "../../utils/api";
+import {Event} from "../../utils/api";
 import useBreakpoint from "../../hooks/useBreakpoint";
-import {rdapEventDetailTranslation, rdapEventNameTranslation} from "./rdapTranslation";
+import {rdapEventDetailTranslation, rdapEventNameTranslation} from "../../utils/functions/rdapTranslation";
 import {actionToColor} from "../../utils/functions/actionToColor";
 import {actionToIcon} from "../../utils/functions/actionToIcon";
 
-export function EventTimeline({domain}: { domain: Domain }) {
+export function EventTimeline({events}: { events: Event[] }) {
     const sm = useBreakpoint('sm')
 
     const locale = navigator.language.split('-')[0]
     const rdapEventNameTranslated = rdapEventNameTranslation()
     const rdapEventDetailTranslated = rdapEventDetailTranslation()
 
-    const domainEvents = domain.events.sort((e1, e2) => new Date(e2.date).getTime() - new Date(e1.date).getTime())
+    return <>
+        <Timeline
+            mode={sm ? "left" : "right"}
+            items={events.map(e => {
+                    const sameEvents = events.filter(se => se.action === e.action)
+                    const isRelevant = !(sameEvents.length > 1 && sameEvents.indexOf(e) !== 0)
 
-    return <Timeline
-        mode={sm ? "left" : "right"}
-        items={domainEvents.map(e => {
-                const sameEvents = domainEvents.filter(se => se.action === e.action)
-                const isRelevant = !(sameEvents.length > 1 && sameEvents.indexOf(e) !== 0)
+                    const eventName = <Typography.Text style={{color: isRelevant ? 'default' : 'grey'}}>
+                        {e.action in rdapEventNameTranslated ? rdapEventNameTranslated[e.action as keyof typeof rdapEventNameTranslated] : e.action}
+                    </Typography.Text>
 
-                const eventName = <Typography.Text style={{color: isRelevant ? 'default' : 'grey'}}>
-                    {e.action in rdapEventNameTranslated ? rdapEventNameTranslated[e.action as keyof typeof rdapEventNameTranslated] : e.action}
-                </Typography.Text>
+                    const dateStr = <Typography.Text
+                        style={{color: isRelevant ? 'default' : 'grey'}}>{new Date(e.date).toLocaleString(locale)}
+                    </Typography.Text>
 
-                const dateStr = <Typography.Text
-                    style={{color: isRelevant ? 'default' : 'grey'}}>{new Date(e.date).toLocaleString(locale)}
-                </Typography.Text>
+                    const eventDetail = e.action in rdapEventDetailTranslated ? rdapEventDetailTranslated[e.action as keyof typeof rdapEventDetailTranslated] : undefined
 
-                const eventDetail = e.action in rdapEventDetailTranslated ? rdapEventDetailTranslated[e.action as keyof typeof rdapEventDetailTranslated] : undefined
+                    const text = sm ? {
+                        children: <Tooltip placement='bottom' title={eventDetail}>
+                            {eventName}&emsp;{dateStr}
+                        </Tooltip>
+                    } : {
+                        label: dateStr,
+                        children: <Tooltip placement='left' title={eventDetail}>{eventName}</Tooltip>,
+                    }
 
-                const text = sm ? {
-                    children: <Tooltip placement='bottom' title={eventDetail}>
-                        {eventName}&emsp;{dateStr}
-                    </Tooltip>
-                } : {
-                    label: dateStr,
-                    children: <Tooltip placement='left' title={eventDetail}>{eventName}</Tooltip>,
-                }
-
-                return {
-                    color: isRelevant ? actionToColor(e.action) : 'grey',
-                    dot: actionToIcon(e.action),
-                    pending: new Date(e.date).getTime() > new Date().getTime(),
-                    ...text
+                    return {
+                        color: isRelevant ? actionToColor(e.action) : 'grey',
+                        dot: actionToIcon(e.action),
+                        pending: new Date(e.date).getTime() > new Date().getTime(),
+                        ...text
+                    }
                 }
+            )
             }
-        )
-        }
-    />
+        />
+    </>
 }

assets/components/tracking/watchlist/WatchlistCard.tsx

@@ -10,7 +10,7 @@ import {Watchlist} from "../../../pages/tracking/WatchlistPage";
 import {Connector} from "../../../utils/api/connectors";
 import useBreakpoint from "../../../hooks/useBreakpoint";
 import {CalendarWatchlistButton} from "./CalendarWatchlistButton";
-import {rdapEventDetailTranslation, rdapEventNameTranslation} from "../../search/rdapTranslation";
+import {rdapEventDetailTranslation, rdapEventNameTranslation} from "../../../utils/functions/rdapTranslation";
 
 import {actionToColor} from "../../../utils/functions/actionToColor";
 

assets/components/tracking/watchlist/WatchlistForm.tsx

@@ -3,7 +3,7 @@ import {t} from "ttag";
 import {ApiOutlined, MinusCircleOutlined, PlusOutlined} from "@ant-design/icons";
 import React from "react";
 import {Connector} from "../../../utils/api/connectors";
-import {rdapEventDetailTranslation, rdapEventNameTranslation} from "../../search/rdapTranslation";
+import {rdapEventDetailTranslation, rdapEventNameTranslation} from "../../../utils/functions/rdapTranslation";
 import {actionToColor} from "../../../utils/functions/actionToColor";
 import {actionToIcon} from "../../../utils/functions/actionToIcon";
 

assets/components/tracking/watchlist/diagram/watchlistToEdges.tsx

@@ -1,5 +1,5 @@
 import {Domain, Watchlist} from "../../../../utils/api";
-import {rdapRoleTranslation} from "../../../search/rdapTranslation";
+import {rdapRoleTranslation} from "../../../../utils/functions/rdapTranslation";
 import {t} from "ttag";
 
 import {rolesToColor} from "../../../../utils/functions/rolesToColor";

assets/pages/search/DomainSearchPage.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from "react";
-import {Card, Empty, Flex, FormProps, message, Skeleton} from "antd";
+import {Empty, Flex, FormProps, message, Skeleton} from "antd";
 import {Domain, getDomain} from "../../utils/api";
 import {AxiosError} from "axios"
 import {t} from 'ttag'
@@ -23,18 +23,16 @@ export default function DomainSearchPage() {
     }
 
     return <Flex gap="middle" align="center" justify="center" vertical>
-        <Card title={t`Domain finder`} style={{width: '100%'}}>
-            {contextHolder}
-            <DomainSearchBar onFinish={onFinish}/>
+        {contextHolder}
+        <DomainSearchBar onFinish={onFinish}/>
 
-            <Skeleton loading={domain === null} active>
-                {
-                    domain &&
-                    (!domain.deleted ? <DomainResult domain={domain}/>
-                        : <Empty
-                            description={t`Although the domain exists in my database, it has been deleted from the WHOIS by its registrar.`}/>)
-                }
-            </Skeleton>
-        </Card>
+        <Skeleton loading={domain === null} active>
+            {
+                domain &&
+                (!domain.deleted ? <DomainResult domain={domain}/>
+                    : <Empty
+                        description={t`Although the domain exists in my database, it has been deleted from the WHOIS by its registrar.`}/>)
+            }
+        </Skeleton>
     </Flex>
 }

assets/utils/functions/eppStatusCodeToColor.tsx

@@ -0,0 +1,5 @@
+export const eppStatusCodeToColor = (s: string) =>
+    ['active', 'ok'].includes(s) ? 'green' :
+        s.startsWith('client') ? 'purple' :
+            s.startsWith('server') ? 'geekblue' :
+                s.includes('prohibited') ? 'red' : 'blue'

assets/utils/functions/rolesToColor.tsx

@@ -1,6 +1,6 @@
 export const rolesToColor = (roles: string[]) => roles.includes('registrant') ? 'green' :
-    roles.includes('administrative') ? 'blue' :
-        roles.includes('technical') ? 'orange' :
+    roles.includes('technical') ? 'orange' :
+        roles.includes('administrative') ? 'blue' :
             roles.includes('registrar') ? 'purple' :
                 roles.includes('sponsor') ? 'magenta' :
                     roles.includes('billing') ? 'cyan' : 'default'