🛂(app-desk) add TeamActions component

TeamActions is a component that control the actions
that a member can performed on the team.
It contains a dropdown menu that contains the actions:
- Edit Team
- Remove Team

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

@@ -0,0 +1,78 @@
+import { Button } from '@openfun/cunningham-react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, DropButton, IconOptions, Text } from '@/components';
+
+import { Role, Team } from '../types';
+
+import { ModalRemoveTeam } from './ModalRemoveTeam';
+import { ModalUpdateTeam } from './ModalUpdateTeam';
+
+interface TeamActionsProps {
+  currentRole: Role;
+  team: Team;
+}
+
+export const TeamActions = ({ currentRole, team }: TeamActionsProps) => {
+  const { t } = useTranslation();
+  const [isModalUpdateOpen, setIsModalUpdateOpen] = useState(false);
+  const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
+  const [isDropOpen, setIsDropOpen] = useState(false);
+
+  if (currentRole === Role.MEMBER) {
+    return null;
+  }
+
+  return (
+    <>
+      <DropButton
+        button={
+          <IconOptions
+            isOpen={isDropOpen}
+            aria-label={t('Open the team options')}
+          />
+        }
+        onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
+        isOpen={isDropOpen}
+      >
+        <Box>
+          <Button
+            onClick={() => {
+              setIsModalUpdateOpen(true);
+              setIsDropOpen(false);
+            }}
+            color="primary-text"
+            icon={<span className="material-icons">edit</span>}
+          >
+            <Text $theme="primary">{t('Update the team')}</Text>
+          </Button>
+          {currentRole === Role.OWNER && (
+            <Button
+              onClick={() => {
+                setIsModalRemoveOpen(true);
+                setIsDropOpen(false);
+              }}
+              color="primary-text"
+              icon={<span className="material-icons">delete</span>}
+            >
+              <Text $theme="primary">{t('Delete the team')}</Text>
+            </Button>
+          )}
+        </Box>
+      </DropButton>
+      {isModalUpdateOpen && (
+        <ModalUpdateTeam
+          onClose={() => setIsModalUpdateOpen(false)}
+          team={team}
+        />
+      )}
+      {isModalRemoveOpen && (
+        <ModalRemoveTeam
+          onClose={() => setIsModalRemoveOpen(false)}
+          team={team}
+        />
+      )}
+    </>
+  );
+};

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

@@ -3,12 +3,13 @@ import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import IconGroup from '@/assets/icons/icon-group2.svg';
-import { Box, BoxButton, Card, IconOptions, Text } from '@/components';
+import { Box, Card, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
-import { Team } from '../api/types';
+import { Role, Team } from '../types';
 
 import { ModalUpdateTeam } from './ModalUpdateTeam';
+import { TeamActions } from './TeamActions';
 
 const format: DateTimeFormatOptions = {
   month: '2-digit',
@@ -18,9 +19,10 @@ const format: DateTimeFormatOptions = {
 
 interface TeamInfoProps {
   team: Team;
+  currentRole: Role;
 }
 
-export const TeamInfo = ({ team }: TeamInfoProps) => {
+export const TeamInfo = ({ team, currentRole }: TeamInfoProps) => {
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
   const { i18n } = useTranslation();
@@ -38,16 +40,7 @@ export const TeamInfo = ({ team }: TeamInfoProps) => {
     <>
       <Card className="m-b" style={{ paddingBottom: 0 }}>
         <Box $css="align-self: flex-end;" className="m-t" $position="absolute">
-          <BoxButton
-            onClick={() => {
-              setIsModalUpdateOpen(true);
-            }}
-          >
-            <IconOptions
-              isOpen={isModalUpdateOpen}
-              aria-label={t('Open the team options modal')}
-            />
-          </BoxButton>
+          <TeamActions currentRole={currentRole} team={team} />
         </Box>
         <Box className="m-b" $direction="row" $align="center" $gap="1.5rem">
           <IconGroup

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

@@ -22,6 +22,7 @@
       "Create the team": "Créer le groupe",
       "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\".",
       "Created at": "Créé le",
+      "Delete the team": "Supprimer le groupe",
       "Desk": "Desk",
       "Desk Logo": "Logo Desk",
       "Emails": "Emails",
@@ -49,7 +50,7 @@
       "Names": "Noms",
       "New name...": "Nouveau nom...",
       "Open the member options modal": "Ouvrir les options de membre dans la fenêtre modale",
-      "Open the team options modal": "Ouvrir les options de groupe dans la fenêtre modale",
+      "Open the team options": "Ouvrir les options de groupe dans la fenêtre modale",
       "Owner": "Propriétaire",
       "People": "People",
       "People Description": "Description de People",
@@ -69,6 +70,7 @@
       "The role has been updated": "Le rôle a bien été mis à jour",
       "The team has been updated.": "Le groupe a été mise à jour.",
       "Update team {{teamName}}": "Modification du groupe {{teamName}}",
+      "Update the team": "Mettre à jour le groupe",
       "Update the role": "Mettre à jour ce rôle",
       "Validate": "Valider",
       "Validate the modification": "Valider la modification",

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

@@ -56,7 +56,7 @@ const Team = ({ id }: TeamProps) => {
 
   return (
     <>
-      <TeamInfo team={team} />
+      <TeamInfo team={team} currentRole={currentRole} />
       <MemberGrid team={team} currentRole={currentRole} />
     </>
   );