Improve copy for single errors or warnings

GitOrigin-RevId: 1fdd270d4148abd0385e4258bb634cf769cce8c5

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": "",

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({
         >
           <Icon type="file-text-o" />
           &nbsp;
-          {t('view_all_errors')}
+          {t('view_error', { count: nErrors })}
         </button>
       </div>
     </div>
@@ -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,

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 (
     <>
       <Icon type="file-text-o" />
       <span
         className="btn-toggle-logs-label toolbar-text"
-        aria-label={label}
+        aria-label={logTypeLabel}
         style={textStyle}
       >
-        {`${label} (${
-          nLogs > MAX_ERRORS_COUNT ? `${MAX_ERRORS_COUNT}+` : nLogs
-        })`}
+        {`${logTypeLabel}${nLogs > 1 ? errorCountLabel : ''}`}
       </span>
     </>
   )

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

@@ -117,6 +117,7 @@ const PreviewPane = React.memo(function PreviewPane({
       {showFirstErrorPopUp ? (
         <PreviewFirstErrorPopUp
           logEntry={compilerState.logEntries.errors[0]}
+          nErrors={nErrors}
           onGoToErrorLocation={onLogEntryLocationClick}
           onViewLogs={onToggleLogs}
           onClose={handleFirstErrorPopUpClose}

services/web/locales/en.json

@@ -23,7 +23,8 @@
   "first_error_popup_label": "This project has errors. This is the first one.",
   "dismiss_error_popup": "Dismiss first error alert",
   "go_to_error_location": "Go to error location",
-  "view_all_errors": "View all errors",
+  "view_error": "View error",
+  "view_error_plural": "View all errors",
   "log_entry_description": "Log entry with level: __level__",
   "navigate_log_source": "Navigate to log position in source code: __location__",
   "other_output_files": "Download other output files",
@@ -35,8 +36,10 @@
   "n_errors_plural": "__count__ errors",
   "toggle_compile_options_menu": "Toggle compile options menu",
   "view_pdf": "View PDF",
-  "your_project_has_errors": "This project has errors",
-  "view_warnings": "View warnings",
+  "your_project_has_an_error": "This project has an error",
+  "your_project_has_an_error_plural": "This project has errors",
+  "view_warning": "View warning",
+  "view_warning_plural": "View warnings",
   "view_logs": "View logs",
   "recompile_from_scratch": "Recompile from scratch",
   "tagline_free": "Perfect for getting started",

services/web/test/frontend/features/preview/components/preview-logs-toggle-button.test.js

@@ -68,12 +68,21 @@ describe('<PreviewLogsToggleButton />', 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('<PreviewLogsToggleButton />', 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('<PreviewLogsToggleButton />', 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,