fix(content-sharing): Improve content sharing performance and add consumer ability to override config

src/elements/content-sharing/ContentSharing.js

@@ -8,20 +8,24 @@
  */
 import 'regenerator-runtime/runtime';
 import * as React from 'react';
+
+import type { Configuration } from '@box/unified-share-modal';
 import API from '../../api';
-// $FlowFixMe
-import { withBlueprintModernization } from '../common/withBlueprintModernization';
+
 import { isFeatureEnabled } from '../common/feature-checking';
 import Internationalize from '../common/Internationalize';
 import Providers from '../common/Providers';
-import SharingModal from './SharingModal';
+// $FlowFixMe
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 // $FlowFixMe
 import ContentSharingV2 from './ContentSharingV2';
-import { CLIENT_NAME_CONTENT_SHARING, CLIENT_VERSION, DEFAULT_HOSTNAME_API } from '../../constants';
+import SharingModal from './SharingModal';
 
+import type { FeatureConfig } from '../common/feature-checking';
 import type { ItemType, StringMap } from '../../common/types/core';
 import type { USMConfig } from '../../features/unified-share-modal/flowTypes';
-import type { FeatureConfig } from '../common/feature-checking';
+
+import { CLIENT_NAME_CONTENT_SHARING, CLIENT_VERSION, DEFAULT_HOSTNAME_API } from '../../constants';
 
 import '../common/base.scss';
 import '../common/fonts.scss';
@@ -33,7 +37,7 @@ type ContentSharingProps = {
     /** children - Children for the element to open the Unified Share Modal */
     children?: React.Element<any>,
     /** config - Configuration object that shows/hides features in the USM */
-    config?: USMConfig,
+    config?: USMConfig | Configuration,
     /**
      * customButton - Clickable element for opening the SharingModal component.
      * This property should always be used in conjunction with displayInModal.
@@ -121,7 +125,7 @@ function ContentSharing({
             api && (
                 <Internationalize language={language} messages={messages}>
                     <Providers hasProviders={hasProviders}>
-                        <ContentSharingV2 api={api} itemId={itemID} itemType={itemType}>
+                        <ContentSharingV2 api={api} config={config} itemId={itemID} itemType={itemType}>
                             {children}
                         </ContentSharingV2>
                     </Providers>

src/elements/content-sharing/ContentSharingV2.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { useIntl } from 'react-intl';
 import isEmpty from 'lodash/isEmpty';
+
 import { useNotification } from '@box/blueprint-web';
 import { UnifiedShareModal } from '@box/unified-share-modal';
-import type { CollaborationRole, Collaborator, Item, SharedLink, User } from '@box/unified-share-modal';
+import type { CollaborationRole, Collaborator, Configuration, Item, SharedLink, User } from '@box/unified-share-modal';
 
 import API from '../../api';
 import { withBlueprintModernization } from '../common/withBlueprintModernization';
@@ -12,8 +13,8 @@ import { CONTENT_SHARING_ERRORS } from './constants';
 import { useContactService, useSharingService } from './hooks';
 import { convertCollabsResponse, convertItemResponse } from './utils';
 
-import type { Collaborations, ItemType } from '../../common/types/core';
 import type { ElementsXhrError } from '../../common/types/api';
+import type { Collaborations, ItemType } from '../../common/types/core';
 import type { AvatarURLMap } from './types';
 
 import messages from './messages';
@@ -23,13 +24,15 @@ export interface ContentSharingV2Props {
     api: API;
     /** children - Children for the element to open the Unified Share Modal */
     children?: React.ReactElement;
+    /** config - Configuration object for the Unified Share Modal */
+    config?: Configuration;
     /** itemId - Box file or folder ID */
     itemId: string;
     /** itemType - "file" or "folder" */
     itemType: ItemType;
 }
 
-function ContentSharingV2({ api, children, itemId, itemType }: ContentSharingV2Props) {
+function ContentSharingV2({ api, children, config: usmConfig, itemId, itemType }: ContentSharingV2Props) {
     const [avatarUrlMap, setAvatarUrlMap] = React.useState<AvatarURLMap | null>(null);
     const [item, setItem] = React.useState<Item | null>(null);
     const [hasError, setHasError] = React.useState<boolean>(false);
@@ -207,7 +210,7 @@ function ContentSharingV2({ api, children, itemId, itemType }: ContentSharingV2P
         }
     }, [avatarUrlMap, collaboratorsData, currentUser, owner]);
 
-    const config = { sharedLinkEmail: false };
+    const config = React.useMemo(() => ({ sharedLinkEmail: false, ...usmConfig }), [usmConfig]);
 
     return (
         item && (

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

@@ -165,9 +165,22 @@ describe('elements/content-sharing/ContentSharingV2', () => {
         });
 
         renderComponent();
-        await waitFor(() => {
-            expect(screen.getByRole('heading', { name: /Box Development Guide.pdf/i })).toBeVisible();
-        });
+        expect(await screen.findByRole('heading', { name: 'Share ‘Box Development Guide.pdf’' })).toBeVisible();
+    });
+
+    test('should render UnifiedShareModal when custom config is provided', async () => {
+        renderComponent({ config: { collaborationLimit: 3 } });
+        expect(await screen.findByRole('heading', { name: 'Share ‘Box Development Guide.pdf’' })).toBeVisible();
+    });
+
+    test('should allow custom config to override default config', async () => {
+        const apiWithSharedLink = {
+            ...defaultApiMock,
+            getFileAPI: jest.fn().mockReturnValue({ getFile: getFileMockWithSharedLink }),
+        };
+        renderComponent({ api: apiWithSharedLink, config: { sharedLinkEmail: true } });
+        expect(await screen.findByRole('heading', { name: 'Share ‘Box Development Guide.pdf’' })).toBeVisible();
+        expect(await screen.findByRole('button', { name: 'Send Shared Link' })).toBeVisible();
     });
 
     describe('getError function', () => {