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

[web] Add missing events for changing compile-related settings

GitOrigin-RevId: b2ccb4c8f0f3920762d6e69ccb537ae9bedb0281

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={[

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}

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}

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]
+  )
+}

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}
     />
   )
 }

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"
     />

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}
     />
   )
 }

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"
     />

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"
     />

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}
     />
   )
 }