Front pour les dernières évols sur les noms de domains/mailboxes

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to
 
 ### Added
 
+- ✨(frontend) disable mailbox and allow to create pending mailbox
 - ✨(organizations) add siret to name conversion #584
 - 💄(frontend) redirect home according to abilities #588
 - ✨(maildomain_access) add API endpoint to search users #508

src/frontend/apps/desk/src/features/mail-domains/mailboxes/api/useUpdateMailboxStatus.tsx

@@ -0,0 +1,48 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+
+import { KEY_LIST_MAILBOX } from './useMailboxes';
+
+export interface DisableMailboxParams {
+  mailDomainSlug: string;
+  mailboxId: string;
+  isEnabled: boolean;
+}
+
+export const disableMailbox = async ({
+  mailDomainSlug,
+  mailboxId,
+  isEnabled,
+}: DisableMailboxParams): Promise<void> => {
+  const response = await fetchAPI(
+    `mail-domains/${mailDomainSlug}/mailboxes/${mailboxId}/${
+      isEnabled ? 'enable' : 'disable'
+    }/`,
+    {
+      method: 'POST',
+    },
+  );
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to disable the mailbox',
+      await errorCauses(response),
+    );
+  }
+};
+
+export const useUpdateMailboxStatus = () => {
+  const queryClient = useQueryClient();
+  return useMutation<void, APIError, DisableMailboxParams>({
+    mutationFn: disableMailbox,
+    onSuccess: (_data, variables) => {
+      void queryClient.invalidateQueries({
+        queryKey: [
+          KEY_LIST_MAILBOX,
+          { mailDomainSlug: variables.mailDomainSlug },
+        ],
+      });
+    },
+  });
+};

src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/MailDomainsActions.tsx

@@ -0,0 +1,115 @@
+import {
+  Button,
+  Modal,
+  ModalSize,
+  VariantType,
+  useModal,
+  useToastProvider,
+} from '@openfun/cunningham-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, DropButton, IconOptions, Text } from '@/components';
+
+import { MailDomain } from '../../domains/types';
+import { useUpdateMailboxStatus } from '../api/useUpdateMailboxStatus';
+import { MailDomainMailbox } from '../types';
+
+interface MailDomainsActionsProps {
+  mailbox: MailDomainMailbox;
+  mailDomain: MailDomain;
+}
+
+export const MailDomainsActions = ({
+  mailDomain,
+  mailbox,
+}: MailDomainsActionsProps) => {
+  const { t } = useTranslation();
+  const [isDropOpen, setIsDropOpen] = useState(false);
+  const isEnabled = mailbox.status === 'enabled';
+  const disableModal = useModal();
+  const { toast } = useToastProvider();
+
+  const { mutate: updateMailboxStatus } = useUpdateMailboxStatus();
+
+  const handleUpdateMailboxStatus = () => {
+    disableModal.close();
+    updateMailboxStatus(
+      {
+        mailDomainSlug: mailDomain.slug,
+        mailboxId: mailbox.id,
+        isEnabled: !isEnabled,
+      },
+      {
+        onError: () =>
+          toast(t('Failed to update mailbox status'), VariantType.ERROR),
+      },
+    );
+  };
+
+  if (mailbox.status === 'pending' || mailbox.status === 'failed') {
+    return null;
+  }
+
+  return (
+    <>
+      <DropButton
+        button={
+          <IconOptions
+            isOpen={isDropOpen}
+            aria-label={t('Open the access options modal')}
+          />
+        }
+        onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
+        isOpen={isDropOpen}
+      >
+        <Box>
+          <Button
+            aria-label={t('Open the modal to update the role of this access')}
+            onClick={() => {
+              setIsDropOpen(false);
+              if (isEnabled) {
+                disableModal.open();
+              } else {
+                handleUpdateMailboxStatus();
+              }
+            }}
+            fullWidth
+            color="primary-text"
+            icon={
+              <span className="material-icons" aria-hidden="true">
+                {isEnabled ? 'lock' : 'lock_open'}
+              </span>
+            }
+          >
+            <Text $theme="primary">
+              {isEnabled ? t('Disable mailbox') : t('Enable mailbox')}
+            </Text>
+          </Button>
+        </Box>
+      </DropButton>
+      <Modal
+        isOpen={disableModal.isOpen}
+        onClose={disableModal.close}
+        title={<Text $size="h3">{t('Disable mailbox')}</Text>}
+        size={ModalSize.MEDIUM}
+        rightActions={
+          <Box $direction="row" $justify="flex-end" $gap="0.5rem">
+            <Button color="secondary" onClick={disableModal.close}>
+              {t('Cancel')}
+            </Button>
+            <Button color="danger" onClick={handleUpdateMailboxStatus}>
+              {t('Disable')}
+            </Button>
+          </Box>
+        }
+      >
+        <Text>
+          {t(
+            'Are you sure you want to disable this mailbox? This action results in the deletion of the calendar, address book, etc.',
+          )}
+        </Text>
+      </Modal>
+    </>
+  );
+};

