feat(pci-load-balancer): add delete l7 rules modal

ref: DTCORE-2646
Signed-off-by: Yoann Fievez <[email protected]>

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/delete/Messages_de_DE.json

@@ -0,0 +1,7 @@
+{
+  "octavia_load_balancer_list_l7_rules_delete_title": "L7 Rule löschen",
+  "octavia_load_balancer_list_l7_rules_delete_description": "Möchten Sie Ihre L7 Rule wirklich löschen?",
+  "octavia_load_balancer_list_l7_rules_delete_cancel": "Abbrechen",
+  "octavia_load_balancer_list_l7_rules_delete_confirm": "Löschen",
+  "octavia_load_balancer_list_l7_rules_delete_success": "Ihre L7 Rule wurde erfolgreich gelöscht!"
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/delete/Messages_en_GB.json

@@ -0,0 +1,7 @@
+{
+  "octavia_load_balancer_list_l7_rules_delete_title": "Delete an L7 rule",
+  "octavia_load_balancer_list_l7_rules_delete_description": "Are you sure you want to delete your L7 rule?",
+  "octavia_load_balancer_list_l7_rules_delete_cancel": "Cancel",
+  "octavia_load_balancer_list_l7_rules_delete_confirm": "Delete",
+  "octavia_load_balancer_list_l7_rules_delete_success": "Your L7 rule has been deleted."
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/delete/Messages_es_ES.json

@@ -0,0 +1,7 @@
+{
+  "octavia_load_balancer_list_l7_rules_delete_title": "Eliminar una L7 rule",
+  "octavia_load_balancer_list_l7_rules_delete_description": "¿Seguro que quiere eliminar la L7 rule?",
+  "octavia_load_balancer_list_l7_rules_delete_cancel": "Cancelar",
+  "octavia_load_balancer_list_l7_rules_delete_confirm": "Eliminar",
+  "octavia_load_balancer_list_l7_rules_delete_success": "¡Su L7 rule se ha eliminado correctamente!"
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/delete/Messages_fr_CA.json

@@ -0,0 +1,7 @@
+{
+  "octavia_load_balancer_list_l7_rules_delete_title": "Supprimer une L7 rule",
+  "octavia_load_balancer_list_l7_rules_delete_description": "Souhaitez-vous vraiment supprimer votre L7 rule ?",
+  "octavia_load_balancer_list_l7_rules_delete_cancel": "Annuler",
+  "octavia_load_balancer_list_l7_rules_delete_confirm": "Supprimer",
+  "octavia_load_balancer_list_l7_rules_delete_success": "Votre L7 rule a été supprimée avec succès !"
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/delete/Messages_fr_FR.json

@@ -0,0 +1,7 @@
+{
+  "octavia_load_balancer_list_l7_rules_delete_title": "Supprimer une L7 rule",
+  "octavia_load_balancer_list_l7_rules_delete_description": "Souhaitez-vous vraiment supprimer votre L7 rule ?",
+  "octavia_load_balancer_list_l7_rules_delete_cancel": "Annuler",
+  "octavia_load_balancer_list_l7_rules_delete_confirm": "Supprimer",
+  "octavia_load_balancer_list_l7_rules_delete_success": "Votre L7 rule a été supprimée avec succès !"
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/delete/Messages_it_IT.json

@@ -0,0 +1,7 @@
+{
+  "octavia_load_balancer_list_l7_rules_delete_title": "Eliminare una L7 rule",
+  "octavia_load_balancer_list_l7_rules_delete_description": "Vuoi davvero eliminare la L7 rule?",
+  "octavia_load_balancer_list_l7_rules_delete_cancel": "Annullare",
+  "octavia_load_balancer_list_l7_rules_delete_confirm": "Elimina",
+  "octavia_load_balancer_list_l7_rules_delete_success": "La L7 rule è stata eliminata correttamente."
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/delete/Messages_pl_PL.json

@@ -0,0 +1,7 @@
+{
+  "octavia_load_balancer_list_l7_rules_delete_title": "Usuń L7 rule",
+  "octavia_load_balancer_list_l7_rules_delete_description": "Czy na pewno chcesz usunąć Twoją L7 rule?",
+  "octavia_load_balancer_list_l7_rules_delete_cancel": "Anuluj",
+  "octavia_load_balancer_list_l7_rules_delete_confirm": "Usuń",
+  "octavia_load_balancer_list_l7_rules_delete_success": "Twoja L7 rule została usunięta."
+}

packages/manager/apps/pci-load-balancer/public/translations/l7/rules/delete/Messages_pt_PT.json

@@ -0,0 +1,7 @@
+{
+  "octavia_load_balancer_list_l7_rules_delete_title": "Eliminar uma L7 rule",
+  "octavia_load_balancer_list_l7_rules_delete_description": "Tem a certeza de que quer eliminar a sua L7 rule?",
+  "octavia_load_balancer_list_l7_rules_delete_cancel": "Anular",
+  "octavia_load_balancer_list_l7_rules_delete_confirm": "Eliminar",
+  "octavia_load_balancer_list_l7_rules_delete_success": "A sua L7 rule foi eliminada com sucesso!"
+}

packages/manager/apps/pci-load-balancer/src/api/data/l7Rules.ts

@@ -26,3 +26,15 @@ export const getL7Rules = async (
   );
   return data;
 };
+
+export const deleteL7Rule = async (
+  projectId: string,
+  region: string,
+  policyId: string,
+  ruleId: string,
+) => {
+  const { data } = await v6.delete(
+    `/cloud/project/${projectId}/region/${region}/loadbalancing/l7Policy/${policyId}/l7Rule/${ruleId}`,
+  );
+  return data;
+};

packages/manager/apps/pci-load-balancer/src/api/hook/useL7Rule.tsx

@@ -1,9 +1,10 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { ColumnSort, PaginationState } from '@ovh-ux/manager-react-components';
 import { applyFilters, Filter } from '@ovh-ux/manager-core-api';
 import { useMemo } from 'react';
 import { paginateResults, sortResults } from '@/helpers';
-import { getL7Rules, TL7Rule } from '@/api/data/l7Rules';
+import { deleteL7Rule, getL7Rules, TL7Rule } from '@/api/data/l7Rules';
+import queryClient from '@/queryClient';
 
 export const useGetAllL7Rules = (
   projectId: string,
@@ -47,3 +48,36 @@ export const useL7Rules = (
     [allL7Rules, error, isLoading, isPending, pagination, sorting, filters],
   );
 };
+
+type DeleteRulesProps = {
+  projectId: string;
+  policyId: string;
+  ruleId: string;
+  region: string;
+  onError: (cause: Error) => void;
+  onSuccess: () => void;
+};
+
+export const useDeleteL7Rule = ({
+  projectId,
+  policyId,
+  ruleId,
+  region,
+  onError,
+  onSuccess,
+}: DeleteRulesProps) => {
+  const mutation = useMutation({
+    mutationFn: async () => deleteL7Rule(projectId, region, policyId, ruleId),
+    onError,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['l7Rules', projectId],
+      });
+      onSuccess();
+    },
+  });
+  return {
+    deleteL7Rule: () => mutation.mutate(),
+    ...mutation,
+  };
+};

packages/manager/apps/pci-load-balancer/src/pages/detail/listeners/l7/rules/delete/Delete.page.tsx

@@ -0,0 +1,77 @@
+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 { useDeleteL7Rule } from '@/api/hook/useL7Rule';
+
+export default function DeletePage() {
+  const { addSuccess, addError } = useNotifications();
+  const { t: tDelete } = useTranslation('l7/rules/delete');
+  const navigate = useNavigate();
+  const { projectId, policyId, region, ruleId } = useParams();
+  const onClose = () => {
+    navigate('..');
+  };
+  const { deleteL7Rule, isPending: isPendingDelete } = useDeleteL7Rule({
+    projectId,
+    region,
+    policyId,
+    ruleId,
+    onError(error: ApiError) {
+      addError(
+        <Translation ns="octavia-load-balancer">
+          {(_t) =>
+            _t('octavia_load_balancer_global_error', {
+              message: error?.response?.data?.message || error?.message || null,
+              requestId: error?.config?.headers['X-OVH-MANAGER-REQUEST-ID'],
+            })
+          }
+        </Translation>,
+        true,
+      );
+      onClose();
+    },
+    onSuccess() {
+      addSuccess(
+        <Translation ns="octavia-load-balancer-l7">
+          {(_t) => _t('octavia_load_balancer_list_l7_policies_delete_success')}
+        </Translation>,
+        true,
+      );
+      navigate('..');
+    },
+  });
+
+  const onConfirm = () => {
+    deleteL7Rule();
+  };
+
+  const onCancel = () => {
+    navigate('..');
+  };
+
+  return (
+    <DeletionModal
+      title={tDelete('octavia_load_balancer_list_l7_rules_delete_title')}
+      onConfirm={onConfirm}
+      onClose={onClose}
+      onCancel={onCancel}
+      isPending={isPendingDelete}
+      type="warning"
+      submitText={tDelete('octavia_load_balancer_list_l7_rules_delete_confirm')}
+      cancelText={tDelete('octavia_load_balancer_list_l7_rules_delete_cancel')}
+    >
+      <OsdsText
+        level={ODS_TEXT_LEVEL.body}
+        color={ODS_THEME_COLOR_INTENT.text}
+        size={ODS_TEXT_SIZE._400}
+      >
+        {tDelete('octavia_load_balancer_list_l7_rules_delete_description')}
+      </OsdsText>
+    </DeletionModal>
+  );
+}

packages/manager/apps/pci-load-balancer/src/routes.tsx

@@ -20,6 +20,7 @@ export const ROUTE_PATHS = {
   L7_EDIT: ':policyId/edit',
   L7_RULES: ':region/:loadBalancerId/listeners/:listenerId/l7/:policyId/rules',
   L7_RULES_LIST: 'list',
+  L7_RULES_DELETE: ':ruleId/delete',
   POOLS: 'pools',
   POOLS_CREATE: 'create',
   POOLS_EDIT: ':poolId/edit',
@@ -53,6 +54,9 @@ const L7PRulesListPage = lazy(() =>
 const L7PoliciesDeletePage = lazy(() =>
   import('@/pages/detail/listeners/l7/delete/Delete.page'),
 );
+const L7RulesDeletePage = lazy(() =>
+  import('@/pages/detail/listeners/l7/rules/delete/Delete.page'),
+);
 const L7PoliciesEditPage = lazy(() =>
   import('@/pages/detail/listeners/l7/edit/Edit.page'),
 );
@@ -124,10 +128,12 @@ const Routes = (
     </Route>
     <Route path={ROUTE_PATHS.L7_RULES} Component={L7RulesPage}>
       <Route path="" element={<Navigate to={ROUTE_PATHS.L7_RULES_LIST} />} />
-      <Route
-        path={ROUTE_PATHS.L7_RULES_LIST}
-        Component={L7PRulesListPage}
-      ></Route>
+      <Route path={ROUTE_PATHS.L7_RULES_LIST} Component={L7PRulesListPage}>
+        <Route
+          path={ROUTE_PATHS.L7_RULES_DELETE}
+          Component={L7RulesDeletePage}
+        />
+      </Route>
     </Route>
     <Route
       id="pools-detail"