ovh · atefzed · Oct 29, 2025
@@ -31,6 +31,7 @@
   "delete_domain": "Supprimer le domaine",
   "redirections": "Redirections",
   "delete_redirection": "Supprimer la redirection",
+  "delete_redirections": "Supprimer les redirections",
   "add_redirection": "Créer une redirection",
   "edit_redirection": "Modifier la redirection",
   "auto_reply": "Répondeur",

@@ -4,6 +4,7 @@
   "zimbra_redirections_account_title": "Gestion des redirections",
   "zimbra_redirections_account_quota": "Quota de redirection",
   "zimbra_redirections_delete_modal_content": "Souhaitez-vous supprimer la redirection ?",
+  "zimbra_redirections_delete_selected_modal_content": "Souhaitez-vous supprimer les redirections ?",
   "zimbra_redirections_add_header": "Merci de compléter les informations pour la redirection.",
   "zimbra_redirections_add_form_input_from": "De l'adresse",
   "zimbra_redirections_add_form_input_to": "Vers l'adresse",

@@ -18,5 +18,4 @@ export * from './slot/useSlot';
 export * from './services/useSlotServices';
 export * from './services/useSlotService';
 export * from './task/useTasks';
-export * from './redirection/useRedirection';
 export * from './redirection/useRedirections';
@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { Outlet, useNavigate, useParams } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
 
 import { useTranslation } from 'react-i18next';
 
