Merge pull request #26499 from overleaf/dp-pdf-couldnt-compile

Update handling of "suggest fix" in new editor

GitOrigin-RevId: 80d6fa479bc1d12d7e5b82a8c504830c9f4db182

services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry-header.tsx

@@ -104,6 +104,8 @@ function LogEntryHeader({
         overlayProps={{ placement: 'bottom' }}
       >
         <button
+          data-action="expand-collapse"
+          data-collapsed={collapsed}
           className="log-entry-header-button"
           onClick={onToggleCollapsed}
           aria-label={collapsed ? t('expand') : t('collapse')}
@@ -150,13 +152,7 @@ function LogEntryHeader({
             </OLTooltip>
           )}
           {actionComponents.map(({ import: { default: Component }, path }) => (
-            <Component
-              key={path}
-              collapsed={collapsed}
-              onToggleCollapsed={onToggleCollapsed}
-              logEntry={logEntry}
-              id={id}
-            />
+            <Component key={path} logEntry={logEntry} id={id} />
           ))}
         </div>
       )}

services/web/frontend/js/features/pdf-preview/hooks/use-log-events.ts

@@ -1,14 +1,20 @@
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useLayoutContext } from '@/shared/context/layout-context'
+import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
+import { useRailContext } from '@/features/ide-redesign/contexts/rail-context'
+import { useEditorContext } from '@/shared/context/editor-context'
 
 /**
  * This hook adds an event listener for events dispatched from the editor to the compile logs pane
  */
 export const useLogEvents = (setShowLogs: (show: boolean) => void) => {
   const { pdfLayout, setView } = useLayoutContext()
+  const newEditor = useIsNewEditorEnabled()
+  const { openTab: openRailTab } = useRailContext()
+  const { hasPremiumSuggestion } = useEditorContext()
 
-  useEffect(() => {
-    const listener = (event: Event) => {
+  const handleViewCompileLogEntryEventOldEditor = useCallback(
+    (event: Event) => {
       const { id, suggestFix } = (
         event as CustomEvent<{ id: string; suggestFix?: boolean }>
       ).detail
@@ -52,6 +58,68 @@ export const useLogEvents = (setShowLogs: (show: boolean) => void) => {
           }
         }
       })
+    },
+    [pdfLayout, setView, setShowLogs]
+  )
+
+  const handleViewCompileLogEntryEventNewEditor = useCallback(
+    (event: Event) => {
+      const { id, suggestFix } = (
+        event as CustomEvent<{ id: string; suggestFix?: boolean }>
+      ).detail
+
+      openRailTab('errors')
+
+      window.setTimeout(() => {
+        const logEntry = document.querySelector(
+          `.log-entry[data-log-entry-id="${id}"]`
+        )
+
+        if (logEntry) {
+          logEntry.scrollIntoView({
+            block: 'start',
+            inline: 'nearest',
+          })
+
+          const expandCollapseButton =
+            logEntry.querySelector<HTMLButtonElement>(
+              'button[data-action="expand-collapse"]'
+            )
+
+          const collapsed = expandCollapseButton?.dataset.collapsed === 'true'
+
+          if (collapsed) {
+            expandCollapseButton.click()
+          }
+
+          if (suggestFix) {
+            if (hasPremiumSuggestion) {
+              logEntry
+                .querySelector<HTMLButtonElement>(
+                  'button[data-action="suggest-fix"]'
+                )
+                ?.click()
+            } else {
+              window.dispatchEvent(
+                new CustomEvent('aiAssist:showPaywall', {
+                  detail: { origin: 'suggest-fix' },
+                })
+              )
+            }
+          }
+        }
+      })
+    },
+    [openRailTab, hasPremiumSuggestion]
+  )
+
+  useEffect(() => {
+    const listener = (event: Event) => {
+      if (newEditor) {
+        handleViewCompileLogEntryEventNewEditor(event)
+      } else {
+        handleViewCompileLogEntryEventOldEditor(event)
+      }
     }
 
     window.addEventListener('editor:view-compile-log-entry', listener)
@@ -59,5 +127,9 @@ export const useLogEvents = (setShowLogs: (show: boolean) => void) => {
     return () => {
       window.removeEventListener('editor:view-compile-log-entry', listener)
     }
-  }, [pdfLayout, setView, setShowLogs])
+  }, [
+    handleViewCompileLogEntryEventNewEditor,
+    handleViewCompileLogEntryEventOldEditor,
+    newEditor,
+  ])
 }

services/web/frontend/js/shared/context/local-compile-context.tsx

@@ -50,8 +50,6 @@ import { isSplitTestEnabled } from '@/utils/splitTestUtils'
 import { captureException } from '@/infrastructure/error-reporter'
 import OError from '@overleaf/o-error'
 import getMeta from '@/utils/meta'
-import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
-import { useRailContext } from '@/features/ide-redesign/contexts/rail-context'
 
 type PdfFile = Record<string, any>
 
@@ -132,8 +130,6 @@ export const LocalCompileProvider: FC<React.PropsWithChildren> = ({
   const { openDocWithId, openDocs, currentDocument } = useEditorManagerContext()
   const { role } = useDetachContext()
 
-  const newEditor = useIsNewEditorEnabled()
-
   const {
     _id: projectId,
     rootDocId,
@@ -144,8 +140,6 @@ export const LocalCompileProvider: FC<React.PropsWithChildren> = ({
 
   const { pdfPreviewOpen } = useLayoutContext()
 
-  const { openTab: openRailTab } = useRailContext()
-
   const { features, alphaProgram, labsProgram } = useUserContext()
 
   const { fileTreeData } = useFileTreeData()
@@ -752,22 +746,6 @@ export const LocalCompileProvider: FC<React.PropsWithChildren> = ({
   // used for that compile.
   const lastCompileOptions = useMemo(() => data?.options || {}, [data])
 
-  useEffect(() => {
-    const listener = () => {
-      if (newEditor) {
-        openRailTab('errors')
-      } else {
-        setShowLogs(true)
-      }
-    }
-
-    window.addEventListener('editor:show-logs', listener)
-
-    return () => {
-      window.removeEventListener('editor:show-logs', listener)
-    }
-  }, [newEditor, openRailTab])
-
   const value = useMemo(
     () => ({
       animateCompileDropdownArrow,