🐛(front) fix button add mail domain (#932)

fix button rules + fix bad wording

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to
 
 ### Added
 
+- 🐛(front) fix button add mail domain
 - ✨(teams) add matrix webhook for teams #904
 - ✨(resource-server) add SCIM /Me endpoint #895
 - 🔧(git) set LF line endings for all text files #928

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 {

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

@@ -97,6 +97,7 @@ export function MailBoxesListView({
             {
               field: 'email',
               headerName: `${t('Address')} • ${filteredMailboxes.length}`,
+              renderCell: ({ row }) => <Text>{row.email}</Text>,
             },
             {
               field: 'name',

src/frontend/apps/desk/src/pages/mail-domains/[slug]/accesses.tsx

@@ -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;

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}>
-              <Button data-testid="button-new-domain" onClick={openModal}>
+              {t('Add a mail domain')}
-                {t('Add a mail domain')}
+            </Button>
-              </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>
-            )}
           </Box>
         </Box>
 
-        {!can_create && (
-          <p style={{ textAlign: 'center' }}>
-            {t('Click on mailbox to view details')}
-          </p>
-        )}
-
         <MailDomainsListView querySearch={searchValue} />
         {isModalOpen && <ModalAddMailDomain closeModal={closeModal} />}
       </Box>

src/frontend/apps/e2e/__tests__/app-desk/mail-domain-create-mailbox.spec.ts

@@ -238,7 +238,7 @@ test.describe('Mail domain create mailbox', () => {
     await inputLastName.fill('Doe');
     await inputLocalPart.fill('john.doe');
 
-    await expect(page.locator('span').getByText('@domain.fr')).toBeVisible();
+    await expect(page.getByText('@domain.fr', { exact: true })).toBeVisible();
     await inputSecondaryEmailAddress.fill('john.doe@mail.com');
 
     await page.getByRole('button', { name: 'Create' }).click();

src/frontend/apps/e2e/__tests__/app-desk/menu.spec.ts

@@ -76,17 +76,11 @@ test.describe('Menu', () => {
 
     const menu = page.locator('menu').first();
 
-    let buttonMenu = menu.getByLabel(`Teams button`);
+    const buttonMenu = menu.getByLabel(`Teams button`);
     await buttonMenu.click();
     await expect(
       page.getByText('Click on team to view details').first(),
     ).toBeVisible();
-
-    buttonMenu = menu.getByLabel(`Mail Domains`);
-    await buttonMenu.click();
-    await expect(
-      page.getByText('Click on mailbox to view details').first(),
-    ).toBeVisible();
   });
 
   test(`it checks that the menu is not displaying when all abilities`, async ({
@@ -122,12 +116,12 @@ test.describe('Menu', () => {
 
     const menu = page.locator('menu').first();
 
-    let buttonMenu = menu.getByLabel(`Teams button`);
+    const buttonMenu = menu.getByLabel(`Teams button`);
     await buttonMenu.click();
     await expect(page.getByText('Create a new team').first()).toBeVisible();
 
-    buttonMenu = menu.getByLabel(`Mail Domains`);
+    const buttonMenuMailDomain = menu.getByLabel(`Mail Domains`);
-    await buttonMenu.click();
+    await buttonMenuMailDomain.click();
     await expect(page.getByText('Add a mail domain').first()).toBeVisible();
   });
 });