box-ui-elements 23.4.0-beta.15 → 23.4.0-beta.17

package/src/elements/common/annotator-context/__tests__/withAnnotatorContext.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '../../../../test-utils/testing-library';
 import withAnnotatorContext, { WithAnnotatorContextProps } from '../withAnnotatorContext';
 import { Action } from '../types';
 
@@ -13,18 +13,59 @@ describe('elements/common/annotator-context/withAnnotatorContext', () => {
         className?: string | undefined;
     };
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    type WrappedComponentProps<T> = ComponentProps & WithAnnotatorContextProps; // T is supposed to be allowed component props
+    type WrappedComponentProps = ComponentProps & WithAnnotatorContextProps;
 
-    const Component = (props: WrappedComponentProps<HTMLDivElement>) => <div {...props} />;
+    beforeEach(() => jest.resetAllMocks());
 
-    const WrappedComponent = withAnnotatorContext(Component);
+    test('should apply the annotator context to the wrapped component as a prop', () => {
+        const annotatorState = {
+            annotation: { foo: 'bar' },
+            action: Action.CREATE_START,
+        };
+        const mockEmitActiveAnnotationChangeEvent = jest.fn();
+        const mockEmitAnnotationRemoveEvent = jest.fn();
+        const mockEmitAnnotationReplyCreateEvent = jest.fn();
+        const mockEmitAnnotationReplyDeleteEvent = jest.fn();
+        const mockMmitAnnotationReplyUpdateEvent = jest.fn();
+        const mockEmitAnnotationUpdateEvent = jest.fn();
+        const mockGetAnnotationsMatchPath = jest.fn();
+        const mockGetAnnotationsPath = jest.fn();
 
-    const getWrapper = (props?: WrappedComponentProps<HTMLDivElement>) => shallow(<WrappedComponent {...props} />);
+        mockContext.mockReturnValue({
+            state: annotatorState,
+            emitActiveAnnotationChangeEvent: mockEmitActiveAnnotationChangeEvent,
+            emitAnnotationRemoveEvent: mockEmitAnnotationRemoveEvent,
+            emitAnnotationReplyCreateEvent: mockEmitAnnotationReplyCreateEvent,
+            emitAnnotationReplyDeleteEvent: mockEmitAnnotationReplyDeleteEvent,
+            emitAnnotationReplyUpdateEvent: mockMmitAnnotationReplyUpdateEvent,
+            emitAnnotationUpdateEvent: mockEmitAnnotationUpdateEvent,
+            getAnnotationsMatchPath: mockGetAnnotationsMatchPath,
+            getAnnotationsPath: mockGetAnnotationsPath,
+        });
 
-    beforeEach(() => jest.resetAllMocks());
+        const MockComponent = jest.fn<JSX.Element | null, [WrappedComponentProps]>(() => null);
+        const WrappedWithMockComponent = withAnnotatorContext(MockComponent);
 
-    test('should apply the annotator context to the wrapped component as a prop', () => {
+        render(<WrappedWithMockComponent />);
+
+        expect(MockComponent).toHaveBeenCalledTimes(1);
+        const props = MockComponent.mock.calls[0][0];
+
+        expect(props.annotatorState).toEqual({
+            annotation: { foo: 'bar' },
+            action: Action.CREATE_START,
+        });
+        expect(props.emitActiveAnnotationChangeEvent).toBe(mockEmitActiveAnnotationChangeEvent);
+        expect(props.emitAnnotationRemoveEvent).toBe(mockEmitAnnotationRemoveEvent);
+        expect(props.emitAnnotationReplyCreateEvent).toBe(mockEmitAnnotationReplyCreateEvent);
+        expect(props.emitAnnotationReplyDeleteEvent).toBe(mockEmitAnnotationReplyDeleteEvent);
+        expect(props.emitAnnotationReplyUpdateEvent).toBe(mockMmitAnnotationReplyUpdateEvent);
+        expect(props.emitAnnotationUpdateEvent).toBe(mockEmitAnnotationUpdateEvent);
+        expect(props.getAnnotationsMatchPath).toBe(mockGetAnnotationsMatchPath);
+        expect(props.getAnnotationsPath).toBe(mockGetAnnotationsPath);
+    });
+
+    test('should apply the annotator context to the wrapped component without router props when routerDisabled is true', () => {
         const annotatorState = {
             annotation: { foo: 'bar' },
             action: Action.CREATE_START,
@@ -50,22 +91,77 @@ describe('elements/common/annotator-context/withAnnotatorContext', () => {
             getAnnotationsPath: mockGetAnnotationsPath,
         });
 
-        const wrapper = getWrapper();
-        const wrappedComponent = wrapper.dive().find(Component);
-        const props = wrappedComponent.props() as WrappedComponentProps<HTMLDivElement>;
+        const MockComponent = jest.fn<JSX.Element | null, [WrappedComponentProps]>(() => null);
+        const WrappedWithMockComponent = withAnnotatorContext(MockComponent);
+
+        render(<WrappedWithMockComponent routerDisabled={true} />);
+
+        expect(MockComponent).toHaveBeenCalledTimes(1);
+        const props = MockComponent.mock.calls[0][0];
 
-        expect(wrappedComponent.exists()).toBeTruthy();
         expect(props.annotatorState).toEqual({
             annotation: { foo: 'bar' },
             action: Action.CREATE_START,
         });
-        expect(props.emitActiveAnnotationChangeEvent).toEqual(mockEmitActiveAnnotationChangeEvent);
-        expect(props.emitAnnotationRemoveEvent).toEqual(mockEmitAnnotationRemoveEvent);
-        expect(props.emitAnnotationReplyCreateEvent).toEqual(mockEmitAnnotationReplyCreateEvent);
-        expect(props.emitAnnotationReplyDeleteEvent).toEqual(mockEmitAnnotationReplyDeleteEvent);
-        expect(props.emitAnnotationReplyUpdateEvent).toEqual(mockMmitAnnotationReplyUpdateEvent);
-        expect(props.emitAnnotationUpdateEvent).toEqual(mockEmitAnnotationUpdateEvent);
-        expect(props.getAnnotationsMatchPath).toEqual(mockGetAnnotationsMatchPath);
-        expect(props.getAnnotationsPath).toEqual(mockGetAnnotationsPath);
+        expect(props.emitActiveAnnotationChangeEvent).toBe(mockEmitActiveAnnotationChangeEvent);
+        expect(props.emitAnnotationRemoveEvent).toBe(mockEmitAnnotationRemoveEvent);
+        expect(props.emitAnnotationReplyCreateEvent).toBe(mockEmitAnnotationReplyCreateEvent);
+        expect(props.emitAnnotationReplyDeleteEvent).toBe(mockEmitAnnotationReplyDeleteEvent);
+        expect(props.emitAnnotationReplyUpdateEvent).toBe(mockMmitAnnotationReplyUpdateEvent);
+        expect(props.emitAnnotationUpdateEvent).toBe(mockEmitAnnotationUpdateEvent);
+
+        // Router-related props should not be passed when routerDisabled is true
+        expect(props.getAnnotationsMatchPath).toBeUndefined();
+        expect(props.getAnnotationsPath).toBeUndefined();
+    });
+
+    test('should apply the annotator context to the wrapped component without router props when routerDisabled in feature flags is true', () => {
+        const annotatorState = {
+            annotation: { foo: 'bar' },
+            action: Action.CREATE_START,
+        };
+        const mockEmitActiveAnnotationChangeEvent = jest.fn();
+        const mockEmitAnnotationRemoveEvent = jest.fn();
+        const mockEmitAnnotationReplyCreateEvent = jest.fn();
+        const mockEmitAnnotationReplyDeleteEvent = jest.fn();
+        const mockMmitAnnotationReplyUpdateEvent = jest.fn();
+        const mockEmitAnnotationUpdateEvent = jest.fn();
+        const mockGetAnnotationsMatchPath = jest.fn();
+        const mockGetAnnotationsPath = jest.fn();
+
+        mockContext.mockReturnValue({
+            state: annotatorState,
+            emitActiveAnnotationChangeEvent: mockEmitActiveAnnotationChangeEvent,
+            emitAnnotationRemoveEvent: mockEmitAnnotationRemoveEvent,
+            emitAnnotationReplyCreateEvent: mockEmitAnnotationReplyCreateEvent,
+            emitAnnotationReplyDeleteEvent: mockEmitAnnotationReplyDeleteEvent,
+            emitAnnotationReplyUpdateEvent: mockMmitAnnotationReplyUpdateEvent,
+            emitAnnotationUpdateEvent: mockEmitAnnotationUpdateEvent,
+            getAnnotationsMatchPath: mockGetAnnotationsMatchPath,
+            getAnnotationsPath: mockGetAnnotationsPath,
+        });
+
+        const MockComponent = jest.fn<JSX.Element | null, [WrappedComponentProps]>(() => null);
+        const WrappedWithMockComponent = withAnnotatorContext(MockComponent);
+
+        render(<WrappedWithMockComponent features={{ routerDisabled: { value: true } }} />);
+
+        expect(MockComponent).toHaveBeenCalledTimes(1);
+        const props = MockComponent.mock.calls[0][0];
+
+        expect(props.annotatorState).toEqual({
+            annotation: { foo: 'bar' },
+            action: Action.CREATE_START,
+        });
+        expect(props.emitActiveAnnotationChangeEvent).toBe(mockEmitActiveAnnotationChangeEvent);
+        expect(props.emitAnnotationRemoveEvent).toBe(mockEmitAnnotationRemoveEvent);
+        expect(props.emitAnnotationReplyCreateEvent).toBe(mockEmitAnnotationReplyCreateEvent);
+        expect(props.emitAnnotationReplyDeleteEvent).toBe(mockEmitAnnotationReplyDeleteEvent);
+        expect(props.emitAnnotationReplyUpdateEvent).toBe(mockMmitAnnotationReplyUpdateEvent);
+        expect(props.emitAnnotationUpdateEvent).toBe(mockEmitAnnotationUpdateEvent);
+
+        // Router-related props should not be passed when routerDisabled is true
+        expect(props.getAnnotationsMatchPath).toBeUndefined();
+        expect(props.getAnnotationsPath).toBeUndefined();
     });
 });

package/src/elements/common/annotator-context/types.js.flow

@@ -74,8 +74,8 @@ export interface AnnotatorContext {
         annotation: Object,
         isStartEvent?: boolean
     ) => void;
-    getAnnotationsMatchPath: GetMatchPath;
-    getAnnotationsPath: (fileVersionId?: string, annotationId?: string) => string;
+    getAnnotationsMatchPath?: GetMatchPath;
+    getAnnotationsPath?: (fileVersionId?: string, annotationId?: string) => string;
     state: AnnotatorState;
 }
 declare export var Status: {|

package/src/elements/common/annotator-context/types.ts

@@ -53,8 +53,8 @@ export interface AnnotatorContext {
     emitAnnotationReplyDeleteEvent?: (id: string, annotationId: string, isStartEvent?: boolean) => void;
     emitAnnotationReplyUpdateEvent?: (reply: Object, annotationId: string, isStartEvent?: boolean) => void;
     emitAnnotationUpdateEvent?: (annotation: Object, isStartEvent?: boolean) => void;
-    getAnnotationsMatchPath: GetMatchPath;
-    getAnnotationsPath: (fileVersionId?: string, annotationId?: string) => string;
+    getAnnotationsMatchPath?: GetMatchPath;
+    getAnnotationsPath?: (fileVersionId?: string, annotationId?: string) => string;
     state: AnnotatorState;
 }
 

package/src/elements/common/annotator-context/withAnnotations.js.flow

@@ -18,6 +18,10 @@ import {
     MatchParams,
     Status
 } from "./types";
+import { SidebarNavigation } from '../types/SidebarNavigation';
+import { type FeatureConfig } from '../feature-checking';
+
+
 export type ActiveChangeEvent = {
     annotationId: string | null,
     fileVersionId: string,
@@ -48,11 +52,11 @@ export type ComponentWithAnnotations = {
         isStartEvent?: boolean
     ) => void,
     getAction: (eventData: AnnotationActionEvent) => Action,
-    getAnnotationsPath: (
+    getAnnotationsPath?: (
         fileVersionId?: string,
         annotationId?: string | null
     ) => string,
-    getMatchPath: GetMatchPath,
+    getMatchPath?: GetMatchPath,
     handleActiveChange: ActiveChangeEventHandler,
     handleAnnotationChangeEvent: (id: string | null) => void,
     handleAnnotationCreate: (eventData: AnnotationActionEvent) => void,
@@ -70,6 +74,7 @@ export type ComponentWithAnnotations = {
     ...
 };
 export type WithAnnotationsProps = {
+    features?: FeatureConfig;
     location?: Location,
     onAnnotator: (annotator: Annotator) => void,
     onError?: (
@@ -78,7 +83,9 @@ export type WithAnnotationsProps = {
         contextInfo?: { [key: string]: mixed, ... }
     ) => void,
     onPreviewDestroy: (shouldReset?: boolean) => void,
-    ...
+    routerDisabled?: boolean;
+    sidebarNavigation?: SidebarNavigation;
+     ...
 };
 export type WithAnnotationsComponent<P> = React.ComponentClass<
     P & WithAnnotationsProps

package/src/elements/common/annotator-context/withAnnotations.tsx

@@ -3,7 +3,9 @@ import getProp from 'lodash/get';
 import { generatePath, match as matchType, matchPath } from 'react-router-dom';
 import { Location } from 'history';
 import AnnotatorContext from './AnnotatorContext';
+import { isFeatureEnabled, type FeatureConfig } from '../feature-checking';
 import { Action, Annotator, AnnotationActionEvent, AnnotatorState, GetMatchPath, MatchParams, Status } from './types';
+import { FeedEntryType, SidebarNavigation } from '../types/SidebarNavigation';
 
 export type ActiveChangeEvent = {
     annotationId: string | null;
@@ -41,10 +43,13 @@ export type ComponentWithAnnotations = {
 };
 
 export type WithAnnotationsProps = {
+    features?: FeatureConfig;
     location?: Location;
     onAnnotator: (annotator: Annotator) => void;
     onError?: (error: Error, code: string, contextInfo?: Record<string, unknown>) => void;
     onPreviewDestroy: (shouldReset?: boolean) => void;
+    routerDisabled?: boolean;
+    sidebarNavigation?: SidebarNavigation;
 };
 
 export type WithAnnotationsComponent<P> = React.ComponentClass<P & WithAnnotationsProps>;
@@ -71,10 +76,26 @@ export default function withAnnotations<P extends object>(
         constructor(props: P & WithAnnotationsProps) {
             super(props);
 
-            // Determine by url if there is already a deeply linked annotation
-            const { location } = props;
-            const match = this.getMatchPath(location);
-            const activeAnnotationId = getProp(match, 'params.annotationId', null);
+            const { routerDisabled, sidebarNavigation } = props;
+            let activeAnnotationId = null;
+
+            const isRouterDisabled = routerDisabled || isFeatureEnabled(props?.features, 'routerDisabled.value');
+
+            if (isRouterDisabled) {
+                if (
+                    sidebarNavigation &&
+                    'activeFeedEntryType' in sidebarNavigation &&
+                    sidebarNavigation.activeFeedEntryType === FeedEntryType.ANNOTATIONS &&
+                    'activeFeedEntryId' in sidebarNavigation
+                ) {
+                    activeAnnotationId = sidebarNavigation.activeFeedEntryId;
+                }
+            } else {
+                // Determine by url if there is already a deeply linked annotation
+                const { location } = props;
+                const match = this.getMatchPath(location);
+                activeAnnotationId = getProp(match, 'params.annotationId', null);
+            }
 
             // Seed the initial state with the activeAnnotationId if any from the location path
             this.state = { ...defaultState, activeAnnotationId };
@@ -192,6 +213,7 @@ export default function withAnnotations<P extends object>(
             });
         }
 
+        // remove this method with routerDisabled switch
         getMatchPath(location?: Location): matchType<MatchParams> | null {
             const pathname = getProp(location, 'pathname', '');
             return matchPath<MatchParams>(pathname, {
@@ -319,6 +341,14 @@ export default function withAnnotations<P extends object>(
         };
 
         render(): JSX.Element {
+            const isRouterDisabled =
+                this.props?.routerDisabled || isFeatureEnabled(this.props?.features, 'routerDisabled.value');
+            const annotationsRouterProps = isRouterDisabled
+                ? {}
+                : {
+                      getAnnotationsMatchPath: this.getMatchPath,
+                      getAnnotationsPath: this.getAnnotationsPath,
+                  };
             return (
                 <AnnotatorContext.Provider
                     value={{
@@ -328,8 +358,7 @@ export default function withAnnotations<P extends object>(
                         emitAnnotationReplyDeleteEvent: this.emitAnnotationReplyDeleteEvent,
                         emitAnnotationReplyUpdateEvent: this.emitAnnotationReplyUpdateEvent,
                         emitAnnotationUpdateEvent: this.emitAnnotationUpdateEvent,
-                        getAnnotationsMatchPath: this.getMatchPath,
-                        getAnnotationsPath: this.getAnnotationsPath,
+                        ...annotationsRouterProps,
                         state: this.state,
                     }}
                 >

package/src/elements/common/annotator-context/withAnnotatorContext.js.flow

@@ -7,6 +7,7 @@
 import * as React from "react";
 import AnnotatorContext from "./AnnotatorContext";
 import { AnnotatorState, GetMatchPath } from "./types";
+
 export interface WithAnnotatorContextProps {
     annotatorState?: AnnotatorState;
     emitActiveAnnotationChangeEvent?: (id: string) => void;

package/src/elements/common/annotator-context/withAnnotatorContext.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import AnnotatorContext from './AnnotatorContext';
+import { isFeatureEnabled, type FeatureConfig } from '../feature-checking';
 import { AnnotatorState, GetMatchPath } from './types';
 
 export interface WithAnnotatorContextProps {
@@ -20,33 +21,64 @@ export interface WithAnnotatorContextProps {
 }
 
 export default function withAnnotatorContext<P extends {}>(WrappedComponent: React.ComponentType<P>) {
-    return React.forwardRef<React.ComponentType<P>, P>((props, ref) => (
-        <AnnotatorContext.Consumer>
-            {({
-                emitActiveAnnotationChangeEvent,
-                emitAnnotationRemoveEvent,
-                emitAnnotationReplyCreateEvent,
-                emitAnnotationReplyDeleteEvent,
-                emitAnnotationReplyUpdateEvent,
-                emitAnnotationUpdateEvent,
-                getAnnotationsMatchPath,
-                getAnnotationsPath,
-                state,
-            }) => (
-                <WrappedComponent
-                    ref={ref}
-                    {...props}
-                    annotatorState={state}
-                    emitActiveAnnotationChangeEvent={emitActiveAnnotationChangeEvent}
-                    emitAnnotationRemoveEvent={emitAnnotationRemoveEvent}
-                    emitAnnotationReplyCreateEvent={emitAnnotationReplyCreateEvent}
-                    emitAnnotationReplyDeleteEvent={emitAnnotationReplyDeleteEvent}
-                    emitAnnotationReplyUpdateEvent={emitAnnotationReplyUpdateEvent}
-                    emitAnnotationUpdateEvent={emitAnnotationUpdateEvent}
-                    getAnnotationsMatchPath={getAnnotationsMatchPath}
-                    getAnnotationsPath={getAnnotationsPath}
-                />
-            )}
-        </AnnotatorContext.Consumer>
-    ));
+    return React.forwardRef<React.ComponentType<P>, P & { routerDisabled?: boolean; features?: FeatureConfig }>(
+        (props, ref) => {
+            if (props?.routerDisabled === true || isFeatureEnabled(props?.features, 'routerDisabled.value')) {
+                return (
+                    <AnnotatorContext.Consumer>
+                        {({
+                            emitActiveAnnotationChangeEvent,
+                            emitAnnotationRemoveEvent,
+                            emitAnnotationReplyCreateEvent,
+                            emitAnnotationReplyDeleteEvent,
+                            emitAnnotationReplyUpdateEvent,
+                            emitAnnotationUpdateEvent,
+                            state,
+                        }) => (
+                            <WrappedComponent
+                                ref={ref}
+                                {...props}
+                                annotatorState={state}
+                                emitActiveAnnotationChangeEvent={emitActiveAnnotationChangeEvent}
+                                emitAnnotationRemoveEvent={emitAnnotationRemoveEvent}
+                                emitAnnotationReplyCreateEvent={emitAnnotationReplyCreateEvent}
+                                emitAnnotationReplyDeleteEvent={emitAnnotationReplyDeleteEvent}
+                                emitAnnotationReplyUpdateEvent={emitAnnotationReplyUpdateEvent}
+                                emitAnnotationUpdateEvent={emitAnnotationUpdateEvent}
+                            />
+                        )}
+                    </AnnotatorContext.Consumer>
+                );
+            }
+            return (
+                <AnnotatorContext.Consumer>
+                    {({
+                        emitActiveAnnotationChangeEvent,
+                        emitAnnotationRemoveEvent,
+                        emitAnnotationReplyCreateEvent,
+                        emitAnnotationReplyDeleteEvent,
+                        emitAnnotationReplyUpdateEvent,
+                        emitAnnotationUpdateEvent,
+                        getAnnotationsMatchPath,
+                        getAnnotationsPath,
+                        state,
+                    }) => (
+                        <WrappedComponent
+                            ref={ref}
+                            {...props}
+                            annotatorState={state}
+                            emitActiveAnnotationChangeEvent={emitActiveAnnotationChangeEvent}
+                            emitAnnotationRemoveEvent={emitAnnotationRemoveEvent}
+                            emitAnnotationReplyCreateEvent={emitAnnotationReplyCreateEvent}
+                            emitAnnotationReplyDeleteEvent={emitAnnotationReplyDeleteEvent}
+                            emitAnnotationReplyUpdateEvent={emitAnnotationReplyUpdateEvent}
+                            emitAnnotationUpdateEvent={emitAnnotationUpdateEvent}
+                            getAnnotationsMatchPath={getAnnotationsMatchPath}
+                            getAnnotationsPath={getAnnotationsPath}
+                        />
+                    )}
+                </AnnotatorContext.Consumer>
+            );
+        },
+    );
 }

package/src/elements/common/nav-button/BackButton.js

@@ -7,7 +7,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
-import { Route, type Location } from 'react-router-dom';
 import IconNavigateLeft from '../../../icons/general/IconNavigateLeft';
 import messages from '../messages';
 import PlainButton from '../../../components/plain-button';
@@ -15,25 +14,16 @@ import './BackButton.scss';
 
 type Props = {
     className?: string,
-    to?: Location,
+    onClick: () => void,
 };
 
-const BackButton = ({ className, to, ...rest }: Props) => (
-    <Route>
-        {({ history }) => (
-            <PlainButton
-                className={classNames('bdl-BackButton', className)}
-                onClick={() => (to ? history.push(to) : history.goBack())}
-                type="button"
-                {...rest}
-            >
-                <IconNavigateLeft height={24} width={24} />
-                <span className="accessibility-hidden">
-                    <FormattedMessage {...messages.back} />
-                </span>
-            </PlainButton>
-        )}
-    </Route>
+const BackButton = ({ className, onClick, ...rest }: Props) => (
+    <PlainButton className={classNames('bdl-BackButton', className)} onClick={onClick} type="button" {...rest}>
+        <IconNavigateLeft height={24} width={24} />
+        <span className="accessibility-hidden">
+            <FormattedMessage {...messages.back} />
+        </span>
+    </PlainButton>
 );
 
 export default BackButton;

package/src/elements/common/nav-button/__tests__/BackButton.test.js

@@ -1,43 +1,52 @@
 import * as React from 'react';
-import { MemoryRouter, Router } from 'react-router-dom';
-import { mount } from 'enzyme';
+import { render, screen, userEvent } from '../../../../test-utils/testing-library';
 import { BackButton } from '..';
 
 describe('elements/common/nav-button/BackButton', () => {
-    const getWrapper = (props = {}) =>
-        mount(
-            <MemoryRouter initialEntries={['/start', '/test']}>
-                <BackButton {...props} />
-            </MemoryRouter>,
-        );
-    const getHistory = wrapper => wrapper.find(Router).prop('history');
-
-    test('should match its snapshot', () => {
-        const wrapper = getWrapper();
-        const button = wrapper.find(BackButton).first();
-
-        expect(button).toMatchSnapshot();
+    const mockOnClick = jest.fn();
+
+    beforeEach(() => {
+        mockOnClick.mockClear();
     });
 
-    test('should call history back on click if no path is defined', () => {
-        const wrapper = getWrapper();
-        const history = getHistory(wrapper);
+    test('should render back button with navigation icon and accessible text', () => {
+        render(<BackButton onClick={mockOnClick} />);
 
-        history.goBack = jest.fn();
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveClass('bdl-BackButton');
 
-        wrapper.simulate('click');
+        expect(screen.getByText('Back')).toBeInTheDocument();
 
-        expect(history.goBack).toHaveBeenCalled();
+        const icon = button.querySelector('svg');
+        expect(icon).toBeInTheDocument();
+        expect(icon).toHaveClass('icon-navigate-left');
     });
 
-    test('should call history.push on click if a path is defined', () => {
-        const wrapper = getWrapper({ to: '/new' });
-        const history = getHistory(wrapper);
+    test('should call onClick handler when clicked', async () => {
+        const user = userEvent();
+
+        render(<BackButton onClick={mockOnClick} />);
 
-        history.push = jest.fn();
+        const button = screen.getByRole('button');
+        await user.click(button);
+
+        expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+
+    test('should pass through additional props', () => {
+        render(<BackButton onClick={mockOnClick} data-testid="test-back-button" data-resin-target="back" />);
+
+        const button = screen.getByTestId('test-back-button');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveAttribute('data-resin-target', 'back');
+    });
 
-        wrapper.simulate('click');
+    test('should apply custom className alongside default class', () => {
+        render(<BackButton onClick={mockOnClick} className="custom-class" />);
 
-        expect(history.push).toHaveBeenCalledWith('/new');
+        const button = screen.getByRole('button');
+        expect(button).toHaveClass('bdl-BackButton');
+        expect(button).toHaveClass('custom-class');
     });
 });

package/src/elements/common/types/SidebarNavigation.flow.js

@@ -0,0 +1,52 @@
+/* @flow */
+
+export const ViewType = Object.freeze({
+    BOXAI: 'boxai',
+    SKILLS: 'skills',
+    ACTIVITY: 'activity',
+    DETAILS: 'details',
+    METADATA: 'metadata',
+    DOCGEN: 'docgen',
+});
+
+export const FeedEntryType = Object.freeze({
+    ANNOTATIONS: 'annotations',
+    COMMENTS: 'comments',
+    TASKS: 'tasks',
+});
+
+export type ViewTypeValues = $Values<typeof ViewType>;
+export type FeedEntryTypeValues = $Values<typeof FeedEntryType>;
+
+type VersionSidebarView = {
+    sidebar: 'activity' | 'details',
+    versionId: string,
+};
+
+export type ActivityAnnotationsSidebarView = {
+    sidebar: 'activity',
+    activeFeedEntryType: 'annotations',
+    fileVersionId: string,
+    activeFeedEntryId: string,
+};
+type ActivityCommentsSidebarView = {
+    sidebar: 'activity',
+    activeFeedEntryType: 'comments' | 'tasks',
+    activeFeedEntryId: string,
+};
+
+export type SidebarNavigation =
+    | {|
+          sidebar: ViewTypeValues,
+      |}
+    | VersionSidebarView
+    | ActivityCommentsSidebarView
+    | ActivityAnnotationsSidebarView;
+
+export type InternalSidebarNavigation = SidebarNavigation & {
+    open: boolean,
+};
+
+export type SidebarNavigationHandler = (sidebar: SidebarNavigation, replace?: boolean) => void;
+
+export type InternalSidebarNavigationHandler = (sidebar: InternalSidebarNavigation, replace?: boolean) => void;

package/src/elements/common/types/SidebarNavigation.ts

@@ -0,0 +1,47 @@
+export enum ViewType {
+    BOXAI = 'boxai',
+    SKILLS = 'skills',
+    ACTIVITY = 'activity',
+    DETAILS = 'details',
+    METADATA = 'metadata',
+    DOCGEN = 'docgen',
+}
+
+export enum FeedEntryType {
+    ANNOTATIONS = 'annotations',
+    COMMENTS = 'comments',
+    TASKS = 'tasks',
+}
+
+type VersionSidebarView = {
+    sidebar: ViewType.ACTIVITY | ViewType.DETAILS;
+    versionId: string;
+};
+
+export type ActivityAnnotationsSidebarView = {
+    sidebar: ViewType.ACTIVITY;
+    activeFeedEntryType: FeedEntryType.ANNOTATIONS;
+    fileVersionId: string;
+    activeFeedEntryId: string;
+};
+type ActivityCommentsSidebarView = {
+    sidebar: ViewType.ACTIVITY;
+    activeFeedEntryType: FeedEntryType.COMMENTS | FeedEntryType.TASKS;
+    activeFeedEntryId: string;
+};
+
+export type SidebarNavigation =
+    | {
+          sidebar: ViewType;
+      }
+    | VersionSidebarView
+    | ActivityCommentsSidebarView
+    | ActivityAnnotationsSidebarView;
+
+export type InternalSidebarNavigation = SidebarNavigation & {
+    open: boolean;
+};
+
+export type SidebarNavigationHandler = (sidebar: SidebarNavigation, replace?: boolean) => void;
+
+export type InternalSidebarNavigationHandler = (sidebar: InternalSidebarNavigation, replace?: boolean) => void;