[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

services/web/frontend/js/features/ide-react/components/toolbar/menu-bar.tsx

@@ -26,6 +26,7 @@ import EditorCloneProjectModalWrapper from '@/features/clone-project-modal/compo
 import useOpenProject from '@/shared/hooks/use-open-project'
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
 import { useFeatureFlag } from '@/shared/context/split-test-context'
+import ReviewModeOptions from './review-mode-options'
 
 const menubarExtraComponents = importOverleafModules(
   'menubarExtraComponents'
@@ -205,10 +206,16 @@ export const ToolbarMenuBar = () => {
       id: 'pdf-controls',
       children: [
         'view-pdf-presentation-mode',
-        'view-pdf-zoom-in',
-        'view-pdf-zoom-out',
-        'view-pdf-fit-width',
-        'view-pdf-fit-height',
+        {
+          id: 'pdf-zoom-control-group',
+          title: t('pdf_zoom'),
+          children: [
+            'view-pdf-zoom-in',
+            'view-pdf-zoom-out',
+            'view-pdf-fit-width',
+            'view-pdf-fit-height',
+          ],
+        },
       ],
     }),
     [t]
@@ -262,8 +269,9 @@ export const ToolbarMenuBar = () => {
           className="ide-redesign-toolbar-dropdown-toggle-subdued ide-redesign-toolbar-button-subdued"
         >
           <ChangeLayoutOptions />
+          <ReviewModeOptions />
           <DropdownDivider />
-          <DropdownHeader>Editor settings</DropdownHeader>
+          <DropdownHeader>{t('editor_settings')}</DropdownHeader>
           <MenuBarOption
             eventKey="show_breadcrumbs"
             title={t('show_breadcrumbs')}

services/web/frontend/js/features/ide-react/components/toolbar/review-mode-options.tsx

@@ -0,0 +1,105 @@
+import { DropdownDivider } from '@/shared/components/dropdown/dropdown-menu'
+import { useTranslation } from 'react-i18next'
+import { useEditorPropertiesContext } from '../../context/editor-properties-context'
+import OLDropdownMenuItem from '@/shared/components/ol/ol-dropdown-menu-item'
+import { sendMB } from '@/infrastructure/event-tracking'
+import { useIdeReactContext } from '../../context/ide-react-context'
+import { usePermissionsContext } from '../../context/permissions-context'
+import { useProjectContext } from '@/shared/context/project-context'
+import { useEditorContext } from '@/shared/context/editor-context'
+import { NestedMenuBarDropdown } from '@/shared/components/menu-bar/menu-bar-dropdown'
+import { useUserContext } from '@/shared/context/user-context'
+
+function getMode(permissionsLevel: string, wantTrackChanges: boolean) {
+  if (permissionsLevel === 'readOnly') {
+    return 'view'
+  }
+  if (permissionsLevel === 'review') {
+    return 'review'
+  }
+  if (wantTrackChanges) {
+    return 'review'
+  }
+  return 'edit'
+}
+
+const ReviewModeOptions: React.FC = () => {
+  const { t } = useTranslation()
+  const { wantTrackChanges } = useEditorPropertiesContext()
+  const { write, trackedWrite } = usePermissionsContext()
+  const { permissionsLevel } = useIdeReactContext()
+  const { features } = useProjectContext()
+  const { setUpgradeTrackChangesModal } = useEditorContext()
+  const user = useUserContext()
+
+  const mode = getMode(permissionsLevel, wantTrackChanges)
+  const showViewOption = mode === 'view'
+
+  if (!features.trackChangesVisible) {
+    return null
+  }
+
+  return (
+    <>
+      <DropdownDivider />
+      <NestedMenuBarDropdown id="editing-mode-group" title={t('editing_mode')}>
+        <OLDropdownMenuItem
+          as="button"
+          disabled={!write || !user.id}
+          onClick={() => {
+            if (mode === 'edit') {
+              return
+            }
+            sendMB('editing-mode-change', {
+              role: permissionsLevel,
+              previousMode: mode,
+              newMode: 'edit',
+            })
+            window.dispatchEvent(new Event('toggle-track-changes'))
+          }}
+          leadingIcon="edit"
+          active={write && mode === 'edit'}
+        >
+          {t('editing')}
+        </OLDropdownMenuItem>
+        <OLDropdownMenuItem
+          as="button"
+          disabled={permissionsLevel === 'readOnly' || !user.id}
+          onClick={() => {
+            if (mode === 'review') {
+              return
+            }
+            if (!features.trackChanges) {
+              setUpgradeTrackChangesModal({
+                show: true,
+                location: 'menu-bar',
+              })
+            } else {
+              sendMB('editing-mode-change', {
+                role: permissionsLevel,
+                previousMode: mode,
+                newMode: mode,
+              })
+              window.dispatchEvent(new Event('toggle-track-changes'))
+            }
+          }}
+          leadingIcon="rate_review"
+          active={trackedWrite && mode === 'review'}
+        >
+          {t('reviewing')}
+        </OLDropdownMenuItem>
+        {showViewOption && (
+          <OLDropdownMenuItem
+            as="button"
+            leadingIcon="visibility"
+            active={mode === 'view'}
+          >
+            {t('viewing')}
+          </OLDropdownMenuItem>
+        )}
+      </NestedMenuBarDropdown>
+    </>
+  )
+}
+
+export default ReviewModeOptions