Merge pull request #3305 from overleaf/jel-download-dropdown-divider

Only show header/divider if download list is separated

GitOrigin-RevId: 832c53bf973e6615a5c2ef526a8fad0835913bcc

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

@@ -42,13 +42,20 @@ function PreviewDownloadButton({ isCompiling, outputFiles, pdfDownloadUrl }) {
       />
       <Dropdown.Menu id="download-dropdown-list">
         <FileList list={topFiles} listType="main" />
-
-        {otherFiles.length > 0 && (
+        {otherFiles.length > 0 && topFiles.length > 0 ? (
           <>
             <MenuItem divider />
             <MenuItem header>{t('other_output_files')}</MenuItem>
+          </>
+        ) : (
+          <></>
+        )}
+        {otherFiles.length > 0 ? (
+          <>
             <FileList list={otherFiles} listType="other" />
           </>
+        ) : (
+          <></>
         )}
       </Dropdown.Menu>
     </Dropdown>

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

@@ -167,4 +167,57 @@ describe('<PreviewDownloadButton />', function() {
     )
     screen.getAllByRole('menuitem', { name: 'Download alt.pdf file' })
   })
+  describe('list divider and header', function() {
+    it('should display when there are top files and other files', function() {
+      const outputFiles = [
+        makeFile('output.bbl'),
+        makeFile('output.ind'),
+        makeFile('output.gls'),
+        makeFile('output.log')
+      ]
+
+      render(
+        <PreviewDownloadButton
+          isCompiling={false}
+          outputFiles={outputFiles}
+          pdfDownloadUrl={pdfDownloadUrl}
+        />
+      )
+
+      screen.getByText('Other output files')
+      screen.getByRole('separator')
+    })
+    it('should not display when there are top files and no other files', function() {
+      const outputFiles = [
+        makeFile('output.bbl'),
+        makeFile('output.ind'),
+        makeFile('output.gls')
+      ]
+
+      render(
+        <PreviewDownloadButton
+          isCompiling={false}
+          outputFiles={outputFiles}
+          pdfDownloadUrl={pdfDownloadUrl}
+        />
+      )
+
+      expect(screen.queryByText('Other output files')).to.not.exist
+      expect(screen.queryByRole('separator')).to.not.exist
+    })
+    it('should not display when there are other files and no top files', function() {
+      const outputFiles = [makeFile('output.log')]
+
+      render(
+        <PreviewDownloadButton
+          isCompiling={false}
+          outputFiles={outputFiles}
+          pdfDownloadUrl={pdfDownloadUrl}
+        />
+      )
+
+      expect(screen.queryByText('Other output files')).to.not.exist
+      expect(screen.queryByRole('separator')).to.not.exist
+    })
+  })
 })