feat(zimbra): add delete modal for signle and multiples redirections

atefzed · atefzed · commit 2dce6adc3383 · 2025-10-29T16:57:44.000+01:00
ref: #PRDCOL-112

Signed-off-by: Atef ZAAFOURI &lt;atefzed@gmail.com&gt;
diff --git a/packages/manager/apps/zimbra/public/translations/common/Messages_fr_FR.json b/packages/manager/apps/zimbra/public/translations/common/Messages_fr_FR.json
@@ -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",
diff --git a/packages/manager/apps/zimbra/public/translations/redirections/Messages_fr_FR.json b/packages/manager/apps/zimbra/public/translations/redirections/Messages_fr_FR.json
@@ -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",
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/redirections/Redirections.page.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/redirections/Redirections.page.tsx
@@ -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';
@@ -55,20 +56,31 @@ const columns: DatagridColumn<RedirectionItem>[] = [
   },
   {
     id: 'tooltip',
-    cell: (item) => <ActionButton data-testid="add-redirection-btn" item={item} />,
+    cell: (item) => (
+      <ActionButton data-testid="add-redirection-btn" item={item} />
+    ),
     label: '',
   },
 ];
 
 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 [
+    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,29 +93,92 @@ 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) => ({
         id: redirection.id,
         from: redirection.currentState.source,
         to: redirection.currentState.destination,
         status: redirection.resourceStatus,
-        organization: organizations?.find((o) => o.id === redirection?.currentState?.organizationId)
-          ?.currentState?.name,
+        organization: organizations?.find(
+          (o) => o.id === redirection?.currentState?.organizationId,
+        )?.currentState?.name,
       })) ?? []
     );
   }, [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 />
       {accountId && (
         <div className="mb-6">
-          <OdsText preset="heading-3">{t('zimbra_redirections_account_title')}</OdsText>
+          <OdsText preset="heading-3">
+            {t('zimbra_redirections_account_title')}
+          </OdsText>
         </div>
       )}
       <ManagerText
@@ -127,20 +202,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),
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/redirections/delete/Delete.modal.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/redirections/delete/Delete.modal.tsx
@@ -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,13 @@ import {
   useOvhTracking,
 } from '@ovh-ux/manager-react-shell-client';
 
+import {
+  deleteZimbraPlatformRedirection,
+  getZimbraPlatformRedirectionsQueryKey,
+} from '@/data/api';
+import { useRedirection } from '@/data/hooks';
 import { useGenerateUrl } from '@/hooks';
+import queryClient from '@/queryClient';
 import {
   CANCEL,
   CONFIRM,
@@ -30,17 +36,46 @@ 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 trackingName = accountId ? EMAIL_ACCOUNT_DELETE_REDIRECTION : DELETE_REDIRECTION;
-
-  const goBackUrl = useGenerateUrl('../..', 'path');
-  const onClose = () => navigate(goBackUrl);
+  const { platformId, accountId, redirectionId } = useParams();
+  const { data: redirection } = useRedirection({
+    enabled: !!redirectionId,
+  });
 
-  const { mutate: deleteRedirection, isPending: isSending } = useMutation({
-    mutationFn: (id: string) => {
-      return Promise.resolve(id);
+  const redirections = useMemo(() => {
+    let {
+      selectedRedirections,
+    }: {
+      selectedRedirections: Array<{ id: string; from: string; to: string }>;
+    } = location.state || {};
+    if (redirection && !selectedRedirections) {
+      selectedRedirections = [
+        {
+          id: redirection.id,
+          from: redirection?.currentState?.source,
+          to: redirection?.currentState?.destination,
+        },
+      ];
+    }
+    return selectedRedirections ?? [];
+  }, [location.state, redirection]);
+
+  const trackingName = accountId
+    ? EMAIL_ACCOUNT_DELETE_REDIRECTION
+    : DELETE_REDIRECTION;
+
+  const goBackUrl = useGenerateUrl(redirectionId ? '../..' : '..', 'path');
+  const onClose = (clear: boolean) =>
+    navigate(goBackUrl, { state: { clearSelectedRedirections: clear } });
+
+  const { mutate: deleteRedirections, isPending: isSending } = useMutation({
+    mutationFn: () => {
+      return Promise.all(
+        redirections.map((r) =>
+          deleteZimbraPlatformRedirection(platformId, r.id),
+        ),
+      );
     },
     onSuccess: () => {
       trackPage({
@@ -69,11 +104,11 @@ export const DeleteOrganizationModal = () => {
       );
     },
     onSettled: () => {
-      /* queryClient.invalidateQueries({
+      queryClient.invalidateQueries({
         queryKey: getZimbraPlatformRedirectionsQueryKey(platformId),
-      }); */
+      });
 
-      onClose();
+      onClose(true);
     },
   });
 
@@ -84,7 +119,7 @@ export const DeleteOrganizationModal = () => {
       actionType: 'action',
       actions: [trackingName, CONFIRM],
     });
-    deleteRedirection(redirectionId);
+    deleteRedirections();
   };
 
   const handleCancelClick = () => {
@@ -94,15 +129,19 @@ 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}
@@ -117,18 +156,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>
   );
diff --git a/packages/manager/apps/zimbra/src/pages/dashboard/redirections/delete/Delete.spec.tsx b/packages/manager/apps/zimbra/src/pages/dashboard/redirections/delete/Delete.spec.tsx
@@ -1,11 +1,16 @@
 import React from 'react';
 
+import { useNavigate } from 'react-router-dom';
+
 import { describe, expect, it } from 'vitest';
 
-import { render, screen } from '@/utils/test.provider';
+import { fireEvent, render, screen } from '@/utils/test.provider';
 
 import DeleteRedirectionModal from './Delete.modal';
 
+const mockNavigate = vi.fn();
+vi.mocked(useNavigate).mockReturnValue(mockNavigate);
+
 describe('DeleteRedirection modal', () => {
   it('should render correctly', () => {
     render(<DeleteRedirectionModal />);
@@ -18,4 +23,14 @@ describe('DeleteRedirection modal', () => {
     expect(cancelButton).not.toBeDisabled();
     expect(deleteButton).not.toBeDisabled();
   });
+
+  it('navigates back when cancel button is clicked', () => {
+    render(<DeleteRedirectionModal />);
+
+    fireEvent.click(screen.getByTestId('cancel-btn'));
+
+    expect(mockNavigate).toHaveBeenCalledWith('..', {
+      state: { clearSelectedRedirections: false },
+    });
+  });
 });
diff --git a/packages/manager/apps/zimbra/src/routes/routes.tsx b/packages/manager/apps/zimbra/src/routes/routes.tsx
