feat(content-sharing): Display pending collab

src/common/types/core.js

@@ -446,6 +446,7 @@ type AccessibleByUserOrGroup = {
 type CollaborationOptions = {
     expires_at: string | null,
     id: number | string,
+    invite_email?: string,
     role: string,
     status?: string,
 };

src/constants.js

@@ -246,13 +246,14 @@ export const CLIENT_NAME_FOLDER_PICKER: 'FolderPicker' = 'FolderPicker';
 export const CLIENT_VERSION = __VERSION__;
 
 /* ---------------------- Statuses -------------------------- */
-export const STATUS_PENDING: 'pending' = 'pending';
-export const STATUS_IN_PROGRESS: 'inprogress' = 'inprogress';
-export const STATUS_STAGED: 'staged' = 'staged';
+export const STATUS_ACCEPTED: 'accepted' = 'accepted';
 export const STATUS_COMPLETE: 'complete' = 'complete';
 export const STATUS_ERROR: 'error' = 'error';
-export const STATUS_ACCEPTED: 'accepted' = 'accepted';
 export const STATUS_INACTIVE: 'inactive' = 'inactive';
+export const STATUS_IN_PROGRESS: 'inprogress' = 'inprogress';
+export const STATUS_PENDING: 'pending' = 'pending';
+export const STATUS_REJECTED: 'rejected' = 'rejected';
+export const STATUS_STAGED: 'staged' = 'staged';
 
 /* ------------------- Styles ------------------------ */
 export const CLASS_MODAL_CONTENT = 'be-modal-dialog-content';

src/elements/content-sharing/utils/__tests__/convertCollaborators.test.ts

@@ -1,4 +1,4 @@
-import { STATUS_ACCEPTED } from '../../../../constants';
+import { STATUS_ACCEPTED, STATUS_PENDING, STATUS_REJECTED } from '../../../../constants';
 import { convertCollab, convertCollabsResponse, convertCollabsRequest } from '../convertCollaborators';
 import {
     collabUser1,
@@ -50,11 +50,27 @@ const mockCollaborationsFromApi: Collaborations = {
         {
             id: '125',
             role: 'editor',
-            status: 'pending',
+            status: STATUS_PENDING,
             expires_at: '2024-12-31T23:59:59Z',
             accessible_by: collabUser3,
             created_by: ownerFromApi,
         },
+        {
+            id: '126',
+            role: 'editor',
+            status: STATUS_PENDING,
+            expires_at: '2024-12-31T23:59:59Z',
+            created_by: ownerFromApi,
+            invite_email: 'bbear@external.example.com',
+        },
+        {
+            id: '127',
+            role: 'editor',
+            status: STATUS_REJECTED,
+            expires_at: '2024-12-31T23:59:59Z',
+            created_by: ownerFromApi,
+            invite_email: 'rrobot@external.example.com',
+        },
     ],
 };
 
@@ -86,16 +102,28 @@ describe('convertCollaborators', () => {
             });
         });
 
-        test('should return null for collaboration with non-accepted status', () => {
+        test('should convert pending collaboration with invite_email to a pending collaborator', () => {
+            const pendingInviteCollab = mockCollaborations[4];
+
             const result = convertCollab({
                 avatarUrlMap: mockAvatarUrlMap,
-                collab: mockCollaborations[3],
+                collab: pendingInviteCollab,
                 currentUserId: mockOwnerId,
                 isCurrentUserOwner: false,
                 ownerEmailDomain,
             });
 
-            expect(result).toBeNull();
+            expect(result).toEqual({
+                email: 'bbear@external.example.com',
+                expiresAt: '2024-12-31T23:59:59Z',
+                hasCustomAvatar: false,
+                id: '126',
+                isCurrentUser: false,
+                isExternal: true,
+                isPending: true,
+                name: 'bbear@external.example.com',
+                role: 'editor',
+            });
         });
 
         test.each([undefined, null])('should return null for %s collaboration', collab => {
@@ -110,6 +138,30 @@ describe('convertCollaborators', () => {
             expect(result).toBeNull();
         });
 
+        test('should return null for pending collab without invite_email', () => {
+            const result = convertCollab({
+                avatarUrlMap: mockAvatarUrlMap,
+                collab: mockCollaborations[3],
+                currentUserId: mockOwnerId,
+                isCurrentUserOwner: false,
+                ownerEmailDomain,
+            });
+
+            expect(result).toBeNull();
+        });
+
+        test('should return null for rejected collab', () => {
+            const result = convertCollab({
+                avatarUrlMap: mockAvatarUrlMap,
+                collab: mockCollaborations[5],
+                currentUserId: mockOwnerId,
+                isCurrentUserOwner: false,
+                ownerEmailDomain,
+            });
+
+            expect(result).toBeNull();
+        });
+
         test('should identify current user correctly', () => {
             const result = convertCollab({
                 avatarUrlMap: mockAvatarUrlMap,
@@ -188,7 +240,7 @@ describe('convertCollaborators', () => {
                 mockAvatarUrlMap,
             );
 
-            expect(result).toHaveLength(3); // Only accepted collaborations
+            expect(result).toHaveLength(4); // Owner + accepted & pending collaborators
             expect(result).toEqual([
                 {
                     avatarUrl: undefined,
@@ -229,6 +281,17 @@ describe('convertCollaborators', () => {
                     role: 'viewer',
                     userId: '457',
                 },
+                {
+                    email: 'bbear@external.example.com',
+                    expiresAt: '2024-12-31T23:59:59Z',
+                    hasCustomAvatar: false,
+                    id: '126',
+                    isCurrentUser: false,
+                    isExternal: false,
+                    isPending: true,
+                    name: 'bbear@external.example.com',
+                    role: 'editor',
+                },
             ]);
         });
 

src/elements/content-sharing/utils/convertCollaborators.ts

@@ -1,6 +1,6 @@
 import { Collaborator } from '@box/unified-share-modal';
 
-import { INVITEE_ROLE_OWNER, STATUS_ACCEPTED } from '../../../constants';
+import { INVITEE_ROLE_OWNER, STATUS_ACCEPTED, STATUS_PENDING, STATUS_REJECTED } from '../../../constants';
 import {
     API_TO_USM_COLLAB_ROLE_MAP,
     COLLAB_USER_TYPE,
@@ -26,7 +26,28 @@ export const convertCollab = ({
     isCurrentUserOwner,
     ownerEmailDomain,
 }: ConvertCollabProps): Collaborator | null => {
-    if (!collab || collab.status !== STATUS_ACCEPTED) return null;
+    if (!collab || collab.status === STATUS_REJECTED) return null;
+
+    if (collab.status === STATUS_PENDING) {
+        const { invite_email: inviteEmail } = collab;
+        if (!inviteEmail) return null;
+
+        const { id, expires_at, role } = collab;
+
+        const isExternal = !isCurrentUserOwner && ownerEmailDomain && inviteEmail.split('@')[1] !== ownerEmailDomain;
+
+        return {
+            email: inviteEmail,
+            expiresAt: expires_at,
+            hasCustomAvatar: false,
+            id: `${id}`,
+            isCurrentUser: false,
+            isExternal,
+            isPending: true,
+            name: inviteEmail,
+            role: API_TO_USM_COLLAB_ROLE_MAP[role],
+        };
+    }
 
     const {
         accessible_by: { id: collabId, login: collabEmail, name: collabName },