From a591c641696f00e9c2c10a31a5cbc5dfb94f2307 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?El=C3=A9onore=20Voisin?= <elevoisin@gmail.com>
Date: Thu, 12 Jun 2025 17:37:34 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(front)=20fix=20button=20add=20mail?=
 =?UTF-8?q?=20domain?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix button rules + fix bad wording
---
 CHANGELOG.md                                  |  1 +
 .../desk/src/cunningham/cunningham-style.css  |  6 ++-
 .../components/ModalUpdateMailbox.tsx         | 24 ++++-----
 .../components/panel/MailBoxesListView.tsx    |  5 ++
 .../components/panel/PanelActions.tsx         |  2 +-
 .../features/mail-domains/mailboxes/types.ts  |  9 ++++
 .../{[slug]/index.tsx => [slug].tsx}          |  0
 .../pages/mail-domains/[slug]/accesses.tsx    | 51 -------------------
 .../desk/src/pages/mail-domains/index.tsx     | 31 ++---------
 9 files changed, 37 insertions(+), 92 deletions(-)
 rename src/frontend/apps/desk/src/pages/mail-domains/{[slug]/index.tsx => [slug].tsx} (100%)
 delete mode 100644 src/frontend/apps/desk/src/pages/mail-domains/[slug]/accesses.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0cf30c7b..985f3e1b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to
 
 ### Added
 
+- ⚡️(fix) fix button add mail domain + add modal view information mailbox 
 - ⚡️(fix) add error when mailbox create failed
 - ✨(mailbox) allow to reset password on mailboxes #834
 
diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-style.css b/src/frontend/apps/desk/src/cunningham/cunningham-style.css
index 155a6796..f561022f 100644
--- a/src/frontend/apps/desk/src/cunningham/cunningham-style.css
+++ b/src/frontend/apps/desk/src/cunningham/cunningham-style.css
@@ -243,6 +243,10 @@ input:-webkit-autofill:focus {
   border-bottom: 1px var(--c--theme--colors--greyscale-100) solid;
 }
 
