Merge pull request #19914 from overleaf/rh-viewer-comments

[web] Allow Viewers to access chat and view comments/tracked changes

GitOrigin-RevId: 72be0444afdf5e0ad5937bf25718a7566bad001a

services/web/frontend/js/features/chat/components/chat-pane.tsx

@@ -11,14 +11,13 @@ import withErrorBoundary from '../../../infrastructure/error-boundary'
 import { FetchError } from '../../../infrastructure/fetch-json'
 import { useChatContext } from '../context/chat-context'
 import LoadingSpinner from '../../../shared/components/loading-spinner'
-import useViewerPermissions from '@/shared/hooks/use-viewer-permissions'
 
 const MessageList = lazy(() => import('./message-list'))
 
 const ChatPane = React.memo(function ChatPane() {
   const { t } = useTranslation()
 
-  const { setChatIsOpen, chatIsOpen } = useLayoutContext()
+  const { chatIsOpen } = useLayoutContext()
   const user = useUserContext()
 
   const {
@@ -47,17 +46,13 @@ const ChatPane = React.memo(function ChatPane() {
     0
   )
 
-  const shouldShowChat = !useViewerPermissions()
-
   // Keep the chat pane in the DOM to avoid resetting the form input and re-rendering MathJax content.
   const [chatOpenedOnce, setChatOpenedOnce] = useState(chatIsOpen)
   useEffect(() => {
-    if (chatIsOpen && shouldShowChat) {
+    if (chatIsOpen) {
       setChatOpenedOnce(true)
-    } else if (chatIsOpen && !shouldShowChat) {
-      setChatIsOpen(false)
     }
-  }, [chatIsOpen, setChatIsOpen, shouldShowChat])
+  }, [chatIsOpen])
 
   if (error) {
     // let user try recover from fetch errors

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

@@ -17,7 +17,6 @@ import { appendMessage, prependMessages } from '../utils/message-list-appender'
 import useBrowserWindow from '../../../shared/hooks/use-browser-window'
 import { useLayoutContext } from '../../../shared/context/layout-context'
 import { useIdeContext } from '@/shared/context/ide-context'
-import useViewerPermissions from '@/shared/hooks/use-viewer-permissions'
 
 const PAGE_SIZE = 50
 
@@ -287,10 +286,9 @@ export const ChatProvider: FC = ({ children }) => {
   }, [])
 
   // Handling receiving messages over the socket
-  const hasViewerPermissions = useViewerPermissions()
   const { socket } = useIdeContext()
   useEffect(() => {
-    if (!socket || hasViewerPermissions) return
+    if (!socket) return
 
     function receivedMessage(message: any) {
       // If the message is from the current client id, then we are receiving the sent message back from the socket.
@@ -306,7 +304,7 @@ export const ChatProvider: FC = ({ children }) => {
 
       socket.removeListener('new-chat-message', receivedMessage)
     }
-  }, [socket, hasViewerPermissions])
+  }, [socket])
 
   // Handle unread messages
   useEffect(() => {

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

@@ -6,7 +6,6 @@ import { useLayoutContext } from '../../../shared/context/layout-context'
 import { useProjectContext } from '../../../shared/context/project-context'
 import * as eventTracking from '../../../infrastructure/event-tracking'
 import { Doc } from '../../../../../types/doc'
-import useViewerPermissions from '@/shared/hooks/use-viewer-permissions'
 
 function isOpentoString(open: boolean) {
   return open ? 'open' : 'close'
@@ -45,7 +44,6 @@ const EditorNavigationToolbarRoot = React.memo(
     } = useLayoutContext()
 
     const { markMessagesAsRead, unreadMessageCount } = useChatContext()
-    const canViewChatAndTrackChanges = !useViewerPermissions()
 
     const toggleChatOpen = useCallback(() => {
       if (!chatIsOpen) {
@@ -121,12 +119,12 @@ const EditorNavigationToolbarRoot = React.memo(
         hasPublishPermissions={
           permissionsLevel === 'owner' || permissionsLevel === 'readAndWrite'
         }
-        chatVisible={!(isRestrictedTokenMember || !canViewChatAndTrackChanges)}
+        chatVisible={!isRestrictedTokenMember}
         projectName={projectName}
         renameProject={renameProject}
         hasRenamePermissions={permissionsLevel === 'owner'}
         openShareModal={openShareModal}
-        trackChangesVisible={canViewChatAndTrackChanges && trackChangesVisible}
+        trackChangesVisible={trackChangesVisible}
       />
     )
   }

services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts

@@ -64,7 +64,6 @@ import {
   EditOperation,
 } from '../../../../../../../types/change'
 import { RangesTrackerWithResolvedThreadIds } from '@/features/ide-react/editor/document-container'
-import useViewerPermissions from '@/shared/hooks/use-viewer-permissions'
 import getMeta from '@/utils/meta'
 import { useEditorContext } from '@/shared/context/editor-context'
 
@@ -152,7 +151,6 @@ function useReviewPanelState(): ReviewPanel.ReviewPanelState {
   const permissions = usePermissionsContext()
   const { showGenericMessageModal } = useModalsContext()
   const addCommentEmitter = useScopeEventEmitter('comment:start_adding')
-  const hasViewerPermissions = useViewerPermissions()
 
   const layoutToLeft = useLayoutToLeft('.ide-react-editor-panel')
   const [subView, setSubView] =
@@ -420,7 +418,7 @@ function useReviewPanelState(): ReviewPanel.ReviewPanelState {
         }
 
         if (!users[change.metadata.user_id]) {
-          if (!(isRestrictedTokenMember || hasViewerPermissions)) {
+          if (!isRestrictedTokenMember) {
             refreshChangeUsers(change.metadata.user_id)
           }
         }
@@ -428,10 +426,7 @@ function useReviewPanelState(): ReviewPanel.ReviewPanelState {
 
       let localResolvedThreadIds = resolvedThreadIds
 
-      if (
-        !(isRestrictedTokenMember || hasViewerPermissions) &&
-        rangesTracker.comments.length > 0
-      ) {
+      if (!isRestrictedTokenMember && rangesTracker.comments.length > 0) {
         const threadsLoadResult = await ensureThreadsAreLoaded()
         if (threadsLoadResult?.resolvedThreadIds) {
           localResolvedThreadIds = threadsLoadResult.resolvedThreadIds
@@ -494,7 +489,6 @@ function useReviewPanelState(): ReviewPanel.ReviewPanelState {
       ensureThreadsAreLoaded,
       loadingThreads,
       setLoadingThreads,
-      hasViewerPermissions,
       isRestrictedTokenMember,
     ]
   )

services/web/frontend/js/features/source-editor/components/codemirror-editor.tsx

@@ -18,7 +18,6 @@ import { dispatchTimer } from '../../../infrastructure/cm6-performance'
 
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
 import { FigureModal } from './figure-modal/figure-modal'
-import useViewerPermissions from '@/shared/hooks/use-viewer-permissions'
 import { ReviewPanelProviders } from '@/features/review-panel-new/context/review-panel-providers'
 import { ReviewPanelMigration } from '@/features/source-editor/components/review-panel/review-panel-migration'
 
@@ -38,8 +37,6 @@ function CodeMirrorEditor() {
 
   const isMounted = useIsMounted()
 
-  const shouldShowReviewPanel = !useViewerPermissions()
-
   // create the view using the initial state and intercept transactions
   const viewRef = useRef<EditorView | null>(null)
   if (viewRef.current === null) {
@@ -75,7 +72,7 @@ function CodeMirrorEditor() {
           )}
           <CodeMirrorCommandTooltip />
 
-          {shouldShowReviewPanel && <ReviewPanelMigration />}
+          <ReviewPanelMigration />
           {sourceEditorComponents.map(
             ({ import: { default: Component }, path }) => (
               <Component key={path} />