🚑️(teams) hide display add button when disallowed

The frontend should not display "add team" actions when the
user has not the ability.

src/frontend/apps/desk/src/features/teams/teams-panel/__tests__/PanelTeams.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 
+import { useAuthStore } from '@/core/auth';
 import { AppWrapper } from '@/tests/utils';
 
 import { Panel } from '../components/Panel';
@@ -23,6 +24,19 @@ describe('PanelTeams', () => {
   });
 
   it('renders with no team to display', async () => {
+    useAuthStore.setState({
+      userData: {
+        id: '1',
+        email: 'test@example.com',
+        name: 'Test User',
+        abilities: {
+          teams: { can_view: true, can_create: true },
+          mailboxes: { can_view: true },
+          contacts: { can_view: true },
+        },
+      },
+    });
+
     fetchMock.mock(`end:/teams/?ordering=-created_at`, []);
 
     render(<TeamList />, { wrapper: AppWrapper });

src/frontend/apps/desk/src/features/teams/teams-panel/components/PanelActions.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import IconAdd from '@/assets/icons/icon-add.svg';
 import IconSort from '@/assets/icons/icon-sort.svg';
 import { Box, BoxButton, StyledLink } from '@/components';
+import { useAuthStore } from '@/core/auth';
 import { useCunninghamTheme } from '@/cunningham';
 import { TeamsOrdering } from '@/features/teams/team-management/api';
 
@@ -13,6 +14,9 @@ export const PanelActions = () => {
   const { t } = useTranslation();
   const { changeOrdering, ordering } = useTeamStore();
   const { colorsTokens } = useCunninghamTheme();
+  const { userData } = useAuthStore();
+
+  const can_create = userData?.abilities?.teams.can_create ?? false;
 
   const isSortAsc = ordering === TeamsOrdering.BY_CREATED_ON;
 
@@ -43,17 +47,19 @@ export const PanelActions = () => {
       >
         <IconSort width={30} height={30} aria-hidden="true" />
       </BoxButton>
-      <StyledLink href="/teams/create">
+      {can_create && (
-        <BoxButton
+        <StyledLink href="/teams/create">
-          as="span"
+          <BoxButton
-          $margin={{ all: 'auto' }}
+            as="span"
-          aria-label={t('Add a team')}
+            $margin={{ all: 'auto' }}
-          $color={colorsTokens()['primary-600']}
+            aria-label={t('Add a team')}
-          tabIndex={-1}
+            $color={colorsTokens()['primary-600']}
-        >
+            tabIndex={-1}
-          <IconAdd width={27} height={27} aria-hidden="true" />
+          >
-        </BoxButton>
+            <IconAdd width={27} height={27} aria-hidden="true" />
-      </StyledLink>
+          </BoxButton>
+        </StyledLink>
+      )}
     </Box>
   );
 };

src/frontend/apps/desk/src/features/teams/teams-panel/components/TeamList.tsx

@@ -3,6 +3,7 @@ import React, { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Text } from '@/components';
+import { useAuthStore } from '@/core/auth';
 import { Team, useTeams } from '@/features/teams/team-management';
 
 import { useTeamStore } from '../store';
@@ -17,6 +18,9 @@ interface PanelTeamsStateProps {
 
 const TeamListState = ({ isLoading, isError, teams }: PanelTeamsStateProps) => {
   const { t } = useTranslation();
+  const { userData } = useAuthStore();
+
+  const can_create = userData?.abilities?.teams.can_create ?? false;
 
   if (isError) {
     return (
@@ -42,11 +46,13 @@ const TeamListState = ({ isLoading, isError, teams }: PanelTeamsStateProps) => {
         <Text as="p" $margin={{ vertical: 'none' }}>
           {t('0 group to display.')}
         </Text>
-        <Text as="p">
+        {can_create && (
-          {t(
+          <Text as="p">
-            'Create your first team by clicking on the "Create a new team" button.',
+            {t(
-          )}
+              'Create your first team by clicking on the "Create a new team" button.',
-        </Text>
+            )}
+          </Text>
+        )}
       </Box>
     );
   }

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

@@ -39,9 +39,18 @@ test.describe('Config', () => {
     await page.goto('/');
     await keyCloakSignIn(page, browserName, 'mail-member');
 
-    await expect(page.locator('menu')).toBeHidden();
+    await page
+      .locator('menu')
+      .first()
+      .getByLabel(`Mail Domains button`)
+      .click();
+    await expect(page).toHaveURL(/mail-domains\//);
 
-    await expect(page.getByText('Mail Domains')).toBeVisible();
+    await expect(
+      page
+        .getByLabel('Mail domains panel', { exact: true })
+        .getByText('Mail Domains'),
+    ).toBeVisible();
   });
 
   test('it checks that the user abilities display teams', async ({