From 881ccbdcba52d8dedad41746d7913e12634069f4 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 24 Oct 2023 10:43:30 +0200 Subject: [PATCH 1/4] 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( From 0acea7ea61b4a24f5eeb6b62524b54fc7db96b3f Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 24 Oct 2023 11:43:07 +0200 Subject: [PATCH 2/4] feat(DatasetThumbnail): add thumbnail to stories --- src/stories/dataset/DatasetMockData.ts | 4 +- .../DatasetCitation.stories.tsx | 43 +++++++++++++++++-- 2 files changed, 42 insertions(+), 5 deletions(-) diff --git a/src/stories/dataset/DatasetMockData.ts b/src/stories/dataset/DatasetMockData.ts index 110c46377..e2af08a1c 100644 --- a/src/stories/dataset/DatasetMockData.ts +++ b/src/stories/dataset/DatasetMockData.ts @@ -95,6 +95,7 @@ export const DatasetMockData = (props?: Partial, anonymized = false): D } } ] as DatasetMetadataBlocks, + thumbnail: undefined, ...props } return new Dataset.Builder( @@ -103,6 +104,7 @@ export const DatasetMockData = (props?: Partial, anonymized = false): D dataset.citation, dataset.summaryFields, dataset.license, - dataset.metadataBlocks + dataset.metadataBlocks, + dataset.thumbnail ).build() } diff --git a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx index 55ddf4b93..a84a7cc60 100644 --- a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx +++ b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx @@ -3,6 +3,7 @@ import { WithI18next } from '../../WithI18next' import { DatasetCitation } from '../../../sections/dataset/dataset-citation/DatasetCitation' import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset' import { DatasetMockData } from '../DatasetMockData' +import { faker } from '@faker-js/faker' const meta: Meta = { title: 'Sections/Dataset Page/DatasetCitation', @@ -14,13 +15,35 @@ export default meta type Story = StoryObj export const Default: Story = { + render: () => { + const dataset = DatasetMockData({ thumbnail: faker.image.imageUrl() }) + return ( +
+

+

+ +
+ ) + } +} + +export const WithThumbnail: Story = { render: () => { const dataset = DatasetMockData() return (




- +
) } @@ -41,7 +64,11 @@ export const DraftVersion: Story = {




- +
) } @@ -62,7 +89,11 @@ export const Deaccessioned: Story = {




- +
) } @@ -82,7 +113,11 @@ export const Anonymized: Story = {




- +
) } From 14e541e9380348d8780afe097717d63fb57d098a Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 24 Oct 2023 12:40:21 +0200 Subject: [PATCH 3/4] feat(DatasetThumbnail): add a TODO for the integration --- src/dataset/infrastructure/mappers/JSDatasetMapper.ts | 3 ++- .../dataset/dataset-citation/DatasetCitation.module.scss | 4 ++-- .../dataset/infrastructure/mappers/JSDatasetMapper.spec.ts | 6 ++++-- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/dataset/infrastructure/mappers/JSDatasetMapper.ts b/src/dataset/infrastructure/mappers/JSDatasetMapper.ts index 0207de851..06fb60518 100644 --- a/src/dataset/infrastructure/mappers/JSDatasetMapper.ts +++ b/src/dataset/infrastructure/mappers/JSDatasetMapper.ts @@ -29,7 +29,8 @@ export class JSDatasetMapper { jsDataset.alternativePersistentId, jsDataset.publicationDate, jsDataset.citationDate - ) + ), + undefined // TODO: get dataset thumbnail from Dataverse https://github.com/IQSS/dataverse-frontend/issues/203 ).build() } diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss index eafde9779..4e3ecc9ea 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss +++ b/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; -min-height: 150px; } .citation { @@ -25,8 +25,8 @@ min-height: 150px; .preview-image { width: 100%; - height: auto; max-width: 140px; + height: auto; max-height: 140px; } diff --git a/tests/component/dataset/infrastructure/mappers/JSDatasetMapper.spec.ts b/tests/component/dataset/infrastructure/mappers/JSDatasetMapper.spec.ts index 60ecfe7d7..de956c1a3 100644 --- a/tests/component/dataset/infrastructure/mappers/JSDatasetMapper.spec.ts +++ b/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", https://doi.org/10.5072/FK2/B4B2MJ, Root, DRAFT VERSION' @@ -96,7 +97,8 @@ const expectedDataset = { subject: ['Medicine, Health and Life Sciences'] } } - ] + ], + thumbnail: undefined } describe('JS Dataset Mapper', () => { From 581914dfbdce71aa6d5df0e31f2a17bdef9a5e22 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Thu, 2 Nov 2023 17:26:15 +0100 Subject: [PATCH 4/4] feat: add type check to detect type errors --- .github/workflows/lint.yml | 3 +++ package.json | 4 +++- .../file-actions/download-files/DownloadFilesButton.spec.tsx | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 0b48b8b86..9e83e05a6 100644 --- a/.github/workflows/lint.yml +++ b/.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 diff --git a/package.json b/package.json index 14c9f0157..949fc0ebe 100644 --- a/package.json +++ b/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", diff --git a/tests/component/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.spec.tsx b/tests/component/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.spec.tsx index e380f0786..a82b1ea15 100644 --- a/tests/component/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.spec.tsx +++ b/tests/component/sections/dataset/dataset-files/files-table/file-actions/download-files/DownloadFilesButton.spec.tsx @@ -113,7 +113,7 @@ describe('DownloadFilesButton', () => { const datasetWithDownloadFilesPermission = DatasetMother.create({ permissions: DatasetPermissionsMother.createWithFilesDownloadAllowed() }) - const files = FileMother.createMany(2) + const files = FileMother.createMany(2, { tabularData: undefined }) cy.mountAuthenticated( withDataset( ,