Merge pull request #286 from IQSS/feature/264-add-the-accessfile-button

264 - Add the AccessFileMenu to File Page

public/locales/en/file.json

@@ -45,5 +45,8 @@
       "directory": "File Path",
       "description": "Description"
     }
+  },
+  "actionButtons": {
+    "title": "File Action Buttons"
   }
 }

src/files/domain/models/File.ts

@@ -3,13 +3,16 @@ import { FileMetadata } from './FileMetadata'
 import { FileVersion } from './FileVersion'
 import { FileAccess } from './FileAccess'
 import { FileUserPermissions } from './FileUserPermissions'
+import { FileIngest } from './FileIngest'
 
 export interface File {
+  id: number
   version: FileVersion
   name: string
   access: FileAccess
   datasetVersion: DatasetVersion
   citation: string
   permissions: FileUserPermissions
   metadata: FileMetadata
+  ingest: FileIngest
 }

src/files/domain/models/FileIngest.ts

@@ -5,7 +5,10 @@ export enum FileIngestStatus {
   ERROR = 'error'
 }
 
-export interface FileIngest {
-  status: FileIngestStatus
-  reportMessage?: string
+export class FileIngest {
+  constructor(readonly status: FileIngestStatus, readonly message?: string) {}
+
+  get isInProgress(): boolean {
+    return this.status === FileIngestStatus.IN_PROGRESS
+  }
 }

src/files/domain/models/FileMetadata.ts

@@ -120,6 +120,14 @@ export class FileType {
   toDisplayFormat(): string {
     return FileTypeToFriendlyTypeMap[this.value] || FileTypeToFriendlyTypeMap.unknown
   }
+
+  get displayFormatIsUnknown(): boolean {
+    return this.toDisplayFormat() === FileTypeToFriendlyTypeMap.unknown
+  }
+
+  get originalFormatIsUnknown(): boolean {
+    return this.original === undefined || this.original === FileTypeToFriendlyTypeMap.unknown
+  }
 }
 
 export interface FileChecksum {
@@ -159,4 +167,8 @@ export class FileMetadata {
     }
     return false
   }
+
+  get isTabular(): boolean {
+    return this.tabularData !== undefined
+  }
 }

src/files/infrastructure/mappers/JSFileIngestMapper.ts

@@ -1,7 +1,7 @@
-import { FileIngestStatus } from '../../domain/models/FileIngest'
+import { FileIngest, FileIngestStatus } from '../../domain/models/FileIngest'
 
 export class JSFileIngestMapper {
   static toFileIngest() {
-    return { status: FileIngestStatus.NONE } // TODO - Implement this when it is added to js-dataverse
+    return new FileIngest(FileIngestStatus.NONE) // TODO - Implement this when it is added to js-dataverse
   }
 }

src/sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-action-buttons/FileActionButtons.tsx

@@ -1,17 +1,29 @@
-import { AccessFileMenu } from './access-file-menu/AccessFileMenu'
+import { AccessFileMenu } from '../../../../../../file/file-action-buttons/access-file-menu/AccessFileMenu'
 import { FilePreview } from '../../../../../../../files/domain/models/FilePreview'
 import { FileOptionsMenu } from './file-options-menu/FileOptionsMenu'
 import { ButtonGroup } from '@iqss/dataverse-design-system'
 import { useTranslation } from 'react-i18next'
