box-ui-elements 23.4.0-beta.36 → 23.4.0-beta.37

package/src/elements/content-sidebar/versions/VersionsSidebarContainer.js

@@ -24,7 +24,12 @@ import { withAPIContext } from '../../common/api-context';
 import type { FeatureConfig } from '../../common/feature-checking';
 import type { VersionActionCallback, VersionChangeCallback, SidebarLoadCallback } from './flowTypes';
 import type { BoxItemVersion, BoxItem, FileVersions } from '../../../common/types/core';
-import { ViewType, type ViewTypeValues } from '../../common/types/SidebarNavigation';
+import {
+    ViewType,
+    type ViewTypeValues,
+    type InternalSidebarNavigation,
+    type InternalSidebarNavigationHandler,
+} from '../../common/types/SidebarNavigation';
 
 type Props = {
     api: API,
@@ -32,6 +37,8 @@ type Props = {
     fileId: string,
     hasSidebarInitialized?: boolean,
     history: RouterHistory,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     match: Match,
     onLoad: SidebarLoadCallback,
     onUpgradeClick?: () => void,
@@ -42,6 +49,7 @@ type Props = {
     onVersionPromote: VersionActionCallback,
     onVersionRestore: VersionActionCallback,
     parentName: ViewTypeValues,
+    routerDisabled?: boolean,
     versionId?: string,
 };
 
@@ -264,8 +272,20 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
     }
 
     updateVersion = (versionId?: ?string): void => {
-        const { history, match } = this.props;
-        return history.push(generatePath(match.path, { ...match.params, versionId }));
+        const { history, match, routerDisabled, internalSidebarNavigationHandler, internalSidebarNavigation } =
+            this.props;
+
+        if (routerDisabled && internalSidebarNavigationHandler) {
+            const navigationUpdate: InternalSidebarNavigation = { ...internalSidebarNavigation };
+            if (versionId) {
+                navigationUpdate.versionId = versionId;
+            } else {
+                delete navigationUpdate.versionId;
+            }
+            internalSidebarNavigationHandler(navigationUpdate);
+        } else {
+            history.push(generatePath(match.path, { ...match.params, versionId }));
+        }
     };
 
     updateVersionToCurrent = (): void => {
@@ -287,21 +307,40 @@ class VersionsSidebarContainer extends React.Component<Props, State> {
     };
 
     render() {
-        const { fileId, parentName, onUpgradeClick } = this.props;
+        const {
+            fileId,
+            parentName,
+            onUpgradeClick,
+            routerDisabled,
+            internalSidebarNavigation,
+            internalSidebarNavigationHandler,
+        } = this.props;
 
         if (onUpgradeClick) {
-            return <StaticVersionsSidebar onUpgradeClick={onUpgradeClick} parentName={parentName} {...this.state} />;
+            return (
+                <StaticVersionsSidebar
+                    onUpgradeClick={onUpgradeClick}
+                    parentName={parentName}
+                    routerDisabled={routerDisabled}
+                    internalSidebarNavigation={internalSidebarNavigation}
+                    internalSidebarNavigationHandler={internalSidebarNavigationHandler}
+                    {...this.state}
+                />
+            );
         }
 
         return (
             <VersionsSidebar
                 fileId={fileId}
+                internalSidebarNavigation={internalSidebarNavigation}
+                internalSidebarNavigationHandler={internalSidebarNavigationHandler}
                 onDelete={this.handleActionDelete}
                 onDownload={this.handleActionDownload}
                 onPreview={this.handleActionPreview}
                 onPromote={this.handleActionPromote}
                 onRestore={this.handleActionRestore}
                 parentName={parentName}
+                routerDisabled={routerDisabled}
                 {...this.state}
             />
         );

package/src/elements/content-sidebar/versions/__tests__/VersionsSidebarContainer.test.js

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { shallow } from 'enzyme/build';
+import { createBrowserHistory } from 'history';
+import { Router } from 'react-router-dom';
+import { render, waitFor, act, screen } from '../../../../test-utils/testing-library';
 import messages from '../messages';
 import openUrlInsideIframe from '../../../../utils/iframe';
+import VersionsSidebarAPI from '../VersionsSidebarAPI';
+import VersionsSidebar from '../VersionsSidebar';
 import { VersionsSidebarContainerComponent } from '../VersionsSidebarContainer';
 
 jest.mock('react-router-dom', () => ({
@@ -18,6 +23,10 @@ jest.mock('../../../../utils/iframe', () => ({
     default: jest.fn(),
 }));
 
+jest.mock('../VersionsSidebarAPI');
+
+jest.mock('../VersionsSidebar', () => jest.fn(() => <div data-testid="versions-sidebar" />));
+
 const versions = [
     { id: '123', name: 'Version 1' },
     { id: '456', name: 'Version 2' },
@@ -25,73 +34,221 @@ const versions = [
 ];
 
 describe('elements/content-sidebar/versions/VersionsSidebarContainer', () => {
-    const versionsAPI = {
+    const mockedAPIMethods = {
+        fetchData: jest.fn(),
+        deleteVersion: jest.fn(),
+        fetchVersion: jest.fn(),
+        fetchDownloadUrl: jest.fn(),
+        promoteVersion: jest.fn(),
+        restoreVersion: jest.fn(),
         addPermissions: jest.fn(),
         sortVersions: jest.fn(),
     };
+
+    const versionsAPI = {
+        ...mockedAPIMethods,
+    };
+
     const api = {
         getVersionsAPI: () => versionsAPI,
     };
-    const getWrapper = ({ ...props } = {}) =>
-        shallow(<VersionsSidebarContainerComponent api={api} fileId="12345" {...props} />);
 
-    describe('componentDidUpdate', () => {
-        let onVersionChange;
-        let wrapper;
-        let instance;
+    VersionsSidebarAPI.mockImplementation(() => mockedAPIMethods);
 
-        beforeEach(() => {
-            onVersionChange = jest.fn();
-            wrapper = getWrapper({ onVersionChange, refreshIdentity: false });
-            instance = wrapper.instance();
-        });
+    const getWrapper = (props = {}) =>
+        shallow(<VersionsSidebarContainerComponent api={api} fileId="12345" {...props} />);
 
-        test('should verify the selected version id exists when it changes', () => {
-            const version = { id: '45678' };
-            const currentVersion = { id: '54321' };
+    const history = createBrowserHistory();
 
-            instance.verifyVersion = jest.fn();
+    const renderComponent = (props = {}) => {
+        return render(
+            <Router history={history}>
+                <VersionsSidebarContainerComponent api={api} fileId="12345" match={{}} history={history} {...props} />
+            </Router>,
+        );
+    };
 
-            wrapper.setState({ versions: [currentVersion, version] });
-            wrapper.setProps({ versionId: '45678' });
+    const renderComponentWithoutRouter = (props = {}) => {
+        return render(<VersionsSidebarContainerComponent api={api} fileId="12345" routerDisabled={true} {...props} />);
+    };
 
-            expect(instance.verifyVersion).toHaveBeenCalled();
-        });
+    beforeEach(() => {
+        jest.clearAllMocks();
+        mockedAPIMethods.fetchData.mockResolvedValue([{}, {}]);
+        mockedAPIMethods.deleteVersion.mockResolvedValue();
+        mockedAPIMethods.fetchVersion.mockResolvedValue({});
+        mockedAPIMethods.fetchDownloadUrl.mockResolvedValue();
+        mockedAPIMethods.promoteVersion.mockResolvedValue();
+        mockedAPIMethods.restoreVersion.mockResolvedValue();
     });
 
     describe('componentDidMount', () => {
+        beforeEach(() => {
+            history.push = jest.fn();
+        });
+
         test('should call onLoad after a successful fetchData() call', async () => {
             const onLoad = jest.fn();
-            const fetchData = jest.fn(() => Promise.resolve());
-            const instance = getWrapper({ onLoad }).instance();
 
-            instance.fetchData = fetchData;
+            await act(async () => {
+                renderComponent({ onLoad });
+            });
 
-            await instance.componentDidMount();
-            expect(onLoad).toHaveBeenCalled();
+            await waitFor(() => {
+                expect(onLoad).toHaveBeenCalledTimes(1);
+            });
         });
     });
 
     describe('handleActionDelete', () => {
-        test('should call api endpoint helpers', () => {
-            const handleDelete = jest.fn();
-            const wrapper = getWrapper({ onVersionDelete: handleDelete, versionId: '123' });
-            const instance = wrapper.instance();
-            const version = { id: '456' };
-            const newVersion = { id: '456', trash_at: '' };
-
-            instance.api.deleteVersion = jest.fn().mockResolvedValueOnce();
-            instance.api.fetchVersion = jest.fn().mockResolvedValueOnce(newVersion);
-            instance.findVersion = jest.fn(() => version);
-            instance.handleDeleteSuccess = jest.fn();
+        test.each`
+            scenario                        | versionIdToDelete | selectedVersionId | shouldCallHistoryPush | expectedHistoryPath
+            ${'non-selected version'}       | ${'456'}          | ${'123'}          | ${false}              | ${null}
+            ${'currently selected version'} | ${'456'}          | ${'456'}          | ${true}               | ${'/versions/123'}
+        `(
+            'should handle delete operation correctly when deleting $scenario',
+            async ({ versionIdToDelete, selectedVersionId, shouldCallHistoryPush, expectedHistoryPath }) => {
+                const handleDelete = jest.fn();
+                const newVersion = { id: versionIdToDelete, trash_at: '' };
+                const versionToDelete = {
+                    id: versionIdToDelete,
+                    name: 'Version 1',
+                    created_at: '2023-01-01T00:00:00Z',
+                };
+                const mostRecentVersion = { id: '123', name: 'Current Version', created_at: '2023-01-02T00:00:00Z' };
+
+                let triggerDelete;
+                VersionsSidebar.mockImplementation(({ onDelete, versions: versionsList }) => {
+                    triggerDelete = () => onDelete(versionIdToDelete);
+                    return (
+                        <div data-testid="versions-sidebar">
+                            {versionsList && versionsList.length > 0 && (
+                                <div data-testid="versions-loaded">Versions loaded</div>
+                            )}
+                        </div>
+                    );
+                });
+
+                // Include both versions so verifyVersion can find the current version
+                const mockVersionsResponse = { entries: [mostRecentVersion, versionToDelete], total_count: 2 };
+                const mockFileResponse = { version_limit: null };
+
+                mockedAPIMethods.addPermissions.mockReturnValue(mockVersionsResponse);
+                mockedAPIMethods.fetchData.mockResolvedValue([mockFileResponse, mockVersionsResponse]);
+                mockedAPIMethods.fetchVersion.mockResolvedValue(newVersion);
+
+                const historyPushSpy = jest.fn();
+
+                renderComponent({
+                    onVersionDelete: handleDelete,
+                    versionId: selectedVersionId,
+                    history: { ...history, push: historyPushSpy },
+                    match: { path: '/versions/:versionId', params: { versionId: selectedVersionId } },
+                });
+
+                await waitFor(() => {
+                    expect(screen.getByTestId('versions-sidebar')).toBeInTheDocument();
+                });
+                await waitFor(() => {
+                    expect(screen.queryByTestId('versions-loaded')).toBeInTheDocument();
+                });
+
+                await act(async () => {
+                    triggerDelete();
+                });
+
+                await waitFor(() => {
+                    expect(mockedAPIMethods.deleteVersion).toHaveBeenCalledWith(versionToDelete);
+                    expect(mockedAPIMethods.fetchVersion).toHaveBeenCalledWith(versionToDelete.id);
+                    expect(handleDelete).toHaveBeenCalledWith(versionToDelete.id);
+
+                    if (shouldCallHistoryPush) {
+                        expect(historyPushSpy).toHaveBeenCalledWith(expect.stringContaining(expectedHistoryPath));
+                    } else {
+                        expect(historyPushSpy).not.toHaveBeenCalled();
+                    }
+                });
+            },
+        );
+    });
 
-            instance.handleActionDelete(version.id).then(() => {
-                expect(instance.api.deleteVersion).toHaveBeenCalledWith(version);
-                expect(instance.api.fetchVersion).toHaveBeenCalled();
-                expect(instance.handleDeleteSuccess).toHaveBeenCalledWith(newVersion);
-                expect(handleDelete).toHaveBeenCalledWith(version.id);
-            });
-        });
+    describe('handleActionDelete - Router Disabled', () => {
+        test.each`
+            scenario                        | versionIdToDelete | selectedVersionId | shouldCallNavigationHandler | expectedNavigationCall
+            ${'non-selected version'}       | ${'456'}          | ${'123'}          | ${false}                    | ${null}
+            ${'currently selected version'} | ${'456'}          | ${'456'}          | ${true}                     | ${{ versionId: '123' }}
+        `(
+            'should handle delete operation correctly when deleting $scenario',
+            async ({ versionIdToDelete, selectedVersionId, shouldCallNavigationHandler, expectedNavigationCall }) => {
+                const handleDelete = jest.fn();
+                const mockInternalSidebarNavigationHandler = jest.fn();
+                const newVersion = { id: versionIdToDelete, trash_at: '' };
+                const versionToDelete = {
+                    id: versionIdToDelete,
+                    name: 'Version 1',
+                    created_at: '2023-01-01T00:00:00Z',
+                };
+                const mostRecentVersion = { id: '123', name: 'Current Version', created_at: '2023-01-02T00:00:00Z' };
+                const mockInternalSidebarNavigation = {
+                    sidebar: 'activity',
+                    activeFeedEntryType: 'comments',
+                    activeFeedEntryId: '789',
+                };
+
+                let triggerDelete;
+                VersionsSidebar.mockImplementation(({ onDelete, versions: versionsList }) => {
+                    triggerDelete = () => onDelete(versionIdToDelete);
+                    return (
+                        <div data-testid="versions-sidebar">
+                            {versionsList && versionsList.length > 0 && (
+                                <div data-testid="versions-loaded">Versions loaded</div>
+                            )}
+                        </div>
+                    );
+                });
+
+                // Include both versions so verifyVersion can find the current version
+                const mockVersionsResponse = { entries: [mostRecentVersion, versionToDelete], total_count: 2 };
+                const mockFileResponse = { version_limit: null };
+
+                mockedAPIMethods.addPermissions.mockReturnValue(mockVersionsResponse);
+                mockedAPIMethods.fetchData.mockResolvedValue([mockFileResponse, mockVersionsResponse]);
+                mockedAPIMethods.fetchVersion.mockResolvedValue(newVersion);
+
+                renderComponentWithoutRouter({
+                    onVersionDelete: handleDelete,
+                    versionId: selectedVersionId,
+                    internalSidebarNavigation: mockInternalSidebarNavigation,
+                    internalSidebarNavigationHandler: mockInternalSidebarNavigationHandler,
+                });
+
+                await waitFor(() => {
+                    expect(screen.getByTestId('versions-sidebar')).toBeInTheDocument();
+                });
+                await waitFor(() => {
+                    expect(screen.queryByTestId('versions-loaded')).toBeInTheDocument();
+                });
+
+                await act(async () => {
+                    triggerDelete();
+                });
+
+                await waitFor(() => {
+                    expect(mockedAPIMethods.deleteVersion).toHaveBeenCalledWith(versionToDelete);
+                    expect(mockedAPIMethods.fetchVersion).toHaveBeenCalledWith(versionToDelete.id);
+                    expect(handleDelete).toHaveBeenCalledWith(versionToDelete.id);
+
+                    if (shouldCallNavigationHandler) {
+                        expect(mockInternalSidebarNavigationHandler).toHaveBeenCalledWith({
+                            ...mockInternalSidebarNavigation,
+                            ...expectedNavigationCall,
+                        });
+                    } else {
+                        expect(mockInternalSidebarNavigationHandler).not.toHaveBeenCalled();
+                    }
+                });
+            },
+        );
     });
 
     describe('handleActionDownload', () => {

package/src/elements/content-sidebar/versions/__tests__/__snapshots__/VersionsSidebarContainer.test.js.snap

@@ -20,7 +20,7 @@ exports[`elements/content-sidebar/versions/VersionsSidebarContainer handleFetchE
 `;
 
 exports[`elements/content-sidebar/versions/VersionsSidebarContainer handleFetchError should set state to default values with error message 1`] = `
-<VersionsSidebar
+<mockConstructor
   error={
     {
       "defaultMessage": "File versions could not be retrieved.",
@@ -44,7 +44,7 @@ exports[`elements/content-sidebar/versions/VersionsSidebarContainer handleFetchE
 `;
 
 exports[`elements/content-sidebar/versions/VersionsSidebarContainer render should match its snapshot 1`] = `
-<VersionsSidebar
+<mockConstructor
   fileId="12345"
   isArchived={false}
   isLoading={true}