diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_de_DE.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_de_DE.json new file mode 100644 index 000000000000..e9725467a8f5 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_en_GB.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_en_GB.json new file mode 100644 index 000000000000..621605ff4a15 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_es_ES.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_es_ES.json new file mode 100644 index 000000000000..de6a8f98b4a1 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_fr_CA.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_fr_CA.json new file mode 100644 index 000000000000..e638585bdcb4 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_fr_FR.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_fr_FR.json new file mode 100644 index 000000000000..e638585bdcb4 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_it_IT.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_it_IT.json new file mode 100644 index 000000000000..c1a435e77d92 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_pl_PL.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_pl_PL.json new file mode 100644 index 000000000000..105115a85918 --- /dev/null +++ b/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ń" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_pt_PT.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/delete/Messages_pt_PT.json new file mode 100644 index 000000000000..8a3c5af2ca30 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/src/api/data/pool-member.ts b/packages/manager/apps/pci-load-balancer/src/api/data/pool-member.ts index dd90ce1057c2..3ba03ae1db3e 100644 --- a/packages/manager/apps/pci-load-balancer/src/api/data/pool-member.ts +++ b/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 => { + const { data } = await v6.get( + `/cloud/project/${projectId}/region/${region}/loadbalancing/pool/${poolId}/member/${memberId}`, + ); + return data; +}; diff --git a/packages/manager/apps/pci-load-balancer/src/api/hook/usePoolMember.tsx b/packages/manager/apps/pci-load-balancer/src/api/hook/usePoolMember.tsx index 6f92dc61931b..a66a92c16fcc 100644 --- a/packages/manager/apps/pci-load-balancer/src/api/hook/usePoolMember.tsx +++ b/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), + }); diff --git a/packages/manager/apps/pci-load-balancer/src/components/detail/pools/members/Actions.component.tsx b/packages/manager/apps/pci-load-balancer/src/components/detail/pools/members/Actions.component.tsx new file mode 100644 index 000000000000..6a0cfe696eb2 --- /dev/null +++ b/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) { + 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 ; +} diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/rules/delete/Delete.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/rules/delete/Delete.page.tsx index 274a686917db..aacac9701e13 100644 --- a/packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/rules/delete/Delete.page.tsx +++ b/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( - - {(_t) => _t('octavia_load_balancer_list_l7_policies_delete_success')} + + {(_t) => _t('octavia_load_balancer_list_l7_rules_delete_success')} , true, ); diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/delete/Delete.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/delete/Delete.page.tsx new file mode 100644 index 000000000000..3f2b5d740e52 --- /dev/null +++ b/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( + + {(_t) => + _t('octavia_load_balancer_global_error', { + message: error?.response?.data?.message || error?.message || null, + requestId: error?.config?.headers['X-OVH-MANAGER-REQUEST-ID'], + }) + } + , + true, + ); + onClose(); + }, + onSuccess() { + addSuccess( + + {(_t) => + _t('octavia_load_balancer_pools_detail_members_delete_success', { + member: poolMember?.name, + }) + } + , + true, + ); + navigate('..'); + }, + }); + + const onConfirm = () => { + deletePoolMember(); + }; + + const onCancel = () => { + navigate('..'); + }; + + return ( + + + {tDelete('octavia_load_balancer_pools_members_delete_description', { + member: poolMember?.name, + })} + + + ); +} diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/list/usePoolMemberDatagridColumn.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/list/usePoolMemberDatagridColumn.tsx index de456301451a..e8e34e455864 100644 --- a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/list/usePoolMemberDatagridColumn.tsx +++ b/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) => (
- +
), label: '', diff --git a/packages/manager/apps/pci-load-balancer/src/routes.tsx b/packages/manager/apps/pci-load-balancer/src/routes.tsx index 1e46e370ecf3..8e0e1b21b2e3 100644 --- a/packages/manager/apps/pci-load-balancer/src/routes.tsx +++ b/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 = ( + > + +