feat(DownloadFiles): add button component

src/files/domain/models/File.ts

@@ -179,4 +179,8 @@ export class File {
     }
     return false
   }
+
+  get isTabularData(): boolean {
+    return this.tabularData !== undefined
+  }
 }

src/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.tsx

@@ -0,0 +1,63 @@
+import { File } from '../../../../../../files/domain/models/File'
+import { useDataset } from '../../../../DatasetContext'
+import { Button, DropdownButton, DropdownButtonItem } from '@iqss/dataverse-design-system'
+
+interface DownloadFilesButtonProps {
+  files: File[]
+}
+
+const MINIMUM_FILES_COUNT_TO_SHOW_DOWNLOAD_FILES_BUTTON = 1
+export function DownloadFilesButton({ files }: DownloadFilesButtonProps) {
+  const { dataset } = useDataset()
+
+  if (
+    files.length < MINIMUM_FILES_COUNT_TO_SHOW_DOWNLOAD_FILES_BUTTON ||
+    !dataset?.permissions.canDownloadFiles
+  ) {
+    return <></>
+  }
+
+  if (files.some((file) => file.isTabularData)) {
+    return (
+      <DropdownButton id="download-files" title="Download" variant="secondary">
+        <DropdownButtonItem>Original Format</DropdownButtonItem>
+        <DropdownButtonItem>Archival Format (.tab)</DropdownButtonItem>
+      </DropdownButton>
+    )
+  }
+
+  return <Button variant="secondary">Download</Button>
+}
+
+// Original:
+// < div
+// jsf:id = "downloadButtonBlockNormal"
+// className = "btn-group"
+// jsf:rendered = "#{(!(empty DatasetPage.workingVersion.fileMetadatas)
+// and
+// DatasetPage.workingVersion.fileMetadatas.size() > 1
+// )
+// and
+// DatasetPage.downloadButtonAvailable
+// and !
+// DatasetPage.isVersionHasTabular()
+// }
+// ">
+// < p
+// :
+// commandLink
+// styleClass = "btn btn-default btn-download"
+// disabled = "#{false and DatasetPage.lockedFromDownload}"
+// onclick = "if (!testFilesSelected()) return false;"
+// action = "#{DatasetPage.startDownloadSelectedOriginal()}"
+// update = "@form"
+// oncomplete = "showPopup();" >
+//   < f
+// :
+// setPropertyActionListener
+// target = "#{DatasetPage.fileMetadataForAction}"
+// value = "#{null}" / >
+//   < span
+// className = "glyphicon glyphicon-download-alt" / > #{bundle.download}
+//   < /p:commandLink>
+// </div>

src/stories/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { EditFilesMenu } from '../../../../../../sections/dataset/dataset-files/files-table/file-actions/edit-files-menu/EditFilesMenu'
+import { WithI18next } from '../../../../../WithI18next'
+import { WithSettings } from '../../../../../WithSettings'
+import { WithLoggedInUser } from '../../../../../WithLoggedInUser'
+import { WithDatasetAllPermissionsGranted } from '../../../../WithDatasetAllPermissionsGranted'
+import { FileMother } from '../../../../../../../tests/component/files/domain/models/FileMother'
+import { DownloadFilesButton } from '../../../../../../sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton'
+
+const meta: Meta<typeof EditFilesMenu> = {
+  title: 'Sections/Dataset Page/DatasetFiles/FilesTable/DownloadFilesButton',
+  component: EditFilesMenu,
+  decorators: [WithI18next, WithSettings, WithLoggedInUser, WithDatasetAllPermissionsGranted]
+}
+
+export default meta
+type Story = StoryObj<typeof EditFilesMenu>
+
+export const NonTabularFiles: Story = {
+  render: () => <DownloadFilesButton files={FileMother.createMany(2)} />
+}

tests/component/files/domain/models/FileMother.ts

@@ -144,8 +144,8 @@ export class FileMother {
     )
   }
 
-  static createMany(quantity: number): File[] {
-    return Array.from({ length: quantity }).map(() => this.create())
+  static createMany(quantity: number, props?: Partial<File>): File[] {
+    return Array.from({ length: quantity }).map(() => this.create(props))
   }
 
   static createDefault(props?: Partial<File>): File {

tests/component/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.spec.tsx

@@ -0,0 +1,96 @@
+import { ReactNode } from 'react'
+import { Dataset as DatasetModel } from '../../../../../../../../src/dataset/domain/models/Dataset'
+import { DatasetProvider } from '../../../../../../../../src/sections/dataset/DatasetProvider'
+import { DatasetRepository } from '../../../../../../../../src/dataset/domain/repositories/DatasetRepository'
+import {
+  DatasetMother,
+  DatasetPermissionsMother
+} from '../../../../../../dataset/domain/models/DatasetMother'
+import { DownloadFilesButton } from '../../../../../../../../src/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton'
+import { FileMother } from '../../../../../../files/domain/models/FileMother'
+
+const datasetRepository: DatasetRepository = {} as DatasetRepository
+describe('DownloadFilesButton', () => {
+  const withDataset = (component: ReactNode, dataset: DatasetModel | undefined) => {
+    datasetRepository.getByPersistentId = cy.stub().resolves(dataset)
+    datasetRepository.getByPrivateUrlToken = cy.stub().resolves(dataset)
+
+    return (
+      <DatasetProvider
+        repository={datasetRepository}
+        searchParams={{ persistentId: 'some-persistent-id', version: 'some-version' }}>
+        {component}
+      </DatasetProvider>
+    )
+  }
+
+  it('renders the Download Files button if there is more than 1 file in the dataset and the user has download files permission', () => {
+    const datasetWithDownloadFilesPermission = DatasetMother.create({
+      permissions: DatasetPermissionsMother.createWithFilesDownloadAllowed()
+    })
+    const files = FileMother.createMany(2)
+    cy.mountAuthenticated(
+      withDataset(<DownloadFilesButton files={files} />, datasetWithDownloadFilesPermission)
+    )
+
+    cy.findByRole('button', { name: 'Download' }).should('exist')
+  })
+
+  it('does not render the Download Files button if there is only 1 file in the dataset', () => {
+    const datasetWithDownloadFilesPermission = DatasetMother.create({
+      permissions: DatasetPermissionsMother.createWithFilesDownloadAllowed()
+    })
+    const files = FileMother.createMany(1)
+    cy.mountAuthenticated(
+      withDataset(<DownloadFilesButton files={files} />, datasetWithDownloadFilesPermission)
+    )
+
+    cy.findByRole('button', { name: 'Download' }).should('not.exist')
+  })
+
+  it('does not render the Download Files button if the user does not have download files permission', () => {
+    const datasetWithoutDownloadFilesPermission = DatasetMother.create({
+      permissions: DatasetPermissionsMother.createWithFilesDownloadNotAllowed()
+    })
+    const files = FileMother.createMany(2)
+    cy.mountAuthenticated(
+      withDataset(<DownloadFilesButton files={files} />, datasetWithoutDownloadFilesPermission)
+    )
+
+    cy.findByRole('button', { name: 'Download' }).should('not.exist')
+  })
+
+  it('renders the Download Files button as a dropdown if there are tabular files in the dataset', () => {
+    const datasetWithDownloadFilesPermission = DatasetMother.create({
+      permissions: DatasetPermissionsMother.createWithFilesDownloadAllowed()
+    })
+    const files = FileMother.createMany(2, {
+      tabularData: {
+        variablesCount: 2,
+        observationsCount: 3,
+        unf: 'some-unf'
+      }
+    })
+    cy.mountAuthenticated(
+      withDataset(<DownloadFilesButton files={files} />, datasetWithDownloadFilesPermission)
+    )
+
+    cy.findByRole('button', { name: 'Download' }).click()
+    cy.findByRole('button', { name: 'Original Format' }).should('exist')
+    cy.findByRole('button', { name: 'Archival Format (.tab)' }).should('exist')
+  })
+
+  it('does not render the Download Files button as a dropdown if there are no tabular files in the dataset', () => {
+    const datasetWithDownloadFilesPermission = DatasetMother.create({
+      permissions: DatasetPermissionsMother.createWithFilesDownloadAllowed()
+    })
+    const files = FileMother.createMany(2, { tabularData: undefined })
+    cy.mountAuthenticated(
+      withDataset(<DownloadFilesButton files={files} />, datasetWithDownloadFilesPermission)
+    )
+
+    cy.findByRole('button', { name: 'Download' }).click()
+    cy.findByRole('button', { name: 'Original Format' }).should('not.exist')
+    cy.findByRole('button', { name: 'Archival Format (.tab)' }).should('not.exist')
+  })
+})