From 443163c145138c9b46112e99386918a8496a6c46 Mon Sep 17 00:00:00 2001
From: LIDRISSI Hamid <lidrissi.hamid@gmail.com>
Date: Thu, 17 Oct 2024 15:01:32 +0200
Subject: [PATCH] feat(pci-load-balancer): add rename health monitor modal

DTCORE-2771

Signed-off-by: LIDRISSI Hamid <lidrissi.hamid@gmail.com>
---
 .../Messages_de_DE.json                       |   6 +
 .../Messages_en_GB.json                       |   6 +
 .../Messages_es_ES.json                       |   6 +
 .../Messages_fr_CA.json                       |   6 +
 .../Messages_fr_FR.json                       |   6 +
 .../Messages_it_IT.json                       |   6 +
 .../Messages_pl_PL.json                       |   6 +
 .../Messages_pt_PT.json                       |   6 +
 .../src/api/data/health-monitor.ts            |  12 ++
 .../src/api/hook/useHealthMonitor.tsx         |  27 ++++
 .../detail/health-monitor/HealthMonitor.tsx   |   2 +-
 .../rename/RenameHealthMonitor.page.tsx       | 131 ++++++++++++++++++
 .../apps/pci-load-balancer/src/routes.tsx     |  11 ++
 13 files changed, 230 insertions(+), 1 deletion(-)
 create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_de_DE.json
 create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_en_GB.json
 create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_es_ES.json
 create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_fr_CA.json
 create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_fr_FR.json
 create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_it_IT.json
 create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_pl_PL.json
 create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_pt_PT.json
 create mode 100644 packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/rename/RenameHealthMonitor.page.tsx

diff --git a/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_de_DE.json b/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_de_DE.json
new file mode 100644
index 000000000000..d27e66bd4d90
--- /dev/null
+++ b/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"
+}
diff --git a/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_en_GB.json b/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_en_GB.json
new file mode 100644
index 000000000000..efa9e56ab1d3
--- /dev/null
+++ b/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"
+}
diff --git a/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_es_ES.json b/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_es_ES.json
new file mode 100644
index 000000000000..f097aa9a2f74
--- /dev/null
+++ b/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"
+}
diff --git a/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_fr_CA.json b/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_fr_CA.json
new file mode 100644
index 000000000000..570c38ad6ce9
--- /dev/null
+++ b/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"
+}
diff --git a/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_fr_FR.json b/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_fr_FR.json
new file mode 100644
index 000000000000..570c38ad6ce9
--- /dev/null
+++ b/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"
+}
diff --git a/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_it_IT.json b/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_it_IT.json
new file mode 100644
index 000000000000..a467eb4bf5a0
--- /dev/null
+++ b/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"
+}
diff --git a/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_pl_PL.json b/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_pl_PL.json
new file mode 100644
index 000000000000..27339ed96054
--- /dev/null
+++ b/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ń"
+}
diff --git a/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_pt_PT.json b/packages/manager/apps/pci-load-balancer/public/translations/octavia-load-balancer-health-monitor-edit-name/Messages_pt_PT.json
new file mode 100644
index 000000000000..69a99307f00c
--- /dev/null
+++ b/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"
+}
diff --git a/packages/manager/apps/pci-load-balancer/src/api/data/health-monitor.ts b/packages/manager/apps/pci-load-balancer/src/api/data/health-monitor.ts
index cb678235a4c9..6014efc90182 100644
--- a/packages/manager/apps/pci-load-balancer/src/api/data/health-monitor.ts
+++ b/packages/manager/apps/pci-load-balancer/src/api/data/health-monitor.ts
@@ -117,3 +117,15 @@ export const editHealthMonitor = (
     body,
   );
 };
+
+export const renameHealthMonitor = (
+  projectId: string,
+  region: string,
+  healthMonitorId: string,
+  name: string,
+) => {
+  return v6.put(
+    `/cloud/project/${projectId}/region/${region}/loadbalancing/healthMonitor/${healthMonitorId}`,
+    { name },
+  );
+};
diff --git a/packages/manager/apps/pci-load-balancer/src/api/hook/useHealthMonitor.tsx b/packages/manager/apps/pci-load-balancer/src/api/hook/useHealthMonitor.tsx
index 7f52893cbcba..1d3ded8b1cd6 100644
--- a/packages/manager/apps/pci-load-balancer/src/api/hook/useHealthMonitor.tsx
+++ b/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,
+  };
+};
diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/HealthMonitor.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/HealthMonitor.tsx
index 02547bf2727c..f9f7a436db57 100644
--- a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/HealthMonitor.tsx
+++ b/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}
diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/rename/RenameHealthMonitor.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/rename/RenameHealthMonitor.page.tsx
new file mode 100644
index 000000000000..9772f9f8c3d2
--- /dev/null
+++ b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/rename/RenameHealthMonitor.page.tsx
@@ -0,0 +1,131 @@
+import {
+  useGetHealthMonitor,
+  useRenameHealthMonitor,
+} from '@/api/hook/useHealthMonitor';
+import LabelComponent from '@/components/form/Label.component';
+import { HEALTH_MONITOR_NAME_REGEX } from '@/constants';
+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, Translation, useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+
+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');
+      } else 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>
+  );
+}
diff --git a/packages/manager/apps/pci-load-balancer/src/routes.tsx b/packages/manager/apps/pci-load-balancer/src/routes.tsx
index c793ec7a8e76..53a820519772 100644
--- a/packages/manager/apps/pci-load-balancer/src/routes.tsx
+++ b/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"