Skip to content

feat(Content-sharing): Add event callbacks to Content Sharing #4477

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
reneshen0328 wants to merge 5 commits into
base: master
Choose a base branch
from
Open

feat(Content-sharing): Add event callbacks to Content Sharing #4477

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6ce09d6
feat(Content-sharing): Add event callbacks to Content Sharing
reneshen0328 Mar 11, 2026
02a00c8
fix: remove onLoad
reneshen0328 Mar 12, 2026
bdb6d35
feat: add the latest usm version
reneshen0328 Mar 12, 2026
a897494
fix: update snapshot for blueprint-web version upgrade
reneshen0328 Mar 12, 2026
dde00cb
fix: vrt
reneshen0328 Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,14 +124,14 @@
"@babel/preset-typescript": "^7.24.7",
"@babel/template": "^7.24.7",
"@babel/types": "^7.24.7",
"@box/blueprint-web": "^12.138.0",
"@box/blueprint-web-assets": "^4.101.7",
"@box/blueprint-web": "^13.5.12",
"@box/blueprint-web-assets": "^4.104.7",
"@box/box-ai-agent-selector": "^0.53.0",
"@box/box-ai-content-answers": "^0.139.0",
"@box/box-item-type-selector": "^0.73.1",
"@box/cldr-data": "^34.2.0",
"@box/combobox-with-api": "^1.32.1",
"@box/copy-input": "^1.27.4",
"@box/copy-input": "^1.39.17",
"@box/frontend": "^11.0.1",
"@box/item-icon": "^0.27.1",
"@box/languages": "^1.0.0",
Expand All @@ -140,8 +140,8 @@
"@box/metadata-view": "^1.10.0",
"@box/react-virtualized": "^9.22.3-rc-box.10",
"@box/types": "^0.2.1",
"@box/unified-share-modal": "^1.45.0",
"@box/user-selector": "^1.60.4",
"@box/unified-share-modal": "^2.7.10",
"@box/user-selector": "^1.73.18",
"@cfaester/enzyme-adapter-react-18": "^0.8.0",
"@chromatic-com/storybook": "^4.0.1",
"@commitlint/cli": "^19.8.0",
Expand Down Expand Up @@ -295,22 +295,22 @@
"webpack-dev-server": "^5.2.1"
},
"peerDependencies": {
"@box/blueprint-web": "^12.138.0",
"@box/blueprint-web-assets": "^4.101.7",
"@box/blueprint-web": "^13.5.12",
"@box/blueprint-web-assets": "^4.104.7",
"@box/box-ai-agent-selector": "^0.53.0",
"@box/box-ai-content-answers": "^0.139.0",
"@box/box-item-type-selector": "^0.73.1",
"@box/cldr-data": ">=34.2.0",
"@box/combobox-with-api": "^1.18.0",
"@box/copy-input": "^1.27.4",
"@box/copy-input": "^1.39.17",
"@box/item-icon": "^0.27.1",
"@box/metadata-editor": "^1.38.0",
"@box/metadata-filter": "^1.41.3",
"@box/metadata-view": "^1.10.0",
"@box/react-virtualized": "^9.22.3-rc-box.10",
"@box/types": "^0.2.1",
"@box/unified-share-modal": "^1.45.0",
"@box/user-selector": "^1.60.4",
"@box/unified-share-modal": "^2.7.10",
"@box/user-selector": "^1.73.18",
"@hapi/address": "^2.1.4",
"@tanstack/react-virtual": "^3.13.12",
"axios": "^0.30.0",
Expand Down
39 changes: 30 additions & 9 deletions src/elements/content-sharing/ContentSharingV2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import isEmpty from 'lodash/isEmpty';
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';
Expand Down Expand Up @@ -38,11 +38,24 @@ export interface ContentSharingV2Props {
itemId: string;
/** itemType - "file" or "folder" */
itemType: ItemType;
/** onClose - Callback when the modal is closed by user action */
onClose?: () => void;
/** onError - Callback when item data fails to load, preventing USM from opening */
onError?: (error: ElementsXhrError) => void;
/** variant - "desktop" or "modal" variant of the Unified Share Modal */
variant?: VariantType;
}

function ContentSharingV2({ api, children, config: usmConfig, itemId, itemType, variant }: ContentSharingV2Props) {
function ContentSharingV2({
api,
children,
config: usmConfig,
itemId,
itemType,
onClose,
onError,
variant,
}: ContentSharingV2Props) {
const [avatarUrlMap, setAvatarUrlMap] = React.useState<AvatarURLMap | null>(null);
const [item, setItem] = React.useState<Item | null>(null);
const [hasError, setHasError] = React.useState<boolean>(false);
Expand All @@ -52,7 +65,7 @@ function ContentSharingV2({ api, children, config: usmConfig, itemId, itemType,
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: '' });
const [owner, setOwner] = React.useState({ email: '', id: '', name: '' });

const { formatMessage } = useIntl();
const { addNotification } = useNotification();
Expand Down Expand Up @@ -86,7 +99,7 @@ function ContentSharingV2({ api, children, config: usmConfig, itemId, itemType,
setSharedLink(sharedLinkFromApi);
setSharingServiceProps(sharingServicePropsFromApi);
setCollaborationRoles(collaborationRolesFromApi);
setOwner({ id: ownedBy.id, email: ownedBy.login, name: ownedBy.name });
setOwner({ email: ownedBy.login, id: ownedBy.id, name: ownedBy.name });
}, []);

// Handle initial data retrieval errors
Expand Down Expand Up @@ -114,12 +127,12 @@ function ContentSharingV2({ api, children, config: usmConfig, itemId, itemType,
addNotification({
closeButtonAriaLabel: formatMessage(messages.noticeCloseLabel),
sensitivity: 'foreground' as const,
styledText: formatMessage(errorMessage),
typeIconAriaLabel: formatMessage(messages.errorNoticeIcon),
variant: 'error',
styledText: formatMessage(errorMessage),
});
},
[hasError, addNotification, formatMessage],
[addNotification, formatMessage, hasError],
);

// Reset state if the API has changed
Expand All @@ -144,19 +157,20 @@ function ContentSharingV2({ api, children, config: usmConfig, itemId, itemType,
handleGetItemSuccess(itemData);
} catch (error) {
getError(error);
onError?.(error);
}
})();
}, [api, item, itemId, itemType, sharedLink, handleGetItemSuccess, getError]);
}, [api, item, itemId, itemType, sharedLink, getError, handleGetItemSuccess, onError]);

