Merge pull request #4095 from overleaf/msm-fix-react-navbar-history-toggle

Fix history mode not being restored with React Nav Toolbar

GitOrigin-RevId: 0022153b24db015c6122f45ad7965830e0033540

services/web/frontend/js/shared/context/layout-context.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from 'react'
+import React, { createContext, useContext, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import useScopeValue from './util/scope-value-hook'
 
@@ -19,7 +19,17 @@ LayoutContext.Provider.propTypes = {
 }
 
 export function LayoutProvider({ children, $scope }) {
-  const [view, setView] = useScopeValue('ui.view', $scope)
+  const [view, _setView] = useScopeValue('ui.view', $scope)
+  const setView = useCallback(
+    value => {
+      _setView(value)
+      if (value === 'history') {
+        $scope.toggleHistory()
+      }
+    },
+    [$scope, _setView]
+  )
+
   const [chatIsOpen, setChatIsOpen] = useScopeValue('ui.chatOpen', $scope)
   const [reviewPanelOpen, setReviewPanelOpen] = useScopeValue(
     'ui.reviewPanelOpen',
@@ -53,7 +63,9 @@ export function LayoutProvider({ children, $scope }) {
 
 LayoutProvider.propTypes = {
   children: PropTypes.any,
-  $scope: PropTypes.any.isRequired,
+  $scope: PropTypes.shape({
+    toggleHistory: PropTypes.func.isRequired,
+  }).isRequired,
 }
 
 export function useLayoutContext(propTypes) {

services/web/frontend/stories/fixtures/context.js

@@ -16,6 +16,7 @@ export function setupContext() {
         chatOpen: true,
         pdfLayout: 'flat',
       },
+      toggleHistory: () => {},
     }
   }
   window._ide = {

services/web/test/frontend/helpers/render-with-context.js

@@ -34,6 +34,7 @@ export function EditorProviders({
         pdfLayout: 'flat',
       },
       $watch: () => {},
+      toggleHistory: () => {},
     },
     socket,
   }