🛂(frontend) disabled role not allowed to be assigned

We disable roles that the current user is not allowed
to assign when sharing a document. This prevents
users from selecting roles they cannot actually
assign, improving the user experience and reducing
confusion.

Author: AntoLC

src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts

@@ -160,6 +160,9 @@ test.describe('Document list members', () => {
       `You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.`,
     );
     await expect(soloOwner).toBeVisible();
+    await expect(
+      page.getByRole('menuitem', { name: 'Administrator' }),
+    ).toBeDisabled();
 
     await list.click({
       force: true, // Force click to close the dropdown
@@ -186,9 +189,17 @@ test.describe('Document list members', () => {
     await list.click();
     await expect(currentUserRole).toBeVisible();
 
+    await newUserRoles.click();
+    await expect(page.getByRole('menuitem', { name: 'Owner' })).toBeDisabled();
+    await list.click({
+      force: true, // Force click to close the dropdown
+    });
+
     await currentUserRole.click();
     await page.getByRole('menuitem', { name: 'Reader' }).click();
-    await list.click();
+    await list.click({
+      force: true, // Force click to close the dropdown
+    });
     await expect(currentUserRole).toBeHidden();
   });
 

src/frontend/apps/e2e/__tests__/app-impress/utils-share.ts

@@ -7,14 +7,14 @@ import {
   verifyDocName,
 } from './utils-common';
 
-export type Role = 'Administrator' | 'Owner' | 'Member' | 'Editor' | 'Reader';
+export type Role = 'Administrator' | 'Owner' | 'Editor' | 'Reader';
 export type LinkReach = 'Private' | 'Connected' | 'Public';
 export type LinkRole = 'Reading' | 'Editing';
 
 export const addNewMember = async (
   page: Page,
   index: number,
-  role: 'Administrator' | 'Owner' | 'Editor' | 'Reader',
+  role: Role,
   fillText = 'user.test',
 ) => {
   const responsePromiseSearchUser = page.waitForResponse(

src/frontend/apps/impress/src/features/docs/doc-management/types.tsx

@@ -132,5 +132,6 @@ export interface AccessRequest {
     partial_update: boolean;
     retrieve: boolean;
     accept: boolean;
+    set_role_to: Role[];
   };
 }

src/frontend/apps/impress/src/features/docs/doc-share/components/DocRoleDropdown.tsx

@@ -90,12 +90,14 @@ export const DocRoleDropdown = ({
   const roles: DropdownMenuOption[] = Object.keys(translatedRoles).map(
     (key, index) => {
       const isLast = index === Object.keys(translatedRoles).length - 1;
+      const isRoleAllowed = rolesAllowed?.includes(key as Role) ?? true;
+
       return {
         label: transRole(key as Role),
         callback: () => onSelectRole?.(key as Role),
         isSelected: currentRole === (key as Role),
         showSeparator: isLast,
-        disabled: isLastOwner && key !== 'owner',
+        disabled: (isLastOwner && key !== 'owner') || !isRoleAllowed,
       };
     },
   );

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAccessRequest.tsx

@@ -77,6 +77,7 @@ const DocShareAccessRequestItem = ({ doc, accessRequest }: Props) => {
               currentRole={role}
               onSelectRole={setRole}
               canUpdate={doc.abilities.accesses_manage}
+              rolesAllowed={accessRequest.abilities.set_role_to}
             />
             <Button
               color="tertiary"