Merge pull request #24891 from overleaf/mj-ide-redesign-hide-unavailable-menu-options

[web] Editor Redesign: Hide unavailable menu items

GitOrigin-RevId: 4aaee8befb6234a00bd4ec6087dcfd1417878576

services/web/frontend/js/features/ide-redesign/components/file-tree-toolbar.tsx

@@ -9,6 +9,7 @@ import MaterialIcon, {
 import React from 'react'
 import useCollapsibleFileTree from '../hooks/use-collapsible-file-tree'
 import { useCommandProvider } from '@/features/ide-react/hooks/use-command-provider'
+import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 
 function FileTreeToolbar() {
   const { t } = useTranslation()
@@ -38,6 +39,7 @@ function FileTreeToolbar() {
 function FileTreeActionButtons() {
   const { t } = useTranslation()
   const { fileTreeReadOnly } = useFileTreeData()
+  const { write } = usePermissionsContext()
 
   const {
     canCreate,
@@ -46,7 +48,7 @@ function FileTreeActionButtons() {
     startUploadingDocOrFile,
   } = useFileTreeActionable()
   useCommandProvider(() => {
-    if (!canCreate || fileTreeReadOnly) return
+    if (!canCreate || fileTreeReadOnly || !write) return
     return [
       {
         label: t('new_file'),
@@ -77,6 +79,7 @@ function FileTreeActionButtons() {
     t,
     startCreatingFolder,
     startUploadingDocOrFile,
+    write,
   ])
 
   if (!canCreate || fileTreeReadOnly) return null

services/web/frontend/js/features/ide-redesign/components/toolbar/command-dropdown.tsx

@@ -11,7 +11,7 @@ import {
   NestedMenuBarDropdown,
 } from '@/shared/components/menu-bar/menu-bar-dropdown'
 import { MenuBarOption } from '@/shared/components/menu-bar/menu-bar-option'
-import { Fragment, useCallback } from 'react'
+import { Fragment, useCallback, useMemo } from 'react'
 
 type CommandId = string
 type TaggedCommand = Command & { type: 'command' }
@@ -38,9 +38,18 @@ const CommandDropdown = ({
   id: string
 }) => {
   const { registry } = useCommandRegistry()
-  const populatedSections = menu
-    .map(section => populateSectionOrGroup(section, registry))
-    .filter(x => x.children.length > 0)
+  const populatedSections = useMemo(
+    () =>
+      menu
+        .map(section => populateSectionOrGroup(section, registry))
+        .filter(x => x.children.length > 0),
+    [menu, registry]
+  )
+
+  if (populatedSections.length === 0) {
+    return null
+  }
+
   return (
     <MenuBarDropdown
       title={title}

services/web/frontend/js/features/ide-redesign/hooks/use-toolbar-menu-editor-commands.tsx

@@ -1,5 +1,8 @@
 import { useCommandProvider } from '@/features/ide-react/hooks/use-command-provider'
-import { useCodeMirrorViewContext } from '@/features/source-editor/components/codemirror-context'
+import {
+  useCodeMirrorStateContext,
+  useCodeMirrorViewContext,
+} from '@/features/source-editor/components/codemirror-context'
 import { FigureModalSource } from '@/features/source-editor/components/figure-modal/figure-modal-context'
 import * as commands from '@/features/source-editor/extensions/toolbar/commands'
 import { setSectionHeadingLevel } from '@/features/source-editor/extensions/toolbar/sections'
@@ -11,12 +14,18 @@ import { openSearchPanel } from '@codemirror/search'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useIsNewEditorEnabled } from '../utils/new-editor-utils'
+import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
+import { language } from '@codemirror/language'
 
 export const useToolbarMenuBarEditorCommands = () => {
   const view = useCodeMirrorViewContext()
+  const state = useCodeMirrorStateContext()
   const { t } = useTranslation()
   const { view: layoutView } = useLayoutContext()
   const editorIsVisible = layoutView === 'editor'
+  const { trackedWrite } = usePermissionsContext()
+  const languageName = state.facet(language)?.name
+  const isTeXFile = languageName === 'latex'
 
   const openFigureModal = useCallback((source: FigureModalSource) => {
     window.dispatchEvent(
@@ -44,7 +53,7 @@ export const useToolbarMenuBarEditorCommands = () => {
           undo(view)
           view.focus()
         },
-        disabled: !editorIsVisible,
+        disabled: !editorIsVisible || !trackedWrite,
       },
       {
         id: 'redo',
@@ -53,7 +62,7 @@ export const useToolbarMenuBarEditorCommands = () => {
           redo(view)
           view.focus()
         },
-        disabled: !editorIsVisible,
+        disabled: !editorIsVisible || !trackedWrite,
       },
       {
         id: 'find',
@@ -72,6 +81,19 @@ export const useToolbarMenuBarEditorCommands = () => {
         },
         disabled: !editorIsVisible,
       },
+    ]
+  }, [editorIsVisible, t, view, trackedWrite, newEditor])
+
+  // LaTeX commands
+  useCommandProvider(() => {
+    if (!newEditor) {
+      return
+    }
+    if (!isTeXFile || !trackedWrite) {
+      return
+    }
+
+    return [
       /************************************
        *         Insert menu
        ************************************/
@@ -281,7 +303,15 @@ export const useToolbarMenuBarEditorCommands = () => {
         disabled: !editorIsVisible,
       },
     ]
-  }, [view, t, editorIsVisible, openFigureModal, newEditor])
+  }, [
+    view,
+    t,
+    editorIsVisible,
+    openFigureModal,
+    newEditor,
+    trackedWrite,
+    isTeXFile,
+  ])
 
   const { toggleSymbolPalette } = useEditorContext()
   const symbolPaletteAvailable = getMeta('ol-symbolPaletteAvailable')
@@ -290,6 +320,10 @@ export const useToolbarMenuBarEditorCommands = () => {
       return
     }
 
+    if (!isTeXFile || !trackedWrite) {
+      return
+    }
+
     return [
       {
         id: 'insert-symbol',
@@ -300,5 +334,12 @@ export const useToolbarMenuBarEditorCommands = () => {
         disabled: !editorIsVisible,
       },
     ]
-  }, [symbolPaletteAvailable, t, toggleSymbolPalette, editorIsVisible])
+  }, [
+    symbolPaletteAvailable,
+    t,
+    toggleSymbolPalette,
+    editorIsVisible,
+    isTeXFile,
+    trackedWrite,
+  ])
 }