From bc54d3653f3235566169677097b1728fafdaf006 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 24 Oct 2023 10:43:30 +0200 Subject: [PATCH] feat(DatasetThumbnail): add dataset thumbnail to the citation block --- src/dataset/domain/models/Dataset.ts | 9 +++-- src/sections/dataset/Dataset.tsx | 7 +++- .../dataset-citation/CitationThumbnail.tsx | 21 ++++++++++ .../DatasetCitation.module.scss | 9 ++++- .../dataset-citation/DatasetCitation.tsx | 19 +++++---- .../dataset/domain/models/DatasetMother.ts | 4 +- .../CitationThumbnail.spec.tsx | 39 +++++++++++++++++++ .../dataset-citation/DatasetCitation.spec.tsx | 25 ++++++++++-- 8 files changed, 117 insertions(+), 16 deletions(-) create mode 100644 src/sections/dataset/dataset-citation/CitationThumbnail.tsx create mode 100644 tests/component/sections/dataset/dataset-citation/CitationThumbnail.spec.tsx diff --git a/src/dataset/domain/models/Dataset.ts b/src/dataset/domain/models/Dataset.ts index f42bc6819..ed9858473 100644 --- 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 index b03d76a55..eb71a1d59 100644 --- a/src/sections/dataset/Dataset.tsx +++ b/src/sections/dataset/Dataset.tsx @@ -45,7 +45,12 @@ export function Dataset({ datasetRepository, fileRepository, searchParams }: Dat
- + diff --git a/src/sections/dataset/dataset-citation/CitationThumbnail.tsx b/src/sections/dataset/dataset-citation/CitationThumbnail.tsx new file mode 100644 index 000000000..57cda7c95 --- /dev/null +++ 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 {title} + } + + return ( +
+ +
+ ) +} diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss index 1ad81547f..eafde9779 100644 --- 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 index cec09ecd0..9b523c7c7 100644 --- 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 }> - -
- -
+ + @@ -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 index 4bb050208..51eb2223e 100644 --- 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 new file mode 100644 index 000000000..c73ab2359 --- /dev/null +++ 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( + + ) + + cy.findByLabelText('icon-dataset').should('exist') + }) + + it('renders the dataset icon when the dataset is deaccessioned', () => { + cy.customMount( + + ) + + cy.findByLabelText('icon-dataset').should('exist') + }) + + it('renders the dataset thumbnail when there is one and the dataset is not deaccessioned', () => { + cy.customMount( + + ) + + 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 index 2d4e9ab28..add581381 100644 --- 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() + cy.customMount( + + ) 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() + cy.customMount( + + ) 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() + cy.customMount( + + ) cy.findByRole('img', { name: 'tooltip icon' }).should('exist').trigger('mouseover') cy.findByText(