From c6b0d988f9e7897835390e9490e82f096214d708 Mon Sep 17 00:00:00 2001 From: Alf Eaton Date: Thu, 21 Jul 2022 09:31:31 +0100 Subject: [PATCH] Merge pull request #8909 from overleaf/ae-7734-auto-compile Only autocompile when the PDF preview is open GitOrigin-RevId: f1b2fa934da227c046c990fc86dbf78d6501a408 --- .../js/shared/context/layout-context.js | 6 +++ .../shared/context/local-compile-context.js | 8 +++- .../pdf-preview/pdf-preview.spec.tsx | 47 +++++++++++++++++++ .../frontend/components/pdf-preview/scope.tsx | 4 ++ 4 files changed, 64 insertions(+), 1 deletion(-) diff --git a/services/web/frontend/js/shared/context/layout-context.js b/services/web/frontend/js/shared/context/layout-context.js index 5b62f7e557..d2289781ae 100644 --- a/services/web/frontend/js/shared/context/layout-context.js +++ b/services/web/frontend/js/shared/context/layout-context.js @@ -32,6 +32,7 @@ LayoutContext.Provider.propTypes = { leftMenuShown: PropTypes.bool, setLeftMenuShown: PropTypes.func.isRequired, pdfLayout: PropTypes.oneOf(['sideBySide', 'flat']).isRequired, + pdfPreviewOpen: PropTypes.bool, }).isRequired, } @@ -111,6 +112,9 @@ export function LayoutProvider({ children }) { isRedundant: detachIsRedundant, } = useDetachLayout() + const pdfPreviewOpen = + pdfLayout === 'sideBySide' || view === 'pdf' || detachRole === 'detacher' + useEffect(() => { if (debugPdfDetach) { console.log('Layout Effect', { @@ -151,6 +155,7 @@ export function LayoutProvider({ children }) { chatIsOpen, leftMenuShown, pdfLayout, + pdfPreviewOpen, reviewPanelOpen, setChatIsOpen, setLeftMenuShown, @@ -169,6 +174,7 @@ export function LayoutProvider({ children }) { chatIsOpen, leftMenuShown, pdfLayout, + pdfPreviewOpen, reviewPanelOpen, setChatIsOpen, setLeftMenuShown, diff --git a/services/web/frontend/js/shared/context/local-compile-context.js b/services/web/frontend/js/shared/context/local-compile-context.js index bcae753c88..b336d9f30d 100644 --- a/services/web/frontend/js/shared/context/local-compile-context.js +++ b/services/web/frontend/js/shared/context/local-compile-context.js @@ -28,6 +28,7 @@ import { useProjectContext } from './project-context' import { useEditorContext } from './editor-context' import { buildFileList } from '../../features/pdf-preview/util/file-list' import { useSplitTestContext } from './split-test-context' +import { useLayoutContext } from './layout-context' export const LocalCompileContext = createContext() @@ -87,6 +88,8 @@ export function LocalCompileProvider({ children }) { const { splitTestVariants } = useSplitTestContext() + const { pdfPreviewOpen } = useLayoutContext() + // whether a compile is in progress const [compiling, setCompiling] = useState(false) @@ -447,7 +450,10 @@ export function LocalCompileProvider({ children }) { const codeCheckFailed = stopOnValidationError && autoCompileLintingError // the project is available for auto-compiling - const canAutoCompile = Boolean(autoCompile && !codeCheckFailed) + // (autocompile is enabled, the PDF preview is open, and the code check (if enabled) hasn't failed) + const canAutoCompile = Boolean( + autoCompile && pdfPreviewOpen && !codeCheckFailed + ) // show that the project has pending changes const hasChanges = Boolean(canAutoCompile && uncompiled && compiledOnce) diff --git a/services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx b/services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx index 7b6c4f8f9d..8c670ef331 100644 --- a/services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx +++ b/services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx @@ -2,12 +2,24 @@ import localStorage from '../../../../frontend/js/infrastructure/local-storage' import PdfPreview from '../../../../frontend/js/features/pdf-preview/components/pdf-preview' import { EditorProviders } from '../../helpers/editor-providers' import { mockScope } from './scope' +import { useLayoutContext } from '../../../../frontend/js/shared/context/layout-context' +import { FC, useEffect } from 'react' const storeAndFireEvent = (win: typeof window, key: string, value: unknown) => { localStorage.setItem(key, value) win.dispatchEvent(new StorageEvent('storage', { key })) } +const Layout: FC<{ layout: string; view?: string }> = ({ layout, view }) => { + const { changeLayout } = useLayoutContext() + + useEffect(() => { + changeLayout(layout, view) + }, [changeLayout, layout, view]) + + return null +} + describe('', function () { beforeEach(function () { cy.interceptCompile() @@ -285,6 +297,40 @@ describe('', function () { cy.findByText('Code check failed') }) + it('does not run a compile on doc change if the PDF preview is not open', function () { + const scope = mockScope() + + cy.mount( + + +
+ +
+ + ) + + // wait for "compile on load" to finish + cy.findByRole('button', { name: 'Compiling…' }) + cy.wait('@compile') + cy.findByRole('button', { name: 'Recompile' }) + + cy.window().then(win => { + cy.clock() + + // switch on auto compile + storeAndFireEvent(win, 'autocompile_enabled:project123', true) + + // fire a doc:changed event => compile + win.dispatchEvent(new CustomEvent('doc:changed')) + + cy.tick(6000) // > AUTO_COMPILE_DEBOUNCE + + cy.clock().invoke('restore') + }) + + cy.findByRole('button', { name: 'Recompile' }) + }) + describe('displays error messages', function () { const compileErrorStatuses = { 'clear-cache': @@ -455,6 +501,7 @@ describe('', function () { // wait for "compile on load" to finish cy.findByRole('button', { name: 'Compiling…' }) + cy.wait('@compile') cy.findByRole('button', { name: 'Recompile' }) // show the logs UI diff --git a/services/web/test/frontend/components/pdf-preview/scope.tsx b/services/web/test/frontend/components/pdf-preview/scope.tsx index ca60f9970e..662a89d2f7 100644 --- a/services/web/test/frontend/components/pdf-preview/scope.tsx +++ b/services/web/test/frontend/components/pdf-preview/scope.tsx @@ -10,4 +10,8 @@ export const mockScope = () => ({ }, }, hasLintingError: false, + ui: { + view: 'editor', + pdfLayout: 'sideBySide', + }, })