fix(web-domain): add dns state + transfer

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

@@ -247,6 +247,13 @@
   "domain_tab_general_information_data_drawer_contact_field_phone": "Téléphone",
   "domain_tab_general_information_data_drawer_contact_field_province": "Province",
   "domain_tab_general_information_data_drawer_contact_field_zip": "Code postal",
+  "domain_tab_general_information_dns_title": "Serveur DNS",
+  "domain_tab_general_information_dns_standard": "Standard",
+  "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_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",
   "domain_tab_DNS_modification_form_ip_field": "IP associée",

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

@@ -4,6 +4,7 @@ import { ManagerTile } from '@ovh-ux/manager-react-components';
 import { Badge, BADGE_COLOR } from '@ovhcloud/ods-react';
 import {
   useGetDnssecStatus,
+  useGetDomainAnycastOption,
   useGetDomainAuthInfo,
   useGetDomainResource,
   useTransferTag,
@@ -25,6 +26,8 @@ import {
   DisclosureConfigurationEnum,
   TContactsConfigurationAPI,
 } from '@/domain/types/domainResource';
+import DnsState from './DnsState';
+import AnycastTerminateModal from '../AnycastOrder/AnycastTerminateModal';
 
 interface ConfigurationCardsProps {
   readonly serviceName: string;
@@ -36,6 +39,9 @@ export default function ConfigurationCards({
   const { t } = useTranslation(['domain']);
   const { domainResource } = useGetDomainResource(serviceName);
   const { authInfo, isAuthInfoLoading } = useGetDomainAuthInfo(serviceName);
+  const { anycastOption, isFetchingAnycastOption } = useGetDomainAnycastOption(
+    serviceName,
+  );
   const [dnssecModalOpened, setDnssecModalOpened] = React.useState<boolean>(
     false,
   );
@@ -48,6 +54,11 @@ export default function ConfigurationCards({
     setDataProtectionDrawerOpened,
   ] = React.useState<boolean>(false);
   const [tag, setTag] = React.useState<string>('');
+  const [
+    anycastTerminateModalOpen,
+    setAnycastTerminateModalOpen,
+  ] = React.useState<boolean>(false);
+  const [restoreAnycast, setRestoreAnycast] = React.useState<boolean>(false);
   const [
     transferAuthInfoModalOpened,
     setTransferAuthInfoModalOpened,
@@ -213,93 +224,96 @@ export default function ConfigurationCards({
   }
 
   return (
-    <>
-      {dataProtectionDrawerOpened && (
-        <div
-          className="fixed inset-0 bg-[--ods-color-primary-500] opacity-75 z-40"
-          onClick={() => setDataProtectionDrawerOpened(false)}
-        />
-      )}
-      <ManagerTile>
-        <ManagerTile.Title>
-          {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>
-        <ManagerTile.Divider />
-        <DnssecToggleStatus
-          dnssecModalOpened={dnssecModalOpened}
-          dnssecStatus={dnssecStatus}
-          domainResource={domainResource}
-          isDnssecStatusLoading={isDnssecStatusLoading}
-          setDnssecModalOpened={setDnssecModalOpened}
-        />
-        <ManagerTile.Divider />
-        <TransferToggleStatus
-          domainResource={domainResource}
-          transferModalOpened={transferModalOpened}
-          setTransferModalOpened={setTransferModalOpened}
-          setTransferAuthInfoModalOpened={setTransferAuthInfoModalOpened}
-          setTagModalOpened={setTagModalOpened}
-        />
-        <ManagerTile.Divider />
-        <DataProtection
-          domainResource={domainResource}
-          setDataProtectionDrawerOpened={setDataProtectionDrawerOpened}
-        />
-        <DnssecModal
-          action={dnssecStatus?.status}
-          open={dnssecModalOpened}
-          updateDnssec={updateDnssec}
-          onClose={() => setDnssecModalOpened(!dnssecModalOpened)}
-        />
-        <TransferModal
-          serviceName={serviceName}
-          action={domainResource?.currentState.protectionState}
-          open={transferModalOpened}
-          updateDomain={() => handleUpdateProtectionState()}
-          onClose={() => setTransferModalOpened(!transferModalOpened)}
-        />
-        <TransferAuthInfoModal
-          authInfo={authInfo}
-          authInfoManagedByOVH={
-            domainResource?.currentState?.authInfoManagedByOVHcloud
-          }
-          isAuthInfoLoading={isAuthInfoLoading}
-          onClose={() =>
-            setTransferAuthInfoModalOpened(!transferAuthInfoModalOpened)
-          }
-          open={transferAuthInfoModalOpened}
-        />
-        <TransferTagModal
-          tag={tag}
-          setTag={setTag}
-          handleTag={handleTag}
-          serviceName={serviceName}
-          isTransferTagPending={isTransferTagPending}
-          transferTagError={transferTagError}
-          open={tagModalOpened}
-          onClose={() => setTagModalOpened(!tagModalOpened)}
-        />
-        <DataProtectionDrawer
-          isDrawerOpen={dataProtectionDrawerOpened}
-          onClose={() => setDataProtectionDrawerOpened(false)}
-          domainResource={domainResource}
-          visibleContacts={visibleContacts}
-          selectedContacts={selectedContacts}
-          onCheckboxChange={handleCheckboxChange}
-          onClick={() => {
-            handleUpdateDataProtection();
-          }}
-        />
-      </ManagerTile>
-    </>
+    <ManagerTile>
+      <ManagerTile.Title>
+        {t('domain_tab_general_information_configuration')}
+      </ManagerTile.Title>
+      <ManagerTile.Divider />
+      <DnsState
+        domainResource={domainResource}
+        serviceName={serviceName}
+        anycastOption={anycastOption}
+        isFetchingAnycastOption={isFetchingAnycastOption}
+        anycastTerminateModalOpen={anycastTerminateModalOpen}
+        setAnycastTerminateModalOpen={setAnycastTerminateModalOpen}
+        restoreAnycast={restoreAnycast}
+        setRestoreAnycast={setRestoreAnycast}
+      />
+      <ManagerTile.Divider />
+      <DnssecToggleStatus
+        dnssecModalOpened={dnssecModalOpened}
+        dnssecStatus={dnssecStatus}
+        domainResource={domainResource}
+        isDnssecStatusLoading={isDnssecStatusLoading}
+        setDnssecModalOpened={setDnssecModalOpened}
+      />
+      <ManagerTile.Divider />
+      <TransferToggleStatus
+        domainResource={domainResource}
+        transferModalOpened={transferModalOpened}
+        setTransferModalOpened={setTransferModalOpened}
+        setTransferAuthInfoModalOpened={setTransferAuthInfoModalOpened}
+        setTagModalOpened={setTagModalOpened}
+      />
+      <DnssecModal
+        action={dnssecStatus?.status}
+        open={dnssecModalOpened}
+        updateDnssec={updateDnssec}
+        onClose={() => setDnssecModalOpened(!dnssecModalOpened)}
+      />
+      <ManagerTile.Divider />
+      <DataProtection
+        domainResource={domainResource}
+        setDataProtectionDrawerOpened={setDataProtectionDrawerOpened}
+      />
+      <TransferModal
+        serviceName={serviceName}
+        action={domainResource?.currentState.protectionState}
+        open={transferModalOpened}
+        updateDomain={() => handleUpdateProtectionState()}
+        onClose={() => setTransferModalOpened(!transferModalOpened)}
+      />
+      <TransferAuthInfoModal
+        authInfo={authInfo}
+        authInfoManagedByOVH={
+          domainResource?.currentState?.authInfoManagedByOVHcloud
+        }
+        isAuthInfoLoading={isAuthInfoLoading}
+        onClose={() =>
+          setTransferAuthInfoModalOpened(!transferAuthInfoModalOpened)
+        }
+        open={transferAuthInfoModalOpened}
+      />
+      <TransferTagModal
+        tag={tag}
+        setTag={setTag}
+        handleTag={handleTag}
+        serviceName={serviceName}
+        isTransferTagPending={isTransferTagPending}
+        transferTagError={transferTagError}
+        open={tagModalOpened}
+        onClose={() => setTagModalOpened(!tagModalOpened)}
+      />
+      <DataProtectionDrawer
+        isDrawerOpen={dataProtectionDrawerOpened}
+        onClose={() => setDataProtectionDrawerOpened(false)}
+        domainResource={domainResource}
+        visibleContacts={visibleContacts}
+        selectedContacts={selectedContacts}
+        onCheckboxChange={handleCheckboxChange}
+        onClick={() => {
+          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';