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-lock.json b/package-lock.json index aef2e8157..ac1d151d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5913,12 +5913,14 @@ } }, "node_modules/@parcel/watcher": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.0.4.tgz", - "integrity": "sha512-cTDi+FUDBIUOBKEtj+nhiJ71AZVlkAsQFuGQTun5tV9mwQBQgZvhCzG+URPQc8myeN32yRVZEfVAPCs1RW+Jvg==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.1.0.tgz", + "integrity": "sha512-8s8yYjd19pDSsBpbkOHnT6Z2+UJSuLQx61pCFM0s5wSRvKCEMDjd/cHY3/GI1szHIWbpXpsJdg3V6ISGGx9xDw==", "dev": true, "hasInstallScript": true, "dependencies": { + "is-glob": "^4.0.3", + "micromatch": "^4.0.5", "node-addon-api": "^3.2.1", "node-gyp-build": "^4.3.0" }, 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/src/dataset/domain/models/Dataset.ts b/src/dataset/domain/models/Dataset.ts index a0d96e6c7..409a7ab5e 100644 --- a/src/dataset/domain/models/Dataset.ts +++ b/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 ) } } diff --git a/src/dataset/infrastructure/mappers/JSDatasetMapper.ts b/src/dataset/infrastructure/mappers/JSDatasetMapper.ts index 065f95212..77a8c3031 100644 --- a/src/dataset/infrastructure/mappers/JSDatasetMapper.ts +++ b/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() } diff --git a/src/sections/dataset/Dataset.tsx b/src/sections/dataset/Dataset.tsx index ac02c8e04..c5444efb3 100644 --- a/src/sections/dataset/Dataset.tsx +++ b/src/sections/dataset/Dataset.tsx @@ -53,7 +53,12 @@ export function Dataset({ fileRepository }: DatasetProps) {
- + 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..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; - } .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; 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/src/sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-action-buttons/file-options-menu/FileOptionsMenu.tsx b/src/sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-action-buttons/file-options-menu/FileOptionsMenu.tsx index d1cdd06f7..c81d34c77 100644 --- a/src/sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-action-buttons/file-options-menu/FileOptionsMenu.tsx +++ b/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 }) { {t('actions.optionsMenu.headers.editOptions')} - + ) diff --git a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx index f9d597b10..dc89d2f59 100644 --- a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx +++ b/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 = { @@ -20,7 +21,30 @@ export const Default: Story = {




- + +
+ ) + } +} + +export const WithThumbnail: Story = { + render: () => { + const dataset = DatasetMother.createRealistic({ thumbnail: faker.image.imageUrl() }) + console.log(dataset) + return ( +
+

+

+
) } @@ -47,7 +71,11 @@ export const DraftVersion: Story = {




- +
) } @@ -76,7 +104,11 @@ export const Deaccessioned: Story = {




- +
) } @@ -96,7 +128,11 @@ export const Anonymized: Story = {




- +
) } diff --git a/tests/component/dataset/domain/models/DatasetMother.ts b/tests/component/dataset/domain/models/DatasetMother.ts index c96e0a5f8..bca8773c5 100644 --- a/tests/component/dataset/domain/models/DatasetMother.ts +++ b/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() } diff --git a/tests/component/dataset/infrastructure/mappers/JSDatasetMapper.spec.ts b/tests/component/dataset/infrastructure/mappers/JSDatasetMapper.spec.ts index cf04a2edc..699c3d8a7 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' @@ -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', () => { 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 313c197b1..65d4c3fb3 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,6 +26,7 @@ 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', () => { @@ -32,7 +39,13 @@ describe('DatasetCitation', () => { DatasetPublishingStatus.DRAFT ) }) - cy.customMount() + cy.customMount( + + ) cy.findByRole('img', { name: 'tooltip icon' }).should('exist').trigger('mouseover') cy.findByText( @@ -52,7 +65,13 @@ describe('DatasetCitation', () => { 0 ) }) - cy.customMount() + cy.customMount( + + ) cy.findByRole('img', { name: 'tooltip icon' }).should('exist').trigger('mouseover') cy.findByText( 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( ,