[web] View menu tweaks (#34548)

* [web] Add missing translation

* [web] Group PDF zoom options in view menu

* [web] Add review panel toggle to view menu

* [web] Address review comments

* [web] Show disabled buttons to anonymous users

* [web] Add e2e tests for editing mode in view menu

GitOrigin-RevId: d13dc307f1bcb7c50c76afbaa397c3aca8b96029

server-ce/test/editor.spec.ts

@@ -2,6 +2,8 @@ import {
   createNewFile,
   createProjectAndOpenInNewEditor,
   openProjectById,
+  openProjectByName,
+  shareProjectByEmailAndAcceptInviteViaDash,
   testNewFileUpload,
 } from './helpers/project'
 import { isExcludedBySharding, startWith } from './helpers/config'
@@ -321,6 +323,124 @@ describe('editor', function () {
   })
 })
 
+describe('editing mode', function () {
+  if (isExcludedBySharding('PRO_DEFAULT_1')) return
+  startWith({ pro: true })
+
+  const OWNER = USER
+  const EDITOR = COLLABORATOR
+  const REVIEWER = 'reviewer@example.com'
+  const VIEWER = 'viewer@example.com'
+  ensureUserExists({ email: OWNER })
+  ensureUserExists({ email: EDITOR })
+  ensureUserExists({ email: REVIEWER })
+  ensureUserExists({ email: VIEWER })
+
+  let projectName: string
+
+  function openEditingModeMenu() {
+    cy.findByRole('button', { name: 'View' }).click()
+    cy.findByRole('menuitem', { name: 'Editing mode' }).click()
+  }
+
+  beforeWithReRunOnTestRetry(() => {
+    projectName = `project-${uuid()}`
+    login(OWNER)
+    createProjectAndOpenInNewEditor(projectName, { type: 'Example project' })
+
+    shareProjectByEmailAndAcceptInviteViaDash(
+      projectName,
+      EDITOR,
+      'Editor',
+      true
+    )
+    login(OWNER)
+    shareProjectByEmailAndAcceptInviteViaDash(
+      projectName,
+      REVIEWER,
+      'Reviewer',
+      true
+    )
+    login(OWNER)
+    shareProjectByEmailAndAcceptInviteViaDash(
+      projectName,
+      VIEWER,
+      'Viewer',
+      true
+    )
+  })
+
+  it('lets an editor switch between editing and reviewing', function () {
+    login(EDITOR)
+    openProjectByName(projectName, true)
+
+    openEditingModeMenu()
+    cy.findByRole('menuitem', { name: 'Editing' })
+      .should('have.attr', 'aria-selected', 'true')
+      .and('not.have.attr', 'aria-disabled')
+    cy.findByRole('menuitem', { name: 'Reviewing' })
+      .should('have.attr', 'aria-selected', 'false')
+      .and('not.have.attr', 'aria-disabled')
+    cy.findByRole('menuitem', { name: 'Viewing' }).should('not.exist')
+
+    cy.findByRole('menuitem', { name: 'Reviewing' }).click()
+    cy.findByRole('button', { name: 'Reviewing' }).should('exist')
+
+    openEditingModeMenu()
+    cy.findByRole('menuitem', { name: 'Reviewing' }).should(
+      'have.attr',
+      'aria-selected',
+      'true'
+    )
+    cy.findByRole('menuitem', { name: 'Editing' }).should(
+      'have.attr',
+      'aria-selected',
+      'false'
+    )
+
+    cy.findByRole('menuitem', { name: 'Editing' }).click()
+    cy.findByRole('button', { name: 'Editing' }).should('exist')
+  })
+
+  it('shows a reviewer in reviewing mode with editing disabled', function () {
+    login(REVIEWER)
+    openProjectByName(projectName, true)
+
+    openEditingModeMenu()
+    cy.findByRole('menuitem', { name: 'Reviewing' })
+      .should('have.attr', 'aria-selected', 'true')
+      .and('not.have.attr', 'aria-disabled')
+    cy.findByRole('menuitem', { name: 'Editing' }).should(
+      'have.attr',
+      'aria-disabled',
+      'true'
+    )
+    cy.findByRole('menuitem', { name: 'Viewing' }).should('not.exist')
+  })
+
+  it('shows a viewer in viewing mode with editing and reviewing disabled', function () {
+    login(VIEWER)
+    openProjectByName(projectName, true)
+
+    openEditingModeMenu()
+    cy.findByRole('menuitem', { name: 'Viewing' }).should(
+      'have.attr',
+      'aria-selected',
+      'true'
+    )
+    cy.findByRole('menuitem', { name: 'Editing' }).should(
+      'have.attr',
+      'aria-disabled',
+      'true'
+    )
+    cy.findByRole('menuitem', { name: 'Reviewing' }).should(
+      'have.attr',
+      'aria-disabled',
+      'true'
+    )
+  })
+})
+
 function createRandomLetterString() {
   const chars = 'abcdefghijklmnopqrstuvwxyz'
   let result = ''

server-ce/test/helpers/project.ts

@@ -206,7 +206,7 @@ export function openProjectViaInviteNotification(
 function shareProjectByEmail(
   projectName: string,
   email: string,
-  level: 'Viewer' | 'Editor',
+  level: 'Viewer' | 'Editor' | 'Reviewer',
   newEditor: boolean = false
 ) {
   openProjectByName(projectName, newEditor)
@@ -231,7 +231,7 @@ function shareProjectByEmail(
 export function shareProjectByEmailAndAcceptInviteViaDash(
   projectName: string,
   email: string,
-  level: 'Viewer' | 'Editor',
+  level: 'Viewer' | 'Editor' | 'Reviewer',
   newEditor: boolean = false
 ) {
   shareProjectByEmail(projectName, email, level, newEditor)