Merge branch 'feature/249-boilerplate-file-page' of https://github.co…

…m/IQSS/dataverse-frontend into feature/261-file-citation-ui

public/locales/en/file.json

@@ -4,5 +4,23 @@
   },
   "subtext": "This file is part of \"{{datasetTitle}}\".",
   "datasetCitationTitle": "Dataset Citation",
-  "fileCitationTitle": "File Citation"
+  "fileCitationTitle": "File Citation",
+  "fileAccess": {
+    "title": "File Access",
+    "restricted": {
+      "name": "Restricted",
+      "icon": "Restricted File Icon"
+    },
+    "restrictedWithAccess": {
+      "name": "Restricted with Access Granted",
+      "icon": "Restricted with access Icon"
+    },
+    "embargoed": {
+      "name": "Embargoed"
+    },
+    "public": {
+      "name": "Public",
+      "icon": "Public File Icon"
+    }
+  }
 }

public/locales/en/files.json

@@ -24,24 +24,6 @@
       "published": "Published",
       "deposited": "Deposited"
     },
-    "fileAccess": {
-      "title": "File Access",
-      "restricted": {
-        "name": "Restricted",
-        "icon": "Restricted File Icon"
-      },
-      "restrictedWithAccess": {
-        "name": "Restricted with Access Granted",
-        "icon": "Restricted with access Icon"
-      },
-      "embargoed": {
-        "name": "Embargoed"
-      },
-      "public": {
-        "name": "Public",
-        "icon": "Public File Icon"
-      }
-    },
     "copyToClipboard": {
       "clickToCopy": "Click to copy",
       "correctlyCopiedIcon": "Correctly copied to clipboard icon",

public/locales/en/pageNotFound.json

@@ -1,4 +1,4 @@
 {
   "heading": "Page Not Found",
-  "message": "The page you are looking for was not found. If you believe this is an error, please contact Demo Dataverse Support for assistance."
+  "message": "The page you are looking for was not found."
 }

src/dataset/domain/models/DatasetPreview.ts

@@ -1,13 +1,9 @@
-import { DatasetLabel, DatasetVersion } from './Dataset'
+import { DatasetVersion } from './Dataset'
 
 export class DatasetPreview {
   constructor(
     public persistentId: string,
-    public title: string,
     public version: DatasetVersion,
-    public citation: string,
-    public labels: DatasetLabel[],
-    public isDeaccessioned: boolean,
     public releaseOrCreateDate: Date,
     public description: string,
     public thumbnail?: string

src/files/domain/models/File.ts

@@ -1,7 +1,13 @@
 import { DatasetVersion } from '../../../dataset/domain/models/Dataset'
 
+export interface FilePermissions {
+  canDownloadFile: boolean
+}
+
 export interface File {
   name: string
   datasetVersion: DatasetVersion
   citation: string
+  restricted: boolean
+  permissions: FilePermissions
 }

src/sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-action-buttons/access-file-menu/AccessStatus.tsx

@@ -35,25 +35,16 @@ function AccessStatusIcon({
   sessionUserHasFileDownloadPermission: boolean
   restricted: boolean
 }) {
-  const { t } = useTranslation('files')
+  const { t } = useTranslation('file')
   if (restricted) {
     if (sessionUserHasFileDownloadPermission) {
       return (
-        <UnlockFill
-          title={t('table.fileAccess.restrictedWithAccess.icon')}
-          className={styles.success}
-        />
+        <UnlockFill title={t('fileAccess.restrictedWithAccess.icon')} className={styles.success} />
       )
     }
-    return (
-      <LockFill
-        role="img"
-        title={t('table.fileAccess.restricted.icon')}
-        className={styles.danger}
-      />
-    )
+    return <LockFill role="img" title={t('fileAccess.restricted.icon')} className={styles.danger} />
   }
-  return <Globe role="img" title={t('table.fileAccess.public.icon')} className={styles.success} />
+  return <Globe role="img" title={t('fileAccess.public.icon')} className={styles.success} />
 }
 
 function AccessStatusText({
@@ -63,7 +54,7 @@ function AccessStatusText({
   file: FilePreview
   sessionUserHasFileDownloadPermission: boolean
 }) {
-  const { t } = useTranslation('files')
+  const { t } = useTranslation('file')
   const getAccessStatus = () => {
     if (file.isActivelyEmbargoed) {
       return 'embargoed'
@@ -89,7 +80,7 @@ function AccessStatusText({
             : 'danger'
         ]
       }>
-      {t(`table.fileAccess.${getAccessStatus()}.name`)}
+      {t(`fileAccess.${getAccessStatus()}.name`)}
     </span>
   )
 }

src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.module.scss

@@ -38,22 +38,8 @@
   max-width: 390px;
 }
 
-%restricted-icon {
+.restricted-icon {
   position: absolute;
   right: -14px;
   bottom: -5px;
-  font-size: 20px;
-}
-
-.restricted-icon-restricted {
-    @extend %restricted-icon;
-
-    color: $dv-danger-color;
-}
-
-.restricted-icon-restrictedWithAccess {
-    @extend %restricted-icon;
-
-  right: -16px;
-    color: $dv-success-color;
 }

src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.tsx

@@ -1,7 +1,7 @@
 import { FileThumbnailIcon } from './FileThumbnailIcon'
 import { FileThumbnailPreviewImage } from './FileThumbnailPreviewImage'
 import { FilePreview } from '../../../../../../../../files/domain/models/FilePreview'
-import { FileThumbnailRestrictedIcon } from './FileThumbnailRestrictedIcon'
+import { FileAccessRestrictedIcon } from '../../../../../../../file/file-access/FileAccessRestrictedIcon'
 import styles from './FileThumbnail.module.scss'
 import { useFileDownloadPermission } from '../../../../../../../file/file-permissions/useFileDownloadPermission'
 
@@ -24,7 +24,12 @@ export function FileThumbnail({ file }: FileThumbnailProps) {
       ) : (
         <FileThumbnailIcon type={file.type} />
       )}
-      <FileThumbnailRestrictedIcon file={file} />
+      <div className={styles['restricted-icon']}>
+        <FileAccessRestrictedIcon
+          restricted={file.access.restricted}
+          canDownloadFile={sessionUserHasFileDownloadPermission}
+        />
+      </div>
     </div>
   )
 }

src/sections/file/File.module.scss

@@ -6,7 +6,8 @@
 }
 
 .subtext {
- color: $dv-subtext-color;
+  margin-bottom: 10px;
+  color: $dv-subtext-color;
 }
 
 .container {
@@ -20,4 +21,13 @@
 
 .citation-title {
   font-weight: $dv-font-weight-bold;
+}
+
+.labels {
+  display: flex;
+  align-items: center;
+}
+
+.restricted-icon {
+  margin-right: 6px;
 }

src/sections/file/File.tsx

@@ -9,6 +9,8 @@ import { useLoading } from '../loading/LoadingContext'
 import { FileSkeleton } from './FileSkeleton'
 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'
 
 interface FileProps {
   repository: FileRepository
@@ -35,9 +37,20 @@ export function File({ repository, id }: FileProps) {
         <article>
           <header className={styles.header}>
             <h1>{file.name}</h1>
-            <span className={styles.subtext}>
+            <p className={styles.subtext}>
               {t('subtext', { datasetTitle: file.datasetVersion.title })}
-            </span>
+            </p>
+            <div className={styles.labels}>
+              {file.restricted && (
+                <div className={styles['restricted-icon']}>
+                  <FileAccessRestrictedIcon
+                    restricted={file.restricted}
+                    canDownloadFile={file.permissions.canDownloadFile}
+                  />
+                </div>
+              )}
+              <DatasetLabels labels={file.datasetVersion.labels} />
+            </div>
           </header>
           <div className={styles.container}>
             <Row>

src/sections/file/FileSkeleton.tsx

@@ -12,7 +12,10 @@ export function FileSkeleton() {
           <h1>
             <Skeleton width="15%" />
           </h1>
-          <Skeleton width="20%" />
+          <p className={styles.subtext}>
+            <Skeleton width="20%" />
+          </p>
+          <Skeleton width="10%" />
         </header>
         <div className={styles.container}>
           <Row>

src/sections/file/file-access/FileAccessInfoIcon.module.scss

@@ -0,0 +1,18 @@
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+
+%restricted-icon {
+  font-size: 20px;
+}
+
+.restricted-icon-restricted {
+  @extend %restricted-icon;
+
+  color: $dv-danger-color;
+}
+
+.restricted-icon-restrictedWithAccess {
+  @extend %restricted-icon;
+
+  right: -16px;
+  color: $dv-success-color;
+}

src/sections/file/file-access/FileAccessRestrictedIcon.tsx

@@ -0,0 +1,38 @@
+import { LockFill, UnlockFill } from 'react-bootstrap-icons'
+import styles from './FileAccessInfoIcon.module.scss'
+import { useTranslation } from 'react-i18next'
+import { Tooltip } from '@iqss/dataverse-design-system'
+
+interface FileAccessInfoIconProps {
+  restricted: boolean
+  canDownloadFile: boolean
+}
+export function FileAccessRestrictedIcon({ restricted, canDownloadFile }: FileAccessInfoIconProps) {
+  const { t } = useTranslation('file')
+
+  if (!restricted) {
+    return <></>
+  }
+
+  if (canDownloadFile) {
+    return (
+      <span className={styles['restricted-icon-restrictedWithAccess']}>
+        <Tooltip
+          overlay={`${t('fileAccess.title')}: ${t('fileAccess.restrictedWithAccess.name')}`}
+          placement="top">
+          <UnlockFill role="img" title={t('fileAccess.restrictedWithAccess.icon')} />
+        </Tooltip>
+      </span>
+    )
+  }
+
+  return (
+    <span className={styles['restricted-icon-restricted']}>
+      <Tooltip
+        overlay={`${t('fileAccess.title')}: ${t('fileAccess.restricted.name')}`}
+        placement="top">
+        <LockFill role="img" title={t('fileAccess.restricted.icon')} />
+      </Tooltip>
+    </span>
+  )
+}

src/sections/home/datasets-list/dataset-card/DatasetCard.tsx

@@ -11,10 +11,18 @@ interface DatasetCardProps {
 export function DatasetCard({ dataset }: DatasetCardProps) {
   return (
     <article className={styles.container}>
-      <DatasetCardHeader dataset={dataset} />
+      <DatasetCardHeader persistentId={dataset.persistentId} version={dataset.version} />
       <div className={styles.info}>
-        <DatasetCardThumbnail dataset={dataset} />
-        <DatasetCardInfo dataset={dataset} />
+        <DatasetCardThumbnail
+          persistentId={dataset.persistentId}
+          version={dataset.version}
+          thumbnail={dataset.thumbnail}
+        />
+        <DatasetCardInfo
+          version={dataset.version}
+          releaseOrCreateDate={dataset.releaseOrCreateDate}
+          abbreviatedDescription={dataset.abbreviatedDescription}
+        />
       </div>
     </article>
   )

src/sections/home/datasets-list/dataset-card/DatasetCardHeader.tsx

@@ -2,20 +2,21 @@ import styles from './DatasetCard.module.scss'
 import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
 import { Route } from '../../../Route.enum'
 import { DatasetLabels } from '../../../dataset/dataset-labels/DatasetLabels'
-import { DatasetPreview } from '../../../../dataset/domain/models/DatasetPreview'
 import { DatasetIcon } from '../../../dataset/dataset-icon/DatasetIcon'
+import { DatasetVersion } from '../../../../dataset/domain/models/Dataset'
 
 interface DatasetCardHeaderProps {
-  dataset: DatasetPreview
+  persistentId: string
+  version: DatasetVersion
 }
-export function DatasetCardHeader({ dataset }: DatasetCardHeaderProps) {
+export function DatasetCardHeader({ persistentId, version }: DatasetCardHeaderProps) {
   return (
     <div className={styles.header}>
       <div className={styles.title}>
-        <LinkToPage page={Route.DATASETS} searchParams={{ persistentId: dataset.persistentId }}>
-          {dataset.title}
+        <LinkToPage page={Route.DATASETS} searchParams={{ persistentId: persistentId }}>
+          {version.title}
         </LinkToPage>
-        <DatasetLabels labels={dataset.labels} />
+        <DatasetLabels labels={version.labels} />
       </div>
       <div className={styles.icon}>
         <DatasetIcon />