diff --git a/src/elements/content-sidebar/ContentSidebar.js b/src/elements/content-sidebar/ContentSidebar.js index e16bd01933..f226e73cad 100644 --- a/src/elements/content-sidebar/ContentSidebar.js +++ b/src/elements/content-sidebar/ContentSidebar.js @@ -76,6 +76,7 @@ type Props = { metadataSidebarProps: MetadataSidebarProps, onAnnotationSelect?: Function, onFetchFileSuccess?: () => void, + onOpenChange?: (isOpen: boolean) => void, onPanelChange?: (name: string) => void, onVersionChange?: Function, onVersionHistoryClick?: Function, @@ -358,6 +359,7 @@ class ContentSidebar extends React.Component { messages, metadataSidebarProps, onAnnotationSelect, + onOpenChange, onPanelChange, onVersionChange, onVersionHistoryClick, @@ -398,6 +400,7 @@ class ContentSidebar extends React.Component { metadataEditors={metadataEditors} metadataSidebarProps={metadataSidebarProps} onAnnotationSelect={onAnnotationSelect} + onOpenChange={onOpenChange} onPanelChange={onPanelChange} onVersionChange={onVersionChange} onVersionHistoryClick={onVersionHistoryClick} diff --git a/src/elements/content-sidebar/Sidebar.js b/src/elements/content-sidebar/Sidebar.js index 6008ad3b83..febb4febe2 100644 --- a/src/elements/content-sidebar/Sidebar.js +++ b/src/elements/content-sidebar/Sidebar.js @@ -61,6 +61,7 @@ type Props = { metadataEditors?: Array, metadataSidebarProps: MetadataSidebarProps, onAnnotationSelect?: Function, + onOpenChange?: (isOpen: boolean) => void, onPanelChange?: (name: string) => void, onVersionChange?: Function, onVersionHistoryClick?: Function, @@ -113,7 +114,7 @@ class Sidebar extends React.Component { } componentDidUpdate(prevProps: Props): void { - const { fileId, history, location }: Props = this.props; + const { fileId, history, location, onOpenChange = noop }: Props = this.props; const { fileId: prevFileId, location: prevLocation }: Props = prevProps; const { isDirty }: State = this.state; @@ -126,6 +127,11 @@ class Sidebar extends React.Component { if (location !== prevLocation && !this.getLocationState('silent')) { this.setForcedByLocation(); this.setState({ isDirty: true }); + const openState = this.getLocationState('open'); + // Check if the sidebar was expanded / collapsed + if (prevLocation.state?.open !== openState) { + onOpenChange(openState); + } } this.handleDocgenTemplateOnUpdate(prevProps); diff --git a/src/elements/content-sidebar/__tests__/Sidebar.test.js b/src/elements/content-sidebar/__tests__/Sidebar.test.js index 4e0325a6b7..e80eb54736 100644 --- a/src/elements/content-sidebar/__tests__/Sidebar.test.js +++ b/src/elements/content-sidebar/__tests__/Sidebar.test.js @@ -1,5 +1,7 @@ import * as React from 'react'; import { shallow } from 'enzyme'; +import { MemoryRouter } from 'react-router-dom'; +import { render } from '@testing-library/react'; import { SIDEBAR_FORCE_KEY, SIDEBAR_FORCE_VALUE_CLOSED, @@ -172,6 +174,57 @@ describe('elements/content-sidebar/Sidebar', () => { }); expect(historyMock.push).toHaveBeenCalledWith('/'); }); + describe('open state change', () => { + const mockOnOpenChange = jest.fn(); + const getSidebar = open => ( + + + + ); + + afterEach(() => { + mockOnOpenChange.mockClear(); + }); + + test.each` + prevOpen | open + ${false} | ${true} + ${true} | ${false} + ${undefined} | ${true} + ${undefined} | ${false} + `( + 'given previous open state = $prevOpen and new open state = $open should call onOpenChange with $open', + ({ prevOpen, open }) => { + const { rerender } = render(getSidebar(prevOpen)); + + rerender(getSidebar(open)); + + expect(mockOnOpenChange).toBeCalledWith(open); + }, + ); + test.each` + prevOpen | open + ${false} | ${false} + ${true} | ${true} + `( + 'given previous open state = $prevOpen and new open state = $open should not call onOpenChange', + ({ prevOpen, open }) => { + const { rerender } = render(getSidebar(prevOpen)); + + rerender(getSidebar(open)); + + expect(mockOnOpenChange).not.toBeCalled(); + }, + ); + }); }); describe('handleVersionHistoryClick', () => {