✨(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
numerique-gouv · Feb 22, 2024 · fc8dc24 · fc8dc24
1 parent 95219a3
commit fc8dc24
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 10 deletions.
diff --git a/src/frontend/apps/desk/cunningham.ts b/src/frontend/apps/desk/cunningham.ts
@@ -3,6 +3,7 @@ const config = {
     default: {
       theme: {
         colors: {
+          'card-border': '#DDDDDD',
           'primary-bg': '#FAFAFA',
           'primary-100': '#EDF5FA',
           'primary-150': '#E5EEFA',
@@ -176,6 +177,7 @@ const config = {
     dsfr: {
       theme: {
         colors: {
+          'card-border': '#DDDDDD',
           'primary-text': '#000091',
           'primary-100': '#f5f5fe',
           'primary-200': '#ececfe',

diff --git a/src/frontend/apps/desk/src/components/Card.tsx b/src/frontend/apps/desk/src/components/Card.tsx
@@ -17,7 +17,7 @@ export const Card = ({
       $radius="4px"
       $css={`
         box-shadow: 2px 2px 5px ${colorsTokens()['primary-300']}88;
-        border: 1px solid #e3e3e3;
+        border: 1px solid ${colorsTokens()['card-border']};
         ${$css}
       `}
       {...props}

diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.css
@@ -69,6 +69,7 @@
   --c--theme--colors--success-text: var(--c--theme--colors--greyscale-000);
   --c--theme--colors--warning-text: var(--c--theme--colors--greyscale-000);
   --c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000);
+  --c--theme--colors--card-border: #ddd;
   --c--theme--colors--primary-bg: #fafafa;
   --c--theme--colors--primary-150: #e5eefa;
   --c--theme--colors--info-150: #e5eefa;
@@ -314,6 +315,7 @@
 }
 
 .cunningham-theme--dsfr {
+  --c--theme--colors--card-border: #ddd;
   --c--theme--colors--primary-text: #000091;
   --c--theme--colors--primary-100: #f5f5fe;
   --c--theme--colors--primary-200: #ececfe;
@@ -713,6 +715,10 @@
   color: var(--c--theme--colors--danger-text);
 }
 
+.clr-card-border {
+  color: var(--c--theme--colors--card-border);
+}
+
 .clr-primary-bg {
   color: var(--c--theme--colors--primary-bg);
 }
@@ -1005,6 +1011,10 @@
   background-color: var(--c--theme--colors--danger-text);
 }
 
+.bg-card-border {
+  background-color: var(--c--theme--colors--card-border);
+}
+
 .bg-primary-bg {
   background-color: var(--c--theme--colors--primary-bg);
 }

diff --git a/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/desk/src/cunningham/cunningham-tokens.ts
@@ -73,6 +73,7 @@ export const tokens = {
           'success-text': '#FFFFFF',
           'warning-text': '#FFFFFF',
           'danger-text': '#FFFFFF',
+          'card-border': '#DDDDDD',
           'primary-bg': '#FAFAFA',
           'primary-150': '#E5EEFA',
           'info-150': '#E5EEFA',
@@ -322,6 +323,7 @@ export const tokens = {
     dsfr: {
       theme: {
         colors: {
+          'card-border': '#DDDDDD',
           'primary-text': '#000091',
           'primary-100': '#f5f5fe',
           'primary-200': '#ececfe',

diff --git a/src/frontend/apps/desk/src/features/teams/api/index.ts b/src/frontend/apps/desk/src/features/teams/api/index.ts
@@ -1 +1,2 @@
 export * from './useCreateTeam';
+export * from './useTeam';
diff --git a/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx b/src/frontend/apps/desk/src/features/teams/components/TeamInfo.tsx
@@ -0,0 +1,64 @@
+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,
+            alignSelf: 'start',
+          }}
+        />
+        <Box>
+          <Text as="h3" $weight="bold" $size="1.25rem" className="mt-0">
+            {t('Members of “{{teamName}}“', {
+              teamName: team.name,
+            })}
+          </Text>
+          <Text $size="m">
+            {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 ${colorsTokens()['card-border']};`}
+      >
+        <Text $size="s">
+          {t('{{count}} member', { count: team.accesses.length })}
+        </Text>
+        <Text $size="s" $direction="row">
+          {t('Created at')}&nbsp;
+          <Text $weight="bold">06/02/2024</Text>
+        </Text>
+        <Text $size="s" $direction="row">
+          {t('Last update at')}&nbsp;
+          <Text $weight="bold">07/02/2024</Text>
+        </Text>
+      </Box>
+    </Card>
+  );
+};
diff --git a/src/frontend/apps/desk/src/features/teams/components/index.ts b/src/frontend/apps/desk/src/features/teams/components/index.ts
@@ -1 +1,2 @@
 export * from './Panel';
+export * from './TeamInfo';
diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json
@@ -33,6 +33,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": "Créé le",
+      "Last update at": "Dernière modification le",
       "People": "People",
       "People Description": "Description de People",
       "Something bad happens, please retry": "Une erreur inattendue s'est produite, rechargez la page.",

diff --git a/src/frontend/apps/desk/src/pages/teams/[id].tsx b/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) {

diff --git a/src/frontend/apps/e2e/__tests__/app-desk/team.spec.ts b/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();
+  });
+});
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/teams-create.spec.ts b/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();