✨(app-desk) add team info component

Add the team info component to the team page.
This component shows some informations about the team:
  - name
  - amount of members
  - date created
  - date updated

src/frontend/apps/desk/src/features/teams/api/index.ts

@@ -1 +1,2 @@
 export * from './useCreateTeam';
+export * from './useTeam';

src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import IconGroup from '@/assets/icons/icon-group2.svg';
+import { Box, Card, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { TeamResponse } from '../api/types';
+
+interface TeamInfoProps {
+  team: TeamResponse;
+}
+
+export const TeamInfo = ({ team }: TeamInfoProps) => {
+  const { t } = useTranslation();
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <Card className="m-b" style={{ paddingBottom: 0 }}>
+      <Box className="m-b" $direction="row" $align="center" $gap="1.5rem">
+        <IconGroup
+          width={44}
+          color={colorsTokens()['primary-text']}
+          aria-label={t('icon group')}
+          style={{
+            flexShrink: 0,
+          }}
+        />
+        <Box>
+          <Text as="h3" $weight="bold" $size="1.25rem" className="mt-0">
+            {t('Members of “{{teamName}}“', {
+              teamName: team.name,
+            })}
+          </Text>
+          <Text>
+            {t('Add people to the “{{teamName}}“ group.', {
+              teamName: team.name,
+            })}
+          </Text>
+        </Box>
+      </Box>
+      <Box
+        className="p-s"
+        $gap="1rem"
+        $direction="row"
+        $justify="space-evenly"
+        $css="border-top: 1px solid #e3e3e3;"
+      >
+        <Text $size="s">
+          {t('{{count}} member', { count: team.accesses.length })}
+        </Text>
+        <Text $size="s">
+          {t('Created at {{created_at}}', { created_at: '06/02/2024' })}
+        </Text>
+        <Text $size="s">
+          {t('Last update at {{updated_at}}', { updated_at: '07/02/2024' })}
+        </Text>
+      </Box>
+    </Card>
+  );
+};

src/frontend/apps/desk/src/features/teams/components/index.ts

@@ -1 +1,2 @@
 export * from './Panel';
+export * from './TeamInfo';

src/frontend/apps/desk/src/i18n/translations.json

@@ -36,6 +36,13 @@
       "0 group to display.": "0 groupe à afficher.",
       "Create your first team by clicking on the \"Create a new team\" button.": "Créez votre premier groupe en cliquant sur le bouton \"Créer un nouveau groupe\".",
       "Something bad happens, please refresh the page.": "Une erreur inattendue s'est produite, rechargez la page.",
+      "Members of “{{teamName}}“": "Membres de “{{teamName}}“",
+      "Add people to the “{{teamName}}“ group": "Ajouter des personnes au groupe «{{teamName}}».",
+      "{{count}} member_one": "{{count}} membre",
+      "{{count}} member_many": "{{count}} membres",
+      "{{count}} member_other": "{{count}} membres",
+      "Created at {{created_at}}": "Créé le {{created_at}}",
+      "Last update at {{updated_at}}": "Dernière modification le {{updated_at}}",
       "People": "People",
       "People Description": "Description de People",
       "Something bad happens, please retry": "Une erreur inattendue s'est produite, rechargez la page.",

src/frontend/apps/desk/src/pages/teams/[id].tsx

@@ -4,7 +4,7 @@ import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Text } from '@/components';
-import { useTeam } from '@/features/teams/api/useTeam';
+import { TeamInfo, useTeam } from '@/features/teams/';
 import { NextPageWithLayout } from '@/types/next';
 
 import TeamLayout from './TeamLayout';
@@ -43,19 +43,15 @@ const Team = ({ id }: TeamProps) => {
     );
   }
 
-  if (isLoading) {
+  if (isLoading || !team) {
     return (
       <Box $align="center" $justify="center" $height="100%">
         <Loader />
       </Box>
     );
   }
 
-  return (
-    <Text as="h3" $textAlign="center">
-      Teams: {team?.name}
-    </Text>
-  );
+  return <TeamInfo team={team} />;
 };
 
 Page.getLayout = function getLayout(page: ReactElement) {

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

@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test';
+
+import { keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Team', () => {
+  test('checks all the top box elements are visible', async ({
+    page,
+    browserName,
+  }) => {
+    const panel = page.getByLabel('Teams panel').first();
+
+    await panel.getByRole('button', { name: 'Add a team' }).click();
+
+    const teamName = `My new team ${browserName}-${Math.floor(Math.random() * 1000)}`;
+    await page.getByText('Team name').fill(teamName);
+    await page.getByRole('button', { name: 'Create the team' }).click();
+
+    await expect(page.getByLabel('icon group')).toBeVisible();
+    await expect(
+      page.getByRole('heading', {
+        name: `Members of “${teamName}“`,
+        level: 3,
+      }),
+    ).toBeVisible();
+    await expect(
+      page.getByText(`Add people to the “${teamName}“ group.`),
+    ).toBeVisible();
+
+    await expect(page.getByText(`1 member`)).toBeVisible();
+
+    await expect(page.getByText(`Created at 06/02/2024`)).toBeVisible();
+    await expect(page.getByText(`Last update at 07/02/2024`)).toBeVisible();
+  });
+});

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

@@ -7,7 +7,7 @@ test.beforeEach(async ({ page, browserName }) => {
   await keyCloakSignIn(page, browserName);
 });
 
-test.describe('Teams', () => {
+test.describe('Teams Create', () => {
   test('checks all the create team elements are visible', async ({ page }) => {
     const buttonCreateHomepage = page.getByRole('button', {
       name: 'Create a new team',
@@ -71,7 +71,7 @@ test.describe('Teams', () => {
     await page.getByText('Team name').fill(teamName);
     await page.getByRole('button', { name: 'Create the team' }).click();
 
-    const elTeam = page.getByText(`Teams: ${teamName}`);
+    const elTeam = page.getByText(`Members of “${teamName}“`);
     await expect(elTeam).toBeVisible();
 
     await panel.getByRole('button', { name: 'Add a team' }).click();