From 9913c2772454700b3f9c9c582fd5df80e0959399 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Tue, 19 Dec 2023 17:22:08 +0100 Subject: [PATCH 1/4] feat(FilePage): add dataset citation --- public/locales/en/file.json | 3 ++- .../DatasetCitation.module.scss | 1 - .../dataset-citation/DatasetCitation.tsx | 19 +++++++++++-------- src/sections/file/File.module.scss | 5 +++++ src/sections/file/File.tsx | 9 ++++++++- .../DatasetCitation.stories.tsx | 9 ++++++++- .../dataset-citation/DatasetCitation.spec.tsx | 8 ++++++++ tests/component/sections/file/File.spec.tsx | 2 ++ 8 files changed, 44 insertions(+), 12 deletions(-) diff --git a/public/locales/en/file.json b/public/locales/en/file.json index 9e3bd1b68..516ac5815 100644 --- a/public/locales/en/file.json +++ b/public/locales/en/file.json @@ -2,5 +2,6 @@ "tabs": { "metadata": "Metadata" }, - "subtext": "This file is part of \"{{datasetTitle}}\"." + "subtext": "This file is part of \"{{datasetTitle}}\".", + "datasetCitation": "Dataset Citation" } diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss index 4e3ecc9ea..ef29ae7bc 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss +++ b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss @@ -1,7 +1,6 @@ @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; diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.tsx b/src/sections/dataset/dataset-citation/DatasetCitation.tsx index 976a17dc8..09494653b 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitation.tsx +++ b/src/sections/dataset/dataset-citation/DatasetCitation.tsx @@ -8,9 +8,10 @@ import { CitationThumbnail } from './CitationThumbnail' interface DatasetCitationProps { thumbnail?: string version: DatasetVersion + withoutThumbnail?: boolean } -export function DatasetCitation({ thumbnail, version }: DatasetCitationProps) { +export function DatasetCitation({ thumbnail, version, withoutThumbnail }: DatasetCitationProps) { const { t } = useTranslation('dataset') return ( <> @@ -21,13 +22,15 @@ export function DatasetCitation({ thumbnail, version }: DatasetCitationProps) { : styles.container }> - - - + {!withoutThumbnail && ( + + + + )}
+ + + {t('datasetCitation')} + + + diff --git a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx index 4d8d201d2..e578f6d1e 100644 --- a/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx +++ b/src/stories/dataset/dataset-citation/DatasetCitation.stories.tsx @@ -29,7 +29,7 @@ export const Default: Story = { } } -export const WithThumbnail: Story = { +export const WithThumbnailImage: Story = { render: () => { const dataset = DatasetMother.createRealistic({ thumbnail: faker.image.imageUrl() }) return ( @@ -91,3 +91,10 @@ export const Anonymized: Story = { ) } } + +export const WithoutThumbnail: Story = { + render: () => { + const dataset = DatasetMother.createRealistic() + return + } +} diff --git a/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx b/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx index d695e40cd..4f5558af3 100644 --- a/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx +++ b/tests/component/sections/dataset/dataset-citation/DatasetCitation.spec.tsx @@ -17,6 +17,7 @@ describe('DatasetCitation', () => { cy.findByText(/RELEASED/).should('not.exist') cy.findByText(/V1/).should('exist') cy.findByLabelText('icon-dataset').should('exist') + cy.findByLabelText('icon-dataset').should('exist') }) it('shows the draft tooltip when version is draft', () => { @@ -38,4 +39,11 @@ describe('DatasetCitation', () => { /DEACCESSIONED VERSION has been added to the citation for this version since it is no longer available./ ).should('exist') }) + + it('does not render the thumbnail when withoutThumbnail prop is true', () => { + const version = DatasetVersionMother.createRealistic() + cy.customMount() + + cy.findByLabelText('icon-dataset').should('not.exist') + }) }) diff --git a/tests/component/sections/file/File.spec.tsx b/tests/component/sections/file/File.spec.tsx index 1377c092a..0340eddc1 100644 --- a/tests/component/sections/file/File.spec.tsx +++ b/tests/component/sections/file/File.spec.tsx @@ -15,6 +15,8 @@ describe('File', () => { cy.findAllByText(testFile.name).should('exist') cy.findByText(`This file is part of "${testFile.datasetVersion.title}".`).should('exist') + cy.findByText('Dataset Citation').should('exist') + cy.findByText(/Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title",/).should('exist') }) it('renders skeleton while loading', () => { From d144cff71a91f10241ce29baf5d61b4e9ec48cfd Mon Sep 17 00:00:00 2001 From: MellyGray Date: Thu, 21 Dec 2023 12:06:23 +0100 Subject: [PATCH 2/4] refactor: DatasetCitation extract components --- public/locales/en/citationBlock.json | 2 + public/locales/en/dataset.json | 4 +- src/sections/dataset/Dataset.module.scss | 2 +- .../DatasetCitation.module.scss | 8 +-- .../dataset-citation/DatasetCitation.tsx | 66 +++++++------------ .../DatasetCitationTooltip.tsx | 17 ++--- .../shared/citation/Citation.module.scss | 9 +++ .../shared/citation/CitationDescription.tsx | 13 +++- .../shared/citation/CitationLearnAbout.tsx | 17 +++++ .../citation/CitationDescription.spec.tsx | 8 +++ .../citation/CitationLearnAbout.spec.tsx | 10 +++ 11 files changed, 91 insertions(+), 65 deletions(-) create mode 100644 public/locales/en/citationBlock.json create mode 100644 src/sections/shared/citation/Citation.module.scss create mode 100644 src/sections/shared/citation/CitationLearnAbout.tsx create mode 100644 tests/component/sections/shared/citation/CitationLearnAbout.spec.tsx diff --git a/public/locales/en/citationBlock.json b/public/locales/en/citationBlock.json new file mode 100644 index 000000000..f782b979b --- /dev/null +++ b/public/locales/en/citationBlock.json @@ -0,0 +1,2 @@ +{"learnAbout": "Learn About", + "standards": "Data Citation Standards"} \ No newline at end of file diff --git a/public/locales/en/dataset.json b/public/locales/en/dataset.json index b9a083d83..54dad4532 100644 --- a/public/locales/en/dataset.json +++ b/public/locales/en/dataset.json @@ -14,9 +14,7 @@ "deaccessioned": { "description": "DEACCESSIONED VERSION has been added to the citation for this version since it is no longer available." } - }, - "learnAbout": "Learn About", - "standards": "Data Citation Standards" + } }, "datasetActionButtons": { "title": "Dataset Action Buttons", diff --git a/src/sections/dataset/Dataset.module.scss b/src/sections/dataset/Dataset.module.scss index 991d976ca..2de5469ba 100644 --- a/src/sections/dataset/Dataset.module.scss +++ b/src/sections/dataset/Dataset.module.scss @@ -7,7 +7,7 @@ } .summary-container { - margin:1em 0; + margin-bottom: 1em; } .tab-container { diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss index ca1d6f081..a2e5f09a5 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss +++ b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss @@ -1,15 +1,11 @@ @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; .container { - margin: 0.5rem 0; - padding: 10px; + margin: 0 0 20px 0; + padding: 10px 0; border: 1px solid $dv-info-border-color; } -.citation { - margin-bottom: 1em; -} - .deaccessioned { margin: 0.5rem 0; padding: 10px; diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.tsx b/src/sections/dataset/dataset-citation/DatasetCitation.tsx index 4bd872b53..e9f05f3f2 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitation.tsx +++ b/src/sections/dataset/dataset-citation/DatasetCitation.tsx @@ -1,10 +1,10 @@ import { Col, 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 { DatasetThumbnail } from '../dataset-thumbnail/DatasetThumbnail' import { CitationDescription } from '../../shared/citation/CitationDescription' import { DatasetCitationTooltip } from './DatasetCitationTooltip' +import { CitationLearnAbout } from '../../shared/citation/CitationLearnAbout' interface DatasetCitationProps { thumbnail?: string @@ -13,47 +13,29 @@ interface DatasetCitationProps { } export function DatasetCitation({ thumbnail, version, withoutThumbnail }: DatasetCitationProps) { - const { t } = useTranslation('dataset') return ( - <> - - - {!withoutThumbnail && ( - - - - )} - - - - - - - - -
- {t('citation.learnAbout')}{' '} - - {t('citation.standards')}. - -
- - - - - + + {!withoutThumbnail && ( + + + + )} + + } + /> + + + ) } diff --git a/src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx b/src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx index 0ae1676b1..a9e2d2b04 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx +++ b/src/sections/dataset/dataset-citation/DatasetCitationTooltip.tsx @@ -9,16 +9,11 @@ interface DatasetCitationTooltipProps { export function DatasetCitationTooltip({ status }: DatasetCitationTooltipProps) { const { t } = useTranslation('dataset') - if (status !== DatasetPublishingStatus.RELEASED) { - return ( - <> - {' '} - - - ) + if (status === DatasetPublishingStatus.RELEASED) { + return <> } - return <> + + return ( + + ) } diff --git a/src/sections/shared/citation/Citation.module.scss b/src/sections/shared/citation/Citation.module.scss new file mode 100644 index 000000000..da18ce409 --- /dev/null +++ b/src/sections/shared/citation/Citation.module.scss @@ -0,0 +1,9 @@ +@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; + +.description { + margin-bottom: 1em; +} + +.text { + color: $dv-subtext-color +} \ No newline at end of file diff --git a/src/sections/shared/citation/CitationDescription.tsx b/src/sections/shared/citation/CitationDescription.tsx index eb2730bd2..227ec95ba 100644 --- a/src/sections/shared/citation/CitationDescription.tsx +++ b/src/sections/shared/citation/CitationDescription.tsx @@ -1,11 +1,20 @@ import parse from 'html-react-parser' +import styles from './Citation.module.scss' +import { ReactNode } from 'react' interface CitationDescriptionProps { citation: string + tooltip?: ReactNode } -export function CitationDescription({ citation }: CitationDescriptionProps) { +export function CitationDescription({ citation, tooltip }: CitationDescriptionProps) { const citationAsReactElement = parse(citation) - return {citationAsReactElement} + return ( +
+ + {citationAsReactElement} {tooltip} + +
+ ) } diff --git a/src/sections/shared/citation/CitationLearnAbout.tsx b/src/sections/shared/citation/CitationLearnAbout.tsx new file mode 100644 index 000000000..68dced2c8 --- /dev/null +++ b/src/sections/shared/citation/CitationLearnAbout.tsx @@ -0,0 +1,17 @@ +import { useTranslation } from 'react-i18next' +import styles from './Citation.module.scss' + +export function CitationLearnAbout() { + const { t } = useTranslation('citationBlock') + return ( +
+ {t('learnAbout')}{' '} + + {t('standards')}. + +
+ ) +} diff --git a/tests/component/sections/shared/citation/CitationDescription.spec.tsx b/tests/component/sections/shared/citation/CitationDescription.spec.tsx index ce5b1a57e..b40ba9aae 100644 --- a/tests/component/sections/shared/citation/CitationDescription.spec.tsx +++ b/tests/component/sections/shared/citation/CitationDescription.spec.tsx @@ -9,4 +9,12 @@ describe('CitationDescription', () => { cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches",/).should('exist') cy.findByRole('link', { name: 'https://doi.org/10.5072/FK2/0YFWKL' }).should('exist') }) + + it('renders the tooltip', () => { + const citation = 'Finch, Fiona, 2023, "Darwin\'s Finches"' + const tooltip = This is a tooltip + cy.customMount() + + cy.findByText('This is a tooltip').should('exist') + }) }) diff --git a/tests/component/sections/shared/citation/CitationLearnAbout.spec.tsx b/tests/component/sections/shared/citation/CitationLearnAbout.spec.tsx new file mode 100644 index 000000000..8c7bbb1c1 --- /dev/null +++ b/tests/component/sections/shared/citation/CitationLearnAbout.spec.tsx @@ -0,0 +1,10 @@ +import { CitationLearnAbout } from '../../../../../src/sections/shared/citation/CitationLearnAbout' + +describe('CitationLearnAbout', () => { + it('renders the component', () => { + cy.customMount() + + cy.findByText('Learn About').should('exist') + cy.findByRole('link', { name: 'Data Citation Standards.' }).should('exist') + }) +}) From 6d34d581d086f47ed437f52090f5db5bfe363552 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Thu, 21 Dec 2023 12:47:26 +0100 Subject: [PATCH 3/4] feat(FileCitation): add FileCitation to File Page --- public/locales/en/file.json | 3 +- src/files/domain/models/File.ts | 1 + src/sections/file/File.tsx | 5 +- .../file-citation/FileCitation.module.scss | 13 +++++ .../file/file-citation/FileCitation.tsx | 29 ++++++++++ src/stories/dataset/Dataset.stories.tsx | 8 +-- .../dataset-files/DatasetFiles.stories.tsx | 8 +-- .../AccessFileMenu.stories.tsx | 2 +- .../file-thumbnail/FileThumbnail.stories.tsx | 2 +- src/stories/{files => file}/File.stories.tsx | 0 src/stories/{files => file}/FileMockData.ts | 0 .../FileMockLoadingRepository.ts | 0 .../FileMockNoDataRepository.ts | 0 .../FileMockNoFiltersRepository.ts | 0 .../{files => file}/FileMockRepository.ts | 0 .../FileWithDeniedPermissionsRepository.ts | 0 .../FileWithGrantedPermissionsRepository.ts | 0 .../file-citation/FileCitation.stories.tsx | 55 +++++++++++++++++++ .../WithFilePermissionsDenied.tsx | 0 .../WithFilePermissionsGranted.tsx | 0 .../files/domain/models/FileMother.ts | 19 ++++++- tests/component/sections/file/File.spec.tsx | 6 +- .../file/file-citation/FileCitation.spec.tsx | 29 ++++++++++ .../e2e/sections/file/File.spec.tsx | 2 +- 24 files changed, 167 insertions(+), 15 deletions(-) create mode 100644 src/sections/file/file-citation/FileCitation.module.scss create mode 100644 src/sections/file/file-citation/FileCitation.tsx rename src/stories/{files => file}/File.stories.tsx (100%) rename src/stories/{files => file}/FileMockData.ts (100%) rename src/stories/{files => file}/FileMockLoadingRepository.ts (100%) rename src/stories/{files => file}/FileMockNoDataRepository.ts (100%) rename src/stories/{files => file}/FileMockNoFiltersRepository.ts (100%) rename src/stories/{files => file}/FileMockRepository.ts (100%) rename src/stories/{files => file}/FileWithDeniedPermissionsRepository.ts (100%) rename src/stories/{files => file}/FileWithGrantedPermissionsRepository.ts (100%) create mode 100644 src/stories/file/file-citation/FileCitation.stories.tsx rename src/stories/{files => file}/file-permission/WithFilePermissionsDenied.tsx (100%) rename src/stories/{files => file}/file-permission/WithFilePermissionsGranted.tsx (100%) create mode 100644 tests/component/sections/file/file-citation/FileCitation.spec.tsx diff --git a/public/locales/en/file.json b/public/locales/en/file.json index 516ac5815..0a60e1032 100644 --- a/public/locales/en/file.json +++ b/public/locales/en/file.json @@ -3,5 +3,6 @@ "metadata": "Metadata" }, "subtext": "This file is part of \"{{datasetTitle}}\".", - "datasetCitation": "Dataset Citation" + "datasetCitationTitle": "Dataset Citation", + "fileCitationTitle": "File Citation" } diff --git a/src/files/domain/models/File.ts b/src/files/domain/models/File.ts index d348f4df8..54ec8eaab 100644 --- a/src/files/domain/models/File.ts +++ b/src/files/domain/models/File.ts @@ -3,4 +3,5 @@ import { DatasetVersion } from '../../../dataset/domain/models/Dataset' export interface File { name: string datasetVersion: DatasetVersion + citation: string } diff --git a/src/sections/file/File.tsx b/src/sections/file/File.tsx index 414d6a4f9..baf93f008 100644 --- a/src/sections/file/File.tsx +++ b/src/sections/file/File.tsx @@ -8,6 +8,7 @@ import { useEffect } from 'react' import { useLoading } from '../loading/LoadingContext' import { FileSkeleton } from './FileSkeleton' import { DatasetCitation } from '../dataset/dataset-citation/DatasetCitation' +import { FileCitation } from './file-citation/FileCitation' interface FileProps { repository: FileRepository @@ -41,7 +42,9 @@ export function File({ repository, id }: FileProps) {
- {t('datasetCitation')} + {t('fileCitationTitle')} + + {t('datasetCitationTitle')} diff --git a/src/sections/file/file-citation/FileCitation.module.scss b/src/sections/file/file-citation/FileCitation.module.scss new file mode 100644 index 000000000..3627cfc41 --- /dev/null +++ b/src/sections/file/file-citation/FileCitation.module.scss @@ -0,0 +1,13 @@ +@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; + +.container { + margin: 0 0 20px 0; + padding: 10px 0; + border: 1px solid $dv-secondary-color; +} + +.deaccessioned { + margin: 0.5rem 0; + padding: 10px; + border: 1px solid $dv-danger-color; +} diff --git a/src/sections/file/file-citation/FileCitation.tsx b/src/sections/file/file-citation/FileCitation.tsx new file mode 100644 index 000000000..6beafed84 --- /dev/null +++ b/src/sections/file/file-citation/FileCitation.tsx @@ -0,0 +1,29 @@ +import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset' +import styles from './FileCitation.module.scss' +import { CitationDescription } from '../../shared/citation/CitationDescription' +import { DatasetCitationTooltip } from '../../dataset/dataset-citation/DatasetCitationTooltip' +import { CitationLearnAbout } from '../../shared/citation/CitationLearnAbout' +import { Col, Row } from '@iqss/dataverse-design-system' + +interface FileCitationProps { + citation: string + datasetVersion: DatasetVersion +} +export function FileCitation({ citation, datasetVersion }: FileCitationProps) { + return ( + + + } + /> + + + + ) +} diff --git a/src/stories/dataset/Dataset.stories.tsx b/src/stories/dataset/Dataset.stories.tsx index 85fe96332..7b1364d59 100644 --- a/src/stories/dataset/Dataset.stories.tsx +++ b/src/stories/dataset/Dataset.stories.tsx @@ -4,12 +4,12 @@ import { WithLayout } from '../WithLayout' import { Dataset } from '../../sections/dataset/Dataset' import { WithAnonymizedView } from './WithAnonymizedView' import { WithDatasetPrivateUrl } from './WithDatasetPrivateUrl' -import { FileMockRepository } from '../files/FileMockRepository' +import { FileMockRepository } from '../file/FileMockRepository' import { WithCitationMetadataBlockInfo } from './WithCitationMetadataBlockInfo' -import { FileMockNoDataRepository } from '../files/FileMockNoDataRepository' +import { FileMockNoDataRepository } from '../file/FileMockNoDataRepository' import { WithSettings } from '../WithSettings' -import { WithFilePermissionsDenied } from '../files/file-permission/WithFilePermissionsDenied' -import { WithFilePermissionsGranted } from '../files/file-permission/WithFilePermissionsGranted' +import { WithFilePermissionsDenied } from '../file/file-permission/WithFilePermissionsDenied' +import { WithFilePermissionsGranted } from '../file/file-permission/WithFilePermissionsGranted' import { WithDataset } from './WithDataset' import { WithDatasetDraftAsOwner } from './WithDatasetDraftAsOwner' import { WithDatasetNotFound } from './WithDatasetNotFound' diff --git a/src/stories/dataset/dataset-files/DatasetFiles.stories.tsx b/src/stories/dataset/dataset-files/DatasetFiles.stories.tsx index ab8ba15cd..fe727aa71 100644 --- a/src/stories/dataset/dataset-files/DatasetFiles.stories.tsx +++ b/src/stories/dataset/dataset-files/DatasetFiles.stories.tsx @@ -1,11 +1,11 @@ import { Meta, StoryObj } from '@storybook/react' import { WithI18next } from '../../WithI18next' import { DatasetFiles } from '../../../sections/dataset/dataset-files/DatasetFiles' -import { FileMockRepository } from '../../files/FileMockRepository' -import { FileMockLoadingRepository } from '../../files/FileMockLoadingRepository' -import { FileMockNoDataRepository } from '../../files/FileMockNoDataRepository' +import { FileMockRepository } from '../../file/FileMockRepository' +import { FileMockLoadingRepository } from '../../file/FileMockLoadingRepository' +import { FileMockNoDataRepository } from '../../file/FileMockNoDataRepository' import { WithSettings } from '../../WithSettings' -import { FileMockNoFiltersRepository } from '../../files/FileMockNoFiltersRepository' +import { FileMockNoFiltersRepository } from '../../file/FileMockNoFiltersRepository' import { DatasetMother } from '../../../../tests/component/dataset/domain/models/DatasetMother' const meta: Meta = { diff --git a/src/stories/dataset/dataset-files/files-table/file-actions/file-action-buttons/access-file-menu/AccessFileMenu.stories.tsx b/src/stories/dataset/dataset-files/files-table/file-actions/file-action-buttons/access-file-menu/AccessFileMenu.stories.tsx index 73bc899db..7120e4b52 100644 --- a/src/stories/dataset/dataset-files/files-table/file-actions/file-action-buttons/access-file-menu/AccessFileMenu.stories.tsx +++ b/src/stories/dataset/dataset-files/files-table/file-actions/file-action-buttons/access-file-menu/AccessFileMenu.stories.tsx @@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react' import { AccessFileMenu } from '../../../../../../../sections/dataset/dataset-files/files-table/file-actions/file-actions-cell/file-action-buttons/access-file-menu/AccessFileMenu' import { WithI18next } from '../../../../../../WithI18next' import { WithSettings } from '../../../../../../WithSettings' -import { WithFilePermissionsGranted } from '../../../../../../files/file-permission/WithFilePermissionsGranted' +import { WithFilePermissionsGranted } from '../../../../../../file/file-permission/WithFilePermissionsGranted' import { FilePreviewMother } from '../../../../../../../../tests/component/files/domain/models/FilePreviewMother' const meta: Meta = { diff --git a/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.stories.tsx b/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.stories.tsx index a77f0de4a..f654d23a5 100644 --- a/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.stories.tsx +++ b/src/stories/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail.stories.tsx @@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react' import { FileThumbnail } from '../../../../../../../../sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/file-thumbnail/FileThumbnail' import { WithI18next } from '../../../../../../../WithI18next' import { FilePreviewMother } from '../../../../../../../../../tests/component/files/domain/models/FilePreviewMother' -import { WithFilePermissionsGranted } from '../../../../../../../files/file-permission/WithFilePermissionsGranted' +import { WithFilePermissionsGranted } from '../../../../../../../file/file-permission/WithFilePermissionsGranted' const meta: Meta = { title: 'Sections/Dataset Page/DatasetFiles/FilesTable/FileInfoCell/FileThumbnail', diff --git a/src/stories/files/File.stories.tsx b/src/stories/file/File.stories.tsx similarity index 100% rename from src/stories/files/File.stories.tsx rename to src/stories/file/File.stories.tsx diff --git a/src/stories/files/FileMockData.ts b/src/stories/file/FileMockData.ts similarity index 100% rename from src/stories/files/FileMockData.ts rename to src/stories/file/FileMockData.ts diff --git a/src/stories/files/FileMockLoadingRepository.ts b/src/stories/file/FileMockLoadingRepository.ts similarity index 100% rename from src/stories/files/FileMockLoadingRepository.ts rename to src/stories/file/FileMockLoadingRepository.ts diff --git a/src/stories/files/FileMockNoDataRepository.ts b/src/stories/file/FileMockNoDataRepository.ts similarity index 100% rename from src/stories/files/FileMockNoDataRepository.ts rename to src/stories/file/FileMockNoDataRepository.ts diff --git a/src/stories/files/FileMockNoFiltersRepository.ts b/src/stories/file/FileMockNoFiltersRepository.ts similarity index 100% rename from src/stories/files/FileMockNoFiltersRepository.ts rename to src/stories/file/FileMockNoFiltersRepository.ts diff --git a/src/stories/files/FileMockRepository.ts b/src/stories/file/FileMockRepository.ts similarity index 100% rename from src/stories/files/FileMockRepository.ts rename to src/stories/file/FileMockRepository.ts diff --git a/src/stories/files/FileWithDeniedPermissionsRepository.ts b/src/stories/file/FileWithDeniedPermissionsRepository.ts similarity index 100% rename from src/stories/files/FileWithDeniedPermissionsRepository.ts rename to src/stories/file/FileWithDeniedPermissionsRepository.ts diff --git a/src/stories/files/FileWithGrantedPermissionsRepository.ts b/src/stories/file/FileWithGrantedPermissionsRepository.ts similarity index 100% rename from src/stories/files/FileWithGrantedPermissionsRepository.ts rename to src/stories/file/FileWithGrantedPermissionsRepository.ts diff --git a/src/stories/file/file-citation/FileCitation.stories.tsx b/src/stories/file/file-citation/FileCitation.stories.tsx new file mode 100644 index 000000000..3a7a84dd2 --- /dev/null +++ b/src/stories/file/file-citation/FileCitation.stories.tsx @@ -0,0 +1,55 @@ +import { Meta, StoryObj } from '@storybook/react' +import { WithI18next } from '../../WithI18next' +import { FileCitation } from '../../../sections/file/file-citation/FileCitation' +import { FileCitationMother } from '../../../../tests/component/files/domain/models/FileMother' +import { DatasetVersionMother } from '../../../../tests/component/dataset/domain/models/DatasetMother' + +const meta: Meta = { + title: 'Sections/File Page/FileCitation', + component: FileCitation, + decorators: [WithI18next] +} + +export default meta +type Story = StoryObj + +export const Default: Story = { + render: () => ( + <> +

+

+ + + ) +} + +export const Draft: Story = { + render: () => ( + <> +

+

+ + + ) +} + +export const Deaccessioned: Story = { + render: () => ( + <> +

+

+

+

+ + + ) +} diff --git a/src/stories/files/file-permission/WithFilePermissionsDenied.tsx b/src/stories/file/file-permission/WithFilePermissionsDenied.tsx similarity index 100% rename from src/stories/files/file-permission/WithFilePermissionsDenied.tsx rename to src/stories/file/file-permission/WithFilePermissionsDenied.tsx diff --git a/src/stories/files/file-permission/WithFilePermissionsGranted.tsx b/src/stories/file/file-permission/WithFilePermissionsGranted.tsx similarity index 100% rename from src/stories/files/file-permission/WithFilePermissionsGranted.tsx rename to src/stories/file/file-permission/WithFilePermissionsGranted.tsx diff --git a/tests/component/files/domain/models/FileMother.ts b/tests/component/files/domain/models/FileMother.ts index 28b245c94..4d3a30513 100644 --- a/tests/component/files/domain/models/FileMother.ts +++ b/tests/component/files/domain/models/FileMother.ts @@ -4,18 +4,35 @@ import { DatasetVersionMother } from '../../../dataset/domain/models/DatasetMoth export class FileMother { static create(props?: Partial): File { + const name = props?.name ?? faker.system.fileName() return { name: faker.system.fileName(), datasetVersion: DatasetVersionMother.create(), + citation: FileCitationMother.create(name), ...props } } static createRealistic(props?: Partial): File { return this.create({ - name: 'file.csv', + name: 'File Title', datasetVersion: DatasetVersionMother.createRealistic(), + citation: FileCitationMother.create('File Title'), ...props }) } } + +export class FileCitationMother { + static create(fileName: string): string { + return `Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title", https://doi.org/10.5072/FK2/BUDNRV, Root, V1; ${fileName} [fileName]` + } + + static createDraft(fileName: string): string { + return `Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title", https://doi.org/10.5072/FK2/BUDNRV, Root, DRAFT; ${fileName} [fileName]` + } + + static createDeaccessioned(fileName: string): string { + return `Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title", https://doi.org/10.5072/FK2/BUDNRV, Root, DEACCESSIONED; ${fileName} [fileName]` + } +} diff --git a/tests/component/sections/file/File.spec.tsx b/tests/component/sections/file/File.spec.tsx index 0340eddc1..41cf3a479 100644 --- a/tests/component/sections/file/File.spec.tsx +++ b/tests/component/sections/file/File.spec.tsx @@ -15,8 +15,12 @@ describe('File', () => { cy.findAllByText(testFile.name).should('exist') cy.findByText(`This file is part of "${testFile.datasetVersion.title}".`).should('exist') + cy.findByText('File Citation').should('exist') + cy.findByText(/fileName/).should('exist') cy.findByText('Dataset Citation').should('exist') - cy.findByText(/Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title",/).should('exist') + cy.findAllByText(/Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title",/).should( + 'exist' + ) }) it('renders skeleton while loading', () => { diff --git a/tests/component/sections/file/file-citation/FileCitation.spec.tsx b/tests/component/sections/file/file-citation/FileCitation.spec.tsx new file mode 100644 index 000000000..c9d0fb7fc --- /dev/null +++ b/tests/component/sections/file/file-citation/FileCitation.spec.tsx @@ -0,0 +1,29 @@ +import { FileCitation } from '../../../../../src/sections/file/file-citation/FileCitation' +import { FileCitationMother } from '../../../files/domain/models/FileMother' +import { DatasetVersionMother } from '../../../dataset/domain/models/DatasetMother' + +describe('FileCitation', () => { + it('renders the FileCitation', () => { + const citation = FileCitationMother.create('File Title') + const datasetVersion = DatasetVersionMother.createReleased() + + cy.customMount() + cy.findByText(/File Title/).should('exist') + cy.findByText(/Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title",/).should('exist') + cy.findByText(/RELEASED/).should('not.exist') + cy.findByText(/V1/).should('exist') + }) + + it('renders the FileCitation when the dataset is deaccessioned', () => { + const citation = FileCitationMother.create('File Title') + const datasetVersion = DatasetVersionMother.createDeaccessioned() + + cy.customMount() + cy.findByText(/File Title/).should('exist') + cy.findByText(/Bennet, Elizabeth; Darcy, Fitzwilliam, 2023, "Dataset Title",/).should('exist') + cy.findByRole('img', { name: 'tooltip icon' }).should('exist').trigger('mouseover') + cy.findByText( + /DEACCESSIONED VERSION has been added to the citation for this version since it is no longer available./ + ).should('exist') + }) +}) diff --git a/tests/e2e-integration/e2e/sections/file/File.spec.tsx b/tests/e2e-integration/e2e/sections/file/File.spec.tsx index dac419c86..c60850e25 100644 --- a/tests/e2e-integration/e2e/sections/file/File.spec.tsx +++ b/tests/e2e-integration/e2e/sections/file/File.spec.tsx @@ -1,6 +1,6 @@ describe('File', () => { it('successfully loads', () => { cy.visit('/spa/files?id=23') - cy.findAllByText('file.csv').should('exist') + cy.findAllByText('File Title').should('exist') }) }) From 4482c922cc5c864f5c54ef62a6a87cb120589e61 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Thu, 21 Dec 2023 13:07:07 +0100 Subject: [PATCH 4/4] feat(FileCitation): add to skeleton --- public/locales/en/citationBlock.json | 3 +-- public/locales/en/file.json | 4 ++-- .../DatasetCitation.module.scss | 2 +- src/sections/file/FileSkeleton.tsx | 21 ++++++++++++++----- .../file-citation/FileCitation.module.scss | 2 +- .../dataset-card/DatasetCard.spec.tsx | 1 + .../dataset-card/DatasetCardInfo.spec.tsx | 2 ++ 7 files changed, 24 insertions(+), 11 deletions(-) diff --git a/public/locales/en/citationBlock.json b/public/locales/en/citationBlock.json index f782b979b..bb11901e9 100644 --- a/public/locales/en/citationBlock.json +++ b/public/locales/en/citationBlock.json @@ -1,2 +1 @@ -{"learnAbout": "Learn About", - "standards": "Data Citation Standards"} \ No newline at end of file +{ "learnAbout": "Learn About", "standards": "Data Citation Standards" } diff --git a/public/locales/en/file.json b/public/locales/en/file.json index 0a60e1032..3d81b14bb 100644 --- a/public/locales/en/file.json +++ b/public/locales/en/file.json @@ -3,6 +3,6 @@ "metadata": "Metadata" }, "subtext": "This file is part of \"{{datasetTitle}}\".", - "datasetCitationTitle": "Dataset Citation", - "fileCitationTitle": "File Citation" + "datasetCitationTitle": "Dataset Citation", + "fileCitationTitle": "File Citation" } diff --git a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss index a2e5f09a5..c6c731334 100644 --- a/src/sections/dataset/dataset-citation/DatasetCitation.module.scss +++ b/src/sections/dataset/dataset-citation/DatasetCitation.module.scss @@ -1,7 +1,7 @@ @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; .container { - margin: 0 0 20px 0; + margin: 0 0 20px; padding: 10px 0; border: 1px solid $dv-info-border-color; } diff --git a/src/sections/file/FileSkeleton.tsx b/src/sections/file/FileSkeleton.tsx index c92f46c0b..882e09075 100644 --- a/src/sections/file/FileSkeleton.tsx +++ b/src/sections/file/FileSkeleton.tsx @@ -1,23 +1,34 @@ -import styles from '../dataset/Dataset.module.scss' +import styles from './File.module.scss' import Skeleton, { SkeletonTheme } from 'react-loading-skeleton' -import { Tabs } from '@iqss/dataverse-design-system' +import { Col, Row, Tabs } from '@iqss/dataverse-design-system' +import { useTranslation } from 'react-i18next' export function FileSkeleton() { + const { t } = useTranslation('file') return (

- +

- +
+ + + {t('fileCitationTitle')} + + {t('datasetCitationTitle')} + + + - + <> +
diff --git a/src/sections/file/file-citation/FileCitation.module.scss b/src/sections/file/file-citation/FileCitation.module.scss index 3627cfc41..163a91410 100644 --- a/src/sections/file/file-citation/FileCitation.module.scss +++ b/src/sections/file/file-citation/FileCitation.module.scss @@ -1,7 +1,7 @@ @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; .container { - margin: 0 0 20px 0; + margin: 0 0 20px; padding: 10px 0; border: 1px solid $dv-secondary-color; } diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx index 8b66c37d1..45dd07ae5 100644 --- a/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx +++ b/tests/component/sections/home/datasets-list/dataset-card/DatasetCard.spec.tsx @@ -15,6 +15,7 @@ describe('DatasetCard', () => { cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches"/) .should('exist') .parent() + .parent() .should('have.class', styles['citation-box']) cy.findByText(dataset.abbreviatedDescription).should('exist') }) diff --git a/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx index 5563fe412..cc9a5ac47 100644 --- a/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx +++ b/tests/component/sections/home/datasets-list/dataset-card/DatasetCardInfo.spec.tsx @@ -12,6 +12,7 @@ describe('DatasetCardInfo', () => { cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches"/) .should('exist') .parent() + .parent() .should('have.class', styles['citation-box']) cy.findByText(dataset.abbreviatedDescription).should('exist') }) @@ -23,6 +24,7 @@ describe('DatasetCardInfo', () => { cy.findByText(/Finch, Fiona, 2023, "Darwin's Finches"/) .should('exist') .parent() + .parent() .should('have.class', styles['citation-box-deaccessioned']) }) })