feat(pci-load-balancer): add rename health monitor modal

DTCORE-2771

Signed-off-by: LIDRISSI Hamid <[email protected]>

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_de_DE.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Namen ändern",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Name",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Abbrechen",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Ändern"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_en_GB.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Change name",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Name",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Cancel",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Edit"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_es_ES.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Cambiar el nombre",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Nombre",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Cancelar",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Editar"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_fr_CA.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Modifier le nom",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Nom",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Annuler",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Modifier"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_fr_FR.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Modifier le nom",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Nom",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Annuler",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Modifier"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_it_IT.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Modifica il nome",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Nome",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Annullare",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Modificare"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_pl_PL.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Zmień nazwę",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Nazwa",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Anuluj",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Zmień"
+}

packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_pt_PT.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_title": "Alterar o nome",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_label": "Nome",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel": "Anular",
+  "octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm": "Alterar"
+}

packages/manager/apps/pci-load-balancer/src/api/data/health-monitor.ts

@@ -117,3 +117,14 @@ export const editHealthMonitor = (
     body,
   );
 };
+
+export const renameHealthMonitor = (
+  projectId: string,
+  region: string,
+  healthMonitorId: string,
+  name: string,
+) =>
+  v6.put(
+    `/cloud/project/${projectId}/region/${region}/loadbalancing/healthMonitor/${healthMonitorId}`,
+    { name },
+  );

packages/manager/apps/pci-load-balancer/src/api/hook/useHealthMonitor.tsx

@@ -4,6 +4,7 @@ import {
   deleteHealthMonitor,
   editHealthMonitor,
   getHealthMonitor,
+  renameHealthMonitor,
   THealthMonitorFormState,
 } from '../data/health-monitor';
 import queryClient from '@/queryClient';
@@ -120,3 +121,29 @@ export const useEditHealthMonitor = ({
     ...mutation,
   };
 };
+
+type RenameHealthMonitorProps = EditHealthMonitorProps;
+
+export const useRenameHealthMonitor = ({
+  projectId,
+  region,
+  healthMonitorId,
+  onError,
+  onSuccess,
+}: RenameHealthMonitorProps) => {
+  const mutation = useMutation({
+    mutationFn: async (name: string) =>
+      renameHealthMonitor(projectId, region, healthMonitorId, name),
+    onError,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['health-monitor'],
+      });
+      onSuccess();
+    },
+  });
+  return {
+    renameHealthMonitor: (name: string) => mutation.mutate(name),
+    ...mutation,
+  };
+};

packages/manager/apps/pci-load-balancer/src/components/form/HealthMonitorForm.page.tsx

