Merge pull request #281 from IQSS/feature/263-add-filemetadata-sectio…

…n-to-the-file-page 263 - Add file metadata section to the File page
IQSS · Feb 1, 2024 · debb816 · debb816
2 parents 6a718db + d5c11f3
commit debb816
Show file tree

Hide file tree

Showing 38 changed files with 958 additions and 147 deletions.
diff --git a/packages/design-system/src/lib/assets/styles/bootstrap-customized.scss b/packages/design-system/src/lib/assets/styles/bootstrap-customized.scss
@@ -17,6 +17,7 @@ $danger: $dv-danger-color;
 // Body
 $body-color: $dv-text-color;
 $headings-color: $dv-headings-color;
+$code-color: $dv-text-color;
 
 // Typography
 $font-family-base: $dv-font-family;
@@ -125,4 +126,4 @@ th {
 .btn-group > div:not(:first-child) > .btn-group > .btn, .btn-group-vertical > div:not(:first-child) > .btn-group > .btn {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-}
+}
diff --git a/public/locales/en/file.json b/public/locales/en/file.json
@@ -22,5 +22,28 @@
       "name": "Public",
       "icon": "Public File Icon"
     }
+  },
+  "metadata": {
+    "title": "File Metadata",
+    "fields": {
+      "preview": "Preview",
+      "labels": "File Tags",
+      "persistentId": "File Persistent ID",
+      "downloadUrl": {
+        "title": "Download URL",
+        "description": "Use the Download URL in a Wget command or a download manager to avoid interrupted downloads, time outs or other failures. <1>User Guide - Downloading via URL</1>"
+      },
+      "unf": "File UNF",
+      "depositDate": "Deposit Date",
+      "metadataReleaseDate": "Metadata Release Date",
+      "publicationDate": "Publication Date",
+      "embargoReason": "Embargo Reason",
+      "size": "Size",
+      "type": "Type",
+      "variables": "Variables",
+      "observations": "Observations",
+      "directory": "File Path",
+      "description": "Description"
+    }
   }
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,12 +3,12 @@ import { Router } from './Router'
 import { SessionProvider } from './sections/session/SessionProvider'
 import { UserJSDataverseRepository } from './users/infrastructure/repositories/UserJSDataverseRepository'
 import { DataverseApiAuthMechanism } from '@iqss/dataverse-client-javascript/dist/core/infra/repositories/ApiConfig'
+import { BASE_URL } from './config'
 
