overleaf/services/web/frontend/js/features/pdf-preview/components/pdf-preview-error.js
Alf Eaton c2b4a2d3ea Merge pull request #9375 from overleaf/mj-timeout-link
[web] Add missing link to compile timeout message

GitOrigin-RevId: 46af17a4fe0620ccf6dc29a27edfbf3ac79e856d
2022-08-25 08:03:40 +00:00

262 lines
7.8 KiB
JavaScript

import PropTypes from 'prop-types'
import { useTranslation, Trans } from 'react-i18next'
import { memo, useCallback } from 'react'
import { Button } from 'react-bootstrap'
import PdfLogEntry from './pdf-log-entry'
import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
import { useStopOnFirstError } from '../../../shared/hooks/use-stop-on-first-error'
import StopOnFirstErrorBadge from '../../../shared/components/stop-on-first-error-badge'
import getMeta from '../../../utils/meta'
function PdfPreviewError({ error }) {
const { t } = useTranslation()
switch (error) {
case 'rendering-error':
return (
<ErrorLogEntry title={t('pdf_rendering_error')}>
{t('something_went_wrong_rendering_pdf')}
&nbsp;
<Trans
i18nKey="try_recompile_project_or_troubleshoot"
components={[
// eslint-disable-next-line react/jsx-key, jsx-a11y/anchor-has-content
<a href="/learn/how-to/Resolving_access%2C_loading%2C_and_display_problems" />,
]}
/>
</ErrorLogEntry>
)
case 'clsi-maintenance':
return (
<ErrorLogEntry title={t('server_error')}>
{t('clsi_maintenance')}
</ErrorLogEntry>
)
case 'clsi-unavailable':
return (
<ErrorLogEntry title={t('server_error')}>
{t('clsi_unavailable')}
</ErrorLogEntry>
)
case 'too-recently-compiled':
return (
<ErrorLogEntry title={t('server_error')}>
{t('too_recently_compiled')}
</ErrorLogEntry>
)
case 'terminated':
return (
<ErrorLogEntry title={t('terminated')}>
{t('compile_terminated_by_user')}
</ErrorLogEntry>
)
case 'rate-limited':
return (
<ErrorLogEntry title={t('pdf_compile_rate_limit_hit')}>
{t('project_flagged_too_many_compiles')}
</ErrorLogEntry>
)
case 'compile-in-progress':
return (
<ErrorLogEntry title={t('pdf_compile_in_progress_error')}>
{t('pdf_compile_try_again')}
</ErrorLogEntry>
)
case 'auto-compile-disabled':
return (
<ErrorLogEntry title={t('autocompile_disabled')}>
{t('autocompile_disabled_reason')}
</ErrorLogEntry>
)
case 'project-too-large':
return (
<ErrorLogEntry title={t('project_too_large')}>
{t('project_too_much_editable_text')}
</ErrorLogEntry>
)
case 'timedout':
return <TimedOutLogEntry />
case 'failure':
return (
<ErrorLogEntry title={t('no_pdf_error_title')}>
{t('no_pdf_error_explanation')}
<ul className="log-entry-formatted-content-list">
<li>{t('no_pdf_error_reason_unrecoverable_error')}</li>
<li>
<Trans
i18nKey="no_pdf_error_reason_no_content"
components={{ code: <code /> }}
/>
</li>
<li>
<Trans
i18nKey="no_pdf_error_reason_output_pdf_already_exists"
components={{ code: <code /> }}
/>
</li>
</ul>
</ErrorLogEntry>
)
case 'clear-cache':
return (
<ErrorLogEntry title={t('server_error')}>
{t('somthing_went_wrong_compiling')}
</ErrorLogEntry>
)
case 'pdf-viewer-loading-error':
return (
<ErrorLogEntry title={t('pdf_rendering_error')}>
<Trans
i18nKey="something_went_wrong_loading_pdf_viewer"
components={[
<strong key="strong-" />,
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
key="learn-link"
target="_blank"
href="/learn/how-to/Resolving_access%2C_loading%2C_and_display_problems"
/>,
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a key="contact-link" target="_blank" href="/contact" />,
]}
/>
</ErrorLogEntry>
)
case 'validation-problems':
return null // handled elsewhere
case 'error':
default:
return (
<ErrorLogEntry title={t('server_error')}>
{t('somthing_went_wrong_compiling')}
</ErrorLogEntry>
)
}
}
PdfPreviewError.propTypes = {
error: PropTypes.string.isRequired,
}
export default memo(PdfPreviewError)
function ErrorLogEntry({ title, headerIcon, children }) {
const { t } = useTranslation()
return (
<PdfLogEntry
headerTitle={title}
headerIcon={headerIcon}
formattedContent={children}
entryAriaLabel={t('compile_error_entry_description')}
level="error"
/>
)
}
ErrorLogEntry.propTypes = {
title: PropTypes.string.isRequired,
headerIcon: PropTypes.element,
children: PropTypes.any.isRequired,
}
function TimedOutLogEntry() {
const { t } = useTranslation()
const { enableStopOnFirstError } = useStopOnFirstError({
eventSource: 'timeout',
})
const { startCompile, lastCompileOptions, setAnimateCompileDropdownArrow } =
useCompileContext()
const showStopOnFirstError = getMeta('ol-showStopOnFirstError')
const handleEnableStopOnFirstErrorClick = useCallback(() => {
enableStopOnFirstError()
startCompile({ stopOnFirstError: true })
setAnimateCompileDropdownArrow(true)
}, [enableStopOnFirstError, startCompile, setAnimateCompileDropdownArrow])
if (showStopOnFirstError) {
return (
<ErrorLogEntry title={t('timedout')}>
<p>{t('project_timed_out_intro')}</p>
<ul>
<li>
<Trans
i18nKey="project_timed_out_optimize_images"
components={[
// eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
<a href="https://www.overleaf.com/learn/how-to/Optimising_very_large_image_files" />,
]}
/>
</li>
<li>
<Trans
i18nKey="project_timed_out_fatal_error"
components={[
// eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
<a href="https://www.overleaf.com/learn/how-to/Why_do_I_keep_getting_the_compile_timeout_error_message%3F#Fatal_compile_errors_blocking_the_compilation" />,
]}
/>
{!lastCompileOptions.stopOnFirstError && (
<>
{' '}
<Trans
i18nKey="project_timed_out_enable_stop_on_first_error"
components={[
// eslint-disable-next-line react/jsx-key
<Button
bsSize="xs"
bsStyle="info"
onClick={handleEnableStopOnFirstErrorClick}
/>,
]}
/>{' '}
<StopOnFirstErrorBadge placement="bottom" />
</>
)}
</li>
</ul>
<p>
<Trans
i18nKey="project_timed_out_learn_more"
components={[
// eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key
<a href="https://www.overleaf.com/learn/how-to/Why_do_I_keep_getting_the_compile_timeout_error_message%3F" />,
]}
/>
</p>
</ErrorLogEntry>
)
} else {
return (
<ErrorLogEntry title={t('timedout')}>
{t('proj_timed_out_reason')}
<div>
<a
href="https://www.overleaf.com/learn/how-to/Why_do_I_keep_getting_the_compile_timeout_error_message%3F"
target="_blank"
rel="noopener"
>
{t('learn_how_to_make_documents_compile_quickly')}
</a>
</div>
</ErrorLogEntry>
)
}
}
TimedOutLogEntry.propTypes = {}