feat(pci-load-balancer): add edit pool member name modal

ref: DTCORE-2661
Signed-off-by: Yoann Fievez <[email protected]>

packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_de_DE.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_edit_name_title": "Den Namen Ihres Mitglieds ändern",
+  "octavia_load_balancer_pools_members_edit_name_label": "Name",
+  "octavia_load_balancer_pools_members_edit_name_cancel": "Abbrechen",
+  "octavia_load_balancer_pools_members_edit_name_confirm": "Ändern"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_en_GB.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_edit_name_title": "Change your member’s name",
+  "octavia_load_balancer_pools_members_edit_name_label": "Name",
+  "octavia_load_balancer_pools_members_edit_name_cancel": "Cancel",
+  "octavia_load_balancer_pools_members_edit_name_confirm": "Edit"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_es_ES.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_edit_name_title": "Cambiar el nombre de su miembro",
+  "octavia_load_balancer_pools_members_edit_name_label": "Nombre",
+  "octavia_load_balancer_pools_members_edit_name_cancel": "Cancelar",
+  "octavia_load_balancer_pools_members_edit_name_confirm": "Editar"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_fr_CA.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_edit_name_title": "Modifier le nom de votre membre",
+  "octavia_load_balancer_pools_members_edit_name_label": "Nom",
+  "octavia_load_balancer_pools_members_edit_name_cancel": "Annuler",
+  "octavia_load_balancer_pools_members_edit_name_confirm": "Modifier"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_fr_FR.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_edit_name_title": "Modifier le nom de votre membre",
+  "octavia_load_balancer_pools_members_edit_name_label": "Nom",
+  "octavia_load_balancer_pools_members_edit_name_cancel": "Annuler",
+  "octavia_load_balancer_pools_members_edit_name_confirm": "Modifier"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_it_IT.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_edit_name_title": "Modifica il nome del membro",
+  "octavia_load_balancer_pools_members_edit_name_label": "Nome",
+  "octavia_load_balancer_pools_members_edit_name_cancel": "Annullare",
+  "octavia_load_balancer_pools_members_edit_name_confirm": "Modificare"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_pl_PL.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_edit_name_title": "Zmień nazwę użytkownika",
+  "octavia_load_balancer_pools_members_edit_name_label": "Nazwa",
+  "octavia_load_balancer_pools_members_edit_name_cancel": "Anuluj",
+  "octavia_load_balancer_pools_members_edit_name_confirm": "Zmień"
+}

packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_pt_PT.json

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_edit_name_title": "Alterar o nome do seu membro",
+  "octavia_load_balancer_pools_members_edit_name_label": "Nome",
+  "octavia_load_balancer_pools_members_edit_name_cancel": "Anular",
+  "octavia_load_balancer_pools_members_edit_name_confirm": "Alterar"
+}

packages/manager/apps/pci-load-balancer/src/api/data/pool-member.ts

@@ -49,3 +49,19 @@ export const getPoolMember = async (
   );
   return data;
 };
+
+export const updatePoolMemberName = async (
+  projectId: string,
+  region: string,
+  poolId: string,
+  memberId: string,
+  name: string,
+) => {
+  const { data } = await v6.put(
+    `/cloud/project/${projectId}/region/${region}/loadbalancing/pool/${poolId}/member/${memberId}`,
+    {
+      name,
+    },
+  );
+  return data;
+};

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

@@ -7,6 +7,7 @@ import {
   deletePoolMember,
   getPoolMember,
   getPoolMembers,
+  updatePoolMemberName,
 } from '@/api/data/pool-member';
 import { paginateResults, sortResults } from '@/helpers';
 import queryClient from '@/queryClient';
@@ -102,3 +103,39 @@ export const useGetPoolMember = (
     queryKey: ['poolMembers', projectId, poolId, region, memberId],
     queryFn: () => getPoolMember(projectId, region, poolId, memberId),
   });
+
+type UpdatePoolMemberProps = {
+  projectId: string;
+  poolId: string;
+  memberId: string;
+  region: string;
+  name: string;
+  onError: (cause: Error) => void;
+  onSuccess: () => void;
+};
+
+export const useUpdatePoolMember = ({
+  projectId,
+  poolId,
+  memberId,
+  region,
+  name,
+  onError,
+  onSuccess,
+}: UpdatePoolMemberProps) => {
+  const mutation = useMutation({
+    mutationFn: async () =>
+      updatePoolMemberName(projectId, region, poolId, memberId, name),
+    onError,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['poolMembers', projectId],
+      });
+      onSuccess();
+    },
+  });
+  return {
+    updatePoolMemberName: () => mutation.mutate(),
+    ...mutation,
+  };
+};

packages/manager/apps/pci-load-balancer/src/components/detail/pools/members/Actions.component.tsx