+.c__datagrid__table__container > table tbody tr:hover {
+  background-color: var(--c--theme--colors--greyscale-050);
+}
+
 .c__datagrid__table__container > table tbody {
   background-color: var(--c--components--datagrid--body--background-color);
   color: var(--c--theme--colors--greyscale-900);
@@ -259,7 +263,7 @@ input:-webkit-autofill:focus {
 
 .c__datagrid__table__container > table th:first-child,
 .c__datagrid__table__container > table td:first-child {
-  padding-left: 0;
+  padding-left: 15px;
 }
 
 .c__datagrid__table__container > table tr:last-child {
diff --git a/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/ModalUpdateMailbox.tsx b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/ModalUpdateMailbox.tsx
index 60d1977e..06c859c8 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/ModalUpdateMailbox.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/ModalUpdateMailbox.tsx
@@ -24,7 +24,7 @@ import { CustomModal } from '@/components/modal/CustomModal';
 
 import { MailDomain } from '../../domains/types';
 import { useUpdateMailbox } from '../api/useUpdateMailbox';
-import { ViewMailbox } from '../types';
+import { Step, ViewMailbox } from '../types';
 
 const FORM_ID = 'form-update-mailbox';
 
@@ -70,7 +70,7 @@ export const ModalUpdateMailbox = ({
       onClose();
     },
     onError: (error: APIError) => {
-      const causes =
+      const causes: string[] =
         parseAPIError({
           error,
           errorParams: [
@@ -116,7 +116,7 @@ export const ModalUpdateMailbox = ({
     return null;
   }
 
-  const steps = [
+  const steps: Step[] = [
     {
       title: t('Set up account'),
       content: (
@@ -204,15 +204,15 @@ export const ModalUpdateMailbox = ({
           {t('Cancel')}
         </Button>
       ),
-      rightAction: (
-        <Button
-          type="submit"
-          form={FORM_ID}
-          disabled={!methods.formState.isValid || isPending}
-        >
-          {t('Update')}
-        </Button>
-      ),
+      // rightAction: (
+      //   <Button
+      //     type="submit"
+      //     form={FORM_ID}
+      //     disabled={!methods.formState.isValid || isPending}
+      //   >
+      //     {t('Update')}
+      //   </Button>
+      // ),
     },
   ];
 
diff --git a/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/panel/MailBoxesListView.tsx b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/panel/MailBoxesListView.tsx
index 230d6544..342eba2d 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/panel/MailBoxesListView.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/panel/MailBoxesListView.tsx
@@ -91,6 +91,11 @@ export function MailBoxesListView({
             {
               field: 'local_part',
               headerName: `${t('Address')} • ${filteredMailboxes.length}`,
+              renderCell: ({ row }) => (
+                <Text>
+                  {row.local_part}@{mailDomain.name}
+                </Text>
+              ),
             },
             {
               field: 'first_name',
diff --git a/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/panel/PanelActions.tsx b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/panel/PanelActions.tsx
index f0423520..3e02d6ce 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/panel/PanelActions.tsx
+++ b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/components/panel/PanelActions.tsx
@@ -104,7 +104,7 @@ export const PanelActions = ({ mailDomain, mailbox }: PanelActionsProps) => {
               </span>
             }
           >
-            <Text $theme="primary">{t('Configure mailbox')}</Text>
+            <Text $theme="primary">{t('Informations mailbox')}</Text>
           </Button>
           <Button
             aria-label={t('Open the modal to update the role of this access')}
diff --git a/src/frontend/apps/desk/src/features/mail-domains/mailboxes/types.ts b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/types.ts
index 0606f68c..b12572aa 100644
--- a/src/frontend/apps/desk/src/features/mail-domains/mailboxes/types.ts
+++ b/src/frontend/apps/desk/src/features/mail-domains/mailboxes/types.ts
@@ -1,5 +1,7 @@
 import { UUID } from 'crypto';
 
+import { ReactNode } from 'react';
+
 export interface MailDomainMailbox {
   id: UUID;
   local_part: string;
@@ -23,3 +25,10 @@ export interface ViewMailbox {
   secondary_email: string;
   status: MailDomainMailboxStatus;
 }
+
+export interface Step {
+  title: string;
+  content: ReactNode;
+  leftAction: ReactNode;
+  rightAction?: ReactNode;
+}
diff --git a/src/frontend/apps/desk/src/pages/mail-domains/[slug]/index.tsx b/src/frontend/apps/desk/src/pages/mail-domains/[slug].tsx
similarity index 100%
rename from src/frontend/apps/desk/src/pages/mail-domains/[slug]/index.tsx
rename to src/frontend/apps/desk/src/pages/mail-domains/[slug].tsx
diff --git a/src/frontend/apps/desk/src/pages/mail-domains/[slug]/accesses.tsx b/src/frontend/apps/desk/src/pages/mail-domains/[slug]/accesses.tsx
deleted file mode 100644
index e6d4fd03..00000000
--- a/src/frontend/apps/desk/src/pages/mail-domains/[slug]/accesses.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Loader } from '@openfun/cunningham-react';
-import { useRouter as useNavigate } from 'next/navigation';
-import { useRouter } from 'next/router';
-import { ReactElement } from 'react';
-
-import { Box } from '@/components';
-import { TextErrors } from '@/components/TextErrors';
-import {
-  MailDomainsLayout,
-  useMailDomain,
-} from '@/features/mail-domains/domains';
-import { NextPageWithLayout } from '@/types/next';
-
-const MailDomainAccessesPage: NextPageWithLayout = () => {
-  const router = useRouter();
-
-  if (router?.query?.slug && typeof router.query.slug !== 'string') {
-    throw new Error('Invalid mail domain slug');
-  }
-
-  const { slug } = router.query;
-
-  const navigate = useNavigate();
-
-  const { error, isError, isLoading } = useMailDomain({ slug: String(slug) });
-
-  if (error?.status === 404) {
-    navigate.replace(`/404`);
-    return null;
-  }
-
-  if (isError && error) {
-    return <TextErrors causes={error?.cause} />;
-  }
-
-  if (isLoading) {
-    return (
-      <Box $align="center" $justify="center" $height="100%">
-        <Loader />
-      </Box>
-    );
-  }
-
-  return null;
-};
-
-MailDomainAccessesPage.getLayout = function getLayout(page: ReactElement) {
-  return <MailDomainsLayout>{page}</MailDomainsLayout>;
-};
-
-export default MailDomainAccessesPage;
diff --git a/src/frontend/apps/desk/src/pages/mail-domains/index.tsx b/src/frontend/apps/desk/src/pages/mail-domains/index.tsx
index 3d9c6ac0..c74a4138 100644
--- a/src/frontend/apps/desk/src/pages/mail-domains/index.tsx
+++ b/src/frontend/apps/desk/src/pages/mail-domains/index.tsx
@@ -1,9 +1,8 @@
-import { Button, Input, Tooltip } from '@openfun/cunningham-react';
+import { Button, Input } from '@openfun/cunningham-react';
 import React, { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Text } from '@/components';
-import { useAuthStore } from '@/core/auth';
 import { useCunninghamTheme } from '@/cunningham';
 import { ModalAddMailDomain } from '@/features/mail-domains/domains/components/ModalAddMailDomain';
 import { MailDomainsListView } from '@/features/mail-domains/domains/components/panel/MailDomainsListView';
@@ -12,8 +11,6 @@ import { NextPageWithLayout } from '@/types/next';
 
 const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
-  const { userData } = useAuthStore();
-  const can_create = userData?.abilities?.mailboxes.can_create;
   const [isModalOpen, setIsModalOpen] = React.useState(false);
   const [searchValue, setSearchValue] = React.useState('');
   const { colorsTokens } = useCunninghamTheme();
@@ -106,32 +103,12 @@ const Page: NextPageWithLayout = () => {
           <Box className="block md:hidden" $css="margin-bottom: 10px;"></Box>
 
           <Box>
-            {can_create ? (
-              <Button data-testid="button-new-domain" onClick={openModal}>
-                {t('Add a mail domain')}
-              </Button>
-            ) : (
-              <Tooltip content={t("You don't have the correct access right")}>
-                <div>
-                  <Button
-                    data-testid="button-new-domain"
-                    onClick={openModal}
-                    disabled={!can_create}
-                  >
-                    {t('Add a mail domain')}
-                  </Button>
-                </div>
-              </Tooltip>
-            )}
+            <Button data-testid="button-new-domain" onClick={openModal}>
+              {t('Add a mail domain')}
+            </Button>
           </Box>
         </Box>
 
-        {!can_create && (
-          <p style={{ textAlign: 'center' }}>
-            {t('Click on mailbox to view details')}
-          </p>
-        )}
-
         <MailDomainsListView querySearch={searchValue} />
         {isModalOpen && <ModalAddMailDomain closeModal={closeModal} />}
       </Box>