@@ -22,6 +22,7 @@ import {
 
 import { BadgeStatus } from '@/components';
 import { MAX_REDIRECTIONS_QUOTA } from '@/constants';
+import { ResourceStatus } from '@/data/api';
 import { useOrganizations, usePlatform, useRedirections } from '@/data/hooks';
 import { useDebouncedValue, useGenerateUrl } from '@/hooks';
 import { DATAGRID_REFRESH_INTERVAL, DATAGRID_REFRESH_ON_MOUNT } from '@/utils';
@@ -63,12 +64,17 @@ const columns: DatagridColumn<RedirectionItem>[] = [
 export const Redirections = () => {
   const { t } = useTranslation(['redirections', 'common', NAMESPACES.STATUS]);
   const navigate = useNavigate();
+  const location = useLocation();
   const { platformUrn } = usePlatform();
   const { accountId } = useParams();
   const [searchInput, setSearchInput, debouncedSearchInput, setDebouncedSearchInput] =
     useDebouncedValue('');
+  const [rowSelection, setRowSelection] = useState({});
+  const [selectedRows, setSelectedRows] = useState<RedirectionItem[]>([]);
   const hrefAddRedirection = useGenerateUrl('./add', 'path');
+  const hrefDeleteSelectedRedirection = useGenerateUrl('./delete_all', 'path');
   const { data: organizations } = useOrganizations();
+  const { clearSelectedRedirections } = location.state || {};
   const {
     data: redirections,
     isLoading,
@@ -81,10 +87,34 @@ export const Redirections = () => {
     refetchOnMount: DATAGRID_REFRESH_ON_MOUNT,
   });
 
+  useEffect(() => {
+    if (clearSelectedRedirections) {
+      setRowSelection({});
+      setSelectedRows([]);
+    }
+  }, [clearSelectedRedirections]);
+
   const handleAddEmailRedirectionClick = () => {
     navigate(hrefAddRedirection);
   };
 
+  const handleDeleteSelectedRedirectionClick = () => {
+    navigate(hrefDeleteSelectedRedirection, {
+      state: {
+        selectedRedirections: selectedRows.map((row) => ({
+          id: row?.id,
+          from: row?.from,
+          to: row?.to,
+        })),
+      },
+    });
+  };
+
+  const isRowSelectable = useCallback(
+    (item: RedirectionItem) => item.status === ResourceStatus.READY,
+    [],
+  );
+
   const items = useMemo(() => {
     return (
       redirections?.map((redirection) => ({
@@ -98,6 +128,40 @@ export const Redirections = () => {
     );
   }, [redirections, organizations]);
 
+  const topbar = useMemo(
+    () => (
+      <div className="flex gap-6">
+        <ManagerButton
+          color={ODS_BUTTON_COLOR.primary}
+          inline-block
+          size={ODS_BUTTON_SIZE.sm}
+          onClick={handleAddEmailRedirectionClick}
+          urn={platformUrn}
+          iamActions={[IAM_ACTIONS.redirection.create]}
+          data-testid="add-redirection-btn"
+          id="add-redirection-btn"
+          icon={ODS_ICON_NAME.plus}
+          label={t('common:add_redirection')}
+        />
+        {!!selectedRows?.length && (
+          <ManagerButton
+            color={ODS_BUTTON_COLOR.critical}
+            inline-block
+            size={ODS_BUTTON_SIZE.sm}
+            onClick={handleDeleteSelectedRedirectionClick}
+            urn={platformUrn}
+            iamActions={[IAM_ACTIONS.redirection.delete]}
+            data-testid="delete-all-redirection-btn"
+            id="delete-all-redirection-btn"
+            icon={ODS_ICON_NAME.trash}
+            label={`${t('common:delete_redirections')} (${selectedRows.length})`}
+          />
+        )}
+      </div>
+    ),
+    [platformUrn, selectedRows],
+  );
+
   return (
     <div>
       <Outlet />
@@ -127,20 +191,13 @@ export const Redirections = () => {
           setSearchInput,
           onSearch: (search) => setDebouncedSearchInput(search),
         }}
-        topbar={
-          <ManagerButton
-            color={ODS_BUTTON_COLOR.primary}
-            inline-block
-            size={ODS_BUTTON_SIZE.sm}
-            onClick={handleAddEmailRedirectionClick}
-            urn={platformUrn}
-            iamActions={[IAM_ACTIONS.redirection.create]}
-            data-testid="add-redirection-btn"
-            id="add-redirection-btn"
-            icon={ODS_ICON_NAME.plus}
-            label={t('common:add_redirection')}
-          />
-        }
+        rowSelection={{
+          rowSelection,
+          setRowSelection,
+          enableRowSelection: ({ original: item }) => isRowSelectable(item),
+          onRowSelectionChange: setSelectedRows,
+        }}
+        topbar={topbar}
         columns={columns.map((column) => ({
           ...column,
           label: t(column.label),

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
-import { useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 
 import { useMutation } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
@@ -18,7 +18,10 @@ import {
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
 
+import { deleteZimbraPlatformRedirection, getZimbraPlatformRedirectionsQueryKey } from '@/data/api';
+import { useRedirections } from '@/data/hooks';
 import { useGenerateUrl } from '@/hooks';
+import queryClient from '@/queryClient';
 import {
   CANCEL,
   CONFIRM,
@@ -30,17 +33,43 @@ export const DeleteOrganizationModal = () => {
   const { trackClick, trackPage } = useOvhTracking();
   const { t } = useTranslation(['redirections', 'common', NAMESPACES.ACTIONS]);
   const navigate = useNavigate();
+  const location = useLocation();
   const { addSuccess, addError } = useNotifications();
-  const { accountId, redirectionId } = useParams();
+  const { platformId, accountId, redirectionId } = useParams();
+  const { data: allRedirections, isLoading } = useRedirections({
+    enabled: !!redirectionId,
+  });
+
+  const redirections = useMemo(() => {
+    let {
+      selectedRedirections,
+    }: {
+      selectedRedirections: Array<{ id: string; from: string; to: string }>;
+    } = location.state || {};
+    const redirection = allRedirections?.find((r) => r.id === redirectionId);
+    if (redirection && !selectedRedirections) {
+      selectedRedirections = [
+        {
+          id: redirection.id,
+          from: redirection?.currentState?.source,
+          to: redirection?.currentState?.destination,
+        },
+      ];
+    }
+    return selectedRedirections ?? [];
+  }, [location.state, redirectionId, allRedirections]);
 
   const trackingName = accountId ? EMAIL_ACCOUNT_DELETE_REDIRECTION : DELETE_REDIRECTION;
 
-  const goBackUrl = useGenerateUrl('../..', 'path');
-  const onClose = () => navigate(goBackUrl);
+  const goBackUrl = useGenerateUrl('..', 'path');
+  const onClose = (clear: boolean) =>
+    navigate(goBackUrl, { state: { clearSelectedRedirections: clear } });
 
-  const { mutate: deleteRedirection, isPending: isSending } = useMutation({
-    mutationFn: (id: string) => {
-      return Promise.resolve(id);
+  const { mutate: deleteRedirections, isPending: isSending } = useMutation({
+    mutationFn: () => {
+      return Promise.all(
+        redirections.map((r) => deleteZimbraPlatformRedirection(platformId, r.id)),
+      );
     },
     onSuccess: () => {
       trackPage({
@@ -69,11 +98,11 @@ export const DeleteOrganizationModal = () => {
       );
     },
     onSettled: () => {
-      /* queryClient.invalidateQueries({
+      queryClient.invalidateQueries({
         queryKey: getZimbraPlatformRedirectionsQueryKey(platformId),
-      }); */
+      });
 
-      onClose();
+      onClose(true);
     },
   });
 
@@ -84,7 +113,7 @@ export const DeleteOrganizationModal = () => {
       actionType: 'action',
       actions: [trackingName, CONFIRM],
     });
-    deleteRedirection(redirectionId);
+    deleteRedirections();
   };
 
   const handleCancelClick = () => {
@@ -94,18 +123,18 @@ export const DeleteOrganizationModal = () => {
       actionType: 'action',
       actions: [trackingName, CANCEL],
     });
-    onClose();
+    onClose(false);
   };
 
   return (
     <Modal
       type={ODS_MODAL_COLOR.critical}
-      heading={t('common:delete_redirection')}
+      heading={redirectionId ? t('common:delete_redirection') : t('common:delete_redirections')}
       isOpen
-      onDismiss={onClose}
+      onDismiss={() => onClose(false)}
       primaryLabel={t(`${NAMESPACES.ACTIONS}:delete`)}
       onPrimaryButtonClick={handleConfirmClick}
-      isPrimaryButtonLoading={isSending}
+      isPrimaryButtonLoading={isSending || isLoading}
       primaryButtonTestId="delete-btn"
       secondaryLabel={t(`${NAMESPACES.ACTIONS}:cancel`)}
       onSecondaryButtonClick={handleCancelClick}
@@ -117,18 +146,27 @@ export const DeleteOrganizationModal = () => {
           className="mt-5 mb-5"
           data-testid="modal-content"
         >
-          {t('zimbra_redirections_delete_modal_content')}
-        </OdsText>
-
-        <OdsText preset={ODS_TEXT_PRESET.paragraph} className="font-bold">
-          {t('zimbra_redirections_from')}
-          {' :'}
-        </OdsText>
-
-        <OdsText preset={ODS_TEXT_PRESET.paragraph} className="font-bold">
-          {t('zimbra_redirections_to')}
-          {' :'}
+          {redirectionId
+            ? t('zimbra_redirections_delete_modal_content')
+            : t('zimbra_redirections_delete_selected_modal_content')}
         </OdsText>
+        <div className="flex flex-col">
+          {redirections.map((item) => (
+            <div className="flex gap-6" key={item?.id}>
+              <OdsText preset={ODS_TEXT_PRESET.paragraph} className="font-bold">
+                {t('zimbra_redirections_from')}
+                {': '}
+                {item?.from}
+              </OdsText>
+
+              <OdsText preset={ODS_TEXT_PRESET.paragraph} className="font-bold">
+                {t('zimbra_redirections_to')}
+                {': '}
+                {item?.to}
+              </OdsText>
+            </div>
+          ))}
+        </div>
       </>
     </Modal>
   );