feat(content-sidebar): Added open state change handler prop

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<Props, State> {
             messages,
             metadataSidebarProps,
             onAnnotationSelect,
+            onOpenChange,
             onPanelChange,
             onVersionChange,
             onVersionHistoryClick,
@@ -398,6 +400,7 @@ class ContentSidebar extends React.Component<Props, State> {
                                 metadataEditors={metadataEditors}
                                 metadataSidebarProps={metadataSidebarProps}
                                 onAnnotationSelect={onAnnotationSelect}
+                                onOpenChange={onOpenChange}
                                 onPanelChange={onPanelChange}
                                 onVersionChange={onVersionChange}
                                 onVersionHistoryClick={onVersionHistoryClick}

src/elements/content-sidebar/Sidebar.js

@@ -61,6 +61,7 @@ type Props = {
     metadataEditors?: Array<MetadataEditor>,
     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<Props, State> {
     }
 
     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<Props, State> {
         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);

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 => (
+                <MemoryRouter initialEntries={['/']}>
+                    <Sidebar
+                        {...defaultProps}
+                        file={file}
+                        location={{
+                            pathname: '/',
+                            state: { open },
+                        }}
+                        onOpenChange={mockOnOpenChange}
+                    />
+                </MemoryRouter>
+            );
+
+            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', () => {