@@ -13,7 +13,7 @@ export default function ActionsComponent({
   const items = [
     {
       id: 0,
-      href: useHref(`../${memberId}/edit`),
+      href: useHref(`./${memberId}/edit`),
       label: t('octavia_load_balancer_pools_detail_members_edit'),
     },
     {

packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/edit/Edit.page.tsx

@@ -0,0 +1,126 @@
+import { PciModal } from '@ovh-ux/manager-pci-common';
+import { useNotifications } from '@ovh-ux/manager-react-components';
+import { Translation, useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import { ApiError } from '@ovh-ux/manager-core-api';
+import { useEffect, useState } from 'react';
+import { OsdsFormField, OsdsInput } from '@ovhcloud/ods-components/react';
+import { ODS_INPUT_TYPE } from '@ovhcloud/ods-components';
+import {
+  useGetPoolMember,
+  useUpdatePoolMember,
+} from '@/api/hook/usePoolMember';
+import LabelComponent from '@/components/form/Label.component';
+
+export default function EditPage() {
+  const { addSuccess, addError } = useNotifications();
+  const navigate = useNavigate();
+  const { t: tEdit } = useTranslation('pools/members/edit');
+  const { t: tPciCommon } = useTranslation('pci-common');
+  const { projectId, poolId, region, memberId } = useParams();
+  const onClose = () => {
+    navigate('..');
+  };
+
+  const { data: poolMember, isPending: isPendingPoolMember } = useGetPoolMember(
+    projectId,
+    poolId,
+    region,
+    memberId,
+  );
+  const [memberName, setMemberName] = useState('');
+  const [isTouched, setIsTouched] = useState(false);
+  const {
+    updatePoolMemberName,
+    isPending: isPendingUpdate,
+  } = useUpdatePoolMember({
+    projectId,
+    region,
+    poolId,
+    memberId,
+    name: memberName,
+    onError(error: ApiError) {
+      addError(
+        <Translation ns="octavia-load-balancer">
+          {(_t) =>
+            _t('octavia_load_balancer_global_error', {
+              message: error?.response?.data?.message || error?.message || null,
+              requestId: error?.config?.headers['X-OVH-MANAGER-REQUEST-ID'],
+            })
+          }
+        </Translation>,
+        true,
+      );
+      onClose();
+    },
+    onSuccess() {
+      addSuccess(
+        <Translation ns="pools/members">
+          {(_t) =>
+            _t('octavia_load_balancer_pools_detail_members_edit_name_success')
+          }
+        </Translation>,
+        true,
+      );
+      navigate('..');
+    },
+  });
+
+  const onConfirm = () => {
+    updatePoolMemberName();
+  };
+
+  const onCancel = () => {
+    navigate('..');
+  };
+  useEffect(() => {
+    if (poolMember) {
+      setMemberName(poolMember.name);
+    }
+  }, [poolMember]);
+  return (
+    <PciModal
+      title={tEdit('octavia_load_balancer_pools_members_edit_name_title')}
+      onClose={onClose}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      type="default"
+      isPending={isPendingPoolMember || isPendingUpdate}
+      isDisabled={!memberName.trim()}
+      submitText={tEdit(
+        'octavia_load_balancer_pools_members_edit_name_confirm',
+      )}
+      cancelText={tEdit('octavia_load_balancer_pools_members_edit_name_cancel')}
+    >
+      <OsdsFormField
+        className="mt-8"
+        error={
+          isTouched && !memberName.trim()
+            ? tPciCommon('common_field_error_required')
+            : ''
+        }
+      >
+        <LabelComponent
+          text={tEdit('octavia_load_balancer_pools_members_edit_name_label')}
+          slot="label"
+          hasError={isTouched && !memberName.trim()}
+        />
+        <OsdsInput
+          value={memberName}
+          type={ODS_INPUT_TYPE.text}
+          className={
+            isTouched && !memberName.trim()
+              ? 'bg-red-100 border-red-500 text-red-500 focus:text-red-500'
+              : 'border-color-[var(--ods-color-default-200)] bg-white'
+          }
+          onOdsValueChange={(event) => {
+            setMemberName(event.detail.value.trim());
+          }}
+          onOdsInputBlur={() => {
+            setIsTouched(true);
+          }}
+        />
+      </OsdsFormField>
+    </PciModal>
+  );
+}

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

@@ -32,6 +32,7 @@ export const ROUTE_PATHS = {
   POOL_MEMBERS: 'members',
   POOL_MEMBERS_LIST: 'list',
   POOL_MEMBERS_DELETE: ':memberId/delete',
+  POOL_MEMBERS_EDIT: ':memberId/edit',
   STATISTICS: 'statistics',
   CERTIFICATES: 'certificates',
   LOGS: 'logs',
@@ -96,6 +97,9 @@ const PoolsMembersListPage = lazy(() =>
 const PoolsMembersDeletePage = lazy(() =>
   import('@/pages/detail/pools/detail/members/delete/Delete.page'),
 );
+const PoolsMembersEditPage = lazy(() =>
+  import('@/pages/detail/pools/detail/members/edit/Edit.page'),
+);
 const PoolsMembersPage = lazy(() =>
   import('@/pages/detail/pools/detail/members/Member.page'),
 );
@@ -181,6 +185,11 @@ const Routes = (
             path={ROUTE_PATHS.POOL_MEMBERS_DELETE}
             Component={PoolsMembersDeletePage}
           />
+
+          <Route
+            path={ROUTE_PATHS.POOL_MEMBERS_EDIT}
+            Component={PoolsMembersEditPage}
+          />
         </Route>
       </Route>
       <Route