344 - Display real collection data in the Collection Page

.env.example

@@ -1 +1,2 @@
-VITE_DATAVERSE_BACKEND_URL=http://localhost:8000
+VITE_DATAVERSE_BACKEND_URL=http://localhost:8000
+STORYBOOK_CHROMATIC_BUILD=false

README.md

@@ -273,6 +273,7 @@ We changed the citation block to be white with a colored border, to make the tex
 
 We have introduced an update to the breadcrumb navigation UI. Unlike in the original JSF application, where breadcrumbs
 did not reflect the user's current location within the site, our new SPA design now includes this feature in the breadcrumbs.
+Additionally, we have aligned with best practices by positioning all breadcrumbs at the top, before anything else in the UI.
 
 This update gives users a clear indication of their current position within the application's hierarchy.
 

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-pr132.dd49caf",
+    "@iqss/dataverse-client-javascript": "2.0.0-pr134.0d63f4b",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",

src/collection/domain/models/Collection.ts

@@ -0,0 +1,9 @@
+import { UpwardHierarchyNode } from '../../../shared/hierarchy/domain/models/UpwardHierarchyNode'
+
+export interface Collection {
+  id: string
+  name: string
+  hierarchy: UpwardHierarchyNode
+  description?: string
+  affiliation?: string
+}

src/collection/domain/repositories/CollectionRepository.ts

@@ -0,0 +1,5 @@
+import { Collection } from '../models/Collection'
+
+export interface CollectionRepository {
+  getById: (id: string) => Promise<Collection>
+}

src/collection/domain/useCases/getCollectionById.ts

@@ -0,0 +1,11 @@
+import { Collection } from '../models/Collection'
+import { CollectionRepository } from '../repositories/CollectionRepository'
+
+export async function getCollectionById(
+  collectionRepository: CollectionRepository,
+  id: string
+): Promise<Collection | undefined> {
+  return collectionRepository.getById(id).catch((error: Error) => {
+    throw new Error(error.message)
+  })
+}

src/collection/infrastructure/mappers/JSCollectionMapper.ts

@@ -0,0 +1,41 @@
+import {
+  Collection as JSCollection,
+  DvObjectOwnerNode as JSUpwardHierarchyNode
+} from '@iqss/dataverse-client-javascript'
+import { Collection } from '../../domain/models/Collection'
+import {
+  DvObjectType,
+  UpwardHierarchyNode
+} from '../../../shared/hierarchy/domain/models/UpwardHierarchyNode'
+import { JSUpwardHierarchyNodeMapper } from '../../../shared/hierarchy/infrastructure/mappers/JSUpwardHierarchyNodeMapper'
+
+export class JSCollectionMapper {
+  static toCollection(jsCollection: JSCollection): Collection {
+    return {
+      id: jsCollection.alias,
+      name: jsCollection.name,
+      description: jsCollection.description,
+      affiliation: jsCollection.affiliation,
+      hierarchy: JSCollectionMapper.toHierarchy(
+        jsCollection.name,
+        jsCollection.alias,
+        jsCollection.isPartOf
+      )
+    }
+  }
+
+  static toHierarchy(
+    name: string,
+    id: string,
+    jsUpwardHierarchyNode: JSUpwardHierarchyNode
+  ): UpwardHierarchyNode {
+    return new UpwardHierarchyNode(
+      name,
+      DvObjectType.COLLECTION,
+      id,
+      undefined,
+      undefined,
+      JSUpwardHierarchyNodeMapper.toUpwardHierarchyNode(jsUpwardHierarchyNode)
+    )
+  }
+}

src/collection/infrastructure/repositories/CollectionJSDataverseRepository.ts

@@ -0,0 +1,12 @@
+import { CollectionRepository } from '../../domain/repositories/CollectionRepository'
+import { Collection } from '../../domain/models/Collection'
+import { getCollection } from '@iqss/dataverse-client-javascript'
+import { JSCollectionMapper } from '../mappers/JSCollectionMapper'
+
+export class CollectionJSDataverseRepository implements CollectionRepository {
+  getById(id: string): Promise<Collection> {
+    return getCollection
+      .execute(id)
+      .then((jsCollection) => JSCollectionMapper.toCollection(jsCollection))
+  }
+}

src/sections/collection/Collection.module.scss

@@ -1,8 +1,17 @@
 @import 'node_modules/bootstrap/scss/functions';
 @import 'node_modules/bootstrap/scss/variables';
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .container {
   display: flex;
   justify-content: flex-end;
   margin-bottom: $spacer;
+}
+
+.header {
+  margin-bottom: $spacer;
+}
+
+.subtext {
+  color: $dv-subtext-color;
 }

src/sections/collection/Collection.tsx

@@ -1,70 +1,62 @@
-import { Row } from '@iqss/dataverse-design-system'
+import { Col, Row } from '@iqss/dataverse-design-system'
 import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
 import { DatasetsList } from './datasets-list/DatasetsList'
 import { DatasetsListWithInfiniteScroll } from './datasets-list/DatasetsListWithInfiniteScroll'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
-import {
-  DvObjectType,
-  UpwardHierarchyNode
-} from '../../shared/hierarchy/domain/models/UpwardHierarchyNode'
+
 import styles from './Collection.module.scss'
 import AddDataActionsButton from '../shared/add-data-actions/AddDataActionsButton'
 import { useSession } from '../session/SessionContext'
+import { useCollection } from './useCollection'
+import { CollectionRepository } from '../../collection/domain/repositories/CollectionRepository'
+import { PageNotFound } from '../page-not-found/PageNotFound'
+import { CollectionSkeleton } from './CollectionSkeleton'
+import { CollectionInfo } from './CollectionInfo'
 
 interface CollectionProps {
+  repository: CollectionRepository
   datasetRepository: DatasetRepository
   id: string
   page?: number
   infiniteScrollEnabled?: boolean
 }
-const rootNode = new UpwardHierarchyNode(
-  'Root',
-  DvObjectType.COLLECTION,
-  'root',
-  undefined,
-  undefined,
-  undefined
-)
 
 export function Collection({
-  datasetRepository,
+  repository,
   id,
+  datasetRepository,
   page,
   infiniteScrollEnabled = false
 }: CollectionProps) {
   const { user } = useSession()
+  const { collection, isLoading } = useCollection(repository, id)
+
+  if (!isLoading && !collection) {
+    return <PageNotFound />
+  }
 
   return (
     <Row>
-      <BreadcrumbsGenerator
-        hierarchy={
-          new UpwardHierarchyNode(
-            capitalizeFirstLetter(id),
-            DvObjectType.COLLECTION,
-            id,
-            undefined,
-            undefined,
-            id !== rootNode.id ? rootNode : undefined
-          )
-        }
-      />
-      <header>
-        <h1>{capitalizeFirstLetter(id)}</h1>
-      </header>
-      {user && (
-        <div className={styles.container}>
-          <AddDataActionsButton />
-        </div>
-      )}
-      {infiniteScrollEnabled ? (
-        <DatasetsListWithInfiniteScroll datasetRepository={datasetRepository} collectionId={id} />
-      ) : (
-        <DatasetsList datasetRepository={datasetRepository} page={page} collectionId={id} />
-      )}
+      <Col>
+        {!collection ? (
+          <CollectionSkeleton />
+        ) : (
+          <>
+            <BreadcrumbsGenerator hierarchy={collection.hierarchy} />
+            <CollectionInfo collection={collection} />
+            {user && (
+              <div className={styles.container}>
+                <AddDataActionsButton />
+              </div>
+            )}
+          </>
+        )}
+        {infiniteScrollEnabled ? (
+          <DatasetsListWithInfiniteScroll datasetRepository={datasetRepository} collectionId={id} />
+        ) : (
+          <DatasetsList datasetRepository={datasetRepository} page={page} collectionId={id} />
+        )}
+      </Col>
     </Row>
   )
 }
-
-function capitalizeFirstLetter(text: string): string {
-  return text.charAt(0).toUpperCase() + text.slice(1)
-}

src/sections/collection/CollectionFactory.tsx

@@ -2,9 +2,11 @@ import { ReactElement } from 'react'
 import { Collection } from './Collection'
 import { DatasetJSDataverseRepository } from '../../dataset/infrastructure/repositories/DatasetJSDataverseRepository'
 import { useSearchParams } from 'react-router-dom'
+import { CollectionJSDataverseRepository } from '../../collection/infrastructure/repositories/CollectionJSDataverseRepository'
 import { INFINITE_SCROLL_ENABLED } from './config'
 
 const datasetRepository = new DatasetJSDataverseRepository()
+const repository = new CollectionJSDataverseRepository()
 export class CollectionFactory {
   static create(): ReactElement {
     return <CollectionWithSearchParams />
@@ -18,6 +20,7 @@ function CollectionWithSearchParams() {
 
   return (
     <Collection
+      repository={repository}
       datasetRepository={datasetRepository}
       page={page}
       id={id}