feat(pci-load-balancer): add deletion pool members modal

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

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

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_delete_title": "Mitglied löschen",
+  "octavia_load_balancer_pools_members_delete_description": "Möchten Sie {{ member }} wirklich löschen?",
+  "octavia_load_balancer_pools_members_delete_cancel": "Abbrechen",
+  "octavia_load_balancer_pools_members_delete_confirm": "Löschen"
+}

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

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_delete_title": "Delete a member",
+  "octavia_load_balancer_pools_members_delete_description": "Are you sure you want to delete {{ member }}?",
+  "octavia_load_balancer_pools_members_delete_cancel": "Cancel",
+  "octavia_load_balancer_pools_members_delete_confirm": "Delete"
+}

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

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_delete_title": "Eliminar un miembro",
+  "octavia_load_balancer_pools_members_delete_description": "¿Seguro que quiere eliminar {{ member }}?",
+  "octavia_load_balancer_pools_members_delete_cancel": "Cancelar",
+  "octavia_load_balancer_pools_members_delete_confirm": "Eliminar"
+}

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

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_delete_title": "Supprimer un membre",
+  "octavia_load_balancer_pools_members_delete_description": "Voulez-vous vraiment supprimer {{ member }} ?",
+  "octavia_load_balancer_pools_members_delete_cancel": "Annuler",
+  "octavia_load_balancer_pools_members_delete_confirm": "Supprimer"
+}

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

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_delete_title": "Supprimer un membre",
+  "octavia_load_balancer_pools_members_delete_description": "Voulez-vous vraiment supprimer {{ member }} ?",
+  "octavia_load_balancer_pools_members_delete_cancel": "Annuler",
+  "octavia_load_balancer_pools_members_delete_confirm": "Supprimer"
+}

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

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_delete_title": "Elimina un membro",
+  "octavia_load_balancer_pools_members_delete_description": "Vuoi davvero eliminare {{ member }}?",
+  "octavia_load_balancer_pools_members_delete_cancel": "Annullare",
+  "octavia_load_balancer_pools_members_delete_confirm": "Elimina"
+}

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

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_delete_title": "Usuń użytkownika",
+  "octavia_load_balancer_pools_members_delete_description": "Czy na pewno chcesz usunąć {{ member }}?",
+  "octavia_load_balancer_pools_members_delete_cancel": "Anuluj",
+  "octavia_load_balancer_pools_members_delete_confirm": "Usuń"
+}

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

@@ -0,0 +1,6 @@
+{
+  "octavia_load_balancer_pools_members_delete_title": "Eliminar um membro",
+  "octavia_load_balancer_pools_members_delete_description": "Tem a certeza de que quer eliminar {{ member }}?",
+  "octavia_load_balancer_pools_members_delete_cancel": "Anular",
+  "octavia_load_balancer_pools_members_delete_confirm": "Eliminar"
+}

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

@@ -25,3 +25,27 @@ export const getPoolMembers = async (
   );
   return data;
 };
+
+export const deletePoolMember = async (
+  projectId: string,
+  region: string,
+  poolId: string,
+  memberId: string,
+) => {
+  const { data } = await v6.delete(
+    `/cloud/project/${projectId}/region/${region}/loadbalancing/pool/${poolId}/member/${memberId}`,
+  );
+  return data;
+};
+
+export const getPoolMember = async (
+  projectId: string,
+  region: string,
+  poolId: string,
+  memberId: string,
+): Promise<TPoolMember> => {
+  const { data } = await v6.get<TPoolMember>(
+    `/cloud/project/${projectId}/region/${region}/loadbalancing/pool/${poolId}/member/${memberId}`,
+  );
+  return data;
+};

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

@@ -1,9 +1,15 @@
 import { Filter, applyFilters } from '@ovh-ux/manager-core-api';
 import { ColumnSort, PaginationState } from '@ovh-ux/manager-react-components';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
