From 4160d9fb154d4ce10b513b685bfe5cf762fcd395 Mon Sep 17 00:00:00 2001 From: LIDRISSI Hamid 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 --- .../notifications/useNotifications.ts | 16 +- .../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 | 11 ++ .../src/api/hook/useHealthMonitor.tsx | 27 ++++ .../form/HealthMonitorForm.page.tsx | 58 +++++-- .../detail/health-monitor/HealthMonitor.tsx | 4 +- .../create/HealthMonitorCreate.page.tsx | 2 +- .../rename/RenameHealthMonitor.page.tsx | 143 +++++++++++++++++ .../apps/pci-load-balancer/src/routes.tsx | 11 ++ .../QuantitySelector.component.tsx | 144 +++++++++--------- 17 files changed, 375 insertions(+), 89 deletions(-) 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-react-components/src/components/notifications/useNotifications.ts b/packages/manager-react-components/src/components/notifications/useNotifications.ts index 8829fdb65c9d..c9ff0cf38a07 100644 --- a/packages/manager-react-components/src/components/notifications/useNotifications.ts +++ b/packages/manager-react-components/src/components/notifications/useNotifications.ts @@ -14,6 +14,7 @@ export interface Notification { content: ReactNode; type: NotificationType; dismissable?: boolean; + creationTimestamp: number; } export interface NotificationState { @@ -44,7 +45,13 @@ export const useNotifications = create((set, get) => ({ uid: state.uid + 1, notifications: [ ...state.notifications, - { uid: state.uid, content, type, dismissable }, + { + uid: state.uid, + content, + type, + dismissable, + creationTimestamp: Date.now(), + }, ], })), addSuccess: (content: ReactNode, dismissable = false) => @@ -61,7 +68,12 @@ export const useNotifications = create((set, get) => ({ ({ uid }) => uid !== toRemoveUid, ), })), - clearNotifications: () => set(() => ({ notifications: [] })), + clearNotifications: () => + set((state) => ({ + notifications: state.notifications.filter( + (notification) => Date.now() - notification.creationTimestamp < 1000, + ), + })), })); export default useNotifications; 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..664d1cfd62ab 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,14 @@ export const editHealthMonitor = ( body, ); }; + +export const renameHealthMonitor = ( + projectId: string, + region: string, + healthMonitorId: string, + name: string, +) => + 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 7d68ce646b1a..1f9616179b3e 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/components/form/HealthMonitorForm.page.tsx b/packages/manager/apps/pci-load-balancer/src/components/form/HealthMonitorForm.page.tsx index 0f754f29261f..7df08dd88577 100644 --- a/packages/manager/apps/pci-load-balancer/src/components/form/HealthMonitorForm.page.tsx +++ b/packages/manager/apps/pci-load-balancer/src/components/form/HealthMonitorForm.page.tsx @@ -84,7 +84,7 @@ export default function HealthMonitorForm({ const [isNameTouched, setIsNameTouched] = useState(false); - const validateField = (name: keyof THealthMonitorFormState, value: any) => { + const validateField = (name: keyof THealthMonitorFormState, value) => { const newErrors: THealthMonitorFormErrors = { ...errors }; if (name === 'name' && isNameTouched) { @@ -210,7 +210,7 @@ export default function HealthMonitorForm({
- + handle.keyDown('name')} /> - - {t('octavia_load_balancer_health_monitor_form_name_help')} - +
+ + {errors.name} + + + {t('octavia_load_balancer_health_monitor_form_name_help')} + +
@@ -297,18 +308,34 @@ export default function HealthMonitorForm({ handle.change('expectedCode', event.detail.value) } /> - - {t( - 'octavia_load_balancer_health_monitor_form_expected_code_help', - )} - + +
+ + {errors.expectedCode} + + + {t( + 'octavia_load_balancer_health_monitor_form_expected_code_help', + )} + +
)}
{[HEALTH_MONITOR_TYPE.HTTP, HEALTH_MONITOR_TYPE.HTTPS].includes( diff --git a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/create/HealthMonitorCreate.page.tsx b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/create/HealthMonitorCreate.page.tsx index 76075f77187e..99241eb58be9 100644 --- a/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/create/HealthMonitorCreate.page.tsx +++ b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/create/HealthMonitorCreate.page.tsx @@ -91,7 +91,7 @@ export default function HealthMonitorCreatePage() { associatedPool={pool} formState={formState} isPending={isPoolPending || isCreationPending} - onCancel={() => navigate('../health-monitor')} + onCancel={() => navigate('../general-information')} onChange={setFormState} onSubmit={createHealthMonitor} submitLabel={t( 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..bf2777efb3dd --- /dev/null +++ b/packages/manager/apps/pci-load-balancer/src/pages/detail/pools/detail/health-monitor/rename/RenameHealthMonitor.page.tsx @@ -0,0 +1,143 @@ +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, useTranslation } from 'react-i18next'; +import { useNavigate, useParams } from 'react-router-dom'; +import { HEALTH_MONITOR_NAME_REGEX } from '@/constants'; +import LabelComponent from '@/components/form/Label.component'; +import { + useGetHealthMonitor, + useRenameHealthMonitor, +} from '@/api/hook/useHealthMonitor'; + +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( + , + true, + ); + navigate('..'); + }, + onSuccess() { + addSuccess( + , + true, + ); + navigate('..'); + }, + }); + + const nameError = useMemo(() => { + if (isNameTouched) { + if (!editedName) { + return tCommon('common_field_error_required'); + } + if (!HEALTH_MONITOR_NAME_REGEX.test(editedName)) { + return tCommon('common_field_error_pattern'); + } + } + return ''; + }, [editedName, isNameTouched]); + + return ( + 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} + > + + + + setEditedName(event.detail.value)} + onKeyDown={() => setIsNameTouched(true)} + /> + +
+ + {nameError} + + + {tForm('octavia_load_balancer_health_monitor_form_name_help')} + +
+ + + ); +} diff --git a/packages/manager/apps/pci-load-balancer/src/routes.tsx b/packages/manager/apps/pci-load-balancer/src/routes.tsx index 48aaaa86ff4d..dfc9b699f723 100644 --- a/packages/manager/apps/pci-load-balancer/src/routes.tsx +++ b/packages/manager/apps/pci-load-balancer/src/routes.tsx @@ -37,6 +37,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', @@ -144,6 +145,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'), @@ -247,6 +253,11 @@ const Routes = ( path={ROUTE_PATHS.POOL_DELETE} Component={HealthMonitorDeletePage} /> + ) { const { t } = useTranslation('pci-quantity-selector'); const [, setCounter] = useState(0); @@ -60,84 +63,85 @@ export function QuantitySelector({ return ( -
- {label && ( +
+
+ {label && ( + + {label} + + )} + {labelHelpText && ( + + + {labelHelpText} + + )} +
+ + {description && ( - {label} + {description} )} - {labelHelpText && ( - + + - {labelHelpText} - - )} -
- - {description && ( - - {description} - - )} - - - - - { - forceRedraw(); - onValueChange(Number(event.detail.value)); - }} - min={min} - max={max} - /> - max ? true : undefined} - > - + { + forceRedraw(); + onValueChange(Number(event.detail.value)); + }} + min={min} + max={max} /> - - - + max ? true : undefined} + > + + + +
{error.min && ( {t('common_field_error_min', { min })}