From 919c966bb47c0ba1532f31f74e8085572d067cca Mon Sep 17 00:00:00 2001 From: Vincent BONMARCHAND Date: Thu, 23 Jan 2025 10:14:31 +0100 Subject: [PATCH] feat(ldp): add unsubscribe subscription action ref: MANAGER-16516 Signed-off-by: Vincent BONMARCHAND --- .../SubscriptionStreamActions.component.tsx | 5 ++ .../src/data/api/logSubscriptions.ts | 18 ++++++ .../hooks/useTerminateLogSubscription.tsx | 60 +++++++++++++++++++ .../logs/Logs-Subscription-terminate.page.tsx | 38 ++++++++++++ .../src/pages/logs/Logs.page.tsx | 2 + .../logs-to-customer/src/routes/routes.tsx | 8 +++ .../logSubscription/Messages_fr_FR.json | 7 ++- 7 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 packages/manager/modules/logs-to-customer/src/data/hooks/useTerminateLogSubscription.tsx create mode 100644 packages/manager/modules/logs-to-customer/src/pages/logs/Logs-Subscription-terminate.page.tsx diff --git a/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamActions.component.tsx b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamActions.component.tsx index f82516e46251..7e4caeec8bb2 100644 --- a/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamActions.component.tsx +++ b/packages/manager/modules/logs-to-customer/src/components/subscriptions/SubscriptionStreamActions.component.tsx @@ -14,6 +14,7 @@ import { OsdsSpinner, } from '@ovhcloud/ods-components/react'; import { useQueryClient } from '@tanstack/react-query'; +import { useNavigate } from 'react-router-dom'; import { getLogStreamUrlQueryKey, useLogStreamUrl, @@ -28,6 +29,7 @@ type SubscriptionStreamItemProps = { const SubscriptionStreamActions = ({ subscription, }: SubscriptionStreamItemProps) => { + const navigate = useNavigate(); const queryClient = useQueryClient(); const { t } = useTranslation('logStream'); const { t: tSubscription } = useTranslation('logSubscription'); @@ -87,6 +89,9 @@ const SubscriptionStreamActions = ({ className="flex w-full" variant={ODS_BUTTON_VARIANT.ghost} color={ODS_THEME_COLOR_INTENT.primary} + onClick={() => { + navigate(`subscription/${subscription.subscriptionId}/terminate`); + }} > {tSubscription('log_subscription_button_unsubscribe_label')} diff --git a/packages/manager/modules/logs-to-customer/src/data/api/logSubscriptions.ts b/packages/manager/modules/logs-to-customer/src/data/api/logSubscriptions.ts index cb0e5cc2b453..eb7ded49379d 100644 --- a/packages/manager/modules/logs-to-customer/src/data/api/logSubscriptions.ts +++ b/packages/manager/modules/logs-to-customer/src/data/api/logSubscriptions.ts @@ -42,3 +42,21 @@ export const getLogSubscriptionv6 = async ( subscriptionId: string, ) => apiClient.v6.get(`${logSubscriptionUrl}/${subscriptionId}`); + +/** + * DELETE log subscription + */ + +export const deleteLogSubscriptionv2 = async ( + logSubscriptionUrl: ApiUrls['logSubscription'], + subscriptionId: string, +) => { + return apiClient.v2.delete(`${logSubscriptionUrl}/${subscriptionId}`); +}; + +export const deleteLogSubscriptionv6 = async ( + logSubscriptionUrl: ApiUrls['logSubscription'], + subscriptionId: string, +) => { + return apiClient.v6.delete(`${logSubscriptionUrl}/${subscriptionId}`); +}; diff --git a/packages/manager/modules/logs-to-customer/src/data/hooks/useTerminateLogSubscription.tsx b/packages/manager/modules/logs-to-customer/src/data/hooks/useTerminateLogSubscription.tsx new file mode 100644 index 000000000000..7a83b2b66f59 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/data/hooks/useTerminateLogSubscription.tsx @@ -0,0 +1,60 @@ +import { ApiError } from '@ovh-ux/manager-core-api'; +import { useNotifications } from '@ovh-ux/manager-react-components'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { useTranslation } from 'react-i18next'; +import { getLogSubscriptionsQueryKey } from './useLogSubscriptions'; +import { ApiUrls } from '../../LogsToCustomer.module'; +import { LogApiVersion } from '../types/apiVersion'; +import { + deleteLogSubscriptionv2, + deleteLogSubscriptionv6, +} from '../api/logSubscriptions'; +import { LogKind } from '../types/dbaas/logs'; + +export const getLogSubscriptionQueryKey = ( + logSubscriptionUrl: string, + logSubscriptionId: string, +) => ['terminateLogSubscription', logSubscriptionUrl, logSubscriptionId]; + +export const useTerminateLogSubscription = ( + logSubscriptionUrl: ApiUrls['logSubscription'], + apiVersion: LogApiVersion, + logSubscriptionId: string, + logKind?: LogKind, +) => { + const queryClient = useQueryClient(); + const { addError, addSuccess, clearNotifications } = useNotifications(); + const { t } = useTranslation('logSubscription'); + const queryFunction = + apiVersion === 'v2' ? deleteLogSubscriptionv2 : deleteLogSubscriptionv6; + const { mutate: terminateLogSubscription, isPending } = useMutation({ + mutationKey: getLogSubscriptionQueryKey( + logSubscriptionUrl, + logSubscriptionId, + ), + mutationFn: async () => { + return queryFunction(logSubscriptionUrl, logSubscriptionId); + }, + onSuccess: async () => { + clearNotifications(); + await queryClient.invalidateQueries({ + queryKey: getLogSubscriptionsQueryKey(logSubscriptionUrl, logKind), + }); + addSuccess(t('log_subscription_terminate_delete_success'), true); + }, + onError: (result: ApiError) => { + clearNotifications(); + addError( + t('log_subscription_terminate_delete_error', { + error: result.message, + }), + true, + ); + }, + }); + + return { + terminateLogSubscription, + isPending, + }; +}; diff --git a/packages/manager/modules/logs-to-customer/src/pages/logs/Logs-Subscription-terminate.page.tsx b/packages/manager/modules/logs-to-customer/src/pages/logs/Logs-Subscription-terminate.page.tsx new file mode 100644 index 000000000000..bada8da1f3d5 --- /dev/null +++ b/packages/manager/modules/logs-to-customer/src/pages/logs/Logs-Subscription-terminate.page.tsx @@ -0,0 +1,38 @@ +import React, { useContext } from 'react'; +import { DeleteModal } from '@ovh-ux/manager-react-components'; +import { useNavigate, useParams } from 'react-router-dom'; +import { useTranslation } from 'react-i18next'; +import { useTerminateLogSubscription } from '../../data/hooks/useTerminateLogSubscription'; +import { LogsContext } from '../../LogsToCustomer.context'; + +export default function DataStreamsTerminate() { + const navigate = useNavigate(); + const { t } = useTranslation('logSubscription'); + const { subscriptionId } = useParams(); + const { currentLogKind, logApiUrls, logApiVersion } = useContext(LogsContext); + + const { terminateLogSubscription } = useTerminateLogSubscription( + logApiUrls.logSubscription, + logApiVersion, + subscriptionId, + currentLogKind, + ); + return ( + { + navigate('..'); + }} + onConfirmDelete={() => { + terminateLogSubscription(); + navigate('..'); + }} + > + ); +} diff --git a/packages/manager/modules/logs-to-customer/src/pages/logs/Logs.page.tsx b/packages/manager/modules/logs-to-customer/src/pages/logs/Logs.page.tsx index f4bd852e4ed7..c0a63acd44ca 100644 --- a/packages/manager/modules/logs-to-customer/src/pages/logs/Logs.page.tsx +++ b/packages/manager/modules/logs-to-customer/src/pages/logs/Logs.page.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import { Outlet } from 'react-router-dom'; import LogTail from '../../components/logTail/LogTail.component'; import LogsSubscriptions from '../../components/subscriptions/Subscriptions.component'; @@ -8,6 +9,7 @@ export default function Logs() {
+
); } diff --git a/packages/manager/modules/logs-to-customer/src/routes/routes.tsx b/packages/manager/modules/logs-to-customer/src/routes/routes.tsx index 0db7b26dc85e..aa921ef844d0 100644 --- a/packages/manager/modules/logs-to-customer/src/routes/routes.tsx +++ b/packages/manager/modules/logs-to-customer/src/routes/routes.tsx @@ -17,6 +17,14 @@ export const logsRoutes: RouteObject[] = [ { path: '', ...lazyRouteConfig(() => import('../pages/logs/Logs.page')), + children: [ + { + path: `subscription/:subscriptionId/terminate`, + ...lazyRouteConfig(() => + import('../pages/logs/Logs-Subscription-terminate.page'), + ), + }, + ], }, { path: 'streams', diff --git a/packages/manager/modules/logs-to-customer/src/translations/logSubscription/Messages_fr_FR.json b/packages/manager/modules/logs-to-customer/src/translations/logSubscription/Messages_fr_FR.json index 768600c634f6..73f459f491c2 100644 --- a/packages/manager/modules/logs-to-customer/src/translations/logSubscription/Messages_fr_FR.json +++ b/packages/manager/modules/logs-to-customer/src/translations/logSubscription/Messages_fr_FR.json @@ -7,5 +7,10 @@ "log_subscription_empty_tile_button_know_more": "En savoir plus sur Logs Data Platform", "log_subscription_empty_tile_button_subscribe": "S'abonner", "log_subscription_list_title": "Utiliser vos logs", - "log_subscription_list_button_subscribe_more": "S'abonner sur un autre flux de données" + "log_subscription_list_button_subscribe_more": "S'abonner sur un autre flux de données", + "log_subscription_terminate_modal_headline": "Se désabonner", + "log_subscription_terminate_modal_delete_input_label": "Veuillez entrer le mot « TERMINATE » pour vous désabonner du flux de données.", + "log_subscription_terminate_modal_confirm_button_label": "Se désabonner", + "log_subscription_terminate_delete_success": "Votre désabonnement est en cours de traitement.", + "log_subscription_terminate_delete_error": "Votre désabonnement a rencontré une erreur. {{error}}" }