♻️(app-desk) create IconOptions component

Export from MemberAction component the icon options
to IconOptions component.
We will reuse this component in other places.

src/frontend/apps/desk/src/components/IconOptions.tsx

@@ -0,0 +1,22 @@
+import { Text } from '@/components';
+
+interface IconOptionsProps {
+  isOpen: boolean;
+  'aria-label': string;
+}
+
+export const IconOptions = ({ isOpen, ...props }: IconOptionsProps) => {
+  return (
+    <Text
+      aria-label={props['aria-label']}
+      className="material-icons"
+      $theme="primary"
+      $css={`
+        transition: all 0.3s ease-in-out;
+        transform: rotate(${isOpen ? '90' : '0'}deg);
+      `}
+    >
+      more_vert
+    </Text>
+  );
+};

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

@@ -2,6 +2,7 @@ export * from './Box';
 export * from './BoxButton';
 export * from './Card';
 export * from './DropButton';
+export * from './IconOptions';
 export * from './Link';
 export * from './Text';
 export * from './TextErrors';

src/frontend/apps/desk/src/features/members/__tests__/MemberAction.test.tsx

@@ -33,7 +33,9 @@ describe('MemberAction', () => {
       },
     );
 
-    expect(await screen.findByLabelText('Member options')).toBeInTheDocument();
+    expect(
+      await screen.findByLabelText('Open the member options modal'),
+    ).toBeInTheDocument();
   });
 
   it('checks the render when member', () => {
@@ -44,7 +46,9 @@ describe('MemberAction', () => {
       },
     );
 
-    expect(screen.queryByLabelText('Member options')).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('Open the member options modal'),
+    ).not.toBeInTheDocument();
   });
 
   it('checks the render when admin', async () => {
@@ -55,7 +59,9 @@ describe('MemberAction', () => {
       },
     );
 
-    expect(await screen.findByLabelText('Member options')).toBeInTheDocument();
+    expect(
+      await screen.findByLabelText('Open the member options modal'),
+    ).toBeInTheDocument();
   });
 
   it('checks the render when admin to owner', () => {
@@ -70,6 +76,8 @@ describe('MemberAction', () => {
       },
     );
 
-    expect(screen.queryByLabelText('Member options')).not.toBeInTheDocument();
+    expect(
+      screen.queryByLabelText('Open the member options modal'),
+    ).not.toBeInTheDocument();
   });
 });

src/frontend/apps/desk/src/features/members/__tests__/MemberGrid.test.tsx

@@ -175,13 +175,13 @@ describe('MemberGrid', () => {
       if (expected) {
         expect(
           await screen.findAllByRole('button', {
-            name: 'Member options',
+            name: 'Open the member options modal',
           }),
         ).toBeDefined();
       } else {
         expect(
           screen.queryByRole('button', {
-            name: 'Member options',
+            name: 'Open the member options modal',
           }),
         ).not.toBeInTheDocument();
       }

src/frontend/apps/desk/src/features/members/components/MemberAction.tsx

@@ -2,7 +2,7 @@ import { Button } from '@openfun/cunningham-react';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { DropButton, Text } from '@/components';
+import { DropButton, IconOptions, Text } from '@/components';
 
 import { Access, Role } from '../types';
 
@@ -34,16 +34,10 @@ export const MemberAction = ({
     <>
       <DropButton
         button={
-          <span
-            aria-label={t('Member options')}
-            className="material-icons"
-            style={{
-              transition: 'all 0.3s ease-in-out',
-              transform: `rotate(${isDropOpen ? '90' : '0'}deg)`,
-            }}
-          >
-            more_vert
-          </span>
+          <IconOptions
+            isOpen={isDropOpen}
+            aria-label={t('Open the member options modal')}
+          />
         }
         onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
         isOpen={isDropOpen}

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

@@ -35,10 +35,10 @@
       "Marianne Logo": "Logo Marianne",
       "Member": "Membre",
       "Member icon": "Icône de membre",
-      "Member options": "Options des Membres",
       "Members of “{{teamName}}“": "Membres de “{{teamName}}“",
       "Name the team": "Nommer le groupe",
       "Names": "Noms",
+      "Open the member options modal": "Ouvrir les options de membre dans la fenêtre modale",
       "Owner": "Propriétaire",
       "People": "People",
       "People Description": "Description de People",