feat(web-domain): dns state + transfer

ref: #DCE-16

Signed-off-by: Brendan Seiller <brendan.seiller@ovhcloud.com>

Author: SBrendan

packages/manager/apps/web-domains/public/translations/domain/Messages_fr_FR.json

@@ -252,7 +252,7 @@
   "domain_tab_general_information_note_anycast": "Mettez à niveau vers une offre Anycast pour de meilleures performances.",
   "domain_tab_general_information_dns_anycast": "Anycast",
   "domain_tab_general_information_dns_personnalised": "Personnalisé",
-  "domain_tab_general_information_dns_dedicad": "Dedié",
+  "domain_tab_general_information_dns_dedicated": "Dédié",
   "domain_tab_general_information_dns_empty": "Aucun",
   "domain_tab_DNS_modification_form_dns_number": "Veuillez renseigner entre {{min}} et {{max}} DNS.",
   "domain_tab_DNS_modification_form_server_field": "Serveur DNS",

packages/manager/apps/web-domains/src/domain/components/ConfigurationCards/ConfigurationCards.spec.tsx

@@ -7,8 +7,10 @@ import { wrapper } from '@/common/utils/test.provider';
 import ConfigurationCards from './ConfigurationCards';
 import {
   useGetDnssecStatus,
+  useGetDomainAnycastOption,
   useGetDomainAuthInfo,
   useGetDomainResource,
+  useTerminateAnycastMutation,
   useTransferTag,
   useUpdateDnssecService,
   useUpdateDomainResource,
@@ -22,7 +24,6 @@ import { ResourceStatusEnum } from '@/domain/enum/resourceStatus.enum';
 import { TDomainResource } from '@/domain/types/domainResource';
 import { StatusEnum } from '@/domain/enum/Status.enum';
 
-vi.mock('@/domain/hooks/data/query');
 vi.mock('@ovh-ux/manager-react-components', async () => {
   const actual = await vi.importActual('@ovh-ux/manager-react-components');
   return {
@@ -31,6 +32,17 @@ vi.mock('@ovh-ux/manager-react-components', async () => {
   };
 });
 
+vi.mock('@/domain/hooks/data/query', () => ({
+  useGetDomainAnycastOption: vi.fn(),
+  useGetDomainResource: vi.fn(),
+  useGetDomainAuthInfo: vi.fn(),
+  useGetDnssecStatus: vi.fn(),
+  useUpdateDnssecService: vi.fn(),
+  useUpdateDomainResource: vi.fn(),
+  useTransferTag: vi.fn(),
+  useTerminateAnycastMutation: vi.fn(),
+}));
+
 describe('ConfigurationCards component', () => {
   const mockUpdateServiceDnssec = vi.fn();
   const mockUpdateDomain = vi.fn();
@@ -115,6 +127,14 @@ describe('ConfigurationCards component', () => {
       dnssecStatus: mockDnssecStatus,
       isDnssecStatusLoading: false,
     });
+    (useGetDomainAnycastOption as jest.Mock).mockReturnValue({
+      anycastOption: null,
+      isFetchingAnycastOption: false,
+    });
+    (useTerminateAnycastMutation as jest.Mock).mockReturnValue({
+      terminateAnycast: vi.fn(),
+      isTerminateAnycastPending: false,
+    });
     (useUpdateDnssecService as jest.Mock).mockReturnValue({
       updateServiceDnssec: mockUpdateServiceDnssec,
       isUpdateIsPending: false,
@@ -145,8 +165,12 @@ describe('ConfigurationCards component', () => {
   it('renders DNS server badge', () => {
     render(<ConfigurationCards serviceName="example.com" />, { wrapper });
 
-    expect(screen.getByText('Serveur DNS')).toBeInTheDocument();
-    expect(screen.getByText('Enregistré')).toBeInTheDocument();
+    expect(
+      screen.getByText('domain_tab_general_information_dns_title'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('domain_tab_general_information_dns_standard'),
+    ).toBeInTheDocument();
   });
 
   it('renders DnssecToggleStatus component', () => {

packages/manager/apps/web-domains/src/domain/components/ConfigurationCards/ConfigurationCards.tsx

@@ -27,6 +27,7 @@ import {
   TContactsConfigurationAPI,
 } from '@/domain/types/domainResource';
 import DnsState from './DnsState';
+import AnycastTerminateModal from '../AnycastOrder/AnycastTerminateModal';
 
 interface ConfigurationCardsProps {
   readonly serviceName: string;
@@ -228,14 +229,16 @@ export default function ConfigurationCards({
         {t('domain_tab_general_information_configuration')}
       </ManagerTile.Title>
       <ManagerTile.Divider />
-      <ManagerTile.Item>
-        <ManagerTile.Item.Label>Serveur DNS</ManagerTile.Item.Label>
-        <ManagerTile.Item.Description>
-          <Badge color={BADGE_COLOR.success} className="mt-4">
-            Enregistré
-          </Badge>
-        </ManagerTile.Item.Description>
-      </ManagerTile.Item>
+      <DnsState
+        domainResource={domainResource}
+        serviceName={serviceName}
+        anycastOption={anycastOption}
+        isFetchingAnycastOption={isFetchingAnycastOption}
+        anycastTerminateModalOpen={anycastTerminateModalOpen}
+        setAnycastTerminateModalOpen={setAnycastTerminateModalOpen}
+        restoreAnycast={restoreAnycast}
+        setRestoreAnycast={setRestoreAnycast}
+      />
       <ManagerTile.Divider />
       <DnssecToggleStatus
         dnssecModalOpened={dnssecModalOpened}
@@ -302,6 +305,15 @@ export default function ConfigurationCards({
           handleUpdateDataProtection();
         }}
       />
+      <AnycastTerminateModal
+        serviceName={serviceName}
+        restore={restoreAnycast}
+        anycastTerminateModalOpen={anycastTerminateModalOpen}
+        expirationDate={anycastOption?.expirationDate}
+        onOpenAnycastTerminateModal={() =>
+          setAnycastTerminateModalOpen(!anycastTerminateModalOpen)
+        }
+      />
     </ManagerTile>
   );
 }

packages/manager/apps/web-domains/src/domain/components/ConfigurationCards/DataProtection.spec.tsx

@@ -1,14 +1,13 @@
 import '@/common/setupTests';
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { vi } from 'vitest';
 import { wrapper } from '@/common/utils/test.provider';
 import DataProtection from './DataProtection';
 import {
   TDomainResource,
   DisclosureConfigurationEnum,
-  DataProtectionStatus,
 } from '@/domain/types/domainResource';
 import { DnsConfigurationTypeEnum } from '@/domain/enum/dnsConfigurationType.enum';
 import { DomainStateEnum } from '@/domain/enum/domainState.enum';

packages/manager/apps/web-domains/src/domain/components/ConfigurationCards/DnsState.spec.tsx

@@ -41,11 +41,35 @@ describe('DnsState component', () => {
         ],
         dnssecSupported: true,
       },
+      hostsConfiguration: {
+        ipv4Supported: true,
+        ipv6Supported: true,
+        multipleIPsSupported: true,
+        hostSupported: true,
+        hosts: [],
+      },
+      contactsConfiguration: {
+        contactAdministrator: {
+          id: 'contact-admin-id',
+        },
+        contactBilling: {
+          id: 'contact-billing-id',
+        },
+        contactTechnical: {
+          id: 'contact-tech-id',
+        },
+        contactOwner: {
+          id: 'contact-owner-id',
+        },
+      },
       extension: '.com',
       mainState: DomainStateEnum.OK,
       name: 'example.com',
       protectionState: ProtectionStateEnum.UNPROTECTED,
       suspensionState: SuspensionStateEnum.NOT_SUSPENDED,
+      authInfoManagedByOVHcloud: true,
+      authInfoSupported: true,
+      createdAt: '2024-01-01T00:00:00Z',
     },
     currentTasks: [],
     iam: null,
@@ -85,7 +109,7 @@ describe('DnsState component', () => {
   });
 
   it('renders tooltip with anycast label when anycast is subscribed', () => {
-    render(
+    const { container } = render(
       <DnsState
         domainResource={mockDomainResource}
         serviceName="example-service"
@@ -102,9 +126,10 @@ describe('DnsState component', () => {
       { wrapper },
     );
 
-    expect(
-      screen.getByText('domain_dns_tab_button_cancel_terminate_anycast'),
-    ).toBeInTheDocument();
+    const button = container.querySelector(
+      'ods-button[label*="domain_dns_tab_button_cancel_terminate_anycast"]',
+    );
+    expect(button).toBeInTheDocument();
   });
 
   it('renders tooltip with anycast label when anycast is released', () => {
@@ -113,7 +138,7 @@ describe('DnsState component', () => {
       state: OptionStateEnum.RELEASED,
     };
 
-    render(
+    const { container } = render(
       <DnsState
         serviceName="example-service"
         domainResource={mockDomainResource}
@@ -130,13 +155,14 @@ describe('DnsState component', () => {
       { wrapper },
     );
 
-    expect(
-      screen.getByText('domain_dns_tab_button_cancel_terminate_anycast'),
-    ).toBeInTheDocument();
+    const button = container.querySelector(
+      'ods-button[label*="domain_dns_tab_button_cancel_terminate_anycast"]',
+    );
+    expect(button).toBeInTheDocument();
   });
 
   it('renders tooltip with anycast label when anycast is not set', () => {
-    render(
+    const { container } = render(
       <DnsState
         domainResource={mockDomainResource}
         serviceName="example-service"
@@ -150,8 +176,9 @@ describe('DnsState component', () => {
       { wrapper },
     );
 
-    expect(
-      screen.getByText('domain_dns_tab_button_order_anycast'),
-    ).toBeInTheDocument();
+    const button = container.querySelector(
+      'ods-button[label="domain_tab_DNS_anycast_order"]',
+    );
+    expect(button).toBeInTheDocument();
   });
 });

packages/manager/apps/web-domains/src/domain/components/ConfigurationCards/DnsState.tsx

@@ -1,22 +1,13 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { ManagerTile, useFormatDate } from '@ovh-ux/manager-react-components';
-import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 import {
-  Button,
-  BUTTON_VARIANT,
-  Icon,
-  ICON_NAME,
-  Link,
-  Text,
-  TEXT_PRESET,
-  Tooltip,
-  TOOLTIP_POSITION,
-  TooltipContent,
-  TooltipTrigger,
-} from '@ovhcloud/ods-react';
-import { useGetDomainResource } from '@/domain/hooks/data/query';
+  ActionMenu,
+  ManagerTile,
+  useFormatDate,
+} from '@ovh-ux/manager-react-components';
+import { NAMESPACES } from '@ovh-ux/manager-common-translations';
+import { Text, TEXT_PRESET } from '@ovhcloud/ods-react';
 import { getDnsStateDetails } from '@/domain/utils/dnsUtils';
 import { OptionStateEnum } from '@/domain/enum/optionState.enum';
 import { useGenerateUrl } from '@/domain/hooks/generateUrl/useGenerateUrl';
@@ -46,7 +37,6 @@ export default function DnsState({
   setRestoreAnycast,
 }: DnsStateProps) {
   const { t } = useTranslation(['domain', NAMESPACES.ACTIONS]);
-  const [btnOpenned, setBtnOpenned] = React.useState(false);
 
   const formatDate = useFormatDate();
 
@@ -76,7 +66,7 @@ export default function DnsState({
 
   const handleAnycastLabel = () => {
     if (!anycastOption) {
-      return t('domain_dns_tab_button_order_anycast');
+      return t('domain_tab_DNS_anycast_order');
     }
 
     if (anycastOption && restoreAnycast) {
@@ -112,22 +102,18 @@ export default function DnsState({
         <div className="flex items-center justify-between">
           <Text preset={TEXT_PRESET.label}>{t(dnsState.label)}</Text>
           {dnsState.anycastSupported && (
-            <Tooltip open={btnOpenned} position={TOOLTIP_POSITION.bottom}>
-              <TooltipTrigger asChild>
-                <Button
-                  variant={BUTTON_VARIANT.outline}
-                  onClick={() => setBtnOpenned(!btnOpenned)}
-                  loading={isFetchingAnycastOption}
-                >
-                  <Icon name={ICON_NAME.ellipsisVertical} />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent withArrow={true}>
-                <Link onClick={() => handleBtnClick()}>
-                  {handleAnycastLabel()}
-                </Link>
-              </TooltipContent>
-            </Tooltip>
+            <ActionMenu
+              id="anycast-service"
+              isCompact
+              isLoading={isFetchingAnycastOption}
+              items={[
+                {
+                  id: 1,
+                  label: handleAnycastLabel(),
+                  onClick: () => handleBtnClick(),
+                },
+              ]}
+            />
           )}
         </div>
         <Text preset={TEXT_PRESET.paragraph}>

packages/manager/apps/web-domains/src/domain/constants/configuration.card.ts

@@ -2,11 +2,7 @@ import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 import { BADGE_COLOR } from '@ovhcloud/ods-react';
 import { ProtectionStateEnum } from '@/domain/enum/protectionState.enum';
 import { DataProtectionStatus } from '../types/domainResource';
-import {
-  ActiveConfigurationTypeEnum,
-  DnsConfigurationTypeEnum,
-} from '../enum/dnsConfigurationType.enum';
-import { PublicNameServerTypeEnum } from '../enum/publicNameServerType.enum';
+import { DnsConfigurationTypeEnum } from '../enum/dnsConfigurationType.enum';
 
 export const ConfigurationDnssecBadgeColorAndContent = {
   not_supported: {
@@ -161,7 +157,7 @@ export const ConfigurationDnsStateAndContent = [
   {
     dnsTypes: [DnsConfigurationTypeEnum.DEDICATED],
     result: {
-      label: 'domain_tab_general_information_dns_dedicad',
+      label: 'domain_tab_general_information_dns_dedicated',
       notes: '',
       anycastSupported: false,
     },