Merge pull request #3549 from overleaf/jpa-disable-downloads-before-clearing-cache

[frontend] PdfController: disable download buttons before clearing cache

GitOrigin-RevId: e685411c12c9962732a5ab88fcb7466b0f6df7ce

services/web/app/views/project/editor/pdf.pug

@@ -115,6 +115,14 @@ div.full-size.pdf(ng-controller="PdfController")
 					}"
 				) {{ pdf.logEntries.errors.length + pdf.logEntries.warnings.length }}
 				
+			a(
+				ng-if="!pdf.downloadUrl"
+				disabled
+				href="#"
+				tooltip=translate('please_compile_pdf_before_download')
+				tooltip-placement="bottom"
+			)
+				i.fa.fa-fw.fa-download
 			a(
 				ng-href="{{pdf.downloadUrl || pdf.url}}"
 				target="_blank"

services/web/frontend/extracted-translation-keys.json

@@ -55,6 +55,7 @@
   "pdf_compile_rate_limit_hit",
   "pdf_compile_try_again",
   "pdf_rendering_error",
+  "please_compile_pdf_before_download",
   "please_set_main_file",
   "proj_timed_out_reason",
   "project_flagged_too_many_compiles",

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

@@ -21,12 +21,14 @@ function PreviewDownloadButton({
     }
   }
 
+  const pdfDownloadDisabled = isCompiling || !pdfDownloadUrl
   const buttonElement = (
     <a
       className="btn btn-xs btn-info"
-      disabled={isCompiling || !pdfDownloadUrl}
+      disabled={pdfDownloadDisabled}
       download
       href={pdfDownloadUrl || '#'}
+      style={{ pointerEvents: 'auto' }}
     >
       <Icon type="download" modifier="fw" />
       <span className="toolbar-text" style={textStyle}>
@@ -35,19 +37,25 @@ function PreviewDownloadButton({
     </a>
   )
 
+  const hideTooltip = showText && pdfDownloadUrl
+
   return (
     <Dropdown
       id="download-dropdown"
       className="toolbar-item"
       disabled={isCompiling}
     >
-      {showText ? (
+      {hideTooltip ? (
         buttonElement
       ) : (
         <OverlayTrigger
           placement="bottom"
           overlay={
-            <Tooltip id="tooltip-download-pdf">{t('download_pdf')}</Tooltip>
+            <Tooltip id="tooltip-download-pdf">
+              {pdfDownloadDisabled
+                ? t('please_compile_pdf_before_download')
+                : t('download_pdf')}
+            </Tooltip>
           }
         >
           {buttonElement}

services/web/frontend/js/ide/pdf/controllers/PdfController.js

@@ -844,6 +844,11 @@ App.controller('PdfController', function(
     $scope.pdf.clearingCache = true
     const deferred = $q.defer()
 
+    // disable various download buttons
+    $scope.pdf.url = null
+    $scope.pdf.downloadUrl = null
+    $scope.pdf.outputFiles = []
+
     $http({
       url: `/project/${$scope.project_id}/output`,
       method: 'DELETE',

services/web/frontend/stylesheets/app/editor/toolbar.less

@@ -363,3 +363,9 @@
 .formatting-menu-item:nth-of-type(4n + 1) > .formatting-btn {
   border-left: none;
 }
+
+.toolbar.toolbar-pdf > a[disabled] {
+  cursor: not-allowed;
+  .opacity(0.65);
+  .box-shadow(none);
+}