src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/MailDomainsContent.tsx

@@ -9,7 +9,7 @@ import {
   VariantType,
   usePagination,
 } from '@openfun/cunningham-react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Card, Text, TextErrors, TextStyled } from '@/components';
@@ -20,10 +20,14 @@ import { MailDomain } from '../../domains/types';
 import { useMailboxes } from '../api/useMailboxes';
 import { MailDomainMailbox } from '../types';
 
+import { MailDomainsActions } from './MailDomainsActions';
+
 export type ViewMailbox = {
   name: string;
   email: string;
   id: UUID;
+  status: MailDomainMailbox['status'];
+  mailbox: MailDomainMailbox;
 };
 
 // FIXME : ask Cunningham to export this type
@@ -72,6 +76,8 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
           email: `${mailbox.local_part}@${mailDomain.name}`,
           name: `${mailbox.first_name} ${mailbox.last_name}`,
           id: mailbox.id,
+          status: mailbox.status,
+          mailbox,
         }))
       : [];
 
@@ -97,7 +103,16 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
         showMailBoxCreationForm={setIsCreateMailboxFormVisible}
       />
 
-      <Card $overflow="auto" aria-label={t('Mailboxes list card')}>
+      <Card
+        $overflow="auto"
+        aria-label={t('Mailboxes list card')}
+        $css={`
+
+          & table td:last-child {
+            text-align: right;
+          }
+      `}
+      >
         {error && <TextErrors causes={error.cause} />}
 
         <DataGrid
@@ -119,6 +134,19 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
               field: 'email',
               headerName: t('Emails'),
             },
+            {
+              field: 'status',
+              headerName: t('Status'),
+            },
+            {
+              id: 'column-actions',
+              renderCell: ({ row }) => (
+                <MailDomainsActions
+                  mailbox={row.mailbox}
+                  mailDomain={mailDomain}
+                />
+              ),
+            },
           ]}
           rows={viewMailboxes}
           isLoading={isLoading}
@@ -147,6 +175,8 @@ const TopBanner = ({
   showMailBoxCreationForm: (value: boolean) => void;
 }) => {
   const { t } = useTranslation();
+  const canCreateMailbox =
+    mailDomain.status === 'enabled' || mailDomain.status === 'pending';
 
   return (
     <Box $direction="column" $gap="1rem">
@@ -164,7 +194,7 @@ const TopBanner = ({
               aria-label={t('Create a mailbox in {{name}} domain', {
                 name: mailDomain?.name,
               })}
-              disabled={mailDomain?.status !== 'enabled'}
+              disabled={!canCreateMailbox}
               onClick={() => showMailBoxCreationForm(true)}
             >
               {t('Create a mailbox')}
@@ -181,14 +211,6 @@ const AlertStatus = ({ status }: { status: MailDomain['status'] }) => {
 
   const getStatusAlertProps = (status?: string) => {
     switch (status) {
-      case 'pending':
-        return {
-          variant: VariantType.WARNING,
-          message: t(
-            'Your domain name is being validated. ' +
-              'You will not be able to create mailboxes until your domain name has been validated by our team.',
-          ),
-        };
       case 'disabled':
         return {
           variant: VariantType.NEUTRAL,

src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/__tests__/MailDomainsContent.test.tsx

@@ -194,10 +194,6 @@ describe('MailDomainsContent', () => {
     });
 
     const statuses = [
-      {
-        status: 'pending',
-        regex: /Your domain name is being validated/,
-      },
       {
         status: 'disabled',
         regex:

src/frontend/apps/desk/src/features/mail-domains/mailboxes/types.ts

@@ -6,4 +6,11 @@ export interface MailDomainMailbox {
   first_name: string;
   last_name: string;
   secondary_email: string;
+  status: MailDomainMailboxStatus;
 }
+
+export type MailDomainMailboxStatus =
+  | 'enabled'
+  | 'disabled'
+  | 'pending'
+  | 'failed';