fix(content-sharing): Collaborator current user (#4328)

* fix: Collaborator current user

* fix: nits

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: reneshen0328

src/constants.js

@@ -200,6 +200,7 @@ export const PERMISSION_CAN_VIEW_ANNOTATIONS = 'can_view_annotations';
 
 /* --------------------- Invitee roles --------------------------- */
 export const INVITEE_ROLE_EDITOR: 'editor' = 'editor';
+export const INVITEE_ROLE_OWNER: 'owner' = 'owner';
 
 /* ------------- Delimiters for bread crumbs ---------------- */
 export const DELIMITER_SLASH: 'slash' = 'slash';

src/elements/content-sharing/ContentSharingV2.tsx

@@ -46,17 +46,21 @@ function ContentSharingV2({
     const [collaborationRoles, setCollaborationRoles] = React.useState<CollaborationRole[] | null>(null);
     const [collaborators, setCollaborators] = React.useState<Collaborator[] | null>(null);
     const [collaboratorsData, setCollaboratorsData] = React.useState<Collaborations | null>(null);
+    const [owner, setOwner] = React.useState({ id: '', email: '', name: '' });
 
     // Handle successful GET requests to /files or /folders
     const handleGetItemSuccess = React.useCallback(itemData => {
         const {
             collaborationRoles: collaborationRolesFromAPI,
             item: itemFromAPI,
+            ownedBy,
             sharedLink: sharedLinkFromAPI,
         } = convertItemResponse(itemData);
+
         setItem(itemFromAPI);
         setSharedLink(sharedLinkFromAPI);
         setCollaborationRoles(collaborationRolesFromAPI);
+        setOwner({ id: ownedBy.id, email: ownedBy.login, name: ownedBy.name });
     }, []);
 
     // Reset state if the API has changed
@@ -122,13 +126,17 @@ function ContentSharingV2({
         })();
     }, [api, avatarURLMap, collaboratorsData, itemID]);
 
-    // Return processed data when both are ready
     React.useEffect(() => {
-        if (collaboratorsData && avatarURLMap) {
-            const collaboratorsWithAvatars = convertCollabsResponse(collaboratorsData, avatarURLMap);
+        if (avatarURLMap && collaboratorsData && currentUser && owner) {
+            const collaboratorsWithAvatars = convertCollabsResponse(
+                collaboratorsData,
+                currentUser.id,
+                owner,
+                avatarURLMap,
+            );
             setCollaborators(collaboratorsWithAvatars);
         }
-    }, [collaboratorsData, avatarURLMap]);
+    }, [avatarURLMap, collaboratorsData, currentUser, owner]);
 
     const config = { sharedLinkEmail: false };
 

src/elements/content-sharing/utils/__mocks__/ContentSharingV2Mocks.js

@@ -32,8 +32,8 @@ export const mockAvatarURLMap = {
 };
 
 export const mockOwnerEmail = 'aotter@example.com';
-
-export const mockCurrentUserID = 789;
+export const mockOwnerName = 'Astronaut Otter';
+export const mockOwnerId = 789;
 
 export const collabUser1 = {
     id: 456,
@@ -44,7 +44,7 @@ export const collabUser1 = {
 
 export const collabUser2 = {
     id: 457,
-    login: 'rqueen@example.com',
+    login: 'rqueen@external.example.com',
     name: 'Raccoon Queen',
 };
 
@@ -54,26 +54,26 @@ export const collabUser3 = {
     name: 'Dancing Penguin',
 };
 
-export const collabUser4 = {
-    id: mockCurrentUserID,
+export const mockOwner = {
+    id: mockOwnerId,
     login: mockOwnerEmail,
-    name: 'Astronaut Otter',
+    name: mockOwnerName,
 };
 
-export const MOCK_COLLABORATORS = [collabUser4, collabUser1, collabUser2, collabUser3];
+export const MOCK_COLLABORATORS = [collabUser1, collabUser2, collabUser3];
 
 export const MOCK_COLLABORATIONS_RESPONSE = {
     entries: MOCK_COLLABORATORS.map(user => ({
         id: `record_${user.id}`,
         accessible_by: user,
         expires_at: user.expires_at,
         created_by: {
-            id: mockCurrentUserID,
+            id: mockOwnerId,
             login: mockOwnerEmail,
-            name: 'Astronaut Otter',
+            name: mockOwnerName,
             type: 'user',
         },
-        role: user.id === mockCurrentUserID ? 'owner' : 'editor',
+        role: user.id === mockOwnerId ? 'owner' : 'editor',
         status: 'accepted',
         type: user.type,
     })),
@@ -99,6 +99,7 @@ export const DEFAULT_ITEM_API_RESPONSE = {
     classification: null,
     id: MOCK_ITEM.id,
     name: MOCK_ITEM.name,
+    owned_by: mockOwner,
     permissions: MOCK_PERMISSIONS,
     shared_link: null,
     shared_link_features: { password: true },