Disable image name setting for read-only users (#19677)

GitOrigin-RevId: a474339ef9efc6d96c1db4205c8d0b3526000d07

services/web/frontend/js/features/editor-left-menu/components/settings/settings-compiler.tsx

@@ -9,14 +9,11 @@ export default function SettingsCompiler() {
   const { permissionsLevel } = useEditorContext()
   const { compiler, setCompiler } = useProjectSettingsContext()
 
-  if (permissionsLevel === 'readOnly') {
-    return null
-  }
-
   return (
     <SettingsMenuSelect<ProjectCompiler>
       onChange={setCompiler}
       value={compiler}
+      disabled={permissionsLevel === 'readOnly'}
       options={[
         {
           value: 'pdflatex',

services/web/frontend/js/features/editor-left-menu/components/settings/settings-document.tsx

@@ -35,14 +35,11 @@ export default function SettingsDocument() {
     return mappedDocs
   }, [docs, rootDocId])
 
-  if (permissionsLevel === 'readOnly') {
-    return null
-  }
-
   return (
     <SettingsMenuSelect
       onChange={setRootDocId}
       value={rootDocId ?? ''}
+      disabled={permissionsLevel === 'readOnly'}
       options={validDocsOptions}
       label={t('main_document')}
       name="rootDocId"

services/web/frontend/js/features/editor-left-menu/components/settings/settings-image-name.tsx

@@ -4,10 +4,12 @@ import getMeta from '../../../../utils/meta'
 import SettingsMenuSelect from './settings-menu-select'
 import type { Option } from './settings-menu-select'
 import { useProjectSettingsContext } from '../../context/project-settings-context'
+import { useEditorContext } from '@/shared/context/editor-context'
 
 export default function SettingsImageName() {
   const { t } = useTranslation()
   const { imageName, setImageName } = useProjectSettingsContext()
+  const { permissionsLevel } = useEditorContext()
 
   const allowedImageNames = useMemo(
     () => getMeta('ol-allowedImageNames') || [],
@@ -31,6 +33,7 @@ export default function SettingsImageName() {
     <SettingsMenuSelect
       onChange={setImageName}
       value={imageName}
+      disabled={permissionsLevel === 'readOnly'}
       options={options}
       label={t('tex_live_version')}
       name="imageName"

services/web/frontend/js/features/editor-left-menu/components/settings/settings-menu-select.tsx

@@ -22,6 +22,7 @@ type SettingsMenuSelectProps<T extends PossibleValue = string> = {
   loading?: boolean
   onChange: (val: T) => void
   value?: T
+  disabled?: boolean
 }
 
 export default function SettingsMenuSelect<T extends PossibleValue = string>({
@@ -32,6 +33,7 @@ export default function SettingsMenuSelect<T extends PossibleValue = string>({
   loading,
   onChange,
   value,
+  disabled = false,
 }: SettingsMenuSelectProps<T>) {
   const handleChange: ChangeEventHandler<HTMLSelectElement> = useCallback(
     event => {
@@ -60,6 +62,7 @@ export default function SettingsMenuSelect<T extends PossibleValue = string>({
           className="form-control"
           onChange={handleChange}
           value={value?.toString()}
+          disabled={disabled}
         >
           {options.map(option => (
             <option