box-ui-elements 23.4.0-beta.33 → 23.4.0-beta.34

package/src/elements/content-preview/__tests__/PreviewNavigation.test.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Router } from 'react-router-dom';
-import noop from 'lodash/noop';
-import { mount } from 'enzyme';
-import { PreviewNavigationComponent as PreviewNavigation } from '../PreviewNavigation';
+import { render, screen, userEvent } from '../../../test-utils/testing-library';
+import PreviewNavigation from '../PreviewNavigation';
+import { ViewType, FeedEntryType } from '../../common/types/SidebarNavigation';
 
 const historyMockDefault = {
     location: { pathname: '/activity/tasks/1234', hash: '' },
@@ -18,110 +18,250 @@ const deeplinkedMetadataHistoryMock = {
     entries: [{}],
 };
 
-const getWrapper = ({
-    collection = ['a', 'b', 'c'],
-    historyMock = historyMockDefault,
-    onNavigateLeft = noop,
-    onNavigateRight = noop,
-    ...rest
-}) =>
-    mount(
+const onNavigateLeftMock = jest.fn();
+const onNavigateRightMock = jest.fn();
+const mockNavigationHandler = jest.fn();
+
+const renderComponentWithRouter = (props = {}) => {
+    const {
+        collection = ['a', 'b', 'c'],
+        historyMock = historyMockDefault,
+        onNavigateLeft = onNavigateLeftMock,
+        onNavigateRight = onNavigateRightMock,
+        internalSidebarNavigationHandler = mockNavigationHandler,
+        ...rest
+    } = props;
+
+    return render(
         <Router history={historyMock}>
             <PreviewNavigation
                 collection={collection}
-                intl={{
-                    formatMessage: jest.fn(),
-                }}
                 onNavigateLeft={onNavigateLeft}
                 onNavigateRight={onNavigateRight}
-                history={historyMock}
+                internalSidebarNavigationHandler={internalSidebarNavigationHandler}
                 {...rest}
             />
         </Router>,
     );
+};
+
+const renderComponentWithoutRouter = (props = {}) => {
+    const defaultProps = {
+        collection: ['a', 'b', 'c'],
+        currentIndex: 1,
+        onNavigateLeft: onNavigateLeftMock,
+        onNavigateRight: onNavigateRightMock,
+        internalSidebarNavigationHandler: mockNavigationHandler,
+    };
 
-afterEach(() => {
+    return render(<PreviewNavigation {...defaultProps} {...props} routerDisabled />);
+};
+
+beforeEach(() => {
     jest.resetAllMocks();
 });
 
 describe('elements/content-preview/PreviewNavigation', () => {
     describe('render()', () => {
         test('should render correctly with an empty collection', () => {
-            const wrapper = getWrapper({ collection: [], currentIndex: 0 });
-            expect(wrapper).toMatchSnapshot();
+            const { container } = renderComponentWithRouter({ collection: [], currentIndex: 0 });
+            expect(container.firstChild).toBeNull();
         });
 
-        test.each([0, 1, 9])('should render correctly with a filled collection %i', ({ currentIndex }) => {
-            const collection = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
-            const wrapper = getWrapper({ collection, currentIndex });
-            expect(wrapper).toMatchSnapshot();
-        });
+        test.each([
+            { currentIndex: 0, description: 'first item', expectLeft: false, expectRight: true },
+            { currentIndex: 1, description: 'middle item', expectLeft: true, expectRight: true },
+            { currentIndex: 9, description: 'last item', expectLeft: true, expectRight: false },
+        ])(
+            'should render correctly with a filled collection - $description',
+            ({ currentIndex, expectLeft, expectRight }) => {
+                const collection = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
+                renderComponentWithRouter({ collection, currentIndex });
+
+                const leftButton = screen.queryByTestId('preview-navigation-left');
+                const rightButton = screen.queryByTestId('preview-navigation-right');
+
+                if (expectLeft) {
+                    expect(leftButton).toBeInTheDocument();
+                } else {
+                    expect(leftButton).not.toBeInTheDocument();
+                }
+
+                if (expectRight) {
+                    expect(rightButton).toBeInTheDocument();
+                } else {
+                    expect(rightButton).not.toBeInTheDocument();
+                }
+            },
+        );
+
+        test('should render left navigation correctly from tasks deeplinked URL', async () => {
+            const user = userEvent();
+
+            renderComponentWithRouter({
+                currentIndex: 2,
+                historyMock: historyMockDefault,
+            });
 
-        test('should render left navigation correctly from tasks deeplinked URL', () => {
-            const onNavigateLeftMock = jest.fn();
-            const wrapper = getWrapper({ currentIndex: 2, onNavigateLeft: onNavigateLeftMock });
+            const leftButton = screen.getByTestId('preview-navigation-left');
+            expect(leftButton).toBeInTheDocument();
 
-            expect(wrapper.find('PlainButton')).toHaveLength(1);
-            wrapper.find('PlainButton').simulate('click');
+            await user.click(leftButton);
 
-            expect(historyMockDefault.push).toBeCalledTimes(1);
-            expect(historyMockDefault.push).toBeCalledWith('/activity');
+            expect(historyMockDefault.push).toHaveBeenCalledTimes(1);
+            expect(historyMockDefault.push).toHaveBeenCalledWith('/activity');
             expect(onNavigateLeftMock).toHaveBeenCalled();
         });
 
-        test('should render right navigation correctly from tasks deeplinked URL ', () => {
-            const onNavigateRightMock = jest.fn();
-            const wrapper = getWrapper({ currentIndex: 0, onNavigateRight: onNavigateRightMock });
+        test('should render right navigation correctly from tasks deeplinked URL', async () => {
+            const user = userEvent();
 
-            expect(wrapper.find('PlainButton')).toHaveLength(1);
-            wrapper.find('PlainButton').simulate('click');
+            renderComponentWithRouter({
+                currentIndex: 0,
+                historyMock: historyMockDefault,
+            });
 
-            expect(historyMockDefault.push).toBeCalledTimes(1);
-            expect(historyMockDefault.push).toBeCalledWith('/activity');
-            expect(onNavigateRightMock).toHaveBeenCalled();
-        });
-        test('should render navigation correctly from comments deeplinked URL ', () => {
-            const onNavigateRightMock = jest.fn();
-            const wrapper = getWrapper({ currentIndex: 0, onNavigateRight: onNavigateRightMock });
+            const rightButton = screen.getByTestId('preview-navigation-right');
+            expect(rightButton).toBeInTheDocument();
 
-            expect(wrapper.find('PlainButton')).toHaveLength(1);
-            wrapper.find('PlainButton').simulate('click');
+            await user.click(rightButton);
 
-            expect(historyMockDefault.push).toBeCalledTimes(1);
-            expect(historyMockDefault.push).toBeCalledWith('/activity');
+            expect(historyMockDefault.push).toHaveBeenCalledTimes(1);
+            expect(historyMockDefault.push).toHaveBeenCalledWith('/activity');
             expect(onNavigateRightMock).toHaveBeenCalled();
         });
 
-        test('should render right navigation correctly from metadata deeplinked URL ', () => {
-            const onNavigateRightMock = jest.fn();
-            const wrapper = getWrapper({
+        test('should render right navigation correctly from metadata deeplinked URL', async () => {
+            const user = userEvent();
+
+            renderComponentWithRouter({
                 currentIndex: 0,
                 historyMock: deeplinkedMetadataHistoryMock,
-                onNavigateRight: onNavigateRightMock,
             });
 
-            expect(wrapper.find('PlainButton')).toHaveLength(1);
-            wrapper.find('PlainButton').simulate('click');
+            const rightButton = screen.getByTestId('preview-navigation-right');
+            expect(rightButton).toBeInTheDocument();
+
+            await user.click(rightButton);
 
-            expect(deeplinkedMetadataHistoryMock.push).toBeCalledTimes(1);
-            expect(deeplinkedMetadataHistoryMock.push).toBeCalledWith('/metadata/filteredTemplates/123,124');
+            expect(deeplinkedMetadataHistoryMock.push).toHaveBeenCalledTimes(1);
+            expect(deeplinkedMetadataHistoryMock.push).toHaveBeenCalledWith('/metadata/filteredTemplates/123,124');
             expect(onNavigateRightMock).toHaveBeenCalled();
         });
 
-        test('should render left navigation correctly from metadata deeplinked URL ', () => {
-            const onNavigateLeftMock = jest.fn();
-            const wrapper = getWrapper({
+        test('should render left navigation correctly from metadata deeplinked URL', async () => {
+            const user = userEvent();
+
+            renderComponentWithRouter({
                 currentIndex: 2,
                 historyMock: deeplinkedMetadataHistoryMock,
-                onNavigateLeft: onNavigateLeftMock,
             });
 
-            expect(wrapper.find('PlainButton')).toHaveLength(1);
-            wrapper.find('PlainButton').simulate('click');
+            const leftButton = screen.getByTestId('preview-navigation-left');
+            expect(leftButton).toBeInTheDocument();
+
+            await user.click(leftButton);
 
-            expect(deeplinkedMetadataHistoryMock.push).toBeCalledTimes(1);
-            expect(deeplinkedMetadataHistoryMock.push).toBeCalledWith('/metadata/filteredTemplates/123,124');
+            expect(deeplinkedMetadataHistoryMock.push).toHaveBeenCalledTimes(1);
+            expect(deeplinkedMetadataHistoryMock.push).toHaveBeenCalledWith('/metadata/filteredTemplates/123,124');
             expect(onNavigateLeftMock).toHaveBeenCalled();
         });
     });
+
+    describe('when routerDisabled is true', () => {
+        test('should render correctly without router', () => {
+            renderComponentWithoutRouter({ currentIndex: 1 });
+
+            expect(screen.getByTestId('preview-navigation-left')).toBeInTheDocument();
+            expect(screen.getByTestId('preview-navigation-right')).toBeInTheDocument();
+        });
+
+        test('should call internalSidebarNavigationHandler when left navigation button is clicked', async () => {
+            const mockInternalSidebarNavigation = {
+                sidebar: ViewType.ACTIVITY,
+                activeFeedEntryType: FeedEntryType.COMMENTS,
+                activeFeedEntryId: '123',
+            };
+            const user = userEvent();
+
+            renderComponentWithoutRouter({
+                internalSidebarNavigation: mockInternalSidebarNavigation,
+            });
+
+            const leftButton = screen.getByTestId('preview-navigation-left');
+            await user.click(leftButton);
+
+            expect(mockNavigationHandler).toHaveBeenCalledTimes(1);
+            expect(mockNavigationHandler).toHaveBeenCalledWith({ sidebar: ViewType.ACTIVITY });
+            expect(onNavigateLeftMock).toHaveBeenCalledTimes(1);
+            expect(onNavigateRightMock).not.toHaveBeenCalled();
+        });
+
+        test('should call internalSidebarNavigationHandler when right navigation button is clicked', async () => {
+            const mockInternalSidebarNavigation = {
+                sidebar: ViewType.ACTIVITY,
+                activeFeedEntryType: FeedEntryType.COMMENTS,
+                activeFeedEntryId: '123',
+            };
+            const user = userEvent();
+
+            renderComponentWithoutRouter({
+                internalSidebarNavigation: mockInternalSidebarNavigation,
+            });
+
+            const rightButton = screen.getByTestId('preview-navigation-right');
+            await user.click(rightButton);
+
+            expect(mockNavigationHandler).toHaveBeenCalledTimes(1);
+            expect(mockNavigationHandler).toHaveBeenCalledWith({ sidebar: ViewType.ACTIVITY });
+            expect(onNavigateRightMock).toHaveBeenCalledTimes(1);
+            expect(onNavigateLeftMock).not.toHaveBeenCalled();
+        });
+
+        test('should call navigation handler with metadata deeplinks when left navigation button is clicked', async () => {
+            const mockInternalSidebarNavigation = {
+                sidebar: ViewType.METADATA,
+                filteredTemplateIds: '123,124',
+            };
+            const user = userEvent();
+
+            renderComponentWithoutRouter({
+                internalSidebarNavigation: mockInternalSidebarNavigation,
+            });
+
+            const leftButton = screen.getByTestId('preview-navigation-left');
+            await user.click(leftButton);
+
+            expect(mockNavigationHandler).toHaveBeenCalledTimes(1);
+            expect(mockNavigationHandler).toHaveBeenCalledWith({
+                sidebar: ViewType.METADATA,
+                filteredTemplateIds: '123,124',
+            });
+            expect(onNavigateLeftMock).toHaveBeenCalledTimes(1);
+            expect(onNavigateRightMock).not.toHaveBeenCalled();
+        });
+
+        test('should call navigation handler with metadata deeplinks when right navigation button is clicked', async () => {
+            const mockInternalSidebarNavigation = {
+                sidebar: ViewType.METADATA,
+                filteredTemplateIds: '123,124',
+            };
+            const user = userEvent();
+
+            renderComponentWithoutRouter({
+                internalSidebarNavigation: mockInternalSidebarNavigation,
+            });
+
+            const rightButton = screen.getByTestId('preview-navigation-right');
+            await user.click(rightButton);
+
+            expect(mockNavigationHandler).toHaveBeenCalledTimes(1);
+            expect(mockNavigationHandler).toHaveBeenCalledWith({
+                sidebar: ViewType.METADATA,
+                filteredTemplateIds: '123,124',
+            });
+            expect(onNavigateRightMock).toHaveBeenCalledTimes(1);
+            expect(onNavigateLeftMock).not.toHaveBeenCalled();
+        });
+    });
 });

package/src/elements/content-sidebar/ActivitySidebar.js

@@ -28,6 +28,7 @@ import { withFeatureConsumer, isFeatureEnabled } from '../common/feature-checkin
 import { withLogger } from '../common/logger';
 import { withRouterAndRef } from '../common/routing';
 import ActivitySidebarFilter from './ActivitySidebarFilter';
+import { ViewType, FeedEntryType } from '../common/types/SidebarNavigation';
 import {
     ACTIVITY_FILTER_OPTION_ALL,
     ACTIVITY_FILTER_OPTION_RESOLVED,
@@ -76,6 +77,7 @@ import type { WithAnnotatorContextProps } from '../common/annotator-context';
 import './ActivitySidebar.scss';
 
 import type { OnAnnotationEdit, OnAnnotationStatusChange } from './activity-feed/comment/types';
+import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
 
 type ExternalProps = {
     activeFeedEntryId?: string,
@@ -86,6 +88,8 @@ type ExternalProps = {
     hasReplies?: boolean,
     hasTasks?: boolean,
     hasVersions?: boolean,
+    internalSidebarNavigation?: InternalSidebarNavigation,
+    internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     onCommentCreate: Function,
     onCommentDelete: (comment: Comment) => any,
     onCommentUpdate: () => any,
@@ -94,6 +98,7 @@ type ExternalProps = {
     onTaskDelete: (id: string) => any,
     onTaskUpdate: () => any,
     onTaskView: (id: string, isCreator: boolean) => any,
+    routerDisabled?: boolean,
 } & ErrorContextProps &
     WithAnnotatorContextProps;
 
@@ -547,7 +552,7 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
      * @return {void}
      */
     updateReplies = (id: string, replies: Array<Comment>) => {
-        const { activeFeedEntryId, api, file, history } = this.props;
+        const { activeFeedEntryId, api, file, history, internalSidebarNavigationHandler, routerDisabled } = this.props;
         const { feedItems } = this.state;
 
         if (!feedItems) {
@@ -567,7 +572,16 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
                     item.id === id && item === this.getCommentFeedItemByReplyId(feedItems, activeFeedEntryId),
             )
         ) {
-            history.replace(this.getActiveCommentPath());
+            if (routerDisabled && internalSidebarNavigationHandler) {
+                internalSidebarNavigationHandler(
+                    {
+                        sidebar: ViewType.ACTIVITY,
+                    },
+                    true,
+                );
+            } else {
+                history.replace(this.getActiveCommentPath());
+            }
         }
 
         feedAPI.updateFeedItem({ replies }, id);
@@ -1108,18 +1122,36 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
             getAnnotationsMatchPath,
             getAnnotationsPath,
             history,
+            internalSidebarNavigation,
+            internalSidebarNavigationHandler,
             location,
             onAnnotationSelect,
+            routerDisabled,
         } = this.props;
         const annotationFileVersionId = getProp(file_version, 'id');
         const currentFileVersionId = getProp(file, 'file_version.id');
-        const match = getAnnotationsMatchPath(location);
-        const selectedFileVersionId = getProp(match, 'params.fileVersionId', currentFileVersionId);
+
+        let selectedFileVersionId = currentFileVersionId;
+        if (routerDisabled && internalSidebarNavigation) {
+            selectedFileVersionId = getProp(internalSidebarNavigation, 'fileVersionId', currentFileVersionId);
+        } else {
+            const match = getAnnotationsMatchPath(location);
+            selectedFileVersionId = getProp(match, 'params.fileVersionId', currentFileVersionId);
+        }
 
         emitActiveAnnotationChangeEvent(nextActiveAnnotationId);
 
         if (annotationFileVersionId && annotationFileVersionId !== selectedFileVersionId) {
-            history.push(getAnnotationsPath(annotationFileVersionId, nextActiveAnnotationId));
+            if (routerDisabled && internalSidebarNavigationHandler) {
+                internalSidebarNavigationHandler({
+                    sidebar: ViewType.ACTIVITY,
+                    activeFeedEntryId: nextActiveAnnotationId,
+                    activeFeedEntryType: FeedEntryType.ANNOTATIONS,
+                    fileVersionId: annotationFileVersionId,
+                });
+            } else {
+                history.push(getAnnotationsPath(annotationFileVersionId, nextActiveAnnotationId));
+            }
         }
 
         onAnnotationSelect(annotation);
@@ -1161,7 +1193,8 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
     }
 
     renderAddTaskButton = () => {
-        const { isDisabled, hasTasks } = this.props;
+        const { isDisabled, hasTasks, internalSidebarNavigation, internalSidebarNavigationHandler, routerDisabled } =
+            this.props;
         const { approverSelectorContacts } = this.state;
         const { getApprover, getAvatarUrl, createTask, onTaskModalClose } = this;
 
@@ -1171,8 +1204,11 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
 
         return (
             <AddTaskButton
+                internalSidebarNavigation={internalSidebarNavigation}
+                internalSidebarNavigationHandler={internalSidebarNavigationHandler}
                 isDisabled={isDisabled}
                 onTaskModalClose={onTaskModalClose}
+                routerDisabled={routerDisabled}
                 taskFormProps={{
                     approvers: [],
                     approverSelectorContacts,