feat(DatasetThumbnail): add dataset thumbnail to the citation block

IQSS · Oct 24, 2023 · bc54d36 · bc54d36
1 parent 35c1573
commit bc54d36
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 16 deletions.
diff --git a/src/dataset/domain/models/Dataset.ts b/src/dataset/domain/models/Dataset.ts
@@ -234,7 +234,8 @@ export class Dataset {
     public readonly labels: DatasetLabel[],
     public readonly summaryFields: DatasetMetadataBlock[],
     public readonly license: DatasetLicense,
-    public readonly metadataBlocks: DatasetMetadataBlocks
+    public readonly metadataBlocks: DatasetMetadataBlocks,
+    public readonly thumbnail?: string
   ) {}
 
   public getTitle(): string {
@@ -250,7 +251,8 @@ export class Dataset {
       public readonly citation: string,
       public readonly summaryFields: DatasetMetadataBlock[],
       public readonly license: DatasetLicense = defaultLicense,
-      public readonly metadataBlocks: DatasetMetadataBlocks
+      public readonly metadataBlocks: DatasetMetadataBlocks,
+      public readonly thumbnail?: string
     ) {
       this.withLabels()
     }
@@ -308,7 +310,8 @@ export class Dataset {
         this.labels,
         this.summaryFields,
         this.license,
-        this.metadataBlocks
+        this.metadataBlocks,
+        this.thumbnail
       )
     }
   }

diff --git a/src/sections/dataset/Dataset.tsx b/src/sections/dataset/Dataset.tsx
@@ -45,7 +45,12 @@ export function Dataset({ datasetRepository, fileRepository, searchParams }: Dat
           <div className={styles.container}>
             <Row>
               <Col sm={9}>
-                <DatasetCitation citation={dataset.citation} version={dataset.version} />
+                <DatasetCitation
+                  title={dataset.getTitle()}
+                  thumbnail={dataset.thumbnail}
+                  citation={dataset.citation}
+                  version={dataset.version}
+                />
               </Col>
             </Row>
             <Row>

diff --git a/src/sections/dataset/dataset-citation/CitationThumbnail.tsx b/src/sections/dataset/dataset-citation/CitationThumbnail.tsx
@@ -0,0 +1,21 @@
+import { DatasetPublishingStatus } from '../../../dataset/domain/models/Dataset'
+import styles from './DatasetCitation.module.scss'
+import { Icon, IconName } from '@iqss/dataverse-design-system'
+
+interface CitationThumbnailProps {
+  thumbnail?: string
+  title: string
+  publishingStatus: DatasetPublishingStatus
+}
+
+export function CitationThumbnail({ thumbnail, title, publishingStatus }: CitationThumbnailProps) {
+  if (thumbnail && publishingStatus !== DatasetPublishingStatus.DEACCESSIONED) {
+    return <img className={styles['preview-image']} src={thumbnail} alt={title} />
+  }
+
+  return (
+    <div className={styles.icon}>
+      <Icon name={IconName.DATASET} />
+    </div>
+  )
+}
diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss
@@ -4,7 +4,7 @@
     margin: 0.5rem 0;
     padding: 10px;
     border: 1px solid $dv-info-border-color;
-
+min-height: 150px;
 }
 
 .citation {
@@ -23,6 +23,13 @@
     line-height: 1.1;
 }
 