+import { FilePublishingStatus } from '../../../../../../../files/domain/models/FileVersion'
+import { useFileDownloadPermission } from '../../../../../../file/file-permissions/useFileDownloadPermission'
 
 interface FileActionButtonsProps {
   file: FilePreview
 }
 export function FileActionButtons({ file }: FileActionButtonsProps) {
   const { t } = useTranslation('files')
+  const { sessionUserHasFileDownloadPermission } = useFileDownloadPermission(file)
+
   return (
     <ButtonGroup aria-label={t('actions.buttons')}>
-      <AccessFileMenu file={file} />
+      <AccessFileMenu
+        id={file.id}
+        access={file.access}
+        userHasDownloadPermission={sessionUserHasFileDownloadPermission}
+        metadata={file.metadata}
+        isDeaccessioned={file.version.publishingStatus === FilePublishingStatus.DEACCESSIONED}
+        ingestInProgress={file.ingest.isInProgress}
+        asIcon
+      />
       <FileOptionsMenu file={file} />
     </ButtonGroup>
   )

src/sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-info-messages/IngestInfoMessage.tsx

@@ -31,9 +31,9 @@ export function IngestInfoMessage({ ingest }: IngestInfoMessageProps) {
                 <a href="#" title={t('ingest.error.tabularIngestGuide')} target="_blank">
                   {t('ingest.error.tabularIngest')}
                 </a>{' '}
-                {ingest.reportMessage
+                {ingest.message
                   ? t('ingest.error.reportMessage', {
-                      reportMessage: ingest.reportMessage
+                      reportMessage: ingest.message
                     })
                   : t('ingest.error.reportMessageDefault')}
               </p>

src/sections/file/File.module.scss

@@ -38,4 +38,10 @@
 
 .restricted-icon {
   margin-right: 6px;
+}
+
+.group {
+  display: flex;
+  width: 100%;
+  margin: 0.5rem 0;
 }

src/sections/file/File.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { PageNotFound } from '../page-not-found/PageNotFound'
 import styles from './File.module.scss'
-import { Col, Row, Tabs } from '@iqss/dataverse-design-system'
+import { ButtonGroup, Col, Row, Tabs } from '@iqss/dataverse-design-system'
 import { FileRepository } from '../../files/domain/repositories/FileRepository'
 import { useFile } from './useFile'
 import { useEffect } from 'react'
@@ -12,6 +12,8 @@ import { FileCitation } from './file-citation/FileCitation'
 import { DatasetLabels } from '../dataset/dataset-labels/DatasetLabels'
 import { FileAccessRestrictedIcon } from './file-access/FileAccessRestrictedIcon'
 import { FileMetadata } from './file-metadata/FileMetadata'
+import { AccessFileMenu } from './file-action-buttons/access-file-menu/AccessFileMenu'
+import { FilePublishingStatus } from '../../files/domain/models/FileVersion'
 
 interface FileProps {
   repository: FileRepository
@@ -61,6 +63,23 @@ export function File({ repository, id }: FileProps) {
                 <span className={styles['citation-title']}>{t('datasetCitationTitle')}</span>
                 <DatasetCitation version={file.datasetVersion} withoutThumbnail />
               </Col>
+              <Col sm={3}>
+                <ButtonGroup
+                  aria-label={t('actionButtons.title')}
+                  vertical
+                  className={styles.group}>
+                  <AccessFileMenu
+                    id={file.id}
+                    access={file.access}
+                    userHasDownloadPermission={file.permissions.canDownloadFile}
+                    metadata={file.metadata}
+                    ingestInProgress={file.ingest.isInProgress}
+                    isDeaccessioned={
+                      file.version.publishingStatus === FilePublishingStatus.DEACCESSIONED
+                    }
+                  />
+                </ButtonGroup>
+              </Col>
             </Row>
             <Tabs defaultActiveKey="metadata">
               <Tabs.Tab eventKey="metadata" title={t('tabs.metadata')}>

src/sections/file/file-action-buttons/access-file-menu/AccessFileMenu.tsx

@@ -0,0 +1,75 @@
+import { Download, FileEarmark } from 'react-bootstrap-icons'
+import { AccessStatus } from './AccessStatus'
+import { RequestAccessOption } from './RequestAccessOption'
+import { DropdownButton, DropdownHeader, Tooltip } from '@iqss/dataverse-design-system'
+import { useTranslation } from 'react-i18next'
+import { FileDownloadOptions } from './FileDownloadOptions'
+import { FileAccess } from '../../../../files/domain/models/FileAccess'
+import { FileMetadata } from '../../../../files/domain/models/FileMetadata'
+import { ReactElement } from 'react'
+
+interface FileActionButtonAccessFileProps {
+  id: number
+  access: FileAccess
+  userHasDownloadPermission: boolean
+  metadata: FileMetadata
+  ingestInProgress: boolean
+  isDeaccessioned: boolean
+  asIcon?: boolean
+}
+
+export function AccessFileMenu({
+  id,
+  access,
+  userHasDownloadPermission,
+  metadata,
+  ingestInProgress,
+  isDeaccessioned,
+  asIcon = false
+}: FileActionButtonAccessFileProps) {
+  const { t } = useTranslation('files')
+  function MenuWrapper({ children }: { children: ReactElement }) {
+    if (asIcon) {
+      return (
+        <Tooltip placement="top" overlay={t('actions.accessFileMenu.title')}>
+          {children}
+        </Tooltip>
+      )
+    }
+    return children
+  }
+
+  return (
+    <MenuWrapper>
+      <DropdownButton
+        id={`action-button-access-file-${id}`}
+        title={asIcon ? '' : t('actions.accessFileMenu.title')}
+        asButtonGroup
+        variant={asIcon ? 'secondary' : 'primary'}
+        icon={asIcon ? <Download aria-label={t('actions.accessFileMenu.title')} /> : undefined}>
+        <DropdownHeader>
+          {t('actions.accessFileMenu.headers.fileAccess')} <FileEarmark />
+        </DropdownHeader>
+        <AccessStatus
+          isRestricted={access.restricted}
+          isActivelyEmbargoed={metadata.isActivelyEmbargoed}
+          userHasDownloadPermission={userHasDownloadPermission}
+        />
+        <RequestAccessOption
+          id={id}
+          access={access}
+          userHasDownloadPermission={userHasDownloadPermission}
+          isDeaccessioned={isDeaccessioned}
+          isActivelyEmbargoed={metadata.isActivelyEmbargoed}
+        />
+        <FileDownloadOptions
+          type={metadata.type}
+          downloadUrls={metadata.downloadUrls}
+          ingestInProgress={ingestInProgress}
+          isTabular={metadata.isTabular}
+          userHasDownloadPermission={userHasDownloadPermission}
+        />
+      </DropdownButton>
+    </MenuWrapper>
+  )
+}