From 37e897260c392ec7e62143a18688e686907e926c Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Fri, 2 Aug 2024 08:57:57 +0100
Subject: [PATCH] Disable image name setting for read-only users (#19677)

GitOrigin-RevId: a474339ef9efc6d96c1db4205c8d0b3526000d07
---
 .../components/settings/settings-compiler.tsx                | 5 +----
 .../components/settings/settings-document.tsx                | 5 +----
 .../components/settings/settings-image-name.tsx              | 3 +++
 .../components/settings/settings-menu-select.tsx             | 3 +++
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-compiler.tsx b/services/web/frontend/js/features/editor-left-menu/components/settings/settings-compiler.tsx
index c20051706d..02006418b0 100644
--- a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-compiler.tsx
+++ b/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',
diff --git a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-document.tsx b/services/web/frontend/js/features/editor-left-menu/components/settings/settings-document.tsx
index e31794c29b..5bff9be999 100644
--- a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-document.tsx
+++ b/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"
diff --git a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-image-name.tsx b/services/web/frontend/js/features/editor-left-menu/components/settings/settings-image-name.tsx
index 5986999a26..d4d8c6f908 100644
--- a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-image-name.tsx
+++ b/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"
diff --git a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-menu-select.tsx b/services/web/frontend/js/features/editor-left-menu/components/settings/settings-menu-select.tsx
index 0a12670efa..a111f60867 100644
--- a/services/web/frontend/js/features/editor-left-menu/components/settings/settings-menu-select.tsx
+++ b/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