Merge pull request #8909 from overleaf/ae-7734-auto-compile

Only autocompile when the PDF preview is open

GitOrigin-RevId: f1b2fa934da227c046c990fc86dbf78d6501a408

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,

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)

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('<PdfPreview/>', function () {
   beforeEach(function () {
     cy.interceptCompile()
@@ -285,6 +297,40 @@ describe('<PdfPreview/>', 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(
+      <EditorProviders scope={scope}>
+        <Layout layout="flat" view="editor" />
+        <div className="pdf-viewer">
+          <PdfPreview />
+        </div>
+      </EditorProviders>
+    )
+
+    // 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('<PdfPreview/>', 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

services/web/test/frontend/components/pdf-preview/scope.tsx

@@ -10,4 +10,8 @@ export const mockScope = () => ({
     },
   },
   hasLintingError: false,
+  ui: {
+    view: 'editor',
+    pdfLayout: 'sideBySide',
+  },
 })