From 366b997fe7d570b8e151afdf6985de6d34ca2f74 Mon Sep 17 00:00:00 2001 From: Mathias Jakobsen Date: Wed, 8 Oct 2025 10:10:49 +0100 Subject: [PATCH] Merge pull request #28871 from overleaf/mj-recompile-setting-changed-add-missing [web] Add missing events for changing compile-related settings GitOrigin-RevId: b2ccb4c8f0f3920762d6e69ccb537ae9bedb0281 --- .../components/settings/settings-compiler.tsx | 7 +++++- .../components/settings/settings-document.tsx | 8 ++++++- .../settings/settings-image-name.tsx | 7 +++++- .../hooks/use-set-compilation-setting.ts | 23 +++++++++++++++++++ .../auto-compile-setting.tsx | 18 ++++----------- .../compiler-settings/compiler-setting.tsx | 7 +++++- .../compiler-settings/draft-setting.tsx | 19 +++++---------- .../compiler-settings/image-name-setting.tsx | 7 +++++- .../root-document-setting.tsx | 8 ++++++- .../stop-on-first-error-setting.tsx | 18 +++++++++++++-- 10 files changed, 88 insertions(+), 34 deletions(-) create mode 100644 services/web/frontend/js/features/editor-left-menu/hooks/use-set-compilation-setting.ts 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 2eab7f25b5..ccc6cfd7bf 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 @@ -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 ( - onChange={setCompiler} + onChange={changeCompiler} value={compiler} disabled={!write} options={[ 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 8655a63cfc..38f3e43540 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 @@ -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 ( getMeta('ol-imageNames') || [], []) @@ -31,7 +36,7 @@ export default function SettingsImageName() { return ( ( + 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] + ) +} diff --git 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 index 55bfc4eafb..13dbca3968 100644 --- 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} /> ) } diff --git 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 index 1da6a167c6..fad10a9ec2 100644 --- 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[] = [ { @@ -28,6 +29,10 @@ export default function CompilerSetting() { const { compiler, setCompiler } = useProjectSettingsContext() const { t } = useTranslation() const { write } = usePermissionsContext() + const changeCompiler = useSetCompilationSettingWithEvent( + 'compiler', + setCompiler + ) return ( diff --git 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 index fcdd546eda..d27453d344 100644 --- 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} /> ) } diff --git 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 index 66aa32b181..f19d95bafa 100644 --- 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" /> diff --git 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 index 38801c9dd6..ec168cbb14 100644 --- 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" /> diff --git 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 index e21e963846..0a272265a8 100644 --- 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 ( ) }