@@ -84,7 +84,7 @@ export default function HealthMonitorForm({
 
   const [isNameTouched, setIsNameTouched] = useState(false);
 
-  const validateField = (name: keyof THealthMonitorFormState, value: any) => {
+  const validateField = (name: keyof THealthMonitorFormState, value) => {
     const newErrors: THealthMonitorFormErrors = { ...errors };
 
     if (name === 'name' && isNameTouched) {

packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/HealthMonitor.tsx

@@ -119,7 +119,7 @@ export default function HealthMonitor() {
                     color={ODS_THEME_COLOR_INTENT.primary}
                     size={ODS_BUTTON_SIZE.sm}
                     variant={ODS_BUTTON_VARIANT.ghost}
-                    href=""
+                    href={useHref('edit-name')}
                   >
                     <OsdsIcon
                       size={ODS_ICON_SIZE.xxs}

packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/rename/RenameHealthMonitor.page.tsx

@@ -0,0 +1,132 @@
+import { ApiError } from '@ovh-ux/manager-core-api';
+import { PciModal } from '@ovh-ux/manager-pci-common';
+import { useNotifications } from '@ovh-ux/manager-react-components';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { ODS_INPUT_TYPE } from '@ovhcloud/ods-components';
+import {
+  OsdsFormField,
+  OsdsInput,
+  OsdsText,
+} from '@ovhcloud/ods-components/react';
+import { useMemo, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import { HEALTH_MONITOR_NAME_REGEX } from '@/constants';
+import LabelComponent from '@/components/form/Label.component';
+import {
+  useGetHealthMonitor,
+  useRenameHealthMonitor,
+} from '@/api/hook/useHealthMonitor';
+
+export default function RenameHealthMonitorPage() {
+  const { t } = useTranslation(
+    'octavia-load-balancer-health-monitor-edit-name',
+  );
+  const { t: tForm } = useTranslation(
+    'octavia-load-balancer-health-monitor-form',
+  );
+  const { t: tCommon } = useTranslation('pci-common');
+
+  const navigate = useNavigate();
+  const { addSuccess, addError } = useNotifications();
+
+  const { projectId, region, poolId } = useParams();
+
+  const {
+    data: healthMonitor,
+    isPending: isHealthMonitorPending,
+  } = useGetHealthMonitor({
+    projectId,
+    region,
+    poolId,
+  });
+
+  const [isNameTouched, setIsNameTouched] = useState(false);
+  const [editedName, setEditedName] = useState(healthMonitor?.name);
+
+  const {
+    renameHealthMonitor,
+    isPending: isEditionPending,
+  } = useRenameHealthMonitor({
+    projectId,
+    region,
+    healthMonitorId: healthMonitor?.id,
+    onError(error: ApiError) {
+      addError(
+        <Trans
+          i18nKey="octavia_load_balancer_global_error"
+          ns="octavia-load-balancer"
+          values={{
+            message: error?.response?.data?.message || error?.message || null,
+            requestId: error?.config?.headers['X-OVH-MANAGER-REQUEST-ID'],
+          }}
+        />,
+        true,
+      );
+      navigate('..');
+    },
+    onSuccess() {
+      addSuccess(
+        <Trans
+          i18nKey="octavia_load_balancer_health_monitor_detail_overview_edit_name_success"
+          ns="octavia-load-balancer-health-monitor"
+        />,
+        true,
+      );
+      navigate('..');
+    },
+  });
+
+  const nameError = useMemo(() => {
+    if (isNameTouched) {
+      if (!editedName) {
+        return tCommon('common_field_error_required');
+      }
+      if (!HEALTH_MONITOR_NAME_REGEX.test(editedName)) {
+        return tCommon('common_field_error_pattern');
+      }
+    }
+    return '';
+  }, [editedName, isNameTouched]);
+
+  return (
+    <PciModal
+      title={t(
+        'octavia_load_balancer_health_monitor_detail_overview_edit_name_title',
+      )}
+      onConfirm={() => renameHealthMonitor(editedName)}
+      onClose={() => navigate('..')}
+      onCancel={() => navigate('..')}
+      isPending={isEditionPending || isHealthMonitorPending}
+      submitText={t(
+        'octavia_load_balancer_health_monitor_detail_overview_edit_name_confirm',
+      )}
+      cancelText={t(
+        'octavia_load_balancer_health_monitor_detail_overview_edit_name_cancel',
+      )}
+      isDisabled={!!nameError}
+    >
+      <OsdsFormField className="my-8" error={nameError}>
+        <LabelComponent
+          text={t(
+            'octavia_load_balancer_health_monitor_detail_overview_edit_name_label',
+          )}
+          hasError={!!nameError}
+        />
+
+        <OsdsInput
+          name="name"
+          type={ODS_INPUT_TYPE.text}
+          value={editedName}
+          error={!!nameError}
+          onOdsValueChange={(event) => setEditedName(event.detail.value)}
+          onKeyDown={() => setIsNameTouched(true)}
+        />
+
+        <OsdsText slot="helper" color={ODS_THEME_COLOR_INTENT.text}>
+          {tForm('octavia_load_balancer_health_monitor_form_name_help')}
+        </OsdsText>
+      </OsdsFormField>
+    </PciModal>
+  );
+}

packages/manager/apps/pci-load-balancer/src/routes.tsx

@@ -35,6 +35,7 @@ export const ROUTE_PATHS = {
   POOL_HEALTH_MONITOR: 'health-monitor',
   POOL_HEALTH_MONITOR_CREATE: 'health-monitor/create',
   POOL_HEALTH_MONITOR_EDIT: 'health-monitor/edit',
+  POOL_HEALTH_MONITOR_EDIT_NAME: 'edit-name',
   STATISTICS: 'statistics',
   CERTIFICATES: 'certificates',
   LOGS: 'logs',
@@ -136,6 +137,11 @@ const HealthMonitorEditPage = lazy(() =>
     '@/pages/detail/pools/detail/health-monitor/edit/HealthMonitorEdit.page'
   ),
 );
+const HealthMonitorEditNamePage = lazy(() =>
+  import(
+    '@/pages/detail/pools/detail/health-monitor/rename/RenameHealthMonitor.page'
+  ),
+);
 
 const StatisticsPage = lazy(() =>
   import('@/pages/detail/statistics/Statistics.page'),
@@ -225,6 +231,11 @@ const Routes = (
           path={ROUTE_PATHS.POOL_DELETE}
           Component={HealthMonitorDeletePage}
         />
+        <Route
+          id="health-monitor-rename"
+          path={ROUTE_PATHS.POOL_HEALTH_MONITOR_EDIT_NAME}
+          Component={HealthMonitorEditNamePage}
+        />
       </Route>
       <Route
         id="health-monitor-create"