Merge pull request #26311 from overleaf/dp-auto-compile-failure

Add a code check banner to the new editor

GitOrigin-RevId: 6ee01d8379247824f4ec0684809ad432c4617c96

services/web/frontend/js/features/ide-redesign/components/pdf-preview/pdf-code-check-failed-banner.tsx

@@ -0,0 +1,22 @@
+import MaterialIcon from '@/shared/components/material-icon'
+import { useTranslation } from 'react-i18next'
+import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
+
+export default function PdfCodeCheckFailedBanner() {
+  const { t } = useTranslation()
+
+  const { codeCheckFailed } = useCompileContext()
+
+  if (!codeCheckFailed) {
+    return null
+  }
+
+  return (
+    <div className="pdf-code-check-failed-banner-container">
+      <div className="pdf-code-check-failed-banner">
+        <MaterialIcon unfilled type="picture_as_pdf" />
+        {t('code_check_failed_explanation')}
+      </div>
+    </div>
+  )
+}

services/web/frontend/js/features/pdf-preview/components/pdf-preview-pane.tsx

@@ -12,6 +12,7 @@ import PdfPreviewHybridToolbarNew from '@/features/ide-redesign/components/pdf-p
 import PdfErrorState from '@/features/ide-redesign/components/pdf-preview/pdf-error-state'
 import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 import importOverleafModules from '../../../../macros/import-overleaf-module.macro'
+import PdfCodeCheckFailedBanner from '@/features/ide-redesign/components/pdf-preview/pdf-code-check-failed-banner'
 
 function PdfPreviewPane() {
   const { pdfUrl, hasShortCompileTimeout } = useCompileContext()
@@ -32,6 +33,7 @@ function PdfPreviewPane() {
         ) : (
           <PdfHybridPreviewToolbar />
         )}
+        {newEditor && <PdfCodeCheckFailedBanner />}
         <PdfPreviewMessages>
           {hasShortCompileTimeout && <CompileTimeWarningUpgradePrompt />}
         </PdfPreviewMessages>

services/web/frontend/stylesheets/bootstrap-5/pages/editor/pdf.scss

@@ -44,6 +44,30 @@
       padding: var(--spacing-01);
     }
   }
+
+  .pdf-code-check-failed-banner-container {
+    position: absolute;
+    top: calc(var(--toolbar-small-height) + var(--spacing-04));
+    left: 0;
+    right: 0;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    padding: 0 var(--spacing-06);
+  }
+
+  .pdf-code-check-failed-banner {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-02);
+    background-color: var(--bg-light-primary);
+    color: var(--content-primary);
+    border: 1px solid var(--border-divider);
+    padding: var(--spacing-02) var(--spacing-03) var(--spacing-02)
+      var(--spacing-02);
+    border-radius: var(--border-radius-full);
+    box-shadow: 0 2px 4px 0 #1e253029;
+  }
 }
 
 .pdf .toolbar.toolbar-pdf {