feat(ldp): add unsubscribe subscription action

ref: MANAGER-16516

Signed-off-by: Vincent BONMARCHAND <[email protected]>

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')}
       </OsdsButton>

packages/manager/modules/logs-to-customer/src/data/api/logSubscriptions.ts

@@ -42,3 +42,21 @@ export const getLogSubscriptionv6 = async (
   subscriptionId: string,
 ) =>
   apiClient.v6.get<LogSubscription>(`${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}`);
+};

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,
+  };
+};

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 (
+    <DeleteModal
+      headline={t('log_subscription_terminate_modal_headline')}
+      deleteInputLabel={t(
+        'log_subscription_terminate_modal_delete_input_label',
+      )}
+      confirmButtonLabel={t(
+        'log_subscription_terminate_modal_confirm_button_label',
+      )}
+      closeModal={() => {
+        navigate('..');
+      }}
+      onConfirmDelete={() => {
+        terminateLogSubscription();
+        navigate('..');
+      }}
+    ></DeleteModal>
+  );
+}

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() {
     <div className="flex gap-8 flex-col">
       <LogTail />
       <LogsSubscriptions />
+      <Outlet />
     </div>
   );
 }

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',

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}}"
 }