feat(content-sharing): Convert Content Sharing V2 API Response

package.json

@@ -140,7 +140,7 @@
         "@box/metadata-view": "^0.54.0",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@box/types": "^0.2.1",
-        "@box/unified-share-modal": "^0.48.8",
+        "@box/unified-share-modal": "^0.52.0",
         "@box/user-selector": "^1.23.25",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@chromatic-com/storybook": "^4.0.1",
@@ -310,7 +310,7 @@
         "@box/metadata-view": "^0.54.0",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
         "@box/types": "^0.2.1",
-        "@box/unified-share-modal": "^0.48.8",
+        "@box/unified-share-modal": "^0.52.0",
         "@box/user-selector": "^1.23.25",
         "@hapi/address": "^2.1.4",
         "@tanstack/react-virtual": "^3.13.12",

src/elements/content-sharing/ContentSharing.js

@@ -116,15 +116,18 @@ function ContentSharing({
 
     if (isFeatureEnabled(features, 'contentSharingV2')) {
         return (
-            <ContentSharingV2
-                itemID={itemID}
-                itemType={itemType}
-                hasProviders={hasProviders}
-                language={language}
-                messages={messages}
-            >
-                {children}
-            </ContentSharingV2>
+            api && (
+                <ContentSharingV2
+                    api={api}
+                    itemID={itemID}
+                    itemType={itemType}
+                    hasProviders={hasProviders}
+                    language={language}
+                    messages={messages}
+                >
+                    {children}
+                </ContentSharingV2>
+            )
         );
     }
 

src/elements/content-sharing/ContentSharingV2.tsx

@@ -1,39 +1,146 @@
 import * as React from 'react';
+import isEmpty from 'lodash/isEmpty';
 
 import { UnifiedShareModal } from '@box/unified-share-modal';
+import type { CollaborationRole, Item, SharedLink, User } from '@box/unified-share-modal';
 
+import API from '../../api';
+import { FIELD_ENTERPRISE, FIELD_HOSTNAME, TYPE_FILE, TYPE_FOLDER } from '../../constants';
 import Internationalize from '../common/Internationalize';
 import Providers from '../common/Providers';
+import { CONTENT_SHARING_ITEM_FIELDS } from './constants';
+import { convertItemResponse } from './utils';
 
 import type { ItemType, StringMap } from '../../common/types/core';
 
 export interface ContentSharingV2Props {
+    /** api - API instance */
+    api: API;
     /** children - Children for the element to open the Unified Share Modal */
     children?: React.ReactElement;
     /** itemID - Box file or folder ID */
     itemID: string;
     /** itemType - "file" or "folder" */
     itemType: ItemType;
     /** hasProviders - Whether the element has providers for USM already */
-    hasProviders: boolean;
+    hasProviders?: boolean;
     /** language - Language used for the element */
     language?: string;
     /** messages - Localized strings used by the element */
     messages?: StringMap;
 }
 
-function ContentSharingV2({ children, itemID, itemType, hasProviders, language, messages }: ContentSharingV2Props) {
-    // Retrieve item from API later
-    const mockItem = {
-        id: itemID,
-        name: 'Box Development Guide.pdf',
-        type: itemType,
+function ContentSharingV2({
+    api,
+    children,
+    itemID,
+    itemType,
+    hasProviders,
+    language,
+    messages,
+}: ContentSharingV2Props) {
+    const [item, setItem] = React.useState<Item | null>(null);
+    const [sharedLink, setSharedLink] = React.useState<SharedLink | null>(null);
+    const [currentUser, setCurrentUser] = React.useState<User | null>(null);
+    const [collaborationRoles, setCollaborationRoles] = React.useState<CollaborationRole[] | null>(null);
+
+    // Handle successful GET requests to /files or /folders
+    const handleGetItemSuccess = React.useCallback(itemData => {
+        const {
+            collaborationRoles: collaborationRolesFromAPI,
+            item: itemFromAPI,
+            sharedLink: sharedLinkFromAPI,
+        } = convertItemResponse(itemData);
+        setItem(itemFromAPI);
+        setSharedLink(sharedLinkFromAPI);
+        setCollaborationRoles(collaborationRolesFromAPI);
+    }, []);
+
+    // Reset state if the API has changed
+    React.useEffect(() => {
+        setItem(null);
+        setSharedLink(null);
+        setCurrentUser(null);
+        setCollaborationRoles(null);
+    }, [api]);
+
+    // Get initial data for the item
+    React.useEffect(() => {
+        const getItem = () => {
+            if (itemType === TYPE_FILE) {
+                api.getFileAPI().getFile(
+                    itemID,
+                    handleGetItemSuccess,
+                    {},
+                    {
+                        fields: CONTENT_SHARING_ITEM_FIELDS,
+                    },
+                );
+            } else if (itemType === TYPE_FOLDER) {
+                api.getFolderAPI().getFolderFields(
+                    itemID,
+                    handleGetItemSuccess,
+                    {},
+                    {
+                        fields: CONTENT_SHARING_ITEM_FIELDS,
+                    },
+                );
+            }
+        };
+
+        if (api && !isEmpty(api) && !item && !sharedLink) {
+            getItem();
+        }
+    }, [api, item, itemID, itemType, sharedLink, handleGetItemSuccess]);
+
+    // Get initial data for the user
+    React.useEffect(() => {
+        const getUserSuccess = userData => {
+            const { enterprise, id } = userData;
+            setCurrentUser({
+                id,
+                enterprise: {
+                    name: enterprise ? enterprise.name : '',
+                },
+            });
+        };
+
+        const getUserData = () => {
+            api.getUsersAPI(false).getUser(
+                itemID,
+                getUserSuccess,
+                {},
+                {
+                    params: {
+                        fields: [FIELD_ENTERPRISE, FIELD_HOSTNAME].toString(),
+                    },
+                },
+            );
+        };
+
+        if (api && !isEmpty(api) && item && sharedLink && !currentUser) {
+            getUserData();
+        }
+    }, [api, currentUser, item, itemID, itemType, sharedLink]);
+
+    const config = {
+        sharedLinkEmail: false,
     };
 
     return (
         <Internationalize language={language} messages={messages}>
             <Providers hasProviders={hasProviders}>
-                <UnifiedShareModal item={mockItem}>{children}</UnifiedShareModal>
+                {item && (
+                    <UnifiedShareModal
+                        config={config}
+                        collaborationRoles={collaborationRoles}
+                        currentUser={currentUser}
+                        item={item}
+                        sharedLink={sharedLink}
+                    >
+                        {children}
+                    </UnifiedShareModal>
+                )}
             </Providers>
         </Internationalize>
     );

src/elements/content-sharing/__tests__/ContentSharingV2.test.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { render, RenderResult, screen, waitFor } from '@testing-library/react';
+
+import {
+    DEFAULT_ITEM_API_RESPONSE,
+    DEFAULT_USER_API_RESPONSE,
+    MOCK_ITEM,
+    MOCK_ITEM_API_RESPONSE_WITH_SHARED_LINK,
+    MOCK_ITEM_API_RESPONSE_WITH_CLASSIFICATION,
+} from '../utils/__mocks__/ContentSharingV2Mocks';
+import { CONTENT_SHARING_ITEM_FIELDS } from '../constants';
+
+import ContentSharingV2 from '../ContentSharingV2';
+
+const createAPIMock = (fileAPI, folderAPI, usersAPI) => ({
+    getFileAPI: jest.fn().mockReturnValue(fileAPI),
+    getFolderAPI: jest.fn().mockReturnValue(folderAPI),
+    getUsersAPI: jest.fn().mockReturnValue(usersAPI),
+});
+
+const createSuccessMock = responseFromAPI => (id, successFn) => {
+    return Promise.resolve(responseFromAPI).then(response => {
+        successFn(response);
+    });
+};
+
+const getDefaultUserMock = jest.fn().mockImplementation(createSuccessMock(DEFAULT_USER_API_RESPONSE));
+const getDefaultFileMock = jest.fn().mockImplementation(createSuccessMock(DEFAULT_ITEM_API_RESPONSE));
+const getFileMockWithSharedLink = jest
+    .fn()
+    .mockImplementation(createSuccessMock(MOCK_ITEM_API_RESPONSE_WITH_SHARED_LINK));
+const getFileMockWithClassification = jest
+    .fn()
+    .mockImplementation(createSuccessMock(MOCK_ITEM_API_RESPONSE_WITH_CLASSIFICATION));
+const getDefaultFolderMock = jest.fn().mockImplementation(createSuccessMock(DEFAULT_ITEM_API_RESPONSE));
+const defaultAPIMock = createAPIMock(
+    { getFile: getDefaultFileMock },
+    { getFolderFields: getDefaultFolderMock },
+    { getUser: getDefaultUserMock },
+);
+
+const getWrapper = (props): RenderResult =>
+    render(
+        <ContentSharingV2
+            api={defaultAPIMock}
+            itemID={MOCK_ITEM.id}
+            itemType={MOCK_ITEM.type}
+            hasProviders={true}
+            {...props}
+        />,
+    );
+
+describe('elements/content-sharing/ContentSharingV2', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('should see the correct elements for files', async () => {
+        getWrapper({});
+        await waitFor(() => {
+            expect(getDefaultFileMock).toHaveBeenCalledWith(
+                MOCK_ITEM.id,
+                expect.any(Function),
+                {},
+                {
+                    fields: CONTENT_SHARING_ITEM_FIELDS,
+                },
+            );
+        });
+
+        expect(screen.getByRole('heading', { name: 'Share ‘Box Development Guide.pdf’' })).toBeVisible();
+        expect(screen.getByRole('combobox', { name: 'Invite People' })).toBeVisible();
+        expect(screen.getByRole('switch', { name: 'Shared link' })).toBeVisible();
+    });
+
+    test('should see the correct elements for folders', async () => {
+        getWrapper({ itemType: 'folder' });
+        await waitFor(() => {
+            expect(getDefaultFolderMock).toHaveBeenCalledWith(
+                MOCK_ITEM.id,
+                expect.any(Function),
+                {},
+                {
+                    fields: CONTENT_SHARING_ITEM_FIELDS,
+                },
+            );
+        });
+
+        expect(screen.getByRole('heading', { name: 'Share ‘Box Development Guide.pdf’' })).toBeVisible();
+        expect(screen.getByRole('combobox', { name: 'Invite People' })).toBeVisible();
+        expect(screen.getByRole('switch', { name: 'Shared link' })).toBeVisible();
+    });
+
+    test('should see the shared link elements if shared link is present', async () => {
+        getWrapper({
+            api: createAPIMock({ getFile: getFileMockWithSharedLink }, null, { getUser: getDefaultUserMock }),
+        });
+        await waitFor(() => {
+            expect(getFileMockWithSharedLink).toHaveBeenCalledWith(
+                MOCK_ITEM.id,
+                expect.any(Function),
+                {},
+                {
+                    fields: CONTENT_SHARING_ITEM_FIELDS,
+                },
+            );
+        });
+
+        expect(await screen.findByLabelText('Shared link URL')).toBeVisible();
+        expect(await screen.findByRole('button', { name: 'People with the link' })).toBeVisible();
+        expect(await screen.findByRole('button', { name: 'Can view and download' })).toBeVisible();
+        expect(screen.getByRole('button', { name: 'Link Settings' })).toBeVisible();
+        expect(screen.getByRole('button', { name: 'Copy' })).toBeVisible();
+    });
+
+    test('should see the classification elements if classification is present', async () => {
+        getWrapper({
+            api: createAPIMock({ getFile: getFileMockWithClassification }, null, { getUser: getDefaultUserMock }),
+        });
+        await waitFor(() => {
+            expect(getFileMockWithClassification).toHaveBeenCalledWith(
+                MOCK_ITEM.id,
+                expect.any(Function),
+                {},
+                {
+                    fields: CONTENT_SHARING_ITEM_FIELDS,
+                },
+            );
+        });
+        expect(screen.getByText('BLUE')).toBeVisible();
+    });
+});

src/elements/content-sharing/stories/ContentSharingV2.stories.tsx

@@ -1,13 +1,22 @@
 import * as React from 'react';
+
 import { TYPE_FILE, TYPE_FOLDER } from '../../../constants';
+import { mockAPIWithSharedLink, mockAPIWithoutSharedLink } from '../utils/__mocks__/ContentSharingV2Mocks';
 import ContentSharingV2 from '../ContentSharingV2';
 
 export const basic = {};
 
+export const withSharedLink = {
+    args: {
+        api: mockAPIWithSharedLink,
+    },
+};
+
 export default {
     title: 'Elements/ContentSharingV2',
     component: ContentSharingV2,
     args: {
+        api: mockAPIWithoutSharedLink,
         children: <button>Open Unified Share Modal</button>,
         itemType: TYPE_FILE,
         itemID: global.FILE_ID,

src/elements/content-sharing/stories/tests/ContentSharingV2-visual.stories.tsx

@@ -1,16 +1,26 @@
+import * as React from 'react';
 import { TYPE_FILE } from '../../../../constants';
+import { mockAPIWithSharedLink, mockAPIWithoutSharedLink } from '../../utils/__mocks__/ContentSharingV2Mocks';
 import ContentSharingV2 from '../../ContentSharingV2';
 
 export const withModernization = {
     args: {
+        api: mockAPIWithoutSharedLink,
         enableModernizedComponents: true,
     },
 };
 
+export const withSharedLink = {
+    args: {
+        api: mockAPIWithSharedLink,
+    },
+};
+
 export default {
     title: 'Elements/ContentSharingV2/tests/visual-regression-tests',
     component: ContentSharingV2,
     args: {
+        children: <button>Open Unified Share Modal</button>,
         itemType: TYPE_FILE,
         itemID: global.FILE_ID,
     },