feat: better domain result display

assets/components/search/DomainResult.tsx

@@ -5,7 +5,7 @@ import {EntitiesList} from "./EntitiesList";
 import {DomainDiagram} from "./DomainDiagram";
 import React from "react";
 import {Domain} from "../../utils/api";
-import {rdapStatusCodeDetailTranslation} from "./rdapStatusCodeDetailTranslation";
+import {rdapStatusCodeDetailTranslation} from "./rdapTranslation";
 
 export function DomainResult({domain}: { domain: Domain }) {
 

assets/components/search/EntitiesList.tsx

@@ -1,28 +1,15 @@
 import vCard from "vcf";
-import {Avatar, List, Tooltip} from "antd";
+import {Avatar, List, Tag, Tooltip} from "antd";
 import {BankOutlined, IdcardOutlined, SignatureOutlined, ToolOutlined, UserOutlined} from "@ant-design/icons";
 import React from "react";
 import {Domain} from "../../utils/api";
-import {t} from "ttag";
+import {rdapRoleDetailTranslation, rdapRoleTranslation} from "./rdapTranslation";
+import {rolesToColor} from "../tracking/watchlist/diagram/watchlistToEdges";
 
-export function translateRoles() {
-    return {
-        registrant: t`Registrant`,
-        technical: t`Technical`,
-        administrative: t`Administrative`,
-        abuse: t`Abuse`,
-        billing: t`Billing`,
-        registrar: t`Registrar`,
-        reseller: t`Reseller`,
-        sponsor: t`Sponsor`,
-        proxy: t`Proxy`,
-        notifications: t`Notifications`,
-        noc: t`Noc`
-    }
-}
 
 export function EntitiesList({domain}: { domain: Domain }) {
-    const domainRole = translateRoles()
+    const rdapRoleTranslated = rdapRoleTranslation()
+    const rdapRoleDetailTranslated = rdapRoleDetailTranslation()
 
     return <List
         className="demo-loadmore-list"
@@ -50,7 +37,12 @@ export function EntitiesList({domain}: { domain: Domain }) {
                     title={e.entity.handle}
                     description={name}
                 />
-                <div>{e.roles.map((r) => Object.keys(domainRole).includes(r) ? domainRole[r as keyof typeof domainRole] : r).join(', ')}</div>
+                {e.roles.map((r) =>
+                    <Tooltip
+                        title={r in rdapRoleDetailTranslated ? rdapRoleDetailTranslated[r as keyof typeof rdapRoleDetailTranslated] : undefined}>
+                        <Tag
+                            color={rolesToColor([r])}>{rdapRoleTranslated[r as keyof typeof rdapRoleTranslated]}</Tag>
+                    </Tooltip>)}
             </List.Item>
         }}
     />

assets/components/search/EventTimeline.tsx

@@ -10,7 +10,7 @@ import {Timeline, Tooltip} from "antd";
 import React from "react";
 import {Domain, EventAction} from "../../utils/api";
 import useBreakpoint from "../../hooks/useBreakpoint";
-import {rdapEventDetailTranslation, rdapEventNameTranslation} from "./rdapEventActionDetailTranslation";
+import {rdapEventDetailTranslation, rdapEventNameTranslation} from "./rdapTranslation";
 
 export function actionToColor(a: EventAction) {
     return a === 'registration' ? 'green' :
@@ -50,7 +50,7 @@ export function EventTimeline({domain}: { domain: Domain }) {
                     dot = <ReloadOutlined style={{fontSize: '16px'}}/>
                 }
 
-                const eventName = Object.keys(rdapEventNameTranslated).includes(action) ? rdapEventNameTranslated[action as keyof typeof rdapEventNameTranslated] : action
+                const eventName = action in rdapEventNameTranslated ? rdapEventNameTranslated[action as keyof typeof rdapEventNameTranslated] : action
                 const dateStr = new Date(date).toLocaleString(locale)
                 const eventDetail = action in rdapEventDetailTranslated ? rdapEventDetailTranslated[action as keyof typeof rdapEventDetailTranslated] : undefined
 

assets/components/search/rdapEventActionDetailTranslation.ts

@@ -1,35 +0,0 @@
-import {t} from "ttag";
-
-/**
- * @see https://www.iana.org/assignments/rdap-json-values/rdap-json-values.xhtml
- */
-export const rdapEventNameTranslation = () => ({
-    registration: t`Registration`,
-    reregistration: t`Reregistration`,
-    'last changed': t`Changed`,
-    expiration: t`Expiration`,
-    deletion: t`Deletion`,
-    reinstantiation: t`Reinstantiation`,
-    transfer: t`Transfer`,
-    locked: t`Locked`,
-    unlocked: t`Unlocked`,
-    'registrar expiration': t`Registrar expiration`,
-    'enum validation expiration': t`ENUM validation expiration`
-})
-
-/**
- * @see https://www.iana.org/assignments/rdap-json-values/rdap-json-values.xhtml
- */
-export const rdapEventDetailTranslation = () => ({
-    registration: t`The object instance was initially registered.`,
-    reregistration: t`The object instance was registered subsequently to initial registration.`,
-    'last changed': t`An action noting when the information in the object instance was last changed.`,
-    expiration: t`The object instance has been removed or will be removed at a predetermined date and time from the registry.`,
-    deletion: t`The object instance was removed from the registry at a point in time that was not predetermined.`,
-    reinstantiation: t`The object instance was reregistered after having been removed from the registry.`,
-    transfer: t`The object instance was transferred from one registrar to another.`,
-    locked: t`The object instance was locked.`,
-    unlocked: t`The object instance was unlocked.`,
-    'registrar expiration': t`An action noting the expiration date of the object in the registrar system.`,
-    'enum validation expiration': t`Association of phone number represented by this ENUM domain to registrant has expired or will expire at a predetermined date and time.`
-})

assets/components/search/rdapTranslation.ts

@@ -1,5 +1,75 @@
 import {t} from "ttag";
 
+/**
+ * @see https://www.iana.org/assignments/rdap-json-values/rdap-json-values.xhtml
+ */
+export const rdapRoleTranslation = () => ({
+    registrant: t`Registrant`,
+    technical: t`Technical`,
+    administrative: t`Administrative`,
+    abuse: t`Abuse`,
+    billing: t`Billing`,
+    registrar: t`Registrar`,
+    reseller: t`Reseller`,
+    sponsor: t`Sponsor`,
+    proxy: t`Proxy`,
+    notifications: t`Notifications`,
+    noc: t`Noc`
+})
+
+
+/**
+ * @see https://www.iana.org/assignments/rdap-json-values/rdap-json-values.xhtml
+ */
+export const rdapRoleDetailTranslation = () => ({
+    registrant: t`The entity object instance is the registrant of the registration. In some registries, this is known as a maintainer.`,
+    technical: t`The entity object instance is a technical contact for the registration.`,
+    administrative: t`The entity object instance is an administrative contact for the registration.`,
+    abuse: t`The entity object instance handles network abuse issues on behalf of the registrant of the registration.`,
+    billing: t`The entity object instance handles payment and billing issues on behalf of the registrant of the registration.`,
+    registrar: t`The entity object instance represents the authority responsible for the registration in the registry.`,
+    reseller: t`The entity object instance represents a third party through which the registration was conducted (i.e., not the registry or registrar).`,
+    sponsor: t`The entity object instance represents a domain policy sponsor, such as an ICANN-approved sponsor.`,
+    proxy: t`The entity object instance represents a proxy for another entity object, such as a registrant.`,
+    notifications: t`An entity object instance designated to receive notifications about association object instances.`,
+    noc: t`The entity object instance handles communications related to a network operations center (NOC).`
+})
+
+
+/**
+ * @see https://www.iana.org/assignments/rdap-json-values/rdap-json-values.xhtml
+ */
+export const rdapEventNameTranslation = () => ({
+    registration: t`Registration`,
+    reregistration: t`Reregistration`,
+    'last changed': t`Changed`,
+    expiration: t`Expiration`,
+    deletion: t`Deletion`,
+    reinstantiation: t`Reinstantiation`,
+    transfer: t`Transfer`,
+    locked: t`Locked`,
+    unlocked: t`Unlocked`,
+    'registrar expiration': t`Registrar expiration`,
+    'enum validation expiration': t`ENUM validation expiration`
+})
+
+/**
+ * @see https://www.iana.org/assignments/rdap-json-values/rdap-json-values.xhtml
+ */
+export const rdapEventDetailTranslation = () => ({
+    registration: t`The object instance was initially registered.`,
+    reregistration: t`The object instance was registered subsequently to initial registration.`,
+    'last changed': t`An action noting when the information in the object instance was last changed.`,
+    expiration: t`The object instance has been removed or will be removed at a predetermined date and time from the registry.`,
+    deletion: t`The object instance was removed from the registry at a point in time that was not predetermined.`,
+    reinstantiation: t`The object instance was reregistered after having been removed from the registry.`,
+    transfer: t`The object instance was transferred from one registrar to another.`,
+    locked: t`The object instance was locked.`,
+    unlocked: t`The object instance was unlocked.`,
+    'registrar expiration': t`An action noting the expiration date of the object in the registrar system.`,
+    'enum validation expiration': t`Association of phone number represented by this ENUM domain to registrant has expired or will expire at a predetermined date and time.`
+})
+
 /**
  * @see https://www.iana.org/assignments/rdap-json-values/rdap-json-values.xhtml
  */

assets/components/tracking/watchlist/WatchlistCard.tsx

@@ -11,7 +11,7 @@ import {Watchlist} from "../../../pages/tracking/WatchlistPage";
 import {Connector} from "../../../utils/api/connectors";
 import useBreakpoint from "../../../hooks/useBreakpoint";
 import {CalendarWatchlistButton} from "./CalendarWatchlistButton";
-import {rdapEventNameTranslation} from "../../search/rdapEventActionDetailTranslation";
+import {rdapEventNameTranslation} from "../../search/rdapTranslation";
 
 export function WatchlistCard({watchlist, onUpdateWatchlist, connectors, onDelete}: {
     watchlist: Watchlist,

assets/components/tracking/watchlist/WatchlistForm.tsx

@@ -4,7 +4,7 @@ import {ApiOutlined, MinusCircleOutlined, PlusOutlined} from "@ant-design/icons"
 import React from "react";
 import {Connector} from "../../../utils/api/connectors";
 import {actionToColor} from "../../search/EventTimeline";
-import {rdapEventNameTranslation} from "../../search/rdapEventActionDetailTranslation";
+import {rdapEventNameTranslation} from "../../search/rdapTranslation";
 
 type TagRender = SelectProps['tagRender'];
 

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

@@ -1,14 +1,14 @@
 import {Domain, Watchlist} from "../../../../utils/api";
-import {translateRoles} from "../../../search/EntitiesList";
+import {rdapRoleTranslation} from "../../../search/rdapTranslation";
 import {t} from "ttag";
 
-const rolesToColor = (roles: string[]) => roles.includes('registrant') ? 'green' :
+export const rolesToColor = (roles: string[]) => roles.includes('registrant') ? 'green' :
     roles.includes('administrative') ? 'blue' :
         roles.includes('technical') ? 'orange' :
             roles.includes('registrar') ? 'violet' : 'white'
 
 export function domainEntitiesToEdges(d: Domain, withRegistrar = false) {
-    const domainRole = translateRoles()
+    const rdapRoleTranslated = rdapRoleTranslation()
     return d.entities
         .filter(e => !withRegistrar ? !e.roles.includes('registrar') : true)
         .map(e => ({
@@ -17,7 +17,7 @@ export function domainEntitiesToEdges(d: Domain, withRegistrar = false) {
             target: e.roles.includes('registrant') || e.roles.includes('registrar') ? d.ldhName : e.entity.handle,
             style: {stroke: rolesToColor(e.roles), strokeWidth: 3},
             label: e.roles
-                .map(r => Object.keys(domainRole).includes(r) ? domainRole[r as keyof typeof domainRole] : r)
+                .map(r => r in rdapRoleTranslated ? rdapRoleTranslated[r as keyof typeof rdapRoleTranslated] : r)
                 .join(', '),
             animated: e.roles.includes('registrant'),
         }))