// Get current user
React.useEffect(() => {
if (!api || isEmpty(api) || !item || currentUser) return;

const getUserSuccess = userData => {
const { id, enterprise, hostname } = userData;
const { enterprise, hostname, id } = userData;
setCurrentUser({
id,
enterprise: { name: enterprise ? enterprise.name : '' },
id,
});
setSharingServiceProps(prevSharingServiceProps => ({
...prevSharingServiceProps,
Expand Down Expand Up @@ -222,6 +236,12 @@ function ContentSharingV2({ api, children, config: usmConfig, itemId, itemType,

const config = React.useMemo(() => ({ sharedLinkEmail: false, ...usmConfig }), [usmConfig]);

const handleOpenChange = (open: boolean) => {
if (!open) {
onClose?.();
}
};

return (
item && (
<UnifiedShareModal
Expand All @@ -231,6 +251,7 @@ function ContentSharingV2({ api, children, config: usmConfig, itemId, itemType,
contactService={contactService}
currentUser={currentUser}
item={item}
onOpenChange={handleOpenChange}
sharedLink={sharedLink}
sharingService={sharingService}
variant={variant}
Expand Down
32 changes: 32 additions & 0 deletions src/elements/content-sharing/__tests__/ContentSharingV2.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,4 +253,36 @@ describe('elements/content-sharing/ContentSharingV2', () => {
});
});
});

describe('callback props', () => {
const onError = jest.fn();
const onClose = jest.fn();

const error = { status: 400 };
const errorApi = {
...defaultApiMock,
getFileAPI: jest.fn().mockReturnValue({
getFile: jest.fn().mockImplementation((id, successFn, errorFn) => {
errorFn(error);
}),
}),
};

test('should call onError when item data fails to load', async () => {
renderComponent({ api: errorApi, onError });

await waitFor(() => {
expect(onError).toHaveBeenCalledWith(error);
});
});

test('should call onClose when modal is closed', async () => {
renderComponent({ onClose });
expect(await screen.findByRole('heading', { name: 'Share ‘Box Development Guide.pdf’' })).toBeVisible();

const closeButton = screen.getByRole('button', { name: 'Close' });
closeButton.click();
expect(onClose).toHaveBeenCalled();
});
});
});
3 changes: 1 addition & 2 deletions src/elements/content-sharing/stories/tests/ContentSharingV2-visual.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,7 @@ export const DesktopVariant = {
api: mockApiWithSharedLink,
variant: 'desktop',
},
play: async context => {
await withModernization.play(context);
play: async () => {
Copy link
Contributor

@tjuanitas tjuanitas Mar 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you should probably assert something like the title so the test actually verifies something is rendered

expect(screen.queryByRole('button', { name: 'Close' })).not.toBeInTheDocument();
},
};
Expand Down
2 changes: 1 addition & 1 deletion src/elements/content-sidebar/__tests__/__snapshots__/SidebarFileProperties.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ exports[`elements/content-sidebar/SidebarFileProperties render() should render r
<dd>
<Text>
<p
className="bp_text_module_textReset--ff03b bp_text_module_breakWord--ff03b bp_text_module_bodyDefault--ff03b bp_text_module_textOnLightDefault--ff03b"
className="bp_text_module_textReset--054c0 bp_text_module_breakWord--054c0 bp_text_module_bodyDefault--054c0 bp_text_module_textOnLightDefault--054c0"
data-modern="false"
data-typography="lato"
>
Expand Down
42 changes: 21 additions & 21 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1419,19 +1419,19 @@
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==

"@box/blueprint-web-assets@^4.101.7":
version "4.101.7"
resolved "https://registry.yarnpkg.com/@box/blueprint-web-assets/-/blueprint-web-assets-4.101.7.tgz#f539533020b51336268f9c154b3f5dbb82cd4f88"
integrity sha512-5UdaCZFImeBb9YXb/Ri/EQSRVBcsbMaRxEHIDkaUFjcfjkg8CjtI29kqwqrtYGmwa2ueuicf5qfSRmreaJ/gfQ==
"@box/blueprint-web-assets@^4.104.7":
version "4.104.7"
resolved "https://registry.yarnpkg.com/@box/blueprint-web-assets/-/blueprint-web-assets-4.104.7.tgz#45ce699aaba5e20226444112bab31eb1ca003035"
integrity sha512-RFrWEnjz/s1QzLuAZasLUSiGaRwGPxaM/zUM91lyl/5jRytGpY65xym5+jKQXtGihmzwxkoIb/Q4Pl/npLFOAA==

"@box/blueprint-web@^12.138.0":
version "12.138.0"
resolved "https://registry.yarnpkg.com/@box/blueprint-web/-/blueprint-web-12.138.0.tgz#8abe2c2fba19b4a5c7fb5ef4b22019b3e1a0d8b2"
integrity sha512-qNxeP6gewELITn5NC/X6EknfXdwRmrnyAWYeEb8hPrF9F0zZeGZRzYsjTutsM1cdQRbVdh+PX9OyBo/qD2vsnw==
"@box/blueprint-web@^13.5.12":
version "13.5.12"
resolved "https://registry.yarnpkg.com/@box/blueprint-web/-/blueprint-web-13.5.12.tgz#d50929563deae3d1f043cca16caa13ea267f647e"
integrity sha512-rjsScSPXr8+9Uu2oQBCgHwoVkFBFTGCvOVMPnJ9JD0OekVF24ZyAg0aW6Yo0xlRnkcDz+26As0M9obB6thmcFA==
dependencies:
"@ariakit/react" "0.4.15"
"@ariakit/react-core" "0.4.15"
"@box/blueprint-web-assets" "^4.101.7"
"@box/blueprint-web-assets" "^4.104.7"
"@internationalized/date" "^3.7.0"
"@radix-ui/react-accordion" "1.1.2"
"@radix-ui/react-checkbox" "1.0.4"
Expand Down Expand Up @@ -1488,10 +1488,10 @@
"@box/tree" "^1.29.1"
react-accessible-treeview "2.9.0"

"@box/copy-input@^1.27.4":
version "1.27.5"
resolved "https://registry.yarnpkg.com/@box/copy-input/-/copy-input-1.27.5.tgz#db84e2f95c3c4029470ce98c05d2601694f7abe0"
integrity sha512-9vXfBS1znmOWmrl/FxLVtAHpyK9Cgpt+d6abFLpLWwcduls20cfQmGbxSWGKVo6YDxeoLBQqsKSOTqilvuyOqQ==
"@box/copy-input@^1.39.17":
version "1.39.17"
resolved "https://registry.yarnpkg.com/@box/copy-input/-/copy-input-1.39.17.tgz#52ae6d53ac1b70edc7fd82b475ef4eb1ec5ca37f"
integrity sha512-Wgjp2Y6LQ7gVTHWm5E8WDovo5HKVcAQ7NaUA5SfMas8lOdYSJ808r1Ogi6ZGWOeSWB+JAUbP5d1R//2+bxWnSQ==

"@box/frontend@^11.0.1":
version "11.0.1"
Expand Down Expand Up @@ -1549,15 +1549,15 @@
resolved "https://registry.yarnpkg.com/@box/types/-/types-0.2.1.tgz#cd0a3915b2306e4cf581f6091b95f5d2db75ea60"
integrity sha512-wd6nRR9QxBl7lYKJ/Hix0AKg1PNC3leZWOJ9Nt+d4j45WxCYBiCemZAtY2ekL5BITpVw8vlLmquzSpPhDTeO5A==

"@box/unified-share-modal@^1.45.0":
version "1.45.0"
resolved "https://registry.yarnpkg.com/@box/unified-share-modal/-/unified-share-modal-1.45.0.tgz#2e668a10959119b27023fd66a9213f89f6aae9e2"
integrity sha512-ZMWKyNQHIEsk/biUWTTz+R+AsmjPrXmaMRT2pUMOWR5PSAPR9FANIUYTZ1wVEozzgU8ynsIajpTdtPF8d2plGg==
"@box/unified-share-modal@^2.7.10":
version "2.7.10"
resolved "https://registry.yarnpkg.com/@box/unified-share-modal/-/unified-share-modal-2.7.10.tgz#3eacb8aa5269fe8c5d1aed4b0f7e90b44ee24005"
integrity sha512-+xNAQfkeA4Yyizw+svfWVxbYg2hmF2FuDStlsWvX5BaUuhMo/Kd+jCL7/mUDqwhiPP65k4eNNzGjnXnlHGiVUA==

"@box/user-selector@^1.60.4":
version "1.60.5"
resolved "https://registry.yarnpkg.com/@box/user-selector/-/user-selector-1.60.5.tgz#2f2b087ff2758f2dc5c4317f5016ff7911d7d980"
integrity sha512-flndxCgumwWYkmG3Zuz17EQ5OEYCy3cds/uMN9mEr/zRGhK7SJUBjZpv0FeYSHdRCIQIFHFPg3PutBRhxuGa5w==
"@box/user-selector@^1.73.18":
version "1.73.18"
resolved "https://registry.yarnpkg.com/@box/user-selector/-/user-selector-1.73.18.tgz#b282ff0e71a11a0d106f12bdc025fe60f49ae44e"
integrity sha512-hN+k1fYOpQfmw2dWnMRSGDTK4skNqFHTxS0uv0wjFUmon0VbEBBLbmljB7E8BSstdjO0BxNdLmY2TYgJ17fSWA==

"@bundled-es-modules/cookie@^2.0.1":
version "2.0.1"
Expand Down
Loading