Merge pull request #4273 from overleaf/msm-update-publish-modal-permissions

User 'write' permission to display the publish button

GitOrigin-RevId: f73ccf05b165ef1ef9e57e3aea4c04d177aba6d4

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

@@ -4,13 +4,8 @@ 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 { useUserContext } from '../../../shared/context/user-context'
 import { useProjectContext } from '../../../shared/context/project-context'
 
-const userContextPropTypes = {
-  id: PropTypes.string,
-}
-
 const projectContextPropTypes = {
   name: PropTypes.string.isRequired,
 }
@@ -46,8 +41,6 @@ const EditorNavigationToolbarRoot = React.memo(
     openDoc,
     openShareProjectModal,
   }) {
-    const user = useUserContext(userContextPropTypes)
-
     const { name: projectName } = useProjectContext(projectContextPropTypes)
 
     const {
@@ -112,12 +105,6 @@ const EditorNavigationToolbarRoot = React.memo(
       [openDoc]
     )
 
-    // the existing angular implementation prevents collaborators from updating a
-    // project's name, but the backend allows that with the following logic:
-    //   `const hasRenamePermissions = permissionsLevel === 'owner' || permissionsLevel === 'readAndWrite'`
-    // See https://github.com/overleaf/issues/issues/4492
-    const hasRenamePermissions = permissionsLevel === 'owner'
-
     // using {display: 'none'} as 1:1 migration from Angular's ng-hide. Using
     // `loading ? null : <ToolbarHeader/>` causes UI glitches
     return (
@@ -135,10 +122,12 @@ const EditorNavigationToolbarRoot = React.memo(
         onlineUsers={onlineUsersArray}
         goToUser={goToUser}
         isRestrictedTokenMember={isRestrictedTokenMember}
-        isAnonymousUser={user == null}
+        hasPublishPermissions={
+          permissionsLevel === 'owner' || permissionsLevel === 'readAndWrite'
+        }
         projectName={projectName}
         renameProject={renameProject}
-        hasRenamePermissions={hasRenamePermissions}
+        hasRenamePermissions={permissionsLevel === 'owner'}
         openShareModal={openShareModal}
         pdfViewIsOpen={view === 'pdf'}
         pdfButtonIsVisible={pdfLayout === 'flat'}

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

@@ -28,7 +28,7 @@ const ToolbarHeader = React.memo(function ToolbarHeader({
   onlineUsers,
   goToUser,
   isRestrictedTokenMember,
-  isAnonymousUser,
+  hasPublishPermissions,
   projectName,
   renameProject,
   hasRenamePermissions,
@@ -37,7 +37,7 @@ const ToolbarHeader = React.memo(function ToolbarHeader({
   pdfButtonIsVisible,
   togglePdfView,
 }) {
-  const shouldDisplayPublishButton = !isAnonymousUser && PublishButton
+  const shouldDisplayPublishButton = hasPublishPermissions && PublishButton
 
   return (
     <header className="toolbar toolbar-header toolbar-with-labels">
@@ -106,7 +106,7 @@ ToolbarHeader.propTypes = {
   onlineUsers: PropTypes.array.isRequired,
   goToUser: PropTypes.func.isRequired,
   isRestrictedTokenMember: PropTypes.bool,
-  isAnonymousUser: PropTypes.bool,
+  hasPublishPermissions: PropTypes.bool,
   projectName: PropTypes.string.isRequired,
   renameProject: PropTypes.func.isRequired,
   hasRenamePermissions: PropTypes.bool,

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

@@ -16,6 +16,7 @@ describe('<ToolbarHeader />', function () {
     renameProject: () => {},
     openShareModal: () => {},
     togglePdfView: () => {},
+    hasPublishPermissions: true,
   }
 
   describe('cobranding logo', function () {
@@ -109,10 +110,10 @@ describe('<ToolbarHeader />', function () {
       screen.getByText('Submit')
     })
 
-    it('is not displayed for anonymous users', function () {
+    it('is not displayed for users with no publish permissions', function () {
       const props = {
         ...defaultProps,
-        isAnonymousUser: true,
+        hasPublishPermissions: false,
       }
       render(<ToolbarHeader {...props} />)
       expect(screen.queryByText('Submit')).to.not.exist