Merge branch 'develop' of https://github.com/IQSS/dataverse-frontend …

…into feature/249-boilerplate-file-page

merged-coverage/lcov.info

@@ -7,7 +7,7 @@ DA:5,108
 BRDA:1,0,0,108
 BRDA:1,0,1,108
 end_of_record
-SF:src/sections/hello-dataverse/HelloDataverse.tsx
+SF:src/sections/hello-dataverse/Home.tsx
 DA:5,76
 DA:6,76
 DA:8,38

public/locales/en/files.json

@@ -8,9 +8,6 @@
       "clearSelection": "Clear selection."
     },
     "zipDownloadExceedsLimit": "The overall size of the files selected ({{selectionTotalSize}}) for download exceeds the zip limit of {{zipDownloadSizeLimit}}. Please unselect some files to continue.",
-    "pagination": {
-      "pageSize": "Files per page"
-    },
     "tabularData": {
       "name": "Tabular Data",
       "variables": "Variables",

public/locales/en/home.json

@@ -0,0 +1,7 @@
+{
+  "title": "Root",
+  "noDatasetsMessage": {
+    "authenticated": "This dataverse currently has no datasets. You can add to it by using the Add Data button on this page.",
+    "anonymous": "This dataverse currently has no datasets. Please <1>log in</1> to see if you are able to add to it."
+  }
+}

public/locales/en/pagination.json

@@ -0,0 +1,4 @@
+{
+  "results": "{{start}} to {{end}} of {{total}} {{item}}s",
+  "pageSize": "{{item}}s per page"
+}

src/Router.tsx

@@ -1,9 +1,9 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import { HelloDataverse } from './sections/hello-dataverse/HelloDataverse'
 import { Layout } from './sections/layout/Layout'
 import { Route } from './sections/Route.enum'
 import { DatasetFactory } from './sections/dataset/DatasetFactory'
 import { FileFactory } from './sections/file/FileFactory'
+import { HomeFactory } from './sections/home/HomeFactory'
 
 const router = createBrowserRouter(
   [
@@ -13,7 +13,7 @@ const router = createBrowserRouter(
       children: [
         {
           path: Route.HOME,
-          element: <HelloDataverse />
+          element: HomeFactory.create()
         },
         {
           path: Route.DATASETS,

src/dataset/domain/models/DatasetPaginationInfo.ts

@@ -0,0 +1,7 @@
+import { PaginationInfo } from '../../../shared/domain/models/PaginationInfo'
+
+export class DatasetPaginationInfo extends PaginationInfo<DatasetPaginationInfo> {
+  constructor(page = 1, pageSize = 10, totalItems = 0, itemName = 'Dataset') {
+    super(page, pageSize, totalItems, itemName)
+  }
+}

src/dataset/domain/models/DatasetPreview.ts

@@ -0,0 +1,22 @@
+import { DatasetLabel, 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
+  ) {}
+
+  get abbreviatedDescription(): string {
+    if (this.description.length > 280) {
+      return `${this.description.substring(0, 280)}...`
+    }
+    return this.description
+  }
+}

src/dataset/domain/models/TotalDatasetsCount.ts

@@ -0,0 +1 @@
+export type TotalDatasetsCount = number

src/dataset/domain/repositories/DatasetRepository.ts

@@ -1,6 +1,11 @@
 import { Dataset } from '../models/Dataset'
+import { TotalDatasetsCount } from '../models/TotalDatasetsCount'
+import { DatasetPaginationInfo } from '../models/DatasetPaginationInfo'
+import { DatasetPreview } from '../models/DatasetPreview'
 
 export interface DatasetRepository {
   getByPersistentId: (persistentId: string, version?: string) => Promise<Dataset | undefined>
   getByPrivateUrlToken: (privateUrlToken: string) => Promise<Dataset | undefined>
+  getAll: (paginationInfo: DatasetPaginationInfo) => Promise<DatasetPreview[]>
+  getTotalDatasetsCount: () => Promise<TotalDatasetsCount>
 }

src/dataset/domain/useCases/getDatasets.ts

@@ -0,0 +1,12 @@
+import { DatasetRepository } from '../repositories/DatasetRepository'
+import { DatasetPaginationInfo } from '../models/DatasetPaginationInfo'
+import { DatasetPreview } from '../models/DatasetPreview'
+
+export async function getDatasets(
+  datasetRepository: DatasetRepository,
+  paginationInfo: DatasetPaginationInfo
+): Promise<DatasetPreview[]> {
+  return datasetRepository.getAll(paginationInfo).catch((error: Error) => {
+    throw new Error(error.message)
+  })
+}

src/dataset/domain/useCases/getTotalDatasetsCount.ts

@@ -0,0 +1,10 @@
+import { DatasetRepository } from '../repositories/DatasetRepository'
+import { TotalDatasetsCount } from '../models/TotalDatasetsCount'
+
+export async function getTotalDatasetsCount(
+  datasetRepository: DatasetRepository
+): Promise<TotalDatasetsCount> {
+  return datasetRepository.getTotalDatasetsCount().catch((error: Error) => {
+    throw new Error(error.message)
+  })
+}

src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts

@@ -16,9 +16,32 @@ import {
   FileDownloadSizeMode
 } from '@iqss/dataverse-client-javascript'
 import { JSDatasetMapper } from '../mappers/JSDatasetMapper'
+import { TotalDatasetsCount } from '../../domain/models/TotalDatasetsCount'
+import { DatasetPaginationInfo } from '../../domain/models/DatasetPaginationInfo'
+import { DatasetPreview } from '../../domain/models/DatasetPreview'
+import { DatasetPreviewMother } from '../../../../tests/component/dataset/domain/models/DatasetPreviewMother'
 
 const includeDeaccessioned = true
 export class DatasetJSDataverseRepository implements DatasetRepository {
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  getAll(paginationInfo: DatasetPaginationInfo): Promise<DatasetPreview[]> {
+    // TODO - Implement using the js-dataverse-client
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(DatasetPreviewMother.createManyRealistic(10))
+      }, 1000)
+    })
+  }
+
+  getTotalDatasetsCount(): Promise<TotalDatasetsCount> {
+    // TODO - Implement using the js-dataverse-client
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(200)
+      }, 1000)
+    })
+  }
+
   getByPersistentId(
     persistentId: string,
     version?: string,

src/files/domain/models/FilePaginationInfo.ts

@@ -1,52 +1,7 @@
-export class FilePaginationInfo {
-  constructor(
-    public readonly page: number = 1,
-    public readonly pageSize: number = 10,
-    public readonly totalFiles: number = 0
-  ) {}
+import { PaginationInfo } from '../../../shared/domain/models/PaginationInfo'
 
-  withTotal(total: number): FilePaginationInfo {
-    return new FilePaginationInfo(this.page, this.pageSize, total)
-  }
-  goToPage(page: number): FilePaginationInfo {
-    return new FilePaginationInfo(page, this.pageSize, this.totalFiles)
-  }
-
-  goToPreviousPage(): FilePaginationInfo {
-    if (!this.previousPage) throw new Error('No previous page')
-    return this.goToPage(this.previousPage)
-  }
-
-  goToNextPage(): FilePaginationInfo {
-    if (!this.nextPage) throw new Error('No next page')
-    return this.goToPage(this.nextPage)
-  }
-
-  withPageSize(pageSize: number): FilePaginationInfo {
-    const getNewPage = (oldPageSize: number, newPageSize: number) => {
-      const newPage = Math.ceil(((this.page - 1) * oldPageSize + 1) / newPageSize)
-      return newPage > 0 ? newPage : 1
-    }
-    return new FilePaginationInfo(getNewPage(this.pageSize, pageSize), pageSize, this.totalFiles)
-  }
-
-  get totalPages(): number {
-    return Math.ceil(this.totalFiles / this.pageSize)
-  }
-
-  get hasPreviousPage(): boolean {
-    return this.page > 1
-  }
-
-  get hasNextPage(): boolean {
-    return this.page < this.totalPages
-  }
-
-  get previousPage(): number | undefined {
-    return this.hasPreviousPage ? this.page - 1 : undefined
-  }
-
-  get nextPage(): number | undefined {
-    return this.hasNextPage ? this.page + 1 : undefined
+export class FilePaginationInfo extends PaginationInfo<FilePaginationInfo> {
+  constructor(page = 1, pageSize = 10, totalItems = 0, itemName = 'File') {
+    super(page, pageSize, totalItems, itemName)
   }
 }

src/files/domain/repositories/FileRepository.ts

@@ -2,9 +2,9 @@ import { FilePreview, FileDownloadMode } from '../models/FilePreview'
 import { File } from '../models/File'
 import { FileCriteria } from '../models/FileCriteria'
 import { FilesCountInfo } from '../models/FilesCountInfo'
-import { FilePaginationInfo } from '../models/FilePaginationInfo'
 import { FileUserPermissions } from '../models/FileUserPermissions'
 import { DatasetVersion, DatasetVersionNumber } from '../../../dataset/domain/models/Dataset'
+import { FilePaginationInfo } from '../models/FilePaginationInfo'
 
 export interface FileRepository {
   getAllByDatasetPersistentId: (

src/files/domain/useCases/getFilesByDatasetPersistentId.ts

@@ -1,8 +1,8 @@
 import { FileRepository } from '../repositories/FileRepository'
 import { FilePreview } from '../models/FilePreview'
 import { FileCriteria } from '../models/FileCriteria'
-import { FilePaginationInfo } from '../models/FilePaginationInfo'
 import { DatasetVersion } from '../../../dataset/domain/models/Dataset'
+import { FilePaginationInfo } from '../models/FilePaginationInfo'
 
 export async function getFilesByDatasetPersistentId(
   fileRepository: FileRepository,

src/files/infrastructure/FileJSDataverseRepository.ts

@@ -1,7 +1,6 @@
 import { FileRepository } from '../domain/repositories/FileRepository'
 import { FilePreview, FileDownloadMode } from '../domain/models/FilePreview'
 import { FilesCountInfo } from '../domain/models/FilesCountInfo'
-import { FilePaginationInfo } from '../domain/models/FilePaginationInfo'
 import { FileUserPermissions } from '../domain/models/FileUserPermissions'
 import {
   File as JSFile,
@@ -21,6 +20,7 @@ import { JSFileMapper } from './mappers/JSFileMapper'
 import { DatasetVersion, DatasetVersionNumber } from '../../dataset/domain/models/Dataset'
 import { File } from '../domain/models/File'
 import { FileMother } from '../../../tests/component/files/domain/models/FileMother'
+import { FilePaginationInfo } from '../domain/models/FilePaginationInfo'
 
 const includeDeaccessioned = true
 

src/files/infrastructure/mappers/DomainFileMapper.ts

@@ -1,4 +1,3 @@
-import { FilePaginationInfo } from '../../domain/models/FilePaginationInfo'
 import {
   FileAccessOption,
   FileCriteria,
@@ -11,6 +10,7 @@ import {
   FileOrderCriteria as JSFileOrderCriteria
 } from '@iqss/dataverse-client-javascript'
 import { FileType } from '../../domain/models/FilePreview'
+import { FilePaginationInfo } from '../../domain/models/FilePaginationInfo'
 
 export class DomainFileMapper {
   static toJSPagination(paginationInfo: FilePaginationInfo): {

src/sections/dataset/dataset-citation/DatasetCitation.module.scss

@@ -17,20 +17,11 @@ min-height: 150px;
     border: 1px solid $dv-danger-color;
 }
 
-.icon {
-    color: #428BCA;
-    font-size: 7.5em;
-    line-height: 1.1;
-}
-
-.preview-image {
-    width: 100%;
-    max-width: 140px;
-    height: auto;
-    max-height: 140px;
-}
-
 .row {
     margin-right: -15px;
     margin-left: -15px;
+}
+
+.thumbnail {
+    font-size: 7.5em;
 }

src/sections/dataset/dataset-citation/DatasetCitation.tsx

@@ -1,9 +1,10 @@
-import { Col, QuestionMarkTooltip, Row } from '@iqss/dataverse-design-system'
+import { Col, Row } from '@iqss/dataverse-design-system'
 import styles from './DatasetCitation.module.scss'
 import { useTranslation } from 'react-i18next'
 import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset'
-import parse from 'html-react-parser'
-import { CitationThumbnail } from './CitationThumbnail'
+import { DatasetThumbnail } from '../dataset-thumbnail/DatasetThumbnail'
+import { CitationDescription } from '../../shared/citation/CitationDescription'
+import { DatasetCitationTooltip } from './DatasetCitationTooltip'
 
 interface DatasetCitationProps {
   thumbnail?: string
@@ -21,19 +22,19 @@ export function DatasetCitation({ thumbnail, version }: DatasetCitationProps) {
             : styles.container
         }>
         <Row className={styles.row}>
-          <Col sm={2}>
-            <CitationThumbnail
+          <Col sm={2} className={styles.thumbnail}>
+            <DatasetThumbnail
               thumbnail={thumbnail}
               title={version.title}
-              publishingStatus={version.publishingStatus}
+              isDeaccessioned={version.publishingStatus === DatasetPublishingStatus.DEACCESSIONED}
             />
           </Col>
           <Col>
             <Row>
-              <CitationDescription
-                citation={version.citation}
-                publishingStatus={version.publishingStatus}
-              />
+              <span className={styles.citation}>
+                <CitationDescription citation={version.citation} />
+                <DatasetCitationTooltip status={version.publishingStatus} />
+              </span>
             </Row>
             <Row>
               <div>
@@ -53,41 +54,3 @@ export function DatasetCitation({ thumbnail, version }: DatasetCitationProps) {
     </>
   )
 }
-
-function CitationDescription({
-  citation,
-  publishingStatus
-}: {
-  citation: string
-  publishingStatus: DatasetPublishingStatus
-}) {
-  const citationAsReactElement = parse(citation)
-
-  return (
-    <span className={styles.citation}>
-      {citationAsReactElement}
-      <CitationTooltip status={publishingStatus} />
-    </span>
-  )
-}
-
-interface CitationDatasetStatusProps {
-  status: DatasetPublishingStatus
-}
-
-function CitationTooltip({ status }: CitationDatasetStatusProps) {
-  const { t } = useTranslation('dataset')
-
-  if (status !== DatasetPublishingStatus.RELEASED) {
-    return (
-      <>
-        {' '}
-        <QuestionMarkTooltip
-          placement={'top'}
-          message={t(`citation.status.${status}.description`)}
-        />
-      </>
-    )
-  }
-  return <></>
-}