From 6f06df61a6b8bb7275fdb03dac2d9fa115275d6c Mon Sep 17 00:00:00 2001 From: Mathias Jakobsen Date: Thu, 16 Jul 2026 11:07:11 +0100 Subject: [PATCH] Merge pull request #35457 from overleaf/mj-more-disabled-buttons [web] Disable compilation buttons during network stall GitOrigin-RevId: c94a77fea7171c6e9ff4fa9f30e9475474900845 --- .../components/detach-compile-button.tsx | 8 ++++--- .../components/pdf-compile-button.tsx | 23 ++++++++++++++----- .../pdf-preview/hooks/use-compile-triggers.ts | 9 +++++--- .../shared/context/detach-compile-context.tsx | 12 +++++++++- .../shared/context/local-compile-context.tsx | 5 ++++ .../stylesheets/pages/editor/pdf.scss | 11 +++++++++ .../frontend/helpers/editor-providers.tsx | 1 + 7 files changed, 56 insertions(+), 13 deletions(-) diff --git a/services/web/frontend/js/features/pdf-preview/components/detach-compile-button.tsx b/services/web/frontend/js/features/pdf-preview/components/detach-compile-button.tsx index a0495f0b9c..95e2ce5b2e 100644 --- a/services/web/frontend/js/features/pdf-preview/components/detach-compile-button.tsx +++ b/services/web/frontend/js/features/pdf-preview/components/detach-compile-button.tsx @@ -9,7 +9,8 @@ const modifierKey = /Mac/i.test(navigator.platform) ? 'Cmd' : 'Ctrl' function DetachCompileButton() { const { t } = useTranslation() - const { compiling, startCompile, hasChanges } = useDetachCompileContext() + const { compiling, startCompile, hasChanges, isNetworkStalled } = + useDetachCompileContext() const tooltipElement = ( <> @@ -29,10 +30,11 @@ function DetachCompileButton() { startCompile()} - disabled={compiling} + disabled={compiling || isNetworkStalled} className={classnames('detach-compile-button', { 'btn-striped-animated': hasChanges, - 'detach-compile-button-disabled': compiling, + 'detach-compile-button-disabled': compiling || isNetworkStalled, + 'compile-button-network-stalled': isNetworkStalled, })} size="sm" isLoading={compiling} diff --git a/services/web/frontend/js/features/pdf-preview/components/pdf-compile-button.tsx b/services/web/frontend/js/features/pdf-preview/components/pdf-compile-button.tsx index 5ab3772949..fea4e9be83 100644 --- a/services/web/frontend/js/features/pdf-preview/components/pdf-compile-button.tsx +++ b/services/web/frontend/js/features/pdf-preview/components/pdf-compile-button.tsx @@ -51,6 +51,7 @@ function PdfCompileButton() { startCompile, stopCompile, recompileFromScratch, + isNetworkStalled, } = useCompileContext() const { enableStopOnFirstError, disableStopOnFirstError } = useStopOnFirstError({ eventSource: 'dropdown' }) @@ -93,6 +94,7 @@ function PdfCompileButton() { { 'detach-compile-button-animate': animateCompileDropdownArrow, 'btn-striped-animated': hasChanges, + 'compile-button-network-stalled': isNetworkStalled, }, 'no-left-border', 'dropdown-button-toggle', @@ -104,6 +106,7 @@ function PdfCompileButton() { 'compile-button', { 'btn-striped-animated': hasChanges, + 'compile-button-network-stalled': isNetworkStalled, } ) @@ -113,7 +116,7 @@ function PdfCompileButton() { id: 'compile', handler: () => startCompile(), label: t('recompile'), - disabled: compiling, + disabled: compiling || isNetworkStalled, }, { id: 'stop-compile', @@ -125,10 +128,17 @@ function PdfCompileButton() { id: 'recompile-from-scratch', handler: fromScratchWithEvent, label: t('recompile_from_scratch'), - disabled: compiling, + disabled: compiling || isNetworkStalled, }, ], - [startCompile, t, compiling, stopCompile, fromScratchWithEvent] + [ + startCompile, + t, + compiling, + stopCompile, + fromScratchWithEvent, + isNetworkStalled, + ] ) return ( @@ -144,7 +154,7 @@ function PdfCompileButton() { > startCompile()} className={buttonClassName} @@ -161,6 +171,7 @@ function PdfCompileButton() { id="pdf-recompile-dropdown" size="sm" aria-label={t('toggle_compile_options_menu')} + disabled={isNetworkStalled} className={dropdownToggleClassName} /> @@ -279,8 +290,8 @@ function PdfCompileButton() { {t('recompile_from_scratch')} diff --git a/services/web/frontend/js/features/pdf-preview/hooks/use-compile-triggers.ts b/services/web/frontend/js/features/pdf-preview/hooks/use-compile-triggers.ts index e637474398..054e50155e 100644 --- a/services/web/frontend/js/features/pdf-preview/hooks/use-compile-triggers.ts +++ b/services/web/frontend/js/features/pdf-preview/hooks/use-compile-triggers.ts @@ -34,16 +34,19 @@ export const startCompileKeypress = ( export default function useCompileTriggers( startCompile: (...args: any[]) => Promise, - setChangedAt: (...args: any[]) => void + setChangedAt: (...args: any[]) => void, + networkStalled: boolean ) { const handleKeyDown = useCallback( (event: KeyboardEvent) => { if (startCompileKeypress(event)) { event.preventDefault() - startCompile() + if (!networkStalled) { + startCompile() + } } }, - [startCompile] + [startCompile, networkStalled] ) const handleStartCompile = useCallback(() => { diff --git a/services/web/frontend/js/shared/context/detach-compile-context.tsx b/services/web/frontend/js/shared/context/detach-compile-context.tsx index a697a36683..cdd751d53d 100644 --- a/services/web/frontend/js/shared/context/detach-compile-context.tsx +++ b/services/web/frontend/js/shared/context/detach-compile-context.tsx @@ -76,6 +76,7 @@ export const DetachCompileProvider: FC = ({ darkModePdf: _darkModePdf, setDarkModePdf: _setDarkModePdf, activeOverallTheme: _activeOverallTheme, + isNetworkStalled: _isNetworkStalled, } = localCompileContext const [animateCompileDropdownArrow] = useDetachStateWatcher( @@ -410,7 +411,14 @@ export const DetachCompileProvider: FC = ({ 'detached' ) - useCompileTriggers(startCompile, setChangedAt) + const [isNetworkStalled] = useDetachStateWatcher( + 'isNetworkStalled', + _isNetworkStalled, + 'detacher', + 'detached' + ) + + useCompileTriggers(startCompile, setChangedAt, isNetworkStalled) useLogEvents(setShowLogs) const value = useMemo( @@ -473,6 +481,7 @@ export const DetachCompileProvider: FC = ({ darkModePdf, setDarkModePdf, activeOverallTheme, + isNetworkStalled, }), [ animateCompileDropdownArrow, @@ -531,6 +540,7 @@ export const DetachCompileProvider: FC = ({ darkModePdf, setDarkModePdf, activeOverallTheme, + isNetworkStalled, ] ) diff --git a/services/web/frontend/js/shared/context/local-compile-context.tsx b/services/web/frontend/js/shared/context/local-compile-context.tsx index a9cb5ffd70..c75fd14ae1 100644 --- a/services/web/frontend/js/shared/context/local-compile-context.tsx +++ b/services/web/frontend/js/shared/context/local-compile-context.tsx @@ -60,6 +60,7 @@ import { ActiveOverallTheme, useActiveOverallTheme, } from '../hooks/use-active-overall-theme' +import useIsNetworkStalled from '@/features/ide-react/hooks/use-is-network-stalled' type PdfFile = Record @@ -132,6 +133,7 @@ export type CompileContext = { darkModePdf: boolean | undefined setDarkModePdf: (value: boolean) => void activeOverallTheme: ActiveOverallTheme + isNetworkStalled: boolean } export const LocalCompileContext = createContext( @@ -156,6 +158,7 @@ export const LocalCompileProvider: FC = ({ const { fileTreeData } = useFileTreeData() const { findEntityByPath } = useFileTreePathContext() const getRootDocInfo = useRootDoc() + const isNetworkStalled = useIsNetworkStalled() // whether a compile is in progress const [compiling, setCompiling] = useState(false) @@ -822,6 +825,7 @@ export const LocalCompileProvider: FC = ({ darkModePdf, setDarkModePdf, activeOverallTheme, + isNetworkStalled, }), [ animateCompileDropdownArrow, @@ -879,6 +883,7 @@ export const LocalCompileProvider: FC = ({ darkModePdf, setDarkModePdf, activeOverallTheme, + isNetworkStalled, ] ) diff --git a/services/web/frontend/stylesheets/pages/editor/pdf.scss b/services/web/frontend/stylesheets/pages/editor/pdf.scss index e2e48825b4..56aaa097f4 100644 --- a/services/web/frontend/stylesheets/pages/editor/pdf.scss +++ b/services/web/frontend/stylesheets/pages/editor/pdf.scss @@ -88,6 +88,17 @@ } } +.compile-button, +.compile-dropdown-toggle, +.detach-compile-button { + &.compile-button-network-stalled { + background-color: var(--bg-disabled-themed) !important; + color: var(--content-disabled-themed) !important; + pointer-events: auto; + cursor: not-allowed; + } +} + .toolbar-pdf-left, .toolbar-pdf-right, .toolbar-pdf-controls { diff --git a/services/web/test/frontend/helpers/editor-providers.tsx b/services/web/test/frontend/helpers/editor-providers.tsx index 95ac58a7d1..29c6dd3dc1 100644 --- a/services/web/test/frontend/helpers/editor-providers.tsx +++ b/services/web/test/frontend/helpers/editor-providers.tsx @@ -753,6 +753,7 @@ const BASE_COMPILE_CONTEXT_MOCK = { darkModePdf: false, setDarkModePdf: () => {}, activeOverallTheme: 'light', + isNetworkStalled: false, } as const const makeDetachCompileProvider = (mockCompileOnLoad: boolean = false) => {