diff --git a/scripts/jest/jest.config.js b/scripts/jest/jest.config.js index c558824b13..09ada00444 100644 --- a/scripts/jest/jest.config.js +++ b/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)/)', ], }; diff --git a/src/elements/content-sharing/ContentSharing.js b/src/elements/content-sharing/ContentSharing.js index 24466dab8c..50663c283b 100644 --- a/src/elements/content-sharing/ContentSharing.js +++ b/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, /** 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 ( + + {children} + + ); + } + return ( <> {launchButton} diff --git a/src/elements/content-sharing/ContentSharingV2.tsx b/src/elements/content-sharing/ContentSharingV2.tsx new file mode 100644 index 0000000000..5391c041f4 --- /dev/null +++ b/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 ( + + + {children} + + + ); +} + +export default ContentSharingV2; diff --git a/src/elements/content-sharing/stories/ContentSharing.stories.js b/src/elements/content-sharing/stories/ContentSharing.stories.js index fa90c3a888..c53757d03a 100644 --- a/src/elements/content-sharing/stories/ContentSharing.stories.js +++ b/src/elements/content-sharing/stories/ContentSharing.stories.js @@ -13,6 +13,16 @@ export const withCustomButton = { }, }; +export const withContentSharingV2Enabled = { + args: { + children: , + features: { + ...global.FEATURE_FLAGS, + contentSharingV2: true, + }, + }, +}; + export default { title: 'Elements/ContentSharing', component: ContentSharing, @@ -21,6 +31,8 @@ export default { config: { showEmailSharedLinkForm: false, showInviteCollaboratorMessageSection: false }, displayInModal: false, itemType: TYPE_FILE, + itemID: global.FILE_ID, + token: global.TOKEN, }, argTypes: { itemType: { @@ -28,4 +40,9 @@ export default { control: { type: 'select' }, }, }, + parameters: { + chromatic: { + disableSnapshot: true, + }, + }, }; diff --git a/src/elements/content-sharing/stories/ContentSharingV2.stories.tsx b/src/elements/content-sharing/stories/ContentSharingV2.stories.tsx new file mode 100644 index 0000000000..166ca26ac5 --- /dev/null +++ b/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: , + itemType: TYPE_FILE, + itemID: global.FILE_ID, + }, + argTypes: { + itemType: { + options: [TYPE_FILE, TYPE_FOLDER], + control: { type: 'select' }, + }, + }, + parameters: { + chromatic: { + disableSnapshot: true, + }, + }, +}; diff --git a/src/elements/content-sharing/stories/tests/ContentSharingV2-visual.stories.tsx b/src/elements/content-sharing/stories/tests/ContentSharingV2-visual.stories.tsx new file mode 100644 index 0000000000..f49a24b1dd --- /dev/null +++ b/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, + }, +};