Merge pull request #4118 from overleaf/msm-fix-nav-toolbar-anonymous

Fix problems with React Navigation Toolbar on anonymous access

GitOrigin-RevId: 29b652ac2765129e3adf2f9bca2309e8a18ac823

services/web/frontend/js/features/chat/context/chat-context.js

@@ -118,7 +118,7 @@ ChatContext.Provider.propTypes = {
 
 export function ChatProvider({ children }) {
   const { user } = useApplicationContext({
-    user: PropTypes.shape({ id: PropTypes.string.isRequired }.isRequired),
+    user: PropTypes.shape({ id: PropTypes.string.isRequired }),
   })
   const { projectId } = useEditorContext({
     projectId: PropTypes.string.isRequired,
@@ -222,7 +222,7 @@ export function ChatProvider({ children }) {
       // If the message is from the current user and they just sent a message,
       // then we are receiving the sent message back from the socket. Ignore it
       // to prevent double message
-      const messageIsFromSelf = message?.user?.id === user.id
+      const messageIsFromSelf = message?.user?.id === user?.id
       if (messageIsFromSelf && state.messageWasJustSent) return
 
       dispatch({ type: 'RECEIVE_MESSAGE', message })
@@ -242,7 +242,7 @@ export function ChatProvider({ children }) {
     // We're adding and removing the socket listener every time we send a
     // message (and messageWasJustSent changes). Not great, but no good way
     // around it
-  }, [socket, state.messageWasJustSent, state.unreadMessageCount, user.id])
+  }, [socket, state.messageWasJustSent, state.unreadMessageCount, user])
 
   // Handle unread messages
   useEffect(() => {

services/web/frontend/js/features/editor-navigation-toolbar/components/editor-navigation-toolbar-root.js

@@ -4,6 +4,11 @@ import ToolbarHeader from './toolbar-header'
 import { useEditorContext } from '../../../shared/context/editor-context'
 import { useChatContext } from '../../chat/context/chat-context'
 import { useLayoutContext } from '../../../shared/context/layout-context'
+import { useApplicationContext } from '../../../shared/context/application-context'
+
+const applicationContextPropTypes = {
+  user: PropTypes.object,
+}
 
 const editorContextPropTypes = {
   cobranding: PropTypes.object,
@@ -35,6 +40,8 @@ function EditorNavigationToolbarRoot({
   openDoc,
   openShareProjectModal,
 }) {
+  const { user } = useApplicationContext(applicationContextPropTypes)
+
   const {
     cobranding,
     loading,
@@ -111,6 +118,7 @@ function EditorNavigationToolbarRoot({
       onlineUsers={onlineUsersArray}
       goToUser={goToUser}
       isRestrictedTokenMember={isRestrictedTokenMember}
+      isAnonymousUser={user == null}
       projectName={projectName}
       renameProject={renameProject}
       openShareModal={openShareModal}

services/web/frontend/js/features/editor-navigation-toolbar/components/toolbar-header.js

@@ -28,6 +28,7 @@ function ToolbarHeader({
   onlineUsers,
   goToUser,
   isRestrictedTokenMember,
+  isAnonymousUser,
   projectName,
   renameProject,
   openShareModal,
@@ -35,6 +36,8 @@ function ToolbarHeader({
   pdfButtonIsVisible,
   togglePdfView,
 }) {
+  const shouldDisplayPublishButton = !isAnonymousUser && PublishButton
+
   return (
     <header className="toolbar toolbar-header toolbar-with-labels">
       <div className="toolbar-left">
@@ -68,7 +71,9 @@ function ToolbarHeader({
           />
         )}
         <ShareProjectButton onClick={openShareModal} />
-        {PublishButton && <PublishButton cobranding={cobranding} />}
+        {shouldDisplayPublishButton && (
+          <PublishButton cobranding={cobranding} />
+        )}
         {!isRestrictedTokenMember && (
           <>
             <HistoryToggleButton
@@ -100,6 +105,7 @@ ToolbarHeader.propTypes = {
   onlineUsers: PropTypes.array.isRequired,
   goToUser: PropTypes.func.isRequired,
   isRestrictedTokenMember: PropTypes.bool,
+  isAnonymousUser: PropTypes.bool,
   projectName: PropTypes.string.isRequired,
   renameProject: PropTypes.func.isRequired,
   openShareModal: PropTypes.func.isRequired,

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

@@ -10,19 +10,13 @@ import { LayoutProvider } from './layout-context'
 import { ChatProvider } from '../../features/chat/context/chat-context'
 
 export function ContextRoot({ children, ide, settings }) {
-  const isAnonymousUser = window.user.id == null
-
   return (
     <ApplicationProvider>
       <IdeProvider ide={ide}>
         <EditorProvider settings={settings}>
           <CompileProvider>
             <LayoutProvider>
-              {isAnonymousUser ? (
+              <ChatProvider>{children}</ChatProvider>
-                children
-              ) : (
-                <ChatProvider>{children}</ChatProvider>
-              )}
             </LayoutProvider>
           </CompileProvider>
         </EditorProvider>

services/web/test/frontend/features/editor-navigation-toolbar/components/toolbar-header.test.js

@@ -103,4 +103,20 @@ describe('<ToolbarHeader />', function () {
       expect(screen.queryByText('Chat')).to.not.exist
     })
   })
+
+  describe('Publish button', function () {
+    it('is displayed by default', function () {
+      render(<ToolbarHeader {...defaultProps} />)
+      screen.getByText('Submit')
+    })
+
+    it('is not displayed for anonymous users', function () {
+      const props = {
+        ...defaultProps,
+        isAnonymousUser: true,
+      }
+      render(<ToolbarHeader {...props} />)
+      expect(screen.queryByText('Submit')).to.not.exist
+    })
+  })
 })