-const VITE_DATAVERSE_BACKEND_URL = (import.meta.env.VITE_DATAVERSE_BACKEND_URL as string) ?? ''
-if (VITE_DATAVERSE_BACKEND_URL) {
-  ApiConfig.init(`${VITE_DATAVERSE_BACKEND_URL}/api/v1`, DataverseApiAuthMechanism.SESSION_COOKIE)
-} else {
+if (BASE_URL === '') {
   throw Error('VITE_DATAVERSE_BACKEND_URL environment variable should be specified.')
+} else {
+  ApiConfig.init(`${BASE_URL}/api/v1`, DataverseApiAuthMechanism.SESSION_COOKIE)
 }
 
 const userRepository = new UserJSDataverseRepository()

diff --git a/src/config.ts b/src/config.ts
@@ -0,0 +1 @@
+export const BASE_URL = (import.meta.env.VITE_DATAVERSE_BACKEND_URL as string) ?? ''
diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts
@@ -1,13 +1,37 @@
 import { DatasetVersion } from '../../../dataset/domain/models/Dataset'
+import {
+  FileChecksum,
+  FileDownloadUrls,
+  FileEmbargo,
+  FileLabel,
+  FileSize,
+  FileTabularData,
+  FileType,
+  FileVersion
+} from './FilePreview'
 
 export interface FilePermissions {
   canDownloadFile: boolean
 }
 
 export interface File {
   name: string
+  version: FileVersion
   datasetVersion: DatasetVersion
+  type: FileType
+  size: FileSize
   citation: string
   restricted: boolean
   permissions: FilePermissions
+  labels: FileLabel[]
+  downloadUrls: FileDownloadUrls
+  depositDate: Date
+  publicationDate?: Date
+  persistentId?: string
+  thumbnail?: string
+  directory?: string
+  tabularData?: FileTabularData
+  description?: string
+  checksum?: FileChecksum
+  embargo?: FileEmbargo
 }
diff --git a/src/files/domain/models/FilePreview.ts b/src/files/domain/models/FilePreview.ts
@@ -114,7 +114,7 @@ export interface FileDate {
 }
 
 export class FileEmbargo {
-  constructor(readonly dateAvailable: Date) {}
+  constructor(readonly dateAvailable: Date, readonly reason?: string) {}
 
   get isActive(): boolean {
     return this.dateAvailable > new Date()

diff --git a/src/files/infrastructure/FileJSDataverseRepository.ts b/src/files/infrastructure/FileJSDataverseRepository.ts
@@ -21,12 +21,12 @@ import { DatasetVersion, DatasetVersionNumber } from '../../dataset/domain/model
 import { File } from '../domain/models/File'
 import { FileMother } from '../../../tests/component/files/domain/models/FileMother'
 import { FilePaginationInfo } from '../domain/models/FilePaginationInfo'
+import { BASE_URL } from '../../config'
 
 const includeDeaccessioned = true
 
 export class FileJSDataverseRepository implements FileRepository {
-  static readonly DATAVERSE_BACKEND_URL =
-    (import.meta.env.VITE_DATAVERSE_BACKEND_URL as string) ?? ''
+  static readonly DATAVERSE_BACKEND_URL = BASE_URL
 
   getAllByDatasetPersistentId(
     datasetPersistentId: string,

diff --git a/...tions/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.module.scss b/...tions/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.module.scss
@@ -30,7 +30,3 @@ display: flex;
   color: $dv-text-color;
   font-size: $dv-font-size-sm;
 }
-
-.labels-container >*{
-  margin-right: 0.5em;;
-}
diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.tsx b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.tsx
@@ -5,12 +5,12 @@ import { FileTitle } from './file-info-data/FileTitle'
 import { FileDirectory } from './file-info-data/FileDirectory'
 import { FileType } from './file-info-data/FileType'
 import { FileDate } from './file-info-data/FileDate'
-import { FileEmbargoDate } from './file-info-data/FileEmbargoDate'
+import { FileEmbargoDate } from '../../../../../file/file-embargo/FileEmbargoDate'
 import { FileDownloads } from './file-info-data/FileDownloads'
 import { FileChecksum } from './file-info-data/FileChecksum'
 import { FileTabularData } from './file-info-data/FileTabularData'
 import { FileDescription } from './file-info-data/FileDescription'
-import { FileLabels } from './file-info-data/FileLabels'
+import { FileLabels } from '../../../../../file/file-labels/FileLabels'
 
 export function FileInfoCell({ file }: { file: FilePreview }) {
   return (

diff --git a/...e-thumbnail/FileThumbnailPreviewImage.tsx → ...-data/file-thumbnail/FilePreviewImage.tsx b/...e-thumbnail/FileThumbnailPreviewImage.tsx → ...-data/file-thumbnail/FilePreviewImage.tsx
@@ -1,12 +1,13 @@
 import styles from './FileThumbnail.module.scss'
 import { Tooltip } from '@iqss/dataverse-design-system'
+import { FileImage } from '../../../../../../../file/file-preview/FileImage'
 
-interface FileThumbnailPreviewImageProps {
+interface FilePreviewImageProps {
   thumbnail: string
   name: string
 }
 
-export function FileThumbnailPreviewImage({ thumbnail, name }: FileThumbnailPreviewImageProps) {
+export function FilePreviewImage({ thumbnail, name }: FilePreviewImageProps) {
   return (
     <Tooltip
       overlay={
@@ -16,7 +17,7 @@ export function FileThumbnailPreviewImage({ thumbnail, name }: FileThumbnailPrev
       }
       placement="top"
       maxWidth={430}>
-      <img className={styles['preview-image']} src={thumbnail} alt={name} />
+      <FileImage thumbnail={thumbnail} name={name} maxHeight={64} maxWidth={64} />
     </Tooltip>
   )
 }
diff --git a/...es-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.module.scss b/...es-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.module.scss
@@ -1,6 +1,3 @@
-@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module";
-@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
-
 %container {
   position: relative;
   display: inline-block;
@@ -17,16 +14,6 @@
   height: 80px;
 }
 
-.preview-image {
-  max-width: 64px;
-  max-height: 64px;
-}
-
-.icon {
-  color: $dv-subtext-color;
-  font-size: 64px;
-}
-
 .tooltip  {
   display: table-cell;
   width: 430px;

diff --git a/...iles/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.tsx b/...iles/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.tsx
@@ -1,5 +1,5 @@
-import { FileThumbnailIcon } from './FileThumbnailIcon'
-import { FileThumbnailPreviewImage } from './FileThumbnailPreviewImage'
+import { FileIcon } from '../../../../../../../file/file-preview/FileIcon'
+import { FilePreviewImage } from './FilePreviewImage'
 import { FilePreview } from '../../../../../../../../files/domain/models/FilePreview'
 import { FileAccessRestrictedIcon } from '../../../../../../../file/file-access/FileAccessRestrictedIcon'
 import styles from './FileThumbnail.module.scss'
@@ -20,9 +20,9 @@ export function FileThumbnail({ file }: FileThumbnailProps) {
           : styles['container-icon']
       }`}>
       {file.thumbnail && sessionUserHasFileDownloadPermission ? (
-        <FileThumbnailPreviewImage thumbnail={file.thumbnail} name={file.name} />
+        <FilePreviewImage thumbnail={file.thumbnail} name={file.name} />
       ) : (
-        <FileThumbnailIcon type={file.type} />
+        <FileIcon type={file.type} />
       )}
       <div className={styles['restricted-icon']}>
         <FileAccessRestrictedIcon

diff --git a/src/sections/file/File.module.scss b/src/sections/file/File.module.scss
@@ -5,6 +5,10 @@
   margin: 0.5em 0;
 }
 
+.row {
+  margin: 12px 0;
+}
+
 .subtext {
   margin-bottom: 10px;
   color: $dv-subtext-color;
@@ -14,6 +18,10 @@
   margin: 0.5rem 0;
 }
 
+.tab-container {
+  padding: 1em 0;
+}
+
 .separation-line {
   margin: 1em 0;
   border-bottom: 1px solid #dee2e6;

diff --git a/src/sections/file/File.tsx b/src/sections/file/File.tsx
@@ -11,6 +11,7 @@ import { DatasetCitation } from '../dataset/dataset-citation/DatasetCitation'
 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'
 
 interface FileProps {
   repository: FileRepository
@@ -63,7 +64,9 @@ export function File({ repository, id }: FileProps) {
             </Row>
             <Tabs defaultActiveKey="metadata">
               <Tabs.Tab eventKey="metadata" title={t('tabs.metadata')}>
-                <span></span>
+                <div className={styles['tab-container']}>
+                  <FileMetadata file={file} />
+                </div>
               </Tabs.Tab>
             </Tabs>
             <div className={styles['separation-line']}></div>

diff --git a/src/sections/file/FileSkeleton.tsx b/src/sections/file/FileSkeleton.tsx
@@ -1,6 +1,6 @@
 import styles from './File.module.scss'
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
-import { Col, Row, Tabs } from '@iqss/dataverse-design-system'
+import { Accordion, Col, Row, Tabs } from '@iqss/dataverse-design-system'
 import { useTranslation } from 'react-i18next'
 
 export function FileSkeleton() {
@@ -27,8 +27,38 @@ export function FileSkeleton() {
             </Col>
           </Row>
           <Tabs defaultActiveKey="metadata">
-            <Tabs.Tab eventKey="metadata" title="Metadata">
-              <></>
+            <Tabs.Tab eventKey="metadata" title={t('tabs.metadata')}>
+              <div className={styles['tab-container']}>
+                <Accordion defaultActiveKey="0">
+                  <Accordion.Item eventKey="0">
+                    <Accordion.Header>{t('metadata.title')}</Accordion.Header>
+                    <Accordion.Body>
+                      <Row className={styles.row}>
+                        <Col sm={3}>
+                          <strong>
+                            <Skeleton height="24px" />
+                          </strong>
+                        </Col>
+                        <Col>
+                          <Skeleton height="400px" width="400px" />
+                        </Col>
+                      </Row>
+                      {Array.from({ length: 25 }, (_, index) => (
+                        <Row key={index} className={styles.row}>
+                          <Col sm={3}>
+                            <strong>
+                              <Skeleton height="24px" />
+                            </strong>
+                          </Col>
+                          <Col>
+                            <Skeleton height="24px" />
+                          </Col>
+                        </Row>
+                      ))}
+                    </Accordion.Body>
+                  </Accordion.Item>
+                </Accordion>
+              </div>
             </Tabs.Tab>
           </Tabs>
           <div className={styles['separation-line']}></div>

diff --git a/...o-cell/file-info-data/FileEmbargoDate.tsx → ...ons/file/file-embargo/FileEmbargoDate.tsx b/...o-cell/file-info-data/FileEmbargoDate.tsx → ...ons/file/file-embargo/FileEmbargoDate.tsx
@@ -1,16 +1,18 @@
-import {
-  FileEmbargo,
-  FilePublishingStatus
-} from '../../../../../../../files/domain/models/FilePreview'
+import { FileEmbargo, FilePublishingStatus } from '../../../files/domain/models/FilePreview'
 import { useTranslation } from 'react-i18next'
-import { DateHelper } from '../../../../../../../shared/domain/helpers/DateHelper'
+import { DateHelper } from '../../../shared/domain/helpers/DateHelper'
 
 interface FileEmbargoDateProps {
   embargo: FileEmbargo | undefined
   publishingStatus: FilePublishingStatus
+  format?: 'YYYY-MM-DD' | 'short'
 }
 
-export function FileEmbargoDate({ embargo, publishingStatus }: FileEmbargoDateProps) {
+export function FileEmbargoDate({
+  embargo,
+  publishingStatus,
+  format = 'short'
+}: FileEmbargoDateProps) {
   const { t } = useTranslation('files')
 
   if (!embargo) {
@@ -21,7 +23,9 @@ export function FileEmbargoDate({ embargo, publishingStatus }: FileEmbargoDatePr
     <div>
       <span>
         {t(embargoTypeOfDate(embargo.isActive, publishingStatus))}{' '}
-        {DateHelper.toDisplayFormat(embargo.dateAvailable)}
+        {format === 'YYYY-MM-DD'
+          ? DateHelper.toDisplayFormatYYYYMMDD(embargo.dateAvailable)
+          : DateHelper.toDisplayFormat(embargo.dateAvailable)}
       </span>
     </div>
   )

diff --git a/src/sections/file/file-labels/FileLabels.module.scss b/src/sections/file/file-labels/FileLabels.module.scss
@@ -0,0 +1,3 @@
+.container > * {
+  margin-right: 0.5em;
+}
diff --git a/...e-info-cell/file-info-data/FileLabels.tsx → src/sections/file/file-labels/FileLabels.tsx b/...e-info-cell/file-info-data/FileLabels.tsx → src/sections/file/file-labels/FileLabels.tsx
@@ -1,6 +1,6 @@
-import { FileLabel, FileLabelType } from '../../../../../../../files/domain/models/FilePreview'
+import { FileLabel, FileLabelType } from '../../../files/domain/models/FilePreview'
 import { Badge } from '@iqss/dataverse-design-system'
-import styles from '../FileInfoCell.module.scss'
+import styles from './FileLabels.module.scss'
 
 const VARIANT_BY_LABEL_TYPE: Record<FileLabelType, 'secondary' | 'info'> = {
   [FileLabelType.CATEGORY]: 'secondary',
@@ -9,7 +9,7 @@ const VARIANT_BY_LABEL_TYPE: Record<FileLabelType, 'secondary' | 'info'> = {
 
 export function FileLabels({ labels }: { labels: FileLabel[] }) {
   return (
-    <div className={styles['labels-container']}>
+    <div className={styles.container}>
       {labels.map((label, index) => (
         <Badge key={`${label.value}-${index}`} variant={VARIANT_BY_LABEL_TYPE[label.type]}>
           {label.value}

diff --git a/src/sections/file/file-metadata/FileMetadata.module.scss b/src/sections/file/file-metadata/FileMetadata.module.scss
@@ -0,0 +1,17 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+.row {
+    margin: 12px 0;
+}
+
+.help-text {
+    color: $dv-subtext-color;
+}
+
+.code {
+    background-color: #F0F0F0;
+}
+
+.preview > span {
+    font-size: 16.7em;
+}