-import { TPoolMember, getPoolMembers } from '@/api/data/pool-member';
+import {
+  TPoolMember,
+  deletePoolMember,
+  getPoolMember,
+  getPoolMembers,
+} from '@/api/data/pool-member';
 import { paginateResults, sortResults } from '@/helpers';
+import queryClient from '@/queryClient';
 
 export const useGetAllPoolMembers = (
   projectId: string,
@@ -51,3 +57,48 @@ export const usePoolMembers = (
     [allPoolMembers, error, isLoading, isPending, pagination, sorting, filters],
   );
 };
+
+type DeletePoolMemberProps = {
+  projectId: string;
+  poolId: string;
+  memberId: string;
+  region: string;
+  onError: (cause: Error) => void;
+  onSuccess: () => void;
+};
+
+export const useDeletePoolMember = ({
+  projectId,
+  poolId,
+  memberId,
+  region,
+  onError,
+  onSuccess,
+}: DeletePoolMemberProps) => {
+  const mutation = useMutation({
+    mutationFn: async () =>
+      deletePoolMember(projectId, region, poolId, memberId),
+    onError,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['poolMembers', projectId],
+      });
+      onSuccess();
+    },
+  });
+  return {
+    deletePoolMember: () => mutation.mutate(),
+    ...mutation,
+  };
+};
+
+export const useGetPoolMember = (
+  projectId: string,
+  poolId: string,
+  region: string,
+  memberId: string,
+) =>
+  useQuery({
+    queryKey: ['poolMembers', projectId, poolId, region, memberId],
+    queryFn: () => getPoolMember(projectId, region, poolId, memberId),
+  });

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

@@ -0,0 +1,27 @@
+import { ActionMenu } from '@ovh-ux/manager-react-components';
+import { useTranslation } from 'react-i18next';
+import { useHref } from 'react-router-dom';
+
+export type ActionsComponentProps = {
+  memberId: string;
+};
+export default function ActionsComponent({
+  memberId,
+}: Readonly<ActionsComponentProps>) {
+  const { t } = useTranslation('pools/members/list');
+
+  const items = [
+    {
+      id: 0,
+      href: useHref(`../${memberId}/edit`),
+      label: t('octavia_load_balancer_pools_detail_members_edit'),
+    },
+    {
+      id: 1,
+      href: useHref(`./${memberId}/delete`),
+      label: t('octavia_load_balancer_pools_detail_members_delete'),
+    },
+  ];
+
+  return <ActionMenu items={items} isCompact />;
+}

packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/rules/delete/Delete.page.tsx

@@ -37,8 +37,8 @@ export default function DeletePage() {
     },
     onSuccess() {
       addSuccess(
-        <Translation ns="octavia-load-balancer-l7">
-          {(_t) => _t('octavia_load_balancer_list_l7_policies_delete_success')}
+        <Translation ns="l7/rules/delete">
+          {(_t) => _t('octavia_load_balancer_list_l7_rules_delete_success')}
         </Translation>,
         true,
       );

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

@@ -0,0 +1,92 @@
+import { Translation, useTranslation } from 'react-i18next';
+import { DeletionModal } from '@ovh-ux/manager-pci-common';
+import { useNavigate, useParams } from 'react-router-dom';
+import { OsdsText } from '@ovhcloud/ods-components/react';
+import { ODS_TEXT_LEVEL, ODS_TEXT_SIZE } from '@ovhcloud/ods-components';
+import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
+import { useNotifications } from '@ovh-ux/manager-react-components';
+import { ApiError } from '@ovh-ux/manager-core-api';
+import {
+  useDeletePoolMember,
+  useGetPoolMember,
+} from '@/api/hook/usePoolMember';
+
+export default function DeletePage() {
+  const { addSuccess, addError } = useNotifications();
+  const { t: tDelete } = useTranslation('pools/members/delete');
+  const navigate = useNavigate();
+  const { projectId, poolId, region, memberId } = useParams();
+  const onClose = () => {
+    navigate('..');
+  };
+  const { data: poolMember, isPending: isPendingPoolMember } = useGetPoolMember(
+    projectId,
+    poolId,
+    region,
+    memberId,
+  );
+  const { deletePoolMember, isPending: isPendingDelete } = useDeletePoolMember({
+    projectId,
+    region,
+    poolId,
+    memberId,
+    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_delete_success', {
+              member: poolMember?.name,
+            })
+          }
+        </Translation>,
+        true,
+      );
+      navigate('..');
+    },
+  });
+
+  const onConfirm = () => {
+    deletePoolMember();
+  };
+
+  const onCancel = () => {
+    navigate('..');
+  };
+
+  return (
+    <DeletionModal
+      title={tDelete('octavia_load_balancer_pools_members_delete_title')}
+      onConfirm={onConfirm}
+      onClose={onClose}
+      onCancel={onCancel}
+      isPending={isPendingDelete || isPendingPoolMember}
+      type="warning"
+      submitText={tDelete('octavia_load_balancer_pools_members_delete_confirm')}
+      cancelText={tDelete('octavia_load_balancer_pools_members_delete_cancel')}
+    >
+      <OsdsText
+        level={ODS_TEXT_LEVEL.body}
+        color={ODS_THEME_COLOR_INTENT.text}
+        size={ODS_TEXT_SIZE._400}
+      >
+        {tDelete('octavia_load_balancer_pools_members_delete_description', {
+          member: poolMember?.name,
+        })}
+      </OsdsText>
+    </DeletionModal>
+  );
+}

packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/list/usePoolMemberDatagridColumn.tsx

@@ -5,8 +5,8 @@ import {
 import { useTranslation } from 'react-i18next';
 import OperatingStatusComponent from '@/components/listing/OperatingStatus.component';
 import ProvisioningStatusComponent from '@/components/listing/ProvisioningStatus.component';
-import ActionsComponent from '@/components/detail/listeners/l7/rules/Actions.component';
 import { TPoolMember } from '@/api/data/pool-member';
+import ActionsComponent from '@/components/detail/pools/members/Actions.component';
 
 export const usePoolMemberDatagridColumn = () => {
   const { t: tLoadBalancer } = useTranslation('octavia-load-balancer');
@@ -59,7 +59,7 @@ export const usePoolMemberDatagridColumn = () => {
       id: 'actions',
       cell: (props: TPoolMember) => (
         <div className="min-w-16">
-          <ActionsComponent l7RulesId={props.id} />
+          <ActionsComponent memberId={props.id} />
         </div>
       ),
       label: '',

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

@@ -31,6 +31,7 @@ export const ROUTE_PATHS = {
   POOL_DETAIL: ':region/:loadBalancerId/pools/:poolId',
   POOL_MEMBERS: 'members',
   POOL_MEMBERS_LIST: 'list',
+  POOL_MEMBERS_DELETE: ':memberId/delete',
   STATISTICS: 'statistics',
   CERTIFICATES: 'certificates',
   LOGS: 'logs',
@@ -92,6 +93,9 @@ const PoolsPage = lazy(() => import('@/pages/detail/pools/Pools.page'));
 const PoolsMembersListPage = lazy(() =>
   import('@/pages/detail/pools/detail/members/list/List.page'),
 );
+const PoolsMembersDeletePage = lazy(() =>
+  import('@/pages/detail/pools/detail/members/delete/Delete.page'),
+);
 const PoolsMembersPage = lazy(() =>
   import('@/pages/detail/pools/detail/members/Member.page'),
 );
@@ -172,7 +176,12 @@ const Routes = (
         <Route
           path={ROUTE_PATHS.POOL_MEMBERS_LIST}
           Component={PoolsMembersListPage}
-        ></Route>
+        >
+          <Route
+            path={ROUTE_PATHS.POOL_MEMBERS_DELETE}
+            Component={PoolsMembersDeletePage}
+          />
+        </Route>
       </Route>
       <Route
         id="pools-detail-general-information"