Merge pull request #33281 from overleaf/jd-back-to-pdf-button

Change the "close logs" icon button to a "Back to PDF" button with a label

GitOrigin-RevId: 30b8d3e314fb9b8c901b90055832b88687827e62

services/web/frontend/extracted-translations.json

@@ -196,6 +196,7 @@
   "back_to_editing": "",
   "back_to_editor": "",
   "back_to_my_projects": "",
+  "back_to_pdf": "",
   "back_to_subscription": "",
   "back_to_your_projects": "",
   "basic_compile_time": "",
@@ -2306,7 +2307,6 @@
   "view_options": "",
   "view_payment_portal": "",
   "view_payment_portal_disclaimer": "",
-  "view_pdf": "",
   "view_your_invoices": "",
   "viewer": "",
   "viewing": "",

services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-download-button.tsx

@@ -8,12 +8,14 @@ import MaterialIcon from '@/shared/components/material-icon'
 import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
 
 function PdfHybridDownloadButton() {
-  const { pdfDownloadUrl } = useCompileContext()
+  const { pdfDownloadUrl, showLogs } = useCompileContext()
   const { sendEvent } = useEditorAnalytics()
-
   const { projectId } = useProjectContext()
-
   const { t } = useTranslation()
+
+  if (showLogs) {
+    return null
+  }
   const description = pdfDownloadUrl
     ? t('download_pdf')
     : t('please_compile_pdf_before_download')

services/web/frontend/js/features/pdf-preview/components/pdf-hybrid-logs-button.tsx

@@ -25,6 +25,20 @@ const PdfHybridLogsButton = forwardRef<HTMLButtonElement>((_, ref) => {
   const warningCount = Number(logEntries?.warnings?.length)
   const totalCount = errorCount + warningCount
 
+  if (showLogs) {
+    return (
+      <OLButton
+        ref={ref}
+        variant="secondary"
+        size="sm"
+        disabled={Boolean(error || stoppedOnFirstError)}
+        onClick={handleClick}
+      >
+        {t('back_to_pdf')}
+      </OLButton>
+    )
+  }
+
   return (
     <OLTooltip
       id="logs-toggle"
@@ -35,15 +49,14 @@ const PdfHybridLogsButton = forwardRef<HTMLButtonElement>((_, ref) => {
         ref={ref}
         variant="link"
         disabled={Boolean(error || stoppedOnFirstError)}
-        active={showLogs}
         className="pdf-toolbar-btn toolbar-item log-btn"
         onClick={handleClick}
         style={{ position: 'relative' }}
-        aria-label={showLogs ? t('view_pdf') : t('view_logs')}
+        aria-label={t('view_logs')}
       >
         <MaterialIcon type="description" />
 
-        {!showLogs && totalCount > 0 && (
+        {totalCount > 0 && (
           <OLBadge bg={errorCount === 0 ? 'warning' : 'danger'}>
             {totalCount}
           </OLBadge>

services/web/locales/en.json

@@ -260,6 +260,7 @@
   "back_to_editor": "Back to editor",
   "back_to_log_in": "Back to log in",
   "back_to_my_projects": "Back to my projects",
+  "back_to_pdf": "Back to PDF",
   "back_to_subscription": "Back to subscription",
   "back_to_your_projects": "Back to your projects",
   "basic": "Basic",

services/web/test/frontend/components/pdf-preview/pdf-preview.spec.tsx

@@ -630,7 +630,7 @@ describe('<PdfPreview/>', function () {
     cy.waitForCompile({ pdf: true })
 
     cy.findByRole('button', { name: 'View logs' }).click()
-    cy.findByRole('button', { name: 'View PDF' })
+    cy.findByRole('button', { name: 'Back to PDF' })
     cy.findByLabelText('Raw logs from the LaTeX compiler').within(() => {
       cy.findByRole('button', { name: 'Expand' }).click()
       cy.findByRole('button', { name: 'Collapse' }).click()