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

Add a code check banner to the new editor

GitOrigin-RevId: 6ee01d8379247824f4ec0684809ad432c4617c96
This commit is contained in:
David
2025-06-11 14:29:06 +01:00
committed by Copybot
parent 9601eeb7c9
commit 72ff927a52
3 changed files with 48 additions and 0 deletions

View File

@@ -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>
)
}

View File

@@ -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>

View File

@@ -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 {