From 326c63e2afa086efe573de978fb632e6204c7929 Mon Sep 17 00:00:00 2001
From: Paulo Jorge Reis <paulojreis@gmail.com>
Date: Wed, 17 Feb 2021 14:07:21 +0000
Subject: [PATCH] Compile UI improvements for beta release (#3644)

* Increase errors cap in the new compile UI to 99

* Improve messaging for stopped compiles

GitOrigin-RevId: d34973e9ef71562d64cfc8018634753e47e4dee8
---
 .../preview/components/preview-logs-toggle-button.js        | 6 +++++-
 services/web/locales/en.json                                | 4 ++--
 .../preview/components/preview-logs-toggle-button.test.js   | 6 +++---
 3 files changed, 10 insertions(+), 6 deletions(-)

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 6af867f3b8..1eabc13384 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
@@ -5,6 +5,8 @@ import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import Icon from '../../../shared/components/icon'
 
+const MAX_ERRORS_COUNT = 99
+
 function PreviewLogsToggleButton({
   onToggle,
   showLogs,
@@ -100,7 +102,9 @@ function LogsCompilationResultIndicator({ textStyle, logType, nLogs }) {
         aria-label={label}
         style={textStyle}
       >
-        {`${label} (${nLogs > 9 ? '9+' : nLogs})`}
+        {`${label} (${
+          nLogs > MAX_ERRORS_COUNT ? `${MAX_ERRORS_COUNT}+` : nLogs
+        })`}
       </span>
     </>
   )
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index eea9d6d51f..5e417fb27f 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -637,7 +637,7 @@
   "if_you_are_registered": "If you are already registered",
   "stop_compile": "Stop compilation",
   "terminated": "Compilation cancelled",
-  "compile_terminated_by_user": "The compile was cancelled using the 'Stop Compilation' button. You can view the raw logs to see where the compile stopped.",
+  "compile_terminated_by_user": "The compile was cancelled using the 'Stop Compilation' button. You can download the raw logs to see where the compile stopped.",
   "site_description": "An online LaTeX editor that's easy to use. No installation, real-time collaboration, version control, hundreds of LaTeX templates, and more.",
   "knowledge_base": "knowledge base",
   "contact_message_label": "Message",
@@ -1345,4 +1345,4 @@
   "add_email_to_claim_features": "Add an institutional email address to claim your features.",
   "please_change_primary_to_remove": "Please change your primary email in order to remove",
   "dropbox_duplicate_project_names": "We detected an update from Dropbox to <0>__projectName__</0>, but you have multiple projects with that name. We are unable to process this, so have unlinked your Dropbox account. Please ensure your project names are unique across your active, archived and trashed projects, and then re-link your Dropbox account."
-}
+}
\ No newline at end of file
diff --git a/services/web/test/frontend/features/preview/components/preview-logs-toggle-button.test.js b/services/web/test/frontend/features/preview/components/preview-logs-toggle-button.test.js
index aebfa4582f..a8c58f80f5 100644
--- a/services/web/test/frontend/features/preview/components/preview-logs-toggle-button.test.js
+++ b/services/web/test/frontend/features/preview/components/preview-logs-toggle-button.test.js
@@ -83,14 +83,14 @@ describe('<PreviewLogsToggleButton />', function() {
       screen.getByText(`View warnings (${logsState.nWarnings})`)
     })
 
-    it('should render 9+ errors when there are more than nine errors', function() {
+    it('should render 99+ errors when there are more than 99 errors', function() {
       const logsState = {
-        nErrors: 10,
+        nErrors: 100,
         nWarnings: 0,
         nLogEntries: 0
       }
       renderPreviewLogsToggleButton(logsState, onToggleLogs, showLogs)
-      screen.getByText('This project has errors (9+)')
+      screen.getByText('This project has errors (99+)')
     })
     it('should show the button text when prop showText=true', function() {
       const logsState = {