From d7f32179e4f4fdfb97169098251bc184e1a049ce Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <jessica.lawshe@overleaf.com>
Date: Thu, 26 Nov 2020 03:58:56 -0600
Subject: [PATCH] Update download dropdown style (#3399)

* Update translation

* Move dropdown header to top of list

* Do not wrap header in download dropdown

GitOrigin-RevId: 326428272592fc54f9915d5946877e59a60f967e
---
 .../preview/components/preview-download-button.js   | 10 +++-------
 .../web/frontend/stylesheets/app/editor/pdf.less    |  3 +++
 services/web/locales/en.json                        |  2 +-
 .../components/preview-download-button.test.js      | 13 ++++---------
 4 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/services/web/frontend/js/features/preview/components/preview-download-button.js b/services/web/frontend/js/features/preview/components/preview-download-button.js
index 788a08a319..bf600eaf15 100644
--- a/services/web/frontend/js/features/preview/components/preview-download-button.js
+++ b/services/web/frontend/js/features/preview/components/preview-download-button.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Dropdown, MenuItem, OverlayTrigger, Tooltip } from 'react-bootstrap'
-import { useTranslation, Trans } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
 import Icon from '../../../shared/components/icon'
 
 export const topFileTypes = ['bbl', 'gls', 'ind']
@@ -77,11 +77,11 @@ function PreviewDownloadButton({
         bsStyle="info"
       />
       <Dropdown.Menu id="download-dropdown-list">
+        <MenuItem header>{t('other_output_files')}</MenuItem>
         <FileList list={topFiles} listType="main" />
         {otherFiles.length > 0 && topFiles.length > 0 ? (
           <>
             <MenuItem divider />
-            <MenuItem header>{t('other_output_files')}</MenuItem>
           </>
         ) : (
           <></>
@@ -102,11 +102,7 @@ function FileList({ listType, list }) {
   return list.map((file, index) => {
     return (
       <MenuItem download href={file.url} key={`${listType}-${index}`}>
-        <Trans
-          i18nKey="download_file"
-          components={[<strong />]}
-          values={{ type: file.fileName }}
-        />
+        <b>{file.fileName}</b>
       </MenuItem>
     )
   })
diff --git a/services/web/frontend/stylesheets/app/editor/pdf.less b/services/web/frontend/stylesheets/app/editor/pdf.less
index 65932fb1db..f627dd563d 100644
--- a/services/web/frontend/stylesheets/app/editor/pdf.less
+++ b/services/web/frontend/stylesheets/app/editor/pdf.less
@@ -470,4 +470,7 @@
     ~'100vh - ' @toolbar-small-height ~' - ' @toolbar-height ~' - ' @margin-md
   );
   overflow-y: auto;
+  .dropdown-header {
+    white-space: nowrap;
+  }
 }
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 31c7da5b10..89ef2c4509 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -11,7 +11,7 @@
   "view_all_errors": "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": "Other output files",
+  "other_output_files": "Download other output files",
   "toggle_output_files_list": "Toggle output files list",
   "n_warnings": "__count__ warning",
   "n_warnings_plural": "__count__ warnings",
diff --git a/services/web/test/frontend/features/preview/components/preview-download-button.test.js b/services/web/test/frontend/features/preview/components/preview-download-button.test.js
index 029cc958ab..0f5a6619d3 100644
--- a/services/web/test/frontend/features/preview/components/preview-download-button.test.js
+++ b/services/web/test/frontend/features/preview/components/preview-download-button.test.js
@@ -116,11 +116,8 @@ describe('<PreviewDownloadButton />', function() {
     })
     menuItems.forEach((item, index) => {
       // check displayed text
-      const itemTextParts = item.textContent.split(' ')
-      expect(itemTextParts[0]).to.equal('Download')
-      const fileType = itemTextParts[1].split('.').pop()
+      const fileType = item.textContent.split('.').pop()
       expect(fileTypes).to.include(fileType)
-      expect(itemTextParts[2]).to.equal('file')
     })
 
     // check grouped correctly
@@ -149,9 +146,7 @@ describe('<PreviewDownloadButton />', function() {
     renderPreviewDownloadButton(isCompiling, outputFiles, pdfDownloadUrl)
 
     const bblMenuItems = screen.getAllByText((content, element) => {
-      return (
-        content !== '' && element.textContent === 'Download output.bbl file'
-      )
+      return content !== '' && element.textContent === 'output.bbl'
     })
     expect(bblMenuItems.length).to.equal(2)
   })
@@ -161,7 +156,7 @@ describe('<PreviewDownloadButton />', function() {
     const pdfAltFile = makeFile('alt.pdf')
     const outputFiles = [pdfFile, pdfAltFile]
     renderPreviewDownloadButton(isCompiling, outputFiles, pdfDownloadUrl)
-    screen.getAllByRole('menuitem', { name: 'Download alt.pdf file' })
+    screen.getAllByRole('menuitem', { name: 'alt.pdf' })
   })
   it('should show the button text when prop showText=true', function() {
     const isCompiling = false
@@ -188,7 +183,7 @@ describe('<PreviewDownloadButton />', function() {
 
       renderPreviewDownloadButton(false, outputFiles, pdfDownloadUrl, true)
 
-      screen.getByText('Other output files')
+      screen.getByText('Download other output files')
       screen.getByRole('separator')
     })
     it('should not display when there are top files and no other files', function() {