feat(content-sharing): Create ContentSharingV2 component (#4282)

* feat: Create ContentSharingV2 component

* feat: Create ContentSharingV2 component

* fix: flow

* fix: remove not needed code

* fix: remove not needed code

* fix: address comments

* fix: disable snapshot

---------

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

Author: reneshen0328

scripts/jest/jest.config.js

@@ -26,6 +26,6 @@ module.exports = {
     testMatch: ['**/__tests__/**/*.test.+(js|jsx|ts|tsx)'],
     testPathIgnorePatterns: ['stories.test.js$', 'stories.test.tsx$', 'stories.test.d.ts'],
     transformIgnorePatterns: [
-        'node_modules/(?!(@box/react-virtualized/dist/es|@box/cldr-data|@box/blueprint-web|@box/blueprint-web-assets|@box/metadata-editor|@box/box-ai-content-answers|@box/box-ai-agent-selector|@box/item-icon|@box/combobox-with-api|@box/tree|@box/metadata-filter|@box/metadata-view|@box/types|@box/box-item-type-selector)/)',
+        'node_modules/(?!(@box/react-virtualized/dist/es|@box/cldr-data|@box/blueprint-web|@box/blueprint-web-assets|@box/metadata-editor|@box/box-ai-content-answers|@box/box-ai-agent-selector|@box/item-icon|@box/combobox-with-api|@box/tree|@box/metadata-filter|@box/metadata-view|@box/types|@box/box-item-type-selector|@box/unified-share-modal|@box/user-selector|@box/copy-input)/)',
     ],
 };

src/elements/content-sharing/ContentSharing.js

@@ -11,10 +11,15 @@ import * as React from 'react';
 import API from '../../api';
 // $FlowFixMe
 import { withBlueprintModernization } from '../common/withBlueprintModernization';
+import { isFeatureEnabled } from '../common/feature-checking';
 import SharingModal from './SharingModal';
+// $FlowFixMe
+import ContentSharingV2 from './ContentSharingV2';
 import { CLIENT_NAME_CONTENT_SHARING, CLIENT_VERSION, DEFAULT_HOSTNAME_API } from '../../constants';
+
 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 '../common/base.scss';
 import '../common/fonts.scss';
@@ -23,6 +28,8 @@ import '../common/modal.scss';
 type ContentSharingProps = {
     /** apiHost - API hostname. Defaults to https://api.box.com */
     apiHost: string,
+    /** 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,
     /**
@@ -37,6 +44,10 @@ type ContentSharingProps = {
      * the modal will appear on page load. See ContentSharing.stories.js for examples.
      */
     displayInModal: boolean,
+    /** features - Features for the element */
+    features?: FeatureConfig,
+    /** hasProviders - Whether the element has providers for USM already */
+    hasProviders?: boolean,
     /** itemID - Box file or folder ID */
     itemID: string,
     /** itemType - "file" or "folder" */
@@ -62,9 +73,12 @@ const createAPI = (apiHost, itemID, itemType, token) =>
 
 function ContentSharing({
     apiHost = DEFAULT_HOSTNAME_API,
+    children,
     config,
     customButton,
     displayInModal,
+    features = {},
+    hasProviders = true,
     itemID,
     itemType,
     language,
@@ -100,6 +114,20 @@ function ContentSharing({
         }
     }, [config, customButton, displayInModal, itemID, itemType, language, launchButton, messages, isVisible]);
 
+    if (isFeatureEnabled(features, 'contentSharingV2')) {
+        return (
+            <ContentSharingV2
+                itemID={itemID}
+                itemType={itemType}
+                hasProviders={hasProviders}
+                language={language}
+                messages={messages}
+            >
+                {children}
+            </ContentSharingV2>
+        );
+    }
+
     return (
         <>
             {launchButton}

src/elements/content-sharing/ContentSharingV2.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { UnifiedShareModal } from '@box/unified-share-modal';
+
+import Internationalize from '../common/Internationalize';
+import Providers from '../common/Providers';
+
+import type { ItemType, StringMap } from '../../common/types/core';
+
+export interface ContentSharingV2Props {
+    /** 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;
+    /** 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,
+    };
+
+    return (
+        <Internationalize language={language} messages={messages}>
+            <Providers hasProviders={hasProviders}>
+                <UnifiedShareModal item={mockItem}>{children}</UnifiedShareModal>
+            </Providers>
+        </Internationalize>
+    );
+}
+
+export default ContentSharingV2;

src/elements/content-sharing/stories/ContentSharing.stories.js

@@ -13,6 +13,16 @@ export const withCustomButton = {
     },
 };
 
+export const withContentSharingV2Enabled = {
+    args: {
+        children: <button>Open Unified Share Modal</button>,
+        features: {
+            ...global.FEATURE_FLAGS,
+            contentSharingV2: true,
+        },
+    },
+};
+
 export default {
     title: 'Elements/ContentSharing',
     component: ContentSharing,
@@ -21,11 +31,18 @@ export default {
         config: { showEmailSharedLinkForm: false, showInviteCollaboratorMessageSection: false },
         displayInModal: false,
         itemType: TYPE_FILE,
+        itemID: global.FILE_ID,
+        token: global.TOKEN,
     },
     argTypes: {
         itemType: {
             options: [TYPE_FILE, TYPE_FOLDER],
             control: { type: 'select' },
         },
     },
+    parameters: {
+        chromatic: {
+            disableSnapshot: true,
+        },
+    },
 };

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { TYPE_FILE, TYPE_FOLDER } from '../../../constants';
+import ContentSharingV2 from '../ContentSharingV2';
+
+export const basic = {};
+
+export default {
+    title: 'Elements/ContentSharingV2',
+    component: ContentSharingV2,
+    args: {
+        children: <button>Open Unified Share Modal</button>,
+        itemType: TYPE_FILE,
+        itemID: global.FILE_ID,
+    },
+    argTypes: {
+        itemType: {
+            options: [TYPE_FILE, TYPE_FOLDER],
+            control: { type: 'select' },
+        },
+    },
+    parameters: {
+        chromatic: {
+            disableSnapshot: true,
+        },
+    },
+};

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

@@ -0,0 +1,17 @@
+import { TYPE_FILE } from '../../../../constants';
+import ContentSharingV2 from '../../ContentSharingV2';
+
+export const withModernization = {
+    args: {
+        enableModernizedComponents: true,
+    },
+};
+
+export default {
+    title: 'Elements/ContentSharingV2/tests/visual-regression-tests',
+    component: ContentSharingV2,
+    args: {
+        itemType: TYPE_FILE,
+        itemID: global.FILE_ID,
+    },
+};