feat: add ICANN accreditation status on domain result page

This commit is contained in:
Maël Gangloff
2025-09-15 23:04:28 +02:00
parent b1566bbeac
commit c4f79bece8
12 changed files with 338 additions and 153 deletions

View File

@@ -1,11 +1,16 @@
import {Flex, List, Tag, Tooltip, Typography} from 'antd'
import {Flex, List, Tag, Tooltip} from 'antd'
import React from 'react'
import type {Domain} from '../../utils/api'
import {rdapRoleDetailTranslation, rdapRoleTranslation} from '../../utils/functions/rdapTranslation'
import {
icannAccreditationTranslation,
rdapRoleDetailTranslation,
rdapRoleTranslation
} from '../../utils/functions/rdapTranslation'
import {roleToAvatar} from '../../utils/functions/roleToAvatar'
import {rolesToColor} from '../../utils/functions/rolesToColor'
import {sortDomainEntities} from '../../utils/functions/sortDomainEntities'
import {extractDetailsFromJCard} from '../../utils/functions/extractDetailsFromJCard'
import {CheckCircleOutlined, CloseCircleOutlined, SettingOutlined} from "@ant-design/icons"
export function EntitiesList({domain}: { domain: Domain }) {
const rdapRoleTranslated = rdapRoleTranslation()
@@ -27,11 +32,28 @@ export function EntitiesList({domain}: { domain: Domain }) {
dataSource={sortDomainEntities(domain)}
renderItem={(e) => {
const details = extractDetailsFromJCard(e)
const icannAccreditationTranslated = icannAccreditationTranslation()
const status = e.entity.icannAccreditation?.status as ('Terminated' | 'Accredited' | 'Reserved' | undefined)
return <List.Item>
<List.Item.Meta
avatar={roleToAvatar(e)}
title={<Typography.Text code>{e.entity.handle}</Typography.Text>}
title={<Flex gap='small'>
<Tag>{e.entity.handle}</Tag>
{
e.entity.icannAccreditation && status && <Tooltip
title={e.entity.icannAccreditation.registrarName + " (" + icannAccreditationTranslated[status] + ")"}>
<Tag icon={
status === 'Terminated' ? <CloseCircleOutlined /> :
status === 'Accredited' ? <CheckCircleOutlined/> : <SettingOutlined/>
} color={
status === 'Terminated' ? 'red' :
status === 'Accredited' ? 'green' : 'yellow'
}>{e.entity.icannAccreditation.id}</Tag>
</Tooltip>
}
</Flex>}
description={<>
{details.fn && <div>👤 {details.fn}</div>}
{details.organization && <div>🏢 {details.organization}</div>}