From 2ccce0feaccacf7042f28ab5ec2efce77917330f Mon Sep 17 00:00:00 2001 From: Yoann Fievez Date: Wed, 16 Oct 2024 11:27:03 +0200 Subject: [PATCH] feat(pci-load-balancer): add edit pool member name modal ref: DTCORE-2661 Signed-off-by: Yoann Fievez --- .../pools/members/edit/Messages_de_DE.json | 6 + .../pools/members/edit/Messages_en_GB.json | 6 + .../pools/members/edit/Messages_es_ES.json | 6 + .../pools/members/edit/Messages_fr_CA.json | 6 + .../pools/members/edit/Messages_fr_FR.json | 6 + .../pools/members/edit/Messages_it_IT.json | 6 + .../pools/members/edit/Messages_pl_PL.json | 6 + .../pools/members/edit/Messages_pt_PT.json | 6 + .../src/api/data/pool-member.ts | 16 +++ .../src/api/hook/usePoolMember.tsx | 37 +++++ .../pools/members/Actions.component.tsx | 2 +- .../pools/detail/members/edit/Edit.page.tsx | 126 ++++++++++++++++++ .../apps/pci-load-balancer/src/routes.tsx | 9 ++ 13 files changed, 237 insertions(+), 1 deletion(-) create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_de_DE.json create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_en_GB.json create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_es_ES.json create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_fr_CA.json create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_fr_FR.json create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_it_IT.json create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_pl_PL.json create mode 100644 packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_pt_PT.json create mode 100644 packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/edit/Edit.page.tsx diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_de_DE.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_de_DE.json new file mode 100644 index 000000000000..e29e418f0a95 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_en_GB.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_en_GB.json new file mode 100644 index 000000000000..a59b3c236b18 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_es_ES.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_es_ES.json new file mode 100644 index 000000000000..0d215c6069fb --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_fr_CA.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_fr_CA.json new file mode 100644 index 000000000000..48cf984e8aea --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_fr_FR.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_fr_FR.json new file mode 100644 index 000000000000..48cf984e8aea --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_it_IT.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_it_IT.json new file mode 100644 index 000000000000..da49bc891e17 --- /dev/null +++ b/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" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_pl_PL.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_pl_PL.json new file mode 100644 index 000000000000..bbbdaed8ade9 --- /dev/null +++ b/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ń" +} diff --git a/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_pt_PT.json b/packages/manager/apps/pci-load-balancer/public/translations/pools/members/edit/Messages_pt_PT.json new file mode 100644 index 000000000000..70ec96452736 --- /dev/null +++ b/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" +} 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 3ba03ae1db3e..c4fc975e6b36 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 @@ -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; +}; 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 a66a92c16fcc..d0694732eeb1 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 @@ -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, + }; +}; 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 index 6a0cfe696eb2..5c72359ce0b2 100644 --- 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 @@ -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'), }, { diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/edit/Edit.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/members/edit/Edit.page.tsx new file mode 100644 index 000000000000..ee58730c8ad9 --- /dev/null +++ b/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( + + {(_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_edit_name_success') + } + , + true, + ); + navigate('..'); + }, + }); + + const onConfirm = () => { + updatePoolMemberName(); + }; + + const onCancel = () => { + navigate('..'); + }; + useEffect(() => { + if (poolMember) { + setMemberName(poolMember.name); + } + }, [poolMember]); + return ( + + + + { + setMemberName(event.detail.value.trim()); + }} + onOdsInputBlur={() => { + setIsTouched(true); + }} + /> + + + ); +} diff --git a/packages/manager/apps/pci-load-balancer/src/routes.tsx b/packages/manager/apps/pci-load-balancer/src/routes.tsx index 8e0e1b21b2e3..d1779c283da8 100644 --- a/packages/manager/apps/pci-load-balancer/src/routes.tsx +++ b/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} /> + +