Merge pull request IQSS#202 from IQSS/feature/130-dataset-citation-th…

…umbnail

130 - Dataset citation thumbnail

.github/workflows/lint.yml

@@ -27,6 +27,9 @@ jobs:
         working-directory: packages/design-system
         run: npm run build
 
+      - name: Type check
+        run: tsc --noEmit
+
       - name: ESLint
         run: npm run lint:eslint
 

package.json

@@ -62,9 +62,11 @@
     "storybook": "concurrently 'storybook dev -p 6006 && open \"http://localhost:6006\"' 'cd packages/design-system && npm run storybook'",
     "build-storybook": "storybook build",
     "test:storybook": "test-storybook",
-    "test:storybook-all": "concurrently 'test-storybook' 'cd packages/design-system && npm run test:storybook'"
+    "test:storybook-all": "concurrently 'test-storybook' 'cd packages/design-system && npm run test:storybook'",
+    "typecheck": "tsc --noEmit"
   },
   "pre-commit": [
+    "typecheck",
     "lint:fix",
     "git:add",
     "test:unit",

src/dataset/domain/models/Dataset.ts

@@ -295,6 +295,7 @@ export class Dataset {
     public readonly hasValidTermsOfAccess: boolean,
     public readonly isValid: boolean,
     public readonly isReleased: boolean,
+    public readonly thumbnail?: string,
     public readonly privateUrl?: PrivateUrl
   ) {}
 
@@ -340,6 +341,7 @@ export class Dataset {
       public readonly hasValidTermsOfAccess: boolean,
       public readonly isValid: boolean,
       public readonly isReleased: boolean,
+      public readonly thumbnail?: string,
       public readonly privateUrl?: PrivateUrl
     ) {
       this.withLabels()
@@ -454,7 +456,9 @@ export class Dataset {
         this.locks,
         this.hasValidTermsOfAccess,
         this.isValid,
-        this.isReleased
+        this.isReleased,
+        this.thumbnail,
+        this.privateUrl
       )
     }
   }

src/dataset/infrastructure/mappers/JSDatasetMapper.ts

@@ -50,6 +50,7 @@ export class JSDatasetMapper {
       true, // TODO Connect with dataset isValid
       jsDataset.versionInfo.releaseTime !== undefined &&
         !isNaN(jsDataset.versionInfo.releaseTime.getTime()), // TODO Connect with dataset isReleased,
+      undefined, // TODO: get dataset thumbnail from Dataverse https://github.com/IQSS/dataverse-frontend/issues/203
       privateUrl
     ).build()
   }

src/sections/dataset/Dataset.tsx

@@ -53,7 +53,12 @@ export function Dataset({ fileRepository }: DatasetProps) {
           <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>
               <Col sm={3}>
                 <DatasetActionButtons dataset={dataset} />

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>
+  )
+}

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

@@ -1,10 +1,10 @@
 @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
 
 .container {
+min-height: 150px;
     margin: 0.5rem 0;
     padding: 10px;
     border: 1px solid $dv-info-border-color;
-
 }
 
 .citation {
@@ -23,6 +23,13 @@
     line-height: 1.1;
 }
 
+.preview-image {
+    width: 100%;
+    max-width: 140px;
+    height: auto;
+    max-height: 140px;
+}
+
 .row {
     margin-right: -15px;
     margin-left: -15px;

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 (

src/sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-action-buttons/file-options-menu/FileOptionsMenu.tsx

@@ -54,7 +54,7 @@ export function FileOptionsMenu({ file }: { file: File }) {
         <DropdownHeader>
           <PencilFill /> {t('actions.optionsMenu.headers.editOptions')}
         </DropdownHeader>
-        <EditFilesOptions files={[file]} />
+        <EditFilesOptions files={[file]} fileSelection={{ [file.id]: file }} />
       </DropdownButton>
     </Tooltip>
   )

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { WithI18next } from '../../WithI18next'
 import { DatasetCitation } from '../../../sections/dataset/dataset-citation/DatasetCitation'
 import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset'
+import { faker } from '@faker-js/faker'
 import { DatasetMother } from '../../../../tests/component/dataset/domain/models/DatasetMother'
 
 const meta: Meta<typeof DatasetCitation> = {
@@ -20,7 +21,30 @@ export const Default: Story = {
       <div>
         <br></br>
         <br></br>
-        <DatasetCitation citation={dataset.citation} version={dataset.version} />
+        <DatasetCitation
+          title={dataset.getTitle()}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
+      </div>
+    )
+  }
+}
+
+export const WithThumbnail: Story = {
+  render: () => {
+    const dataset = DatasetMother.createRealistic({ thumbnail: faker.image.imageUrl() })
+    console.log(dataset)
+    return (
+      <div>
+        <br></br>
+        <br></br>
+        <DatasetCitation
+          title={dataset.getTitle()}
+          thumbnail={dataset.thumbnail}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
       </div>
     )
   }
@@ -47,7 +71,11 @@ export const DraftVersion: Story = {
       <div>
         <br></br>
         <br></br>
-        <DatasetCitation citation={dataset.citation} version={dataset.version} />
+        <DatasetCitation
+          title={dataset.getTitle()}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
       </div>
     )
   }
@@ -76,7 +104,11 @@ export const Deaccessioned: Story = {
       <div>
         <br></br>
         <br></br>
-        <DatasetCitation citation={dataset.citation} version={dataset.version} />
+        <DatasetCitation
+          title={dataset.getTitle()}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
       </div>
     )
   }
@@ -96,7 +128,11 @@ export const Anonymized: Story = {
       <div>
         <br></br>
         <br></br>
-        <DatasetCitation citation={dataset.citation} version={dataset.version} />
+        <DatasetCitation
+          title={dataset.getTitle()}
+          citation={dataset.citation}
+          version={dataset.version}
+        />
       </div>
     )
   }

tests/component/dataset/domain/models/DatasetMother.ts

@@ -287,6 +287,8 @@ export class DatasetMother {
       hasValidTermsOfAccess: faker.datatype.boolean(),
       isValid: faker.datatype.boolean(),
       isReleased: faker.datatype.boolean(),
+      thumbnail: undefined,
+      privateUrl: undefined,
       ...props
     }
 
@@ -302,6 +304,7 @@ export class DatasetMother {
       dataset.hasValidTermsOfAccess,
       dataset.isValid,
       dataset.isReleased,
+      dataset.thumbnail,
       dataset.privateUrl
     ).build()
   }

tests/component/dataset/infrastructure/mappers/JSDatasetMapper.spec.ts

@@ -45,7 +45,8 @@ const jsDataset = {
     name: 'CC0 1.0',
     uri: 'http://creativecommons.org/publicdomain/zero/1.0',
     iconUri: 'https://licensebuttons.net/p/zero/1.0/88x31.png'
-  }
+  },
+  thumbnail: undefined
 }
 const citation =
   'Finch, Fiona, 2023, "Darwin\'s Finches", <a href="https://doi.org/10.5072/FK2/B4B2MJ" target="_blank">https://doi.org/10.5072/FK2/B4B2MJ</a>, Root, DRAFT VERSION'
@@ -119,6 +120,7 @@ const expectedDataset = {
   hasValidTermsOfAccess: true,
   isValid: true,
   isReleased: false,
+  thumbnail: undefined,
   privateUrl: undefined
 }
 const expectedDatasetAlternateVersion = {
@@ -201,7 +203,8 @@ const expectedDatasetAlternateVersion = {
     canManageFilesPermissions: true,
     canPublishDataset: true,
     canUpdateDataset: true
-  }
+  },
+  thumbnail: undefined
 }
 describe('JS Dataset Mapper', () => {
   it('maps jsDataset model to the domain Dataset model', () => {

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')
+  })
+})