Merge pull request #28871 from overleaf/mj-recompile-setting-changed-add-missing

[web] Add missing events for changing compile-related settings GitOrigin-RevId: b2ccb4c8f0f3920762d6e69ccb537ae9bedb0281
2026-05-25 02:00:10 +02:00 · 2025-10-08 10:10:49 +01:00
parent e96754a03b
commit 366b997fe7
10 changed files with 88 additions and 34 deletions
--- 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
@@ -3,15 +3,20 @@ import type { ProjectCompiler } from '../../../../../../types/project-settings'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 import { useProjectSettingsContext } from '../../context/project-settings-context'
 import SettingsMenuSelect from './settings-menu-select'
+import { useSetCompilationSettingWithEvent } from '../../hooks/use-set-compilation-setting'

 export default function SettingsCompiler() {
  const { t } = useTranslation()
  const { write } = usePermissionsContext()
  const { compiler, setCompiler } = useProjectSettingsContext()
+  const changeCompiler = useSetCompilationSettingWithEvent(
+    'compiler',
+    setCompiler
+  )

  return (
    <SettingsMenuSelect<ProjectCompiler>
-      onChange={setCompiler}
+      onChange={changeCompiler}
      value={compiler}
      disabled={!write}
      options={[
--- 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
@@ -6,12 +6,18 @@ import { useProjectSettingsContext } from '../../context/project-settings-contex
 import SettingsMenuSelect from './settings-menu-select'
 import type { Option } from './settings-menu-select'
 import { useFileTreeData } from '@/shared/context/file-tree-data-context'
+import { useSetCompilationSettingWithEvent } from '../../hooks/use-set-compilation-setting'

 export default function SettingsDocument() {
  const { t } = useTranslation()
  const { write } = usePermissionsContext()
  const { docs } = useFileTreeData()
  const { rootDocId, setRootDocId } = useProjectSettingsContext()
+  const changeRootDoc = useSetCompilationSettingWithEvent(
+    'root-doc-id',
+    setRootDocId,
+    { omitValueInEvent: true }
+  )

  const validDocsOptions = useMemo(() => {
    const filteredDocs =
@@ -37,7 +43,7 @@ export default function SettingsDocument() {

  return (
    <SettingsMenuSelect
-      onChange={setRootDocId}
+      onChange={changeRootDoc}
      value={rootDocId ?? ''}
      disabled={!write}
      options={validDocsOptions}
--- 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
@@ -5,11 +5,16 @@ import SettingsMenuSelect from './settings-menu-select'
 import type { Option } from './settings-menu-select'
 import { useProjectSettingsContext } from '../../context/project-settings-context'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
+import { useSetCompilationSettingWithEvent } from '../../hooks/use-set-compilation-setting'

 export default function SettingsImageName() {
  const { t } = useTranslation()
  const { imageName, setImageName } = useProjectSettingsContext()
  const { write } = usePermissionsContext()
+  const changeImageName = useSetCompilationSettingWithEvent(
+    'image-name',
+    setImageName
+  )

  const allowedImageNames = useMemo(() => getMeta('ol-imageNames') || [], [])

@@ -31,7 +36,7 @@ export default function SettingsImageName() {

  return (
    <SettingsMenuSelect
-      onChange={setImageName}
+      onChange={changeImageName}
      value={imageName}
      disabled={!write}
      options={options}
--- a/services/web/frontend/js/features/editor-left-menu/hooks/use-set-compilation-setting.ts
+++ b/services/web/frontend/js/features/editor-left-menu/hooks/use-set-compilation-setting.ts
@@ -0,0 +1,23 @@
+import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
+import { useCallback } from 'react'
+
+export function useSetCompilationSettingWithEvent<T>(
+  settingName: string,
+  setter: (value: T) => void,
+  options: { omitValueInEvent?: boolean } = {}
+): (value: T) => void {
+  const { sendEvent } = useEditorAnalytics()
+  return useCallback(
+    value => {
+      const segmentation: { setting: string; settingVal?: T } = {
+        setting: settingName,
+      }
+      if (!options.omitValueInEvent) {
+        segmentation.settingVal = value
+      }
+      sendEvent('recompile-setting-changed', segmentation)
+      setter(value)
+    },
+    [sendEvent, setter, settingName, options.omitValueInEvent]
+  )
+}
--- a/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/auto-compile-setting.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/auto-compile-setting.tsx
@@ -1,22 +1,14 @@
 import ToggleSetting from '../toggle-setting'
 import { useTranslation } from 'react-i18next'
 import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
-import { useCallback } from 'react'
-import * as eventTracking from '../../../../../infrastructure/event-tracking'
+import { useSetCompilationSettingWithEvent } from '@/features/editor-left-menu/hooks/use-set-compilation-setting'

 export default function AutoCompileSetting() {
  const { autoCompile, setAutoCompile } = useCompileContext()
  const { t } = useTranslation()
-
-  const sendEventAndSet = useCallback(
-    (value: boolean) => {
-      eventTracking.sendMB('recompile-setting-changed', {
-        setting: 'auto-compile',
-        settingVal: value,
-      })
-      setAutoCompile(value)
-    },
-    [setAutoCompile]
+  const changeAutoCompile = useSetCompilationSettingWithEvent(
+    'auto-compile',
+    setAutoCompile
  )

  return (
@@ -25,7 +17,7 @@ export default function AutoCompileSetting() {
      label={t('autocompile')}
      description={t('automatically_recompile_the_project_as_you_edit')}
      checked={autoCompile}
-      onChange={sendEventAndSet}
+      onChange={changeAutoCompile}
    />
  )
 }
--- a/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/compiler-setting.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/compiler-setting.tsx
@@ -4,6 +4,7 @@ import type { Option } from '../dropdown-setting'
 import { useTranslation } from 'react-i18next'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 import { ProjectCompiler } from '../../../../../../../types/project-settings'
+import { useSetCompilationSettingWithEvent } from '@/features/editor-left-menu/hooks/use-set-compilation-setting'

 const OPTIONS: Option<ProjectCompiler>[] = [
  {
@@ -28,6 +29,10 @@ export default function CompilerSetting() {
  const { compiler, setCompiler } = useProjectSettingsContext()
  const { t } = useTranslation()
  const { write } = usePermissionsContext()
+  const changeCompiler = useSetCompilationSettingWithEvent(
+    'compiler',
+    setCompiler
+  )

  return (
    <DropdownSetting
@@ -36,7 +41,7 @@ export default function CompilerSetting() {
      description={t('the_latex_engine_used_for_compiling')}
      disabled={!write}
      options={OPTIONS}
-      onChange={setCompiler}
+      onChange={changeCompiler}
      value={compiler}
      translateOptions="no"
    />
--- a/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/draft-setting.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/draft-setting.tsx
@@ -1,22 +1,15 @@
 import { useTranslation } from 'react-i18next'
 import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
-import { useCallback, useMemo } from 'react'
-import * as eventTracking from '../../../../../infrastructure/event-tracking'
+import { useMemo } from 'react'
 import DropdownSetting from '../dropdown-setting'
+import { useSetCompilationSettingWithEvent } from '@/features/editor-left-menu/hooks/use-set-compilation-setting'

 export default function DraftSetting() {
  const { draft, setDraft } = useCompileContext()
  const { t } = useTranslation()
-
-  const sendEventAndSet = useCallback(
-    (value: boolean) => {
-      eventTracking.sendMB('recompile-setting-changed', {
-        setting: 'compile-mode',
-        settingVal: value,
-      })
-      setDraft(value)
-    },
-    [setDraft]
+  const changeDraft = useSetCompilationSettingWithEvent(
+    'compile-mode',
+    setDraft
  )

  const options = useMemo(
@@ -37,7 +30,7 @@ export default function DraftSetting() {
      options={options}
      description={t('switch_compile_mode_for_faster_draft_compilation')}
      value={draft}
-      onChange={sendEventAndSet}
+      onChange={changeDraft}
    />
  )
 }
--- a/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/image-name-setting.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/image-name-setting.tsx
@@ -5,11 +5,16 @@ import { useTranslation } from 'react-i18next'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 import { useMemo } from 'react'
 import getMeta from '@/utils/meta'
+import { useSetCompilationSettingWithEvent } from '@/features/editor-left-menu/hooks/use-set-compilation-setting'

 export default function ImageNameSetting() {
  const { imageName, setImageName } = useProjectSettingsContext()
  const { t } = useTranslation()
  const { write } = usePermissionsContext()
+  const changeImageName = useSetCompilationSettingWithEvent(
+    'image-name',
+    setImageName
+  )

  const imageNames = useMemo(() => getMeta('ol-imageNames') || [], [])

@@ -36,7 +41,7 @@ export default function ImageNameSetting() {
      description={t('the_version_of_tex_live_used_for_compiling')}
      disabled={!write}
      options={options}
-      onChange={setImageName}
+      onChange={changeImageName}
      value={imageName}
      translateOptions="no"
    />
--- a/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/root-document-setting.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/root-document-setting.tsx
@@ -6,12 +6,18 @@ import { useTranslation } from 'react-i18next'
 import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
 import { useFileTreeData } from '@/shared/context/file-tree-data-context'
 import { isValidTeXFile } from '@/main/is-valid-tex-file'
+import { useSetCompilationSettingWithEvent } from '@/features/editor-left-menu/hooks/use-set-compilation-setting'

 export default function RootDocumentSetting() {
  const { rootDocId, setRootDocId } = useProjectSettingsContext()
  const { t } = useTranslation()
  const { write } = usePermissionsContext()
  const { docs } = useFileTreeData()
+  const changeRootDocId = useSetCompilationSettingWithEvent(
+    'root-doc-id',
+    setRootDocId,
+    { omitValueInEvent: true }
+  )

  const validDocsOptions = useMemo(() => {
    const filteredDocs =
@@ -42,7 +48,7 @@ export default function RootDocumentSetting() {
      description={t('the_primary_file_for_compiling_your_project')}
      disabled={!write}
      options={validDocsOptions}
-      onChange={setRootDocId}
+      onChange={changeRootDocId}
      value={rootDocId ?? ''}
      translateOptions="no"
    />
--- a/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/stop-on-first-error-setting.tsx
+++ b/services/web/frontend/js/features/ide-redesign/components/settings/compiler-settings/stop-on-first-error-setting.tsx
@@ -1,10 +1,24 @@
 import ToggleSetting from '../toggle-setting'
 import { useTranslation } from 'react-i18next'
 import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
+import { useCallback } from 'react'
+import { useStopOnFirstError } from '@/shared/hooks/use-stop-on-first-error'

 export default function StopOnFirstErrorSetting() {
-  const { stopOnFirstError, setStopOnFirstError } = useCompileContext()
+  const { stopOnFirstError } = useCompileContext()
+  const { enableStopOnFirstError, disableStopOnFirstError } =
+    useStopOnFirstError({ eventSource: 'settings-modal' })
  const { t } = useTranslation()
+  const changeStopOnFirstError = useCallback(
+    (enabled: boolean) => {
+      if (enabled) {
+        enableStopOnFirstError()
+      } else {
+        disableStopOnFirstError()
+      }
+    },
+    [enableStopOnFirstError, disableStopOnFirstError]
+  )

  return (
    <ToggleSetting
@@ -14,7 +28,7 @@ export default function StopOnFirstErrorSetting() {
        'stops_compiling_after_the_first_error_so_you_can_fix_issues_one_at_a_time'
      )}
      checked={stopOnFirstError}
-      onChange={setStopOnFirstError}
+      onChange={changeStopOnFirstError}
    />
  )
 }