+.preview-image {
+    width: 100%;
+    height: auto;
+    max-width: 140px;
+    max-height: 140px;
+}
+
 .row {
     margin-right: -15px;
     margin-left: -15px;

diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.tsx b/src/sections/dataset/dataset-citation/DatasetCitation.tsx
@@ -1,15 +1,18 @@
-import { Col, IconName, Icon, QuestionMarkTooltip, Row } from '@iqss/dataverse-design-system'
+import { Col, QuestionMarkTooltip, 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'
 
 interface DatasetCitationProps {
+  thumbnail?: string
+  title: string
   citation: string
   version: DatasetVersion
 }
 
-export function DatasetCitation({ citation, version }: DatasetCitationProps) {
+export function DatasetCitation({ thumbnail, title, citation, version }: DatasetCitationProps) {
   const { t } = useTranslation('dataset')
   return (
     <>
@@ -20,10 +23,12 @@ export function DatasetCitation({ citation, version }: DatasetCitationProps) {
             : styles.container
         }>
         <Row className={styles.row}>
-          <Col sm={3}>
-            <div className={styles.icon}>
-              <Icon name={IconName.DATASET} />
-            </div>
+          <Col sm={2}>
+            <CitationThumbnail
+              thumbnail={thumbnail}
+              title={title}
+              publishingStatus={version.publishingStatus}
+            />
           </Col>
           <Col>
             <Row>
@@ -48,7 +53,7 @@ export function DatasetCitation({ citation, version }: DatasetCitationProps) {
   )
 }
 
-function CitationDescription({ citation, version }: DatasetCitationProps) {
+function CitationDescription({ citation, version }: { citation: string; version: DatasetVersion }) {
   const citationAsReactElement = parse(citation)
 
   return (

diff --git a/tests/component/dataset/domain/models/DatasetMother.ts b/tests/component/dataset/domain/models/DatasetMother.ts
@@ -107,6 +107,7 @@ export class DatasetMother {
           }
         }
       ] as DatasetMetadataBlocks,
+      thumbnail: faker.image.imageUrl(),
       ...props
     }
 
@@ -116,7 +117,8 @@ export class DatasetMother {
       dataset.citation,
       dataset.summaryFields,
       dataset.license,
-      dataset.metadataBlocks
+      dataset.metadataBlocks,
+      dataset.thumbnail
     ).build()
   }
 

diff --git a/tests/component/sections/dataset/dataset-citation/CitationThumbnail.spec.tsx b/tests/component/sections/dataset/dataset-citation/CitationThumbnail.spec.tsx
@@ -0,0 +1,39 @@
+import { DatasetPublishingStatus } from '../../../../../src/dataset/domain/models/Dataset'
+import { CitationThumbnail } from '../../../../../src/sections/dataset/dataset-citation/CitationThumbnail'
+
+describe('CitationThumbnail', () => {
+  it('renders the dataset icon when there is no thumbnail', () => {
+    cy.customMount(
+      <CitationThumbnail
+        title="Dataset title"
+        publishingStatus={DatasetPublishingStatus.RELEASED}
+      />
+    )
+
+    cy.findByLabelText('icon-dataset').should('exist')
+  })
+
+  it('renders the dataset icon when the dataset is deaccessioned', () => {
+    cy.customMount(
+      <CitationThumbnail
+        title="Dataset title"
+        thumbnail="https://example.com/image.png"
+        publishingStatus={DatasetPublishingStatus.DEACCESSIONED}
+      />
+    )
+
+    cy.findByLabelText('icon-dataset').should('exist')
+  })
+
+  it('renders the dataset thumbnail when there is one and the dataset is not deaccessioned', () => {
+    cy.customMount(
+      <CitationThumbnail
+        thumbnail="https://example.com/image.png"
+        title="Dataset title"
+        publishingStatus={DatasetPublishingStatus.RELEASED}
+      />
+    )
+
+    cy.findByRole('img', { name: 'Dataset title' }).should('exist')
+  })
+})
diff --git a/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx b/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx
@@ -8,7 +8,13 @@ import {
 describe('DatasetCitation', () => {
   it('renders the DatasetCitation fields of released Dataset', () => {
     const dataset = DatasetMother.create()
-    cy.customMount(<DatasetCitation citation={dataset.citation} version={dataset.version} />)
+    cy.customMount(
+      <DatasetCitation
+        title="Dataset title"
+        citation={dataset.citation}
+        version={dataset.version}
+      />
+    )
 
     cy.findByText('Data Citation Standards.').should('exist')
     cy.findByText(/Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title"/).should('exist')
@@ -20,13 +26,20 @@ describe('DatasetCitation', () => {
       .and('eq', 'https://dataverse.org/best-practices/data-citation')
     cy.findByText(/RELEASED/).should('not.exist')
     cy.findByText(/V1/).should('exist')
+    cy.findByLabelText('icon-dataset').should('exist')
   })
 
   it('shows the draft tooltip when version is draft', () => {
     const dataset = DatasetMother.create({
       version: new DatasetVersion(1, DatasetPublishingStatus.DRAFT, 1, 0)
     })
-    cy.customMount(<DatasetCitation citation={dataset.citation} version={dataset.version} />)
+    cy.customMount(
+      <DatasetCitation
+        title="Dataset title"
+        citation={dataset.citation}
+        version={dataset.version}
+      />
+    )
 
     cy.findByRole('img', { name: 'tooltip icon' }).should('exist').trigger('mouseover')
     cy.findByText(
@@ -38,7 +51,13 @@ describe('DatasetCitation', () => {
     const dataset = DatasetMother.create({
       version: new DatasetVersion(1, DatasetPublishingStatus.DEACCESSIONED, 1, 0)
     })
-    cy.customMount(<DatasetCitation citation={dataset.citation} version={dataset.version} />)
+    cy.customMount(
+      <DatasetCitation
+        title="Dataset title"
+        citation={dataset.citation}
+        version={dataset.version}
+      />
+    )
 
     cy.findByRole('img', { name: 'tooltip icon' }).should('exist').trigger('mouseover')
     cy.findByText(