feat(zimbra): add deletion of multiple selected email accounts

ref: #PRDCOL-219

Signed-off-by: Atef ZAAFOURI <[email protected]>

Author: atefzed

packages/manager/apps/zimbra/public/translations/accounts/Messages_fr_FR.json

@@ -9,6 +9,7 @@
   "zimbra_account_account_add": "Créer un compte",
   "zimbra_account_account_order": "Commander un compte",
   "zimbra_account_account_migrate": "Migrer un compte",
+  "zimbra_account_delete_all": "Supprimer les comptes ({{ count }})",
   "zimbra_account_tooltip_need_domain": "Veuillez d'abord configurer un domaine.",
   "zimbra_account_tooltip_need_slot": "Aucun compte disponible, veuillez en commander.",
   "zimbra_account_cancel_modal_content": "Le compte email <strong>{{ email }}</strong> et toutes ses données seront définitivement supprimées à la fin de la période d'engagement du service.",
@@ -19,6 +20,9 @@
   "zimbra_slot_modal_renew_date": "Fin de l'engagement: {{ renewDate }}",
   "zimbra_account_delete_modal_content_step1": "Êtes-vous sûr(e) de vouloir supprimer le compte email <strong>{{ email }}</strong> ?",
   "zimbra_account_delete_modal_content_step2": "Êtes-vous vraiment sûr(e) de vouloir supprimer ce compte email <strong>{{ email }}</strong> ?",
+  "zimbra_account_delete_all_modal_content_step1": "Êtes-vous sûr(e) de vouloir supprimer les comptes suivants ? <br/><strong>{{ emails }}</strong>",
+  "zimbra_account_delete_all_modal_content_step2": "Êtes-vous vraiment sûr(e) de vouloir supprimer ces comptes email suivants ? <br/><strong>{{ emails }}</strong>",
+  "zimbra_account_delete_all_confirm_label": "Saisissez <strong>{{ label }}</strong> pour confirmer la suppression: ",
   "zimbra_account_delete_modal_warn_message": "Attention cette action est irréversible et entraîne la suppression des données.",
   "zimbra_account_upgrade_cta_back": "Retour vers mes comptes emails",
   "zimbra_account_upgrade_new_offer": "Nous lançons en version bêta notre <Link href=\"{{ zimbra_emails_link }}\">nouvelle offre Zimbra Pro</Link>.",

packages/manager/apps/zimbra/public/translations/common/Messages_fr_FR.json

@@ -47,6 +47,7 @@
   "add_email_account": "Créer un compte email",
   "email_account_settings": "Paramètres du compte",
   "delete_email_account": "Supprimer le compte",
+  "delete_email_accounts": "Supprimer les comptes",
   "order_zimbra_accounts": "Commander des comptes Zimbra",
   "select_slot": "Sélectionner une offre",
   "form_at_least_one_digit": "Doit contenir au minimum un chiffre",

packages/manager/apps/zimbra/src/pages/dashboard/emailAccounts/DatagridTopBar.component.tsx

@@ -15,7 +15,11 @@ import {
 import { OdsText, OdsTooltip } from '@ovhcloud/ods-components/react';
 
 import { ManagerButton } from '@ovh-ux/manager-react-components';
-import { ButtonType, PageLocation, useOvhTracking } from '@ovh-ux/manager-react-shell-client';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
 
 import { useDomains, usePlatform } from '@/data/hooks';
 import { GUIDES_LIST } from '@/guides.constants';
@@ -27,7 +31,15 @@ import {
 } from '@/tracking.constants';
 import { IAM_ACTIONS } from '@/utils/iamAction.constants';
 
-export const DatagridTopbar = () => {
+import { EmailAccountItem } from './EmailAccounts.types';
+
+export type DatagridTopbarProps = {
+  selectedRows?: EmailAccountItem[];
+};
+
+export const DatagridTopbar: React.FC<DatagridTopbarProps> = ({
+  selectedRows,
+}: DatagridTopbarProps) => {
   const { t } = useTranslation(['accounts', 'common']);
   const { trackClick } = useOvhTracking();
   const navigate = useNavigate();
@@ -36,6 +48,10 @@ export const DatagridTopbar = () => {
 
   const hrefAddEmailAccount = useGenerateUrl('./add', 'path');
   const hrefOrderEmailAccount = useGenerateUrl('./order', 'path');
+  const hrefDeleteSelectedEmailAccounts = useGenerateUrl(
+    './delete_all',
+    'path',
+  );
 
   const { data: domains, isLoading: isLoadingDomains } = useDomains();
 
@@ -47,7 +63,8 @@ export const DatagridTopbar = () => {
       .some(Boolean);
   }, [accountsStatistics]);
 
-  const canCreateAccount = !isLoadingDomains && !!domains?.length && hasAvailableAccounts;
+  const canCreateAccount =
+    !isLoadingDomains && !!domains?.length && hasAvailableAccounts;
 
   const handleAddEmailAccountClick = () => {
     trackClick({
@@ -76,6 +93,16 @@ export const DatagridTopbar = () => {
     });
     window.open(GUIDES_LIST.ovh_mail_migrator.url.DEFAULT, '_blank');
   };
+  const handleSelectEmailAccounts = () => {
+    navigate(hrefDeleteSelectedEmailAccounts, {
+      state: {
+        selectedEmailAccounts: selectedRows.map((row) => ({
+          id: row?.id,
+          email: row?.email,
+        })),
+      },
+    });
+  };
 
   return (
     <div className="flex gap-6">
@@ -125,6 +152,17 @@ export const DatagridTopbar = () => {
         iconAlignment={ODS_BUTTON_ICON_ALIGNMENT.right}
         icon={ODS_ICON_NAME.externalLink}
       />
+      {!!selectedRows?.length && (
+        <ManagerButton
+          id="ovh-mail-delete-selected-btn"
+          color={ODS_BUTTON_COLOR.critical}
+          size={ODS_BUTTON_SIZE.sm}
+          onClick={handleSelectEmailAccounts}
+          label={t('zimbra_account_delete_all', { count: selectedRows.length })}
+          iconAlignment={ODS_BUTTON_ICON_ALIGNMENT.right}
+          icon={ODS_ICON_NAME.trash}
+        />
+      )}
     </div>
   );
 };

packages/manager/apps/zimbra/src/pages/dashboard/emailAccounts/EmailAccountsDatagrid.component.tsx

@@ -1,15 +1,25 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { useLocation } from 'react-router-dom';
 
 import { useTranslation } from 'react-i18next';
 
 import { ODS_TEXT_PRESET } from '@ovhcloud/ods-components';
 import { OdsText } from '@ovhcloud/ods-components/react';
 
 import { NAMESPACES } from '@ovh-ux/manager-common-translations';
-import { Datagrid, DatagridColumn, useBytes } from '@ovh-ux/manager-react-components';
+import {
+  Datagrid,
+  DatagridColumn,
+  useBytes,
+} from '@ovh-ux/manager-react-components';
 
 import { AccountStatusBadge, BillingStateBadge, LabelChip } from '@/components';
-import { AccountType, ResourceStatus, getZimbraPlatformListQueryKey } from '@/data/api';
+import {
+  AccountType,
+  ResourceStatus,
+  getZimbraPlatformListQueryKey,
+} from '@/data/api';
 import { useAccounts, useSlotServices } from '@/data/hooks';
 import { useDebouncedValue, useOverridePage } from '@/hooks';
 import queryClient from '@/queryClient';
@@ -21,12 +31,20 @@ import { EmailAccountItem } from './EmailAccounts.types';
 
 export const EmailAccountsDatagrid = () => {
   const { t } = useTranslation(['accounts', 'common', NAMESPACES.STATUS]);
+  const [rowSelection, setRowSelection] = useState({});
+  const [selectedRows, setSelectedRows] = useState([]);
   const [hasADeletingAccount, setHasADeletingAccount] = useState(false);
   const isOverridedPage = useOverridePage();
   const { formatBytes } = useBytes();
+  const location = useLocation();
+  const { clearSelectedEmailAccounts } = location.state || {};
 
-  const [searchInput, setSearchInput, debouncedSearchInput, setDebouncedSearchInput] =
-    useDebouncedValue('');
+  const [
+    searchInput,
+    setSearchInput,
+    debouncedSearchInput,
+    setDebouncedSearchInput,
+  ] = useDebouncedValue('');
 
   const {
     data: accounts,
@@ -48,14 +66,23 @@ export const EmailAccountsDatagrid = () => {
     enabled: !isOverridedPage,
   });
 
+  useEffect(() => {
+    if (clearSelectedEmailAccounts) {
+      setRowSelection({});
+      setSelectedRows([]);
+    }
+  }, [clearSelectedEmailAccounts]);
+
   /* This is necessary to enable back the "Create account" button when your
    * slots are full and you delete an account and the account goes
    * from "DELETING" state to actually being deleted, because we invalidate
    * the cache when sending the delete request of the account but when it is
    * in "DELETING" state the slot is not yet freed, to me it should be
    * but it requires changes on backend side */
   useEffect(() => {
-    const current = accounts?.some((account) => account.resourceStatus === ResourceStatus.DELETING);
+    const current = accounts?.some(
+      (account) => account.resourceStatus === ResourceStatus.DELETING,
+    );
     if (hasADeletingAccount !== current) {
       if (!current) {
         queryClient.invalidateQueries({
@@ -84,29 +111,43 @@ export const EmailAccountsDatagrid = () => {
     );
   }, [accounts, services]);
 
+  const isRowSelectable = useCallback(
+    (item: EmailAccountItem) => item.status === ResourceStatus.READY,
+    [],
+  );
+
   const columns: DatagridColumn<EmailAccountItem>[] = useMemo(
     () => [
       {
         id: 'email_account',
-        cell: (item) => <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.email}</OdsText>,
+        cell: (item) => (
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.email}</OdsText>
+        ),
         label: 'common:email_account',
         isSearchable: true,
       },
       {
         id: 'organization',
-        cell: (item) => <LabelChip id={item.organizationId}>{item.organizationLabel}</LabelChip>,
+        cell: (item) => (
+          <LabelChip id={item.organizationId}>
+            {item.organizationLabel}
+          </LabelChip>
+        ),
         label: 'common:organization',
       },
       {
         id: 'offer',
-        cell: (item) => <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.offer}</OdsText>,
+        cell: (item) => (
+          <OdsText preset={ODS_TEXT_PRESET.paragraph}>{item.offer}</OdsText>
+        ),
         label: 'zimbra_account_datagrid_offer_label',
       },
       {
         id: 'quota',
         cell: (item) => (
           <OdsText preset={ODS_TEXT_PRESET.paragraph}>
-            {formatBytes(item.used, 2, 1024)} / {formatBytes(item.available, 0, 1024)}
+            {formatBytes(item.used, 2, 1024)} /{' '}
+            {formatBytes(item.available, 0, 1024)}
           </OdsText>
         ),
         label: 'zimbra_account_datagrid_quota',
@@ -123,7 +164,9 @@ export const EmailAccountsDatagrid = () => {
       },
       {
         id: 'tooltip',
-        cell: (item: EmailAccountItem) => <ActionButtonEmailAccount item={item} />,
+        cell: (item: EmailAccountItem) => (
+          <ActionButtonEmailAccount item={item} />
+        ),
         label: '',
       },
     ],
@@ -132,12 +175,18 @@ export const EmailAccountsDatagrid = () => {
 
   return (
     <Datagrid
-      topbar={<DatagridTopbar />}
+      topbar={<DatagridTopbar selectedRows={selectedRows} />}
       search={{
         searchInput,
         setSearchInput,
         onSearch: (search) => setDebouncedSearchInput(search),
       }}
+      rowSelection={{
+        rowSelection,
+        setRowSelection,
+        enableRowSelection: ({ original: item }) => isRowSelectable(item),
+        onRowSelectionChange: setSelectedRows,
+      }}
       columns={columns.map((column) => ({
         ...column,
         label: t(column.label),