diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index a02a213a7a..8f716d6508 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -328,16 +328,19 @@
"use_your_own_machine": "",
"validation_issue_description": "",
"validation_issue_entry_description": "",
- "view_all_errors": "",
+ "view_error": "",
+ "view_error_plural": "",
"view_logs": "",
"view_pdf": "",
- "view_warnings": "",
+ "view_warning": "",
+ "view_warning_plural": "",
"we_cant_find_any_sections_or_subsections_in_this_file": "",
"word_count": "",
"work_offline": "",
"work_with_non_overleaf_users": "",
"your_message": "",
- "your_project_has_errors": "",
+ "your_project_has_an_error": "",
+ "your_project_has_an_error_plural": "",
"zotero_groups_loading_error": "",
"zotero_is_premium": "",
"zotero_reference_loading_error": "",
diff --git a/services/web/frontend/js/features/preview/components/preview-first-error-pop-up.js b/services/web/frontend/js/features/preview/components/preview-first-error-pop-up.js
index e713d25bd0..7b37dc60fa 100644
--- a/services/web/frontend/js/features/preview/components/preview-first-error-pop-up.js
+++ b/services/web/frontend/js/features/preview/components/preview-first-error-pop-up.js
@@ -6,6 +6,7 @@ import { OverlayTrigger, Tooltip } from 'react-bootstrap'
function PreviewFirstErrorPopUp({
logEntry,
+ nErrors,
onGoToErrorLocation,
onViewLogs,
onClose,
@@ -52,7 +53,7 @@ function PreviewFirstErrorPopUp({
>
- {t('view_all_errors')}
+ {t('view_error', { count: nErrors })}
@@ -82,6 +83,7 @@ function FirstErrorPopUpInfoBadge() {
PreviewFirstErrorPopUp.propTypes = {
logEntry: PropTypes.object.isRequired,
+ nErrors: PropTypes.number.isRequired,
onGoToErrorLocation: PropTypes.func.isRequired,
onViewLogs: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
diff --git a/services/web/frontend/js/features/preview/components/preview-logs-toggle-button.js b/services/web/frontend/js/features/preview/components/preview-logs-toggle-button.js
index 6f47dc779e..6e8e385238 100644
--- a/services/web/frontend/js/features/preview/components/preview-logs-toggle-button.js
+++ b/services/web/frontend/js/features/preview/components/preview-logs-toggle-button.js
@@ -119,19 +119,25 @@ function ViewPdf({ textStyle }) {
function LogsCompilationResult({ textStyle, logType, nLogs }) {
const { t } = useTranslation()
- const label =
- logType === 'errors' ? t('your_project_has_errors') : t('view_warnings')
+
+ const logTypeLabel =
+ logType === 'errors'
+ ? t('your_project_has_an_error', { count: nLogs })
+ : t('view_warning', { count: nLogs })
+
+ const errorCountLabel = ` (${
+ nLogs > MAX_ERRORS_COUNT ? `${MAX_ERRORS_COUNT}+` : nLogs
+ })`
+
return (
<>
- {`${label} (${
- nLogs > MAX_ERRORS_COUNT ? `${MAX_ERRORS_COUNT}+` : nLogs
- })`}
+ {`${logTypeLabel}${nLogs > 1 ? errorCountLabel : ''}`}
>
)
diff --git a/services/web/frontend/js/features/preview/components/preview-pane.js b/services/web/frontend/js/features/preview/components/preview-pane.js
index b816713850..1268d11dee 100644
--- a/services/web/frontend/js/features/preview/components/preview-pane.js
+++ b/services/web/frontend/js/features/preview/components/preview-pane.js
@@ -117,6 +117,7 @@ function PreviewPane({
{showFirstErrorPopUp ? (
', function () {
screen.getByText('Code check failed')
})
- it('should render an error status message when there are errors', function () {
+ it('should render an error status message without a count when there is a single error', function () {
const logsState = {
nErrors: 1,
nWarnings: 0,
}
renderPreviewLogsToggleButton(logsState, onToggleLogs, showLogs)
+ screen.getByText('This project has an error')
+ })
+
+ it('should render an error status message with a count when there are multiple errors', function () {
+ const logsState = {
+ nErrors: 10,
+ nWarnings: 0,
+ }
+ renderPreviewLogsToggleButton(logsState, onToggleLogs, showLogs)
screen.getByText(`This project has errors (${logsState.nErrors})`)
})
@@ -83,15 +92,24 @@ describe('', function () {
nWarnings: 1,
}
renderPreviewLogsToggleButton(logsState, onToggleLogs, showLogs)
- screen.getByText(`This project has errors (${logsState.nErrors})`)
+ screen.getByText('This project has an error')
})
- it('should render a warning status message when there are warnings but no errors', function () {
+ it('should render a warning status message without a count when there is a single warning and no errors', function () {
const logsState = {
nErrors: 0,
nWarnings: 1,
}
renderPreviewLogsToggleButton(logsState, onToggleLogs, showLogs)
+ screen.getByText('View warning')
+ })
+
+ it('should render a warning status message with a count when there are multiple warnings and no errors', function () {
+ const logsState = {
+ nErrors: 0,
+ nWarnings: 10,
+ }
+ renderPreviewLogsToggleButton(logsState, onToggleLogs, showLogs)
screen.getByText(`View warnings (${logsState.nWarnings})`)
})
@@ -103,6 +121,7 @@ describe('', function () {
renderPreviewLogsToggleButton(logsState, onToggleLogs, showLogs)
screen.getByText('This project has errors (99+)')
})
+
it('should show the button text when prop showText=true', function () {
const logsState = {
nErrors: 0,