Update download dropdown style (#3399)

* Update translation

* Move dropdown header to top of list

* Do not wrap header in download dropdown

GitOrigin-RevId: 326428272592fc54f9915d5946877e59a60f967e

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>
     )
   })

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;
+  }
 }

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

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() {