feat(web-domains-data): hosts - delete (#20413)

ref: #DCE-25

Signed-off-by: Louis BENSI <[email protected]>

Author: louisbensiovh

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

@@ -47,6 +47,7 @@
   "domain_tab_name_host": "Hosts",
   "domain_tab_name_ds_records": "DS Records",
   "domain_tab_name_contact_management": "Gestion des contacts",
+  "domain_tab_name_not_supported": "La fonctionnalité n’est pas supportée pour cette extension.",
   "domain_back_to_service_list": "Retour à la liste de services",
   "domain_back_to_service_details": "Retour aux informations générales",
   "domain_back_to_previous_page": "Retour à la page précédente",
@@ -278,6 +279,10 @@
   "domain_tab_hosts_drawer_add_invalid_ips": "Une ou plusieurs adresses IP sont invalides. Veuillez saisir des adresses IPv4 ou IPv6 valides.",
   "domain_tab_hosts_drawer_add_duplicate_ips": "Il y a une ou plusieurs IP dupliqué(es) dans la saisie",
   "domain_tab_hosts_drawer_add_success_message": "{{ host }} a été ajouté avec succès",
-  "domain_tab_hosts_drawer_modify_success_message": "{{ host }} est en cours de modification",
-  "domain_tab_hosts_drawer_add_error_message": "Une erreur a été détectée lors de l'ajout de l'hôte : {{ error }}"
+  "domain_tab_hosts_drawer_modify_success_message": "{{ host }} a été modifié avec succès",
+  "domain_tab_hosts_drawer_add_error_message": "Une erreur a été détectée lors de l'ajout de l'hôte : {{ error }}",
+  "domain_tab_hosts_modal_delete_title": "Supprimer l'hôte {{hostname}}",
+  "domain_tab_hosts_modal_delete_information_message": "Êtes-vous sur de voulour supprimer cet hôte ?",
+  "domain_tab_hosts_modal_delete_success_message": "L'hôte est en cours de suppression",
+  "domain_tab_hosts_modal_delete_error_message": "Une erreur a été détectée lors de la suppression de l'hôte"
 }

packages/manager/apps/web-domains/src/domain/components/DatagridColumns/Domain/DatagridColumnActions.tsx

@@ -1,9 +1,6 @@
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 import { ActionMenu, ActionMenuItem } from '@ovh-ux/manager-react-components';
-import {
-  useNavigation,
-  useNavigationGetUrl,
-} from '@ovh-ux/manager-react-shell-client';
+import { useNavigation } from '@ovh-ux/manager-react-shell-client';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ODS_BUTTON_COLOR } from '@ovhcloud/ods-components';
@@ -15,6 +12,9 @@ import {
 } from '@/common/enum/common.enum';
 import { DomainServiceStateEnum } from '@/domain/types/domainResource';
 import { DOMAIN } from '@/common/constants';
+import { urls } from '@/domain/routes/routes.constant';
+import { useGenerateUrl } from '@/common/hooks/generateUrl/useGenerateUrl';
+import { useNavigate } from 'react-router-dom';
 
 interface DatagridColumnActionsProps {
   readonly serviceName: string;
@@ -32,7 +32,11 @@ export default function DatagridColumnActions({
     NAMESPACES.ACTIONS,
     NAMESPACES.CONTACT,
   ]);
+  const domainDetailUrl = useGenerateUrl(urls.domainDetail, 'path', {
+    serviceName,
+  });
 
+  const navigate = useNavigate();
   const { navigateTo } = useNavigation();
 
   const { serviceInfo, isServiceInfoLoading } = useGetServiceInformation(
@@ -46,7 +50,7 @@ export default function DatagridColumnActions({
       {
         id: 1,
         label: t(`${NAMESPACES.ACTIONS}:see_details`),
-        href: `/domain/${serviceName}/information`,
+        onClick: () => navigate(domainDetailUrl),
       },
     ];
 

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

@@ -55,18 +55,21 @@ export default function HostDrawer({
   const formData = useForm({
     mode: 'onChange',
     values: {
-      host:
-        drawer.action === DrawerActionEnum.Modify
-          ? hostData.host.split('.')[0]
-          : '',
-      ips:
-        drawer.action === DrawerActionEnum.Modify ? String(hostData.ips) : '',
+      host: isAddAction ? '' : hostData.host.split('.')[0],
+      ips: isAddAction ? '' : String(hostData.ips),
     },
   });
 
-  const { handleSubmit, formState, clearErrors } = formData;
+  const { handleSubmit, formState, clearErrors, reset } = formData;
 
   const onDismiss = () => {
+    // We added the if here to allow the input to be empty if you re-open the drawer on add mode.
+    if (isAddAction) {
+      reset({
+        host: '',
+        ips: '',
+      });
+    }
     setDrawer({
       isOpen: false,
       action: null,

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

@@ -1,12 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
 import {
+  Icon,
+  ICON_NAME,
   Tab,
   TabContent,
   TabList,
   Tabs,
   TabsValueChangeEvent,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from '@ovhcloud/ods-react';
 import { useNotifications } from '@ovh-ux/manager-react-components';
 import { ServiceDetailTabsProps } from '@/domain/constants/serviceDetail';
@@ -44,13 +49,44 @@ export default function ServiceDetailsTabs({
     }
   }, [location.pathname]);
 
+  const isDisabled = (value: string, name: string, bool: boolean) => {
+    if (value.includes(name) && bool) {
+      return true;
+    }
+    return false;
+  };
+
   return (
     <Tabs defaultValue={value} onValueChange={handleValueChange} value={value}>
       <TabList>
         {ServiceDetailTabsProps.map((tab) => {
           return (
-            <Tab key={tab.id} value={tab.value} data-testid={tab.id}>
+            <Tab
+              key={tab.id}
+              value={tab.value}
+              data-testid={tab.id}
+              disabled={isDisabled(
+                tab.value,
+                'hosts',
+                !domainResource.currentState.hostsConfiguration.hostSupported,
+              )}
+              className="flex items-center gap-x-4"
+            >
               {t(tab.name)}
+              {isDisabled(
+                tab.value,
+                'hosts',
+                !domainResource.currentState.hostsConfiguration.hostSupported,
+              ) && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Icon name={ICON_NAME.circleInfo} />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    {t('domain_tab_name_not_supported')}
+                  </TooltipContent>
+                </Tooltip>
+              )}
             </Tab>
           );
         })}

packages/manager/apps/web-domains/src/domain/hooks/domainTabs/useHostsDatagridColumns.tsx

@@ -3,6 +3,7 @@ import { ActionMenu, DataGridTextCell } from '@ovh-ux/manager-react-components';
 import { ODS_BUTTON_COLOR, ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
 import { useTranslation } from 'react-i18next';
 import { Dispatch, SetStateAction } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { THost } from '@/domain/types/host';
 import DatagridColumnStatus from '@/domain/components/DatagridColumns/DatagridColumnStatus';
 import { StatusEnum } from '@/domain/enum/Status.enum';
@@ -24,6 +25,7 @@ export const useHostsDatagridColumns = ({
     NAMESPACES.ACTIONS,
     NAMESPACES.STATUS,
   ]);
+  const navigate = useNavigate();
 
   const columns = [
     {
@@ -66,6 +68,7 @@ export const useHostsDatagridColumns = ({
               label: t(`${NAMESPACES.ACTIONS}:delete`),
               color: ODS_BUTTON_COLOR.critical,
               isDisabled: props.status === StatusEnum.DELETING,
+              onClick: () => navigate(`${props.host}/delete`),
             },
           ]}
           id={props.host}

packages/manager/apps/web-domains/src/domain/pages/domainTabs/dns/dnsModify.tsx

@@ -32,9 +32,10 @@ import {
 } from '@/domain/hooks/data/query';
 import DnsConfigurationRadio from '@/domain/components/ModifyNameServer/DnsConfigurationRadio';
 import { TNameServer } from '@/domain/types/domainResource';
+import { NAMESPACES } from '@ovh-ux/manager-common-translations';
 
 export default function DnsModifyPage() {
-  const { t, i18n } = useTranslation('domain');
+  const { t, i18n } = useTranslation(['domain', NAMESPACES.ONBOARDING]);
   const { serviceName } = useParams<{ serviceName: string }>();
   const navigate = useNavigate();
   const langCode = getLanguageKey(i18n.language);
@@ -108,7 +109,7 @@ export default function DnsModifyPage() {
               className="text-[--ods-color-primary-500]"
               target="_blank"
             >
-              {t('domain_tab_DNS_modification_warning_message_guides')}
+              {t(`${NAMESPACES.ONBOARDING}:find_out_more`)}
               <Icon name={ICON_NAME.externalLink} />
             </Link>
           </MessageBody>

packages/manager/apps/web-domains/src/domain/pages/domainTabs/hosts/hostDelete.spec.tsx

@@ -0,0 +1,139 @@
+import '@/common/setupTests';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import HostDelete from '@/domain/pages/domainTabs/hosts/hostDelete';
+import { wrapper } from '@/common/utils/test.provider';
+import { urls } from '@/domain/routes/routes.constant';
+
+const updateDomain = vi.fn();
+const navigate = vi.fn();
+const addSuccess = vi.fn();
+const addError = vi.fn();
+
+vi.mock('@ovh-ux/manager-react-components', async () => {
+  const actual = await vi.importActual('@ovh-ux/manager-react-components');
+
+  type ModalProps = {
+    isOpen: boolean;
+    heading: string;
+    primaryLabel: string;
+    secondaryLabel: string;
+    onPrimaryButtonClick: () => void;
+    onSecondaryButtonClick: () => void;
+    children?: React.ReactNode;
+  };
+
+  return {
+    ...actual,
+    Modal: ({
+      isOpen,
+      heading,
+      primaryLabel,
+      secondaryLabel,
+      onPrimaryButtonClick,
+      onSecondaryButtonClick,
+      children,
+    }: ModalProps) =>
+      isOpen ? (
+        <div data-testid="modal">
+          <h1>{heading}</h1>
+          <button onClick={onSecondaryButtonClick}>{secondaryLabel}</button>
+          <button onClick={onPrimaryButtonClick}>{primaryLabel}</button>
+          {children}
+        </div>
+      ) : null,
+    useNotifications: () => ({
+      addSuccess,
+      addError,
+    }),
+  };
+});
+
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => navigate,
+  useParams: () => ({
+    serviceName: 'foobar',
+    hostname: 'ns1.foobar',
+  }),
+}));
+
+vi.mock('@/domain/hooks/data/query', () => ({
+  useGetDomainResource: vi.fn(() => ({
+    domainResource: {
+      checksum: 'xyz',
+      targetSpec: {
+        dnsConfiguration: {
+          nameServers: ['ns1.example.com', 'ns2.example.com'],
+        },
+        hostsConfiguration: {
+          hosts: [
+            { host: 'ns1.foobar', ips: ['1.1.1.1'] },
+            { host: 'ns2.foobar', ips: ['2.2.2.2'] },
+          ],
+        },
+      },
+      isFetchingDomainResource: false,
+    },
+  })),
+  useUpdateDomainResource: vi.fn(() => ({
+    updateDomain,
+    isUpdateDomainPending: false,
+  })),
+}));
+
+vi.mock('@/common/hooks/generateUrl/useGenerateUrl', () => ({
+  useGenerateUrl: () => '/domain/foobar/hosts',
+}));
+
+describe('HostDelete', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders modal with correct heading', () => {
+    render(<HostDelete />, { wrapper });
+    expect(
+      screen.getByText('domain_tab_hosts_modal_delete_title'),
+    ).toBeInTheDocument();
+  });
+
+  it('calls updateDomain with filtered hosts on delete click', () => {
+    render(<HostDelete />, { wrapper });
+    fireEvent.click(screen.getByRole('button', { name: /actions:delete/i }));
+
+    expect(updateDomain).toHaveBeenCalledTimes(1);
+    const call = updateDomain.mock.calls[0][0];
+    expect(call.hosts).toEqual([{ host: 'ns2.foobar', ips: ['2.2.2.2'] }]);
+    expect(call.checksum).toBe('xyz');
+  });
+
+  it('calls addSuccess + navigate on delete success', () => {
+    render(<HostDelete />, { wrapper });
+    fireEvent.click(screen.getByRole('button', { name: /actions:delete/i }));
+
+    const { onSuccess, onSettled } = updateDomain.mock.calls[0][1];
+    onSuccess();
+    onSettled();
+
+    expect(addSuccess).toHaveBeenCalledTimes(1);
+    expect(navigate).toHaveBeenCalledWith('/domain/foobar/hosts');
+  });
+
+  it('calls addError on delete error', () => {
+    render(<HostDelete />, { wrapper });
+    fireEvent.click(screen.getByRole('button', { name: /actions:delete/i }));
+
+    const { onError, onSettled } = updateDomain.mock.calls[0][1];
+    onError();
+    onSettled();
+
+    expect(addError).toHaveBeenCalledTimes(1);
+    expect(navigate).toHaveBeenCalledWith('/domain/foobar/hosts');
+  });
+
+  it('navigates back on cancel click', () => {
+    render(<HostDelete />, { wrapper });
+    fireEvent.click(screen.getByRole('button', { name: /actions:cancel/i }));
+    expect(navigate).toHaveBeenCalledWith('/domain/foobar/hosts');
+  });
+});