From 7c112602c9da0789add12eba3a58e505b9dcb1e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Fri, 30 May 2025 17:04:06 -0300 Subject: [PATCH 01/14] feat: dataset description full width --- .../dataset-card/DatasetCard.module.scss | 76 +++++++++---------- .../items-list/dataset-card/DatasetCard.tsx | 16 +--- .../dataset-card/DatasetCardBody.tsx | 43 +++++++++++ .../dataset-card/DatasetCardInfo.tsx | 33 -------- .../models/DatasetItemTypePreviewMother.ts | 3 +- .../dataset-card/DatasetCard.spec.tsx | 26 +++++++ .../dataset-card/DatasetCardInfo.spec.tsx | 42 ---------- 7 files changed, 107 insertions(+), 132 deletions(-) create mode 100644 src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx delete mode 100644 src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardInfo.tsx delete mode 100644 tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCardInfo.spec.tsx diff --git a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss index 06047e34d..866fc6d5d 100644 --- a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss +++ b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss @@ -12,11 +12,6 @@ border-radius: 4px; } -.thumbnail-and-info-wrapper { - display: flex; - gap: 1rem; -} - .card-header-container { display: flex; gap: 1rem; @@ -68,48 +63,45 @@ } } -.card-info-container { - display: flex; - flex-direction: column; - gap: 4px; - align-self: flex-start; - width: 100%; +.release-or-create-date { + color: $dv-subtext-color; font-size: $dv-font-size-sm; +} - .date { - color: $dv-subtext-color; - } - - .citation-box { - display: -webkit-box; - padding: 4px; - overflow: hidden; - background-color: color.adjust($dv-primary-color, $lightness: 51%); - border-radius: 4px; - -webkit-line-clamp: 5; - line-clamp: 5; - -webkit-box-orient: vertical; - - a { - word-break: break-all; - } +.citation-box { + display: -webkit-box; + padding: 4px; + overflow: hidden; + font-size: $dv-font-size-sm; + background-color: color.adjust($dv-primary-color, $lightness: 51%); + border: solid 1px color.adjust($dv-primary-color, $lightness: 20%); + border-radius: 4px; + -webkit-line-clamp: 5; + line-clamp: 5; + -webkit-box-orient: vertical; - &.deaccesioned { - background-color: color.adjust($dv-danger-box-color, $lightness: 6%); - } + a { + word-break: break-all; + } - & > div { - margin-bottom: 0; - } + &.deaccesioned { + background-color: color.adjust($dv-danger-box-color, $lightness: 6%); + border: solid 1px color.adjust($dv-danger-color, $lightness: 20%); } - .description { - display: -webkit-box; - -webkit-line-clamp: 3; - line-clamp: 3; - -webkit-box-orient: vertical; - width: 100%; - overflow: hidden; - color: #000; + & > div { + margin-bottom: 0; } } + +.description { + display: -webkit-box; + -webkit-line-clamp: 3; + line-clamp: 3; + -webkit-box-orient: vertical; + width: 100%; + margin: 0; + overflow: hidden; + color: #000; + font-size: $dv-font-size-sm; +} diff --git a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.tsx b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.tsx index bf3c42f8c..7b94441b6 100644 --- a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.tsx +++ b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.tsx @@ -1,7 +1,6 @@ import { DatasetItemTypePreview } from '@/dataset/domain/models/DatasetItemTypePreview' import { DatasetCardHeader } from './DatasetCardHeader' -import { DatasetCardThumbnail } from './DatasetCardThumbnail' -import { DatasetCardInfo } from './DatasetCardInfo' +import { DatasetCardBody } from './DatasetCardBody' import styles from './DatasetCard.module.scss' interface DatasetCardProps { @@ -16,18 +15,7 @@ export function DatasetCard({ datasetPreview }: DatasetCardProps) { version={datasetPreview.version} userRoles={datasetPreview.userRoles} /> -
- - -
+ ) } diff --git a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx new file mode 100644 index 000000000..710606250 --- /dev/null +++ b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx @@ -0,0 +1,43 @@ +import cn from 'classnames' +import { Stack } from '@iqss/dataverse-design-system' +import { DatasetItemTypePreview } from '@/dataset/domain/models/DatasetItemTypePreview' +import { DatasetPublishingStatus } from '@/dataset/domain/models/Dataset' +import { DateHelper } from '@/shared/helpers/DateHelper' +import { CitationDescription } from '@/sections/shared/citation/CitationDescription' +import { DatasetCardThumbnail } from './DatasetCardThumbnail' +import styles from './DatasetCard.module.scss' + +interface DatasetCardBodyProps { + datasetPreview: DatasetItemTypePreview +} + +export const DatasetCardBody = ({ datasetPreview }: DatasetCardBodyProps) => { + const { version, releaseOrCreateDate, description } = datasetPreview + + return ( + + + + + +
+ +
+ + +

{description}

+ + ) +} diff --git a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardInfo.tsx b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardInfo.tsx deleted file mode 100644 index 194ac622d..000000000 --- a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardInfo.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import cn from 'classnames' -import { DatasetPublishingStatus, DatasetVersion } from '@/dataset/domain/models/Dataset' -import { DateHelper } from '@/shared/helpers/DateHelper' -import { CitationDescription } from '@/sections/shared/citation/CitationDescription' -import styles from './DatasetCard.module.scss' - -interface DatasetCardInfoProps { - version: DatasetVersion - releaseOrCreateDate: Date - description: string -} - -export function DatasetCardInfo({ - version, - releaseOrCreateDate, - description -}: DatasetCardInfoProps) { - return ( -
- -
- -
-

{description}

-
- ) -} diff --git a/tests/component/dataset/domain/models/DatasetItemTypePreviewMother.ts b/tests/component/dataset/domain/models/DatasetItemTypePreviewMother.ts index 0acb5b741..f3b4dbd14 100644 --- a/tests/component/dataset/domain/models/DatasetItemTypePreviewMother.ts +++ b/tests/component/dataset/domain/models/DatasetItemTypePreviewMother.ts @@ -57,7 +57,8 @@ export class DatasetItemTypePreviewMother { static createDraft(): DatasetItemTypePreview { return this.create({ version: DatasetVersionMother.createDraft(), - publicationStatuses: [PublicationStatus.Draft] + publicationStatuses: [PublicationStatus.Draft], + thumbnail: undefined }) } diff --git a/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCard.spec.tsx b/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCard.spec.tsx index c10dd9741..33cf25341 100644 --- a/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCard.spec.tsx +++ b/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCard.spec.tsx @@ -1,6 +1,7 @@ import { DatasetCard } from '@/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard' import { DatasetItemTypePreviewMother } from '@tests/component/dataset/domain/models/DatasetItemTypePreviewMother' import { DateHelper } from '@/shared/helpers/DateHelper' +import styles from '@/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss' describe('DatasetCard', () => { it('should render the card', () => { @@ -14,6 +15,7 @@ describe('DatasetCard', () => { cy.findByText(DateHelper.toDisplayFormat(dataset.releaseOrCreateDate)).should('exist') cy.findByText(/Admin, Dataverse, 2023, "Dataset Title",/).should('exist') }) + it('should render the card with user roles', () => { const userRoles = ['Admin', 'Contributor'] const dataset = DatasetItemTypePreviewMother.create({ userRoles: userRoles }) @@ -29,4 +31,28 @@ describe('DatasetCard', () => { cy.findByText(role).should('exist') }) }) + + it('should render the dataset info correctly', () => { + const dataset = DatasetItemTypePreviewMother.createDraft() + cy.customMount() + + cy.findByText(DateHelper.toDisplayFormat(dataset.releaseOrCreateDate)).should('exist') + cy.findByText(/Admin, Dataverse, 2023, "Dataset Title",/) + .should('exist') + .parent() + .parent() + .should('have.class', styles['citation-box']) + cy.findByText(dataset.description).should('exist') + }) + + it('should render the citation with the deaccessioned background if the dataset is deaccessioned', () => { + const dataset = DatasetItemTypePreviewMother.createDeaccessioned() + cy.customMount() + + cy.findByText(/Admin, Dataverse, 2023, "Dataset Title",/) + .should('exist') + .parent() + .parent() + .should('have.class', styles['deaccesioned']) + }) }) diff --git a/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCardInfo.spec.tsx b/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCardInfo.spec.tsx deleted file mode 100644 index 9ef0f054f..000000000 --- a/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCardInfo.spec.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { DatasetCardInfo } from '@/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardInfo' -import { DatasetItemTypePreviewMother } from '../../../../dataset/domain/models/DatasetItemTypePreviewMother' -import { DateHelper } from '@/shared/helpers/DateHelper' -import styles from '@/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss' - -describe('DatasetCardInfo', () => { - it('should render the dataset info', () => { - const dataset = DatasetItemTypePreviewMother.createDraft() - cy.customMount( - - ) - - cy.findByText(DateHelper.toDisplayFormat(dataset.releaseOrCreateDate)).should('exist') - cy.findByText(/Admin, Dataverse, 2023, "Dataset Title",/) - .should('exist') - .parent() - .parent() - .should('have.class', styles['citation-box']) - cy.findByText(dataset.description).should('exist') - }) - - it('should render the citation with the deaccessioned background if the dataset is deaccessioned', () => { - const dataset = DatasetItemTypePreviewMother.createDeaccessioned() - cy.customMount( - - ) - - cy.findByText(/Admin, Dataverse, 2023, "Dataset Title",/) - .should('exist') - .parent() - .parent() - .should('have.class', styles['deaccesioned']) - }) -}) From b6608c39a39ac2f994f8de00b1f15921475aef52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Mon, 2 Jun 2025 08:34:34 -0300 Subject: [PATCH 02/14] feat: collection card layout tweaks --- .../CollectionCard.module.scss | 26 +++---- .../collection-card/CollectionCard.tsx | 14 ++-- ...ionCardInfo.tsx => CollectionCardBody.tsx} | 32 ++++----- .../dataset-card/DatasetCard.module.scss | 71 ++++++++++--------- .../dataset-card/DatasetCardBody.tsx | 2 +- 5 files changed, 67 insertions(+), 78 deletions(-) rename src/sections/collection/collection-items-panel/items-list/collection-card/{CollectionCardInfo.tsx => CollectionCardBody.tsx} (67%) diff --git a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss index 2e4fc4163..9f3793b23 100644 --- a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss +++ b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss @@ -50,11 +50,6 @@ } } -.thumbnail-and-info-wrapper { - display: flex; - gap: 1rem; -} - .card-thumbnail-container { padding-block: 0.25rem; @@ -78,22 +73,16 @@ } } -.card-info-container { +.card-body-container { align-self: flex-start; font-size: $dv-font-size-sm; - .date-link-wrapper { - display: flex; - flex-wrap: wrap; - column-gap: 0.5rem; - - .date { - color: $dv-subtext-color; - } + .release-or-create-date { + color: $dv-subtext-color; + } - a { - @include link-hover-underlined; - } + a { + @include link-hover-underlined; } .description { @@ -102,7 +91,8 @@ line-clamp: 3; -webkit-box-orient: vertical; width: 100%; + margin: 0; overflow: hidden; - color: black; + color: #000; } } diff --git a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.tsx b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.tsx index aaf5a56c5..92e5684b5 100644 --- a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.tsx +++ b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.tsx @@ -1,7 +1,6 @@ import { CollectionCardHeader } from './CollectionCardHeader' -import { CollectionCardThumbnail } from './CollectionCardThumbnail' -import { CollectionCardInfo } from './CollectionCardInfo' import { CollectionItemTypePreview } from '@/collection/domain/models/CollectionItemTypePreview' +import { CollectionCardBody } from './CollectionCardBody' import styles from './CollectionCard.module.scss' interface CollectionCardProps { @@ -13,13 +12,10 @@ export function CollectionCard({ collectionPreview, parentCollectionAlias }: Col return (
-
- - -
+
) } diff --git a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardInfo.tsx b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx similarity index 67% rename from src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardInfo.tsx rename to src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx index 0aaaec08d..45b8ebeab 100644 --- a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardInfo.tsx +++ b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx @@ -1,30 +1,31 @@ import { Stack } from '@iqss/dataverse-design-system' import { CollectionItemTypePreview } from '@/collection/domain/models/CollectionItemTypePreview' +import { LinkToPage } from '@/sections/shared/link-to-page/LinkToPage' import { DvObjectType } from '@/shared/hierarchy/domain/models/UpwardHierarchyNode' -import { DateHelper } from '@/shared/helpers/DateHelper' import { Route } from '@/sections/Route.enum' -import { LinkToPage } from '@/sections/shared/link-to-page/LinkToPage' +import { CollectionCardThumbnail } from './CollectionCardThumbnail' +import { DateHelper } from '@/shared/helpers/DateHelper' import styles from './CollectionCard.module.scss' -interface CollectionCardInfoProps { +interface CollectionCardBodyProps { collectionPreview: CollectionItemTypePreview parentCollectionAlias?: string } -export function CollectionCardInfo({ +export const CollectionCardBody = ({ collectionPreview, parentCollectionAlias -}: CollectionCardInfoProps) { +}: CollectionCardBodyProps) => { const isStandingOnParentCollectionPage = !!parentCollectionAlias && collectionPreview.parentCollectionAlias === parentCollectionAlias - return ( -
- -
+ + + + {!isStandingOnParentCollectionPage && ( @@ -35,12 +36,11 @@ export function CollectionCardInfo({ {collectionPreview.parentCollectionName} )} -
- - {collectionPreview.description && ( -

{collectionPreview.description}

- )} + -
+ {collectionPreview.description && ( +

{collectionPreview.description}

+ )} + ) } diff --git a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss index 866fc6d5d..47d5a7b00 100644 --- a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss +++ b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss @@ -63,45 +63,48 @@ } } -.release-or-create-date { - color: $dv-subtext-color; +.card-body-container { + align-self: flex-start; font-size: $dv-font-size-sm; -} - -.citation-box { - display: -webkit-box; - padding: 4px; - overflow: hidden; - font-size: $dv-font-size-sm; - background-color: color.adjust($dv-primary-color, $lightness: 51%); - border: solid 1px color.adjust($dv-primary-color, $lightness: 20%); - border-radius: 4px; - -webkit-line-clamp: 5; - line-clamp: 5; - -webkit-box-orient: vertical; - a { - word-break: break-all; + .release-or-create-date { + color: $dv-subtext-color; } - &.deaccesioned { - background-color: color.adjust($dv-danger-box-color, $lightness: 6%); - border: solid 1px color.adjust($dv-danger-color, $lightness: 20%); - } + .citation-box { + display: -webkit-box; + padding: 4px; + overflow: hidden; + font-size: $dv-font-size-sm; + background-color: color.adjust($dv-primary-color, $lightness: 51%); + border: solid 1px color.adjust($dv-primary-color, $lightness: 20%); + border-radius: 4px; + -webkit-line-clamp: 5; + line-clamp: 5; + -webkit-box-orient: vertical; + + a { + word-break: break-all; + } - & > div { - margin-bottom: 0; + &.deaccesioned { + background-color: color.adjust($dv-danger-box-color, $lightness: 6%); + border: solid 1px color.adjust($dv-danger-color, $lightness: 20%); + } + + & > div { + margin-bottom: 0; + } } -} -.description { - display: -webkit-box; - -webkit-line-clamp: 3; - line-clamp: 3; - -webkit-box-orient: vertical; - width: 100%; - margin: 0; - overflow: hidden; - color: #000; - font-size: $dv-font-size-sm; + .description { + display: -webkit-box; + -webkit-line-clamp: 3; + line-clamp: 3; + -webkit-box-orient: vertical; + width: 100%; + margin: 0; + overflow: hidden; + color: #000; + } } diff --git a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx index 710606250..4124915cc 100644 --- a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx +++ b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx @@ -15,7 +15,7 @@ export const DatasetCardBody = ({ datasetPreview }: DatasetCardBodyProps) => { const { version, releaseOrCreateDate, description } = datasetPreview return ( - + Date: Mon, 2 Jun 2025 10:19:16 -0300 Subject: [PATCH 03/14] feat: file card layout tweaks --- .../dataset-card/DatasetCardBody.tsx | 2 +- .../items-list/file-card/FileCard.module.scss | 21 +++---- .../items-list/file-card/FileCard.tsx | 8 +-- .../items-list/file-card/FileCardBody.tsx | 63 +++++++++++++++++++ .../items-list/file-card/FileCardInfo.tsx | 62 ------------------ 5 files changed, 74 insertions(+), 82 deletions(-) create mode 100644 src/sections/collection/collection-items-panel/items-list/file-card/FileCardBody.tsx delete mode 100644 src/sections/collection/collection-items-panel/items-list/file-card/FileCardInfo.tsx diff --git a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx index 4124915cc..6ef789890 100644 --- a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx +++ b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx @@ -16,7 +16,7 @@ export const DatasetCardBody = ({ datasetPreview }: DatasetCardBodyProps) => { return ( - + -
- - -
+ ) } diff --git a/src/sections/collection/collection-items-panel/items-list/file-card/FileCardBody.tsx b/src/sections/collection/collection-items-panel/items-list/file-card/FileCardBody.tsx new file mode 100644 index 000000000..78ebae823 --- /dev/null +++ b/src/sections/collection/collection-items-panel/items-list/file-card/FileCardBody.tsx @@ -0,0 +1,63 @@ +import { Stack } from '@iqss/dataverse-design-system' +import { FileItemTypePreview } from '@/files/domain/models/FileItemTypePreview' +import { FileCardHelper } from './FileCardHelper' +import { FileCardThumbnail } from './FileCardThumbnail' +import styles from './FileCard.module.scss' +import { LinkToPage } from '@/sections/shared/link-to-page/LinkToPage' +import { DateHelper } from '@/shared/helpers/DateHelper' +import { Route } from '@/sections/Route.enum' +import { DvObjectType } from '@/shared/hierarchy/domain/models/UpwardHierarchyNode' +import { PublicationStatus } from '@/shared/core/domain/models/PublicationStatus' +import { CopyToClipboardButton } from '@/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/copy-to-clipboard-button/CopyToClipboardButton' +import { FileLabels } from '@/sections/file/file-labels/FileLabels' + +interface FileCardBodyProps { + filePreview: FileItemTypePreview +} + +export const FileCardBody = ({ filePreview }: FileCardBodyProps) => { + const bytesFormatted = FileCardHelper.formatBytesToCompactNumber(filePreview.sizeInBytes) + const variables = filePreview.variables || 0 + const observations = filePreview.observations || 0 + + return ( + + + + + + + + {filePreview.datasetName} + + +
+ {filePreview.fileType} + {`- ${bytesFormatted}`} + {filePreview.fileType === 'Tab-Delimited' && ( + {`- ${variables} variables, ${observations} observations`} + )} + {filePreview.checksum && ( + + {`- ${filePreview.checksum.type}:`} + + + )} +
+ + + + {filePreview.description &&

{filePreview.description}

} + + ) +} diff --git a/src/sections/collection/collection-items-panel/items-list/file-card/FileCardInfo.tsx b/src/sections/collection/collection-items-panel/items-list/file-card/FileCardInfo.tsx deleted file mode 100644 index ea4c5da66..000000000 --- a/src/sections/collection/collection-items-panel/items-list/file-card/FileCardInfo.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Stack } from '@iqss/dataverse-design-system' -import { PublicationStatus } from '@/shared/core/domain/models/PublicationStatus' -import { FileItemTypePreview } from '@/files/domain/models/FileItemTypePreview' -import { DateHelper } from '@/shared/helpers/DateHelper' -import { FileCardHelper } from './FileCardHelper' -import { Route } from '@/sections/Route.enum' -import { DvObjectType } from '@/shared/hierarchy/domain/models/UpwardHierarchyNode' -import { LinkToPage } from '@/sections/shared/link-to-page/LinkToPage' -import { FileLabels } from '@/sections/file/file-labels/FileLabels' -import { CopyToClipboardButton } from '@/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/copy-to-clipboard-button/CopyToClipboardButton' -import styles from './FileCard.module.scss' - -interface FileCardInfoProps { - filePreview: FileItemTypePreview -} - -export function FileCardInfo({ filePreview }: FileCardInfoProps) { - const bytesFormatted = FileCardHelper.formatBytesToCompactNumber(filePreview.sizeInBytes) - const variables = filePreview.variables || 0 - const observations = filePreview.observations || 0 - - return ( -
- -
- - - {filePreview.datasetName} - -
- -
- {filePreview.fileType} - {`- ${bytesFormatted}`} - {filePreview.fileType === 'Tab-Delimited' && ( - {`- ${variables} variables, ${observations} observations`} - )} - {filePreview.checksum && ( - - {`- ${filePreview.checksum.type}:`} - - - )} -
-
- -
- {filePreview.description &&

{filePreview.description}

} - -
- ) -} From dec92b8f16bf66bcf5e7420e5ff3e36733452723 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Mon, 2 Jun 2025 12:42:51 -0300 Subject: [PATCH 04/14] fix: dataset and file labels using publicationStatues property --- .../items-list/dataset-card/DatasetCard.tsx | 1 + .../dataset-card/DatasetCardHeader.tsx | 56 +++++++++++++++---- .../items-list/file-card/FileCardHeader.tsx | 50 ++++++++++++----- .../items-list/file-card/FileCardHelper.ts | 24 +------- .../dataset-card/DatasetCardHeader.spec.tsx | 16 ++++-- 5 files changed, 96 insertions(+), 51 deletions(-) diff --git a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.tsx b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.tsx index 7b94441b6..e153030a0 100644 --- a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.tsx +++ b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.tsx @@ -14,6 +14,7 @@ export function DatasetCard({ datasetPreview }: DatasetCardProps) { persistentId={datasetPreview.persistentId} version={datasetPreview.version} userRoles={datasetPreview.userRoles} + publicationStatuses={datasetPreview.publicationStatuses} /> diff --git a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardHeader.tsx b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardHeader.tsx index e4e39110d..6f0db44d9 100644 --- a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardHeader.tsx +++ b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardHeader.tsx @@ -1,20 +1,30 @@ import { Route } from '@/sections/Route.enum' import { DatasetCardHelper } from './DatasetCardHelper' +import { Badge, Stack } from '@iqss/dataverse-design-system' import { DatasetVersion } from '@/dataset/domain/models/Dataset' import { DvObjectType } from '@/shared/hierarchy/domain/models/UpwardHierarchyNode' import { DatasetIcon } from '@/sections/dataset/dataset-icon/DatasetIcon' -import { DatasetLabels } from '@/sections/dataset/dataset-labels/DatasetLabels' import { LinkToPage } from '@/sections/shared/link-to-page/LinkToPage' +import { PublicationStatus } from '@/shared/core/domain/models/PublicationStatus' import styles from './DatasetCard.module.scss' -import { Badge } from '@iqss/dataverse-design-system' interface DatasetCardHeaderProps { persistentId: string version: DatasetVersion + publicationStatuses: PublicationStatus[] userRoles?: string[] } -export function DatasetCardHeader({ persistentId, version, userRoles }: DatasetCardHeaderProps) { +export function DatasetCardHeader({ + persistentId, + version, + publicationStatuses, + userRoles +}: DatasetCardHeaderProps) { + const publicationStatusesFiltered = publicationStatuses + .filter((status) => status !== PublicationStatus.Published) + .sort((a, b) => a.localeCompare(b)) + return (
@@ -28,13 +38,28 @@ export function DatasetCardHeader({ persistentId, version, userRoles }: DatasetC )}> {version.title} - - {userRoles && - userRoles.map((role, index) => ( -
- {role} -
- ))} + + + {publicationStatusesFiltered.length > 0 && ( + + {publicationStatusesFiltered.map((status) => ( + + {status} + + ))} + + )} + + {userRoles && ( + + {userRoles.map((role, index) => ( + + {role} + + ))} + + )} +
@@ -43,3 +68,14 @@ export function DatasetCardHeader({ persistentId, version, userRoles }: DatasetC
) } + +const BADGE_VARIANT_BY_PUBLICATION_STATUS: Record< + PublicationStatus, + 'primary' | 'secondary' | 'success' | 'danger' | 'warning' +> = { + [PublicationStatus.Draft]: 'primary', + [PublicationStatus.InReview]: 'success', + [PublicationStatus.Deaccessioned]: 'danger', + [PublicationStatus.Unpublished]: 'warning', + [PublicationStatus.Published]: 'secondary' // This status is not shown but included for completeness +} diff --git a/src/sections/collection/collection-items-panel/items-list/file-card/FileCardHeader.tsx b/src/sections/collection/collection-items-panel/items-list/file-card/FileCardHeader.tsx index af672762c..c934ed867 100644 --- a/src/sections/collection/collection-items-panel/items-list/file-card/FileCardHeader.tsx +++ b/src/sections/collection/collection-items-panel/items-list/file-card/FileCardHeader.tsx @@ -1,4 +1,4 @@ -import { Badge, Icon, IconName } from '@iqss/dataverse-design-system' +import { Badge, Icon, IconName, Stack } from '@iqss/dataverse-design-system' import { PublicationStatus } from '@/shared/core/domain/models/PublicationStatus' import { DvObjectType } from '@/shared/hierarchy/domain/models/UpwardHierarchyNode' import { FileItemTypePreview } from '@/files/domain/models/FileItemTypePreview' @@ -6,7 +6,6 @@ import { FileType } from '@/files/domain/models/FileMetadata' import { FileTypeToFileIconMap } from '@/sections/file/file-preview/FileTypeToFileIconMap' import { Route } from '@/sections/Route.enum' import { LinkToPage } from '@/sections/shared/link-to-page/LinkToPage' -import { DatasetLabels } from '@/sections/dataset/dataset-labels/DatasetLabels' import { FileCardHelper } from './FileCardHelper' import { FileAccessRestrictedIcon } from '../../../../file/file-access/FileAccessRestrictedIcon' import styles from './FileCard.module.scss' @@ -19,6 +18,10 @@ export function FileCardHeader({ filePreview }: FileCardHeaderProps) { const iconFileType = new FileType(filePreview.fileContentType) const iconName = FileTypeToFileIconMap[iconFileType.value] || IconName.OTHER + const publicationStatusesFiltered = filePreview.publicationStatuses + .filter((status) => status !== PublicationStatus.Published) + .sort((a, b) => a.localeCompare(b)) + return (
@@ -38,18 +41,28 @@ export function FileCardHeader({ filePreview }: FileCardHeaderProps) { )}> {filePreview.name} - + {publicationStatusesFiltered.length > 0 && ( + + {publicationStatusesFiltered.map((status) => ( + + {status} + + ))} + )} - /> - {filePreview.userRoles && - filePreview.userRoles.map((role, index) => ( -
- {role} -
- ))} + + {filePreview.userRoles && ( + + {filePreview.userRoles.map((role, index) => ( + + {role} + + ))} + + )} +
@@ -58,3 +71,14 @@ export function FileCardHeader({ filePreview }: FileCardHeaderProps) {
) } + +const BADGE_VARIANT_BY_PUBLICATION_STATUS: Record< + PublicationStatus, + 'primary' | 'secondary' | 'success' | 'danger' | 'warning' +> = { + [PublicationStatus.Draft]: 'primary', + [PublicationStatus.InReview]: 'success', + [PublicationStatus.Deaccessioned]: 'danger', + [PublicationStatus.Unpublished]: 'warning', + [PublicationStatus.Published]: 'secondary' // This status is not shown but included for completeness +} diff --git a/src/sections/collection/collection-items-panel/items-list/file-card/FileCardHelper.ts b/src/sections/collection/collection-items-panel/items-list/file-card/FileCardHelper.ts index cdd60c36b..88f0541a6 100644 --- a/src/sections/collection/collection-items-panel/items-list/file-card/FileCardHelper.ts +++ b/src/sections/collection/collection-items-panel/items-list/file-card/FileCardHelper.ts @@ -1,10 +1,4 @@ -import { - DatasetLabel, - DatasetLabelSemanticMeaning, - DatasetLabelValue, - DatasetNonNumericVersionSearchParam -} from '@/dataset/domain/models/Dataset' -import { PublicationStatus } from '@/shared/core/domain/models/PublicationStatus' +import { DatasetNonNumericVersionSearchParam } from '@/dataset/domain/models/Dataset' export class FileCardHelper { static getDatasetSearchParams(persistentId: string, isDraft: boolean): Record { @@ -22,22 +16,6 @@ export class FileCardHelper { return params } - static getDatasetLabels( - publicationStatuses: PublicationStatus[], - someDatasetVersionHasBeenReleased: boolean - ) { - const labels: DatasetLabel[] = [] - if (publicationStatuses.includes(PublicationStatus.Draft)) { - labels.push(new DatasetLabel(DatasetLabelSemanticMeaning.DATASET, DatasetLabelValue.DRAFT)) - } - if (!someDatasetVersionHasBeenReleased) { - labels.push( - new DatasetLabel(DatasetLabelSemanticMeaning.WARNING, DatasetLabelValue.UNPUBLISHED) - ) - } - return labels - } - static formatBytesToCompactNumber(bytes: number): string { const byteValueNumberFormatter = Intl.NumberFormat(undefined, { notation: 'compact', diff --git a/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCardHeader.spec.tsx b/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCardHeader.spec.tsx index f649c6a6d..c36e0a8ce 100644 --- a/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCardHeader.spec.tsx +++ b/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCardHeader.spec.tsx @@ -1,11 +1,16 @@ import { DatasetCardHeader } from '@/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardHeader' +import { PublicationStatus } from '@/shared/core/domain/models/PublicationStatus' import { DatasetItemTypePreviewMother } from '@tests/component/dataset/domain/models/DatasetItemTypePreviewMother' describe('DatasetCardHeader', () => { it('should render the header', () => { const dataset = DatasetItemTypePreviewMother.create() cy.customMount( - + ) cy.findByText(dataset.version.title) @@ -18,15 +23,16 @@ describe('DatasetCardHeader', () => { }&version=${dataset.version.number.toString()}` ) - dataset.version.labels.forEach((label) => { - cy.findByText(label.value).should('exist') - }) cy.findByLabelText('icon-dataset').should('exist') }) it('should render the correct search param for draft version', () => { const dataset = DatasetItemTypePreviewMother.createDraft() cy.customMount( - + ) cy.findByText(dataset.version.title) From 67ddfb170b6894b20c7f001e8829a602b3e43464 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Mon, 2 Jun 2025 12:43:21 -0300 Subject: [PATCH 05/14] feat: tweak badges layout collection card --- .../collection-card/CollectionCardHeader.tsx | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardHeader.tsx b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardHeader.tsx index e6530dd44..d663f7880 100644 --- a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardHeader.tsx +++ b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardHeader.tsx @@ -1,4 +1,4 @@ -import { Badge, Icon, IconName } from '@iqss/dataverse-design-system' +import { Badge, Icon, IconName, Stack } from '@iqss/dataverse-design-system' import { Route } from '@/sections/Route.enum' import { CollectionItemTypePreview } from '@/collection/domain/models/CollectionItemTypePreview' import { DvObjectType } from '@/shared/hierarchy/domain/models/UpwardHierarchyNode' @@ -22,17 +22,20 @@ export function CollectionCardHeader({ collectionPreview }: CollectionCardHeader {collectionPreview.affiliation && (

({collectionPreview.affiliation})

)} - {!collectionPreview.isReleased && ( -
- Unpublished -
- )} - {collectionPreview.userRoles && - collectionPreview.userRoles.map((role, index) => ( -
- {role} -
- ))} + + + {!collectionPreview.isReleased && Unpublished} + + {collectionPreview.userRoles && ( + + {collectionPreview.userRoles.map((role, index) => ( + + {role} + + ))} + + )} +
From 64956a75847cfb34f12be85f758c42ebf9ef98db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Mon, 2 Jun 2025 16:06:02 -0300 Subject: [PATCH 06/14] fix: affiliation inlined with title link --- .../CollectionCard.module.scss | 12 +++------- .../collection-card/CollectionCardHeader.tsx | 24 ++++++++++--------- 2 files changed, 16 insertions(+), 20 deletions(-) diff --git a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss index 9f3793b23..704ea0f60 100644 --- a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss +++ b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss @@ -20,15 +20,9 @@ @include link-hover-underlined; } - .left-side-content { - display: flex; - flex-wrap: wrap; - gap: 8px; - - .affiliation { - margin: 0; - color: $dv-subtext-color; - } + .affiliation { + margin-left: 6px; + color: $dv-subtext-color; } .title-and-labels { diff --git a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardHeader.tsx b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardHeader.tsx index d663f7880..9f75fc669 100644 --- a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardHeader.tsx +++ b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardHeader.tsx @@ -12,16 +12,18 @@ interface CollectionCardHeaderProps { export function CollectionCardHeader({ collectionPreview }: CollectionCardHeaderProps) { return (
-
- - {collectionPreview.name} - - {collectionPreview.affiliation && ( -

({collectionPreview.affiliation})

- )} + + + + {collectionPreview.name} + + {collectionPreview.affiliation && ( + ({collectionPreview.affiliation}) + )} + {!collectionPreview.isReleased && Unpublished} @@ -36,7 +38,7 @@ export function CollectionCardHeader({ collectionPreview }: CollectionCardHeader )} -
+
From f54023fd044b69498f7b89f5578d36001ff43069 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Mon, 2 Jun 2025 16:14:59 -0300 Subject: [PATCH 07/14] feat: using js-dv PR version --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9cc24ff30..52327e7d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@dnd-kit/sortable": "8.0.0", "@dnd-kit/utilities": "3.2.2", "@faker-js/faker": "7.6.0", - "@iqss/dataverse-client-javascript": "2.0.0-alpha.48", + "@iqss/dataverse-client-javascript": "2.0.0-pr312.bcfdaf4", "@iqss/dataverse-design-system": "*", "@istanbuljs/nyc-config-typescript": "1.0.2", "@tanstack/react-table": "8.9.2", @@ -3561,9 +3561,9 @@ }, "node_modules/@iqss/dataverse-client-javascript": { "name": "@IQSS/dataverse-client-javascript", - "version": "2.0.0-alpha.48", - "resolved": "https://npm.pkg.github.com/download/@IQSS/dataverse-client-javascript/2.0.0-alpha.48/40c12b030381bb947bfd2771d512e37f4fd979b8", - "integrity": "sha512-GHbdb0JnYSQwseMGzsOAq4wZgwycqw554AVEI/Aqd/9H385Pj9YM7X/YcsYPRkUpHSVIcLZJs4714EObE6QWuA==", + "version": "2.0.0-pr312.bcfdaf4", + "resolved": "https://npm.pkg.github.com/download/@IQSS/dataverse-client-javascript/2.0.0-pr312.bcfdaf4/489e1c7d9598c0b665040ae71a8450196b5a5503", + "integrity": "sha512-6dJm9OQgsCBDjdBiZjfVkqwMHzcrLvTp27Up3fgpucYL0vup8QawIfq4zKfJVXZtNuIGAM6uuVr6xy7+9/BgQQ==", "license": "MIT", "dependencies": { "@types/node": "^18.15.11", diff --git a/package.json b/package.json index b485cb47a..708710143 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "@dnd-kit/sortable": "8.0.0", "@dnd-kit/utilities": "3.2.2", "@faker-js/faker": "7.6.0", - "@iqss/dataverse-client-javascript": "2.0.0-alpha.48", + "@iqss/dataverse-client-javascript": "2.0.0-pr312.bcfdaf4", "@iqss/dataverse-design-system": "*", "@istanbuljs/nyc-config-typescript": "1.0.2", "@tanstack/react-table": "8.9.2", From c6c071f184431a4e1c62679f13d6ba8bda75b0f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Mon, 2 Jun 2025 16:55:18 -0300 Subject: [PATCH 08/14] feat: show dataset card parent collection link --- .../items-list/ItemsList.tsx | 7 +++- .../collection-card/CollectionCardBody.tsx | 1 + .../dataset-card/DatasetCard.module.scss | 4 ++ .../items-list/dataset-card/DatasetCard.tsx | 8 +++- .../dataset-card/DatasetCardBody.tsx | 37 ++++++++++++++++--- 5 files changed, 47 insertions(+), 10 deletions(-) diff --git a/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx b/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx index 6f7014681..3225842a4 100644 --- a/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx +++ b/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx @@ -175,12 +175,15 @@ export const ItemsList = forwardRef(
  • {collectionItem?.type === CollectionItemType.COLLECTION && ( )} {collectionItem?.type === CollectionItemType.DATASET && ( - + )} {collectionItem?.type === CollectionItemType.FILE && ( diff --git a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx index 45b8ebeab..74d09b8d0 100644 --- a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx +++ b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx @@ -18,6 +18,7 @@ export const CollectionCardBody = ({ }: CollectionCardBodyProps) => { const isStandingOnParentCollectionPage = !!parentCollectionAlias && collectionPreview.parentCollectionAlias === parentCollectionAlias + return ( diff --git a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss index 47d5a7b00..d0c10f7f6 100644 --- a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss +++ b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss @@ -71,6 +71,10 @@ color: $dv-subtext-color; } + .link-to-collection-wrapper a { + @include link-hover-underlined; + } + .citation-box { display: -webkit-box; padding: 4px; diff --git a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.tsx b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.tsx index e153030a0..eb4172ade 100644 --- a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.tsx +++ b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.tsx @@ -5,9 +5,10 @@ import styles from './DatasetCard.module.scss' interface DatasetCardProps { datasetPreview: DatasetItemTypePreview + parentCollectionAlias?: string } -export function DatasetCard({ datasetPreview }: DatasetCardProps) { +export function DatasetCard({ datasetPreview, parentCollectionAlias }: DatasetCardProps) { return (
    - +
    ) } diff --git a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx index 6ef789890..324bd63e1 100644 --- a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx +++ b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCardBody.tsx @@ -4,16 +4,26 @@ import { DatasetItemTypePreview } from '@/dataset/domain/models/DatasetItemTypeP import { DatasetPublishingStatus } from '@/dataset/domain/models/Dataset' import { DateHelper } from '@/shared/helpers/DateHelper' import { CitationDescription } from '@/sections/shared/citation/CitationDescription' +import { LinkToPage } from '@/sections/shared/link-to-page/LinkToPage' import { DatasetCardThumbnail } from './DatasetCardThumbnail' +import { DvObjectType } from '@/shared/hierarchy/domain/models/UpwardHierarchyNode' +import { Route } from '@/sections/Route.enum' import styles from './DatasetCard.module.scss' interface DatasetCardBodyProps { datasetPreview: DatasetItemTypePreview + parentCollectionAlias?: string } -export const DatasetCardBody = ({ datasetPreview }: DatasetCardBodyProps) => { +export const DatasetCardBody = ({ + datasetPreview, + parentCollectionAlias +}: DatasetCardBodyProps) => { const { version, releaseOrCreateDate, description } = datasetPreview + const isStandingOnParentCollectionPage = + !!parentCollectionAlias && datasetPreview.parentCollectionAlias === parentCollectionAlias + return ( @@ -23,11 +33,26 @@ export const DatasetCardBody = ({ datasetPreview }: DatasetCardBodyProps) => { thumbnail={datasetPreview.thumbnail} /> - + + + + {!isStandingOnParentCollectionPage && ( + + - + + {datasetPreview.parentCollectionName} + + + )} + +
    Date: Mon, 2 Jun 2025 17:19:26 -0300 Subject: [PATCH 09/14] chore: use alpha latest js-dv version --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 52327e7d8..7f57aad70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@dnd-kit/sortable": "8.0.0", "@dnd-kit/utilities": "3.2.2", "@faker-js/faker": "7.6.0", - "@iqss/dataverse-client-javascript": "2.0.0-pr312.bcfdaf4", + "@iqss/dataverse-client-javascript": "2.0.0-alpha.49", "@iqss/dataverse-design-system": "*", "@istanbuljs/nyc-config-typescript": "1.0.2", "@tanstack/react-table": "8.9.2", @@ -3561,9 +3561,9 @@ }, "node_modules/@iqss/dataverse-client-javascript": { "name": "@IQSS/dataverse-client-javascript", - "version": "2.0.0-pr312.bcfdaf4", - "resolved": "https://npm.pkg.github.com/download/@IQSS/dataverse-client-javascript/2.0.0-pr312.bcfdaf4/489e1c7d9598c0b665040ae71a8450196b5a5503", - "integrity": "sha512-6dJm9OQgsCBDjdBiZjfVkqwMHzcrLvTp27Up3fgpucYL0vup8QawIfq4zKfJVXZtNuIGAM6uuVr6xy7+9/BgQQ==", + "version": "2.0.0-alpha.49", + "resolved": "https://npm.pkg.github.com/download/@IQSS/dataverse-client-javascript/2.0.0-alpha.49/e408c52852e582909468df9978cd759e757f6785", + "integrity": "sha512-pX0GmwHz+VEsMorLwkcC42hFf8UlSzQ30W6T5qUq4aVSLHiMdQV98kjeXN//qsMe9OCpsb8KhGFAcGobvzGhSw==", "license": "MIT", "dependencies": { "@types/node": "^18.15.11", diff --git a/package.json b/package.json index 708710143..d203c8a7a 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "@dnd-kit/sortable": "8.0.0", "@dnd-kit/utilities": "3.2.2", "@faker-js/faker": "7.6.0", - "@iqss/dataverse-client-javascript": "2.0.0-pr312.bcfdaf4", + "@iqss/dataverse-client-javascript": "2.0.0-alpha.49", "@iqss/dataverse-design-system": "*", "@istanbuljs/nyc-config-typescript": "1.0.2", "@tanstack/react-table": "8.9.2", From 98b673ea1578376b0325098fd401837387230aa5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Tue, 3 Jun 2025 10:14:38 -0300 Subject: [PATCH 10/14] feat: add stories --- .../CollectionCard.module.scss | 2 +- .../collection-card/CollectionCardBody.tsx | 32 +++++++++++-------- .../dataset-card/DatasetCard.module.scss | 2 +- .../items-list/file-card/FileCardBody.tsx | 23 +++++++------ .../DatasetCard.stories.tsx | 14 ++++++++ .../models/DatasetItemTypePreviewMother.ts | 19 ++++++++++- 6 files changed, 66 insertions(+), 26 deletions(-) diff --git a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss index 704ea0f60..fdbc1d1e9 100644 --- a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss +++ b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss @@ -68,7 +68,7 @@ } .card-body-container { - align-self: flex-start; + align-items: flex-start; font-size: $dv-font-size-sm; .release-or-create-date { diff --git a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx index 74d09b8d0..4fbd19856 100644 --- a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx +++ b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx @@ -12,6 +12,8 @@ interface CollectionCardBodyProps { parentCollectionAlias?: string } +// TODO:ME - Add unit test for dataset card parent collection link. + export const CollectionCardBody = ({ collectionPreview, parentCollectionAlias @@ -20,28 +22,32 @@ export const CollectionCardBody = ({ !!parentCollectionAlias && collectionPreview.parentCollectionAlias === parentCollectionAlias return ( - - - - + + + + {!isStandingOnParentCollectionPage && ( - - {collectionPreview.parentCollectionName} - + + - + + {collectionPreview.parentCollectionName} + + )} + + {collectionPreview.description && ( +

    {collectionPreview.description}

    + )}     - {collectionPreview.description && ( -

    {collectionPreview.description}

    - )}     ) } diff --git a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss index d0c10f7f6..01f178300 100644 --- a/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss +++ b/src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss @@ -64,7 +64,7 @@ } .card-body-container { - align-self: flex-start; + align-items: flex-start; font-size: $dv-font-size-sm; .release-or-create-date { diff --git a/src/sections/collection/collection-items-panel/items-list/file-card/FileCardBody.tsx b/src/sections/collection/collection-items-panel/items-list/file-card/FileCardBody.tsx index 78ebae823..1198e0fd5 100644 --- a/src/sections/collection/collection-items-panel/items-list/file-card/FileCardBody.tsx +++ b/src/sections/collection/collection-items-panel/items-list/file-card/FileCardBody.tsx @@ -25,21 +25,24 @@ export const FileCardBody = ({ filePreview }: FileCardBodyProps) => { - + - - {filePreview.datasetName} - + + - + + {filePreview.datasetName} + +
    {filePreview.fileType} diff --git a/src/stories/collection/collection-items-panel/DatasetCard.stories.tsx b/src/stories/collection/collection-items-panel/DatasetCard.stories.tsx index 4edb1f002..ccf92b4ae 100644 --- a/src/stories/collection/collection-items-panel/DatasetCard.stories.tsx +++ b/src/stories/collection/collection-items-panel/DatasetCard.stories.tsx @@ -16,10 +16,24 @@ export const Default: Story = { render: () => } +export const Published: Story = { + render: () => +} + +export const DraftAndUnpublished: Story = { + render: () => ( + + ) +} + export const Deaccessioned: Story = { render: () => } +export const InReview: Story = { + render: () => +} + export const WithThumbnail: Story = { render: () => } diff --git a/tests/component/dataset/domain/models/DatasetItemTypePreviewMother.ts b/tests/component/dataset/domain/models/DatasetItemTypePreviewMother.ts index f3b4dbd14..9b523dce0 100644 --- a/tests/component/dataset/domain/models/DatasetItemTypePreviewMother.ts +++ b/tests/component/dataset/domain/models/DatasetItemTypePreviewMother.ts @@ -62,6 +62,14 @@ export class DatasetItemTypePreviewMother { }) } + static createDraftAndUnpublished(): DatasetItemTypePreview { + return this.create({ + version: DatasetVersionMother.createNotReleased(), + publicationStatuses: [PublicationStatus.Unpublished, PublicationStatus.Draft], + thumbnail: undefined + }) + } + static createWithThumbnail(): DatasetItemTypePreview { return this.create({ thumbnail: FakerHelper.getImageUrl() }) } @@ -72,7 +80,16 @@ export class DatasetItemTypePreviewMother { static createDeaccessioned(): DatasetItemTypePreview { return this.create({ - version: DatasetVersionMother.createDeaccessioned() + version: DatasetVersionMother.createDeaccessioned(), + publicationStatuses: [PublicationStatus.Deaccessioned] + }) + } + + static createInReview(): DatasetItemTypePreview { + return this.create({ + version: DatasetVersionMother.createDraft(), + publicationStatuses: [PublicationStatus.Draft, PublicationStatus.InReview], + thumbnail: undefined }) } } From 31ebb0d7a1c4333b45834ef1485b1f48e2e8a97a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Tue, 3 Jun 2025 11:18:53 -0300 Subject: [PATCH 11/14] test: add more cases --- src/sections/file/file-labels/FileLabels.tsx | 2 +- .../dataset-card/DatasetCard.spec.tsx | 29 ++++++++++++++ .../dataset-card/DatasetCardHeader.spec.tsx | 40 +++++++++++++++++++ .../file-card/FileCard.spec.tsx | 16 ++++++++ 4 files changed, 86 insertions(+), 1 deletion(-) diff --git a/src/sections/file/file-labels/FileLabels.tsx b/src/sections/file/file-labels/FileLabels.tsx index 403671774..b6894d877 100644 --- a/src/sections/file/file-labels/FileLabels.tsx +++ b/src/sections/file/file-labels/FileLabels.tsx @@ -9,7 +9,7 @@ const VARIANT_BY_LABEL_TYPE: Record = { export function FileLabels({ labels }: { labels: FileLabel[] }) { return ( -
    +
    {labels.map((label, index) => ( {label.value} diff --git a/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCard.spec.tsx b/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCard.spec.tsx index 33cf25341..d875099ff 100644 --- a/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCard.spec.tsx +++ b/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCard.spec.tsx @@ -2,6 +2,7 @@ import { DatasetCard } from '@/sections/collection/collection-items-panel/items- import { DatasetItemTypePreviewMother } from '@tests/component/dataset/domain/models/DatasetItemTypePreviewMother' import { DateHelper } from '@/shared/helpers/DateHelper' import styles from '@/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss' +import { Route } from '@/sections/Route.enum' describe('DatasetCard', () => { it('should render the card', () => { @@ -55,4 +56,32 @@ describe('DatasetCard', () => { .parent() .should('have.class', styles['deaccesioned']) }) + + describe('Parent Collection Link', () => { + it('should render it if parentCollectionAlias is not the one where the dataset card is being shown', () => { + const dataset = DatasetItemTypePreviewMother.create({ + parentCollectionAlias: 'parent-collection-alias', + parentCollectionName: 'Parent Collection Name' + }) + cy.customMount( + + ) + + cy.findByText('Parent Collection Name') + .should('exist') + .should('have.attr', 'href', `${Route.COLLECTIONS_BASE}/parent-collection-alias`) + }) + + it('should not render it if parentCollectionAlias is the same as the one where the dataset card is being shown', () => { + const dataset = DatasetItemTypePreviewMother.create({ + parentCollectionAlias: 'parent-collection-alias', + parentCollectionName: 'Parent Collection Name' + }) + cy.customMount( + + ) + + cy.findByText('Parent Collection Name').should('not.exist') + }) + }) }) diff --git a/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCardHeader.spec.tsx b/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCardHeader.spec.tsx index c36e0a8ce..5bc17f397 100644 --- a/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCardHeader.spec.tsx +++ b/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCardHeader.spec.tsx @@ -39,4 +39,44 @@ describe('DatasetCardHeader', () => { .should('exist') .should('have.attr', 'href', `/datasets?persistentId=${dataset.persistentId}&version=DRAFT`) }) + + it('should sort the publication statuses by name', () => { + const dataset = DatasetItemTypePreviewMother.create({ + publicationStatuses: [ + PublicationStatus.Unpublished, + PublicationStatus.Draft, + PublicationStatus.InReview + ] + }) + cy.customMount( + + ) + + cy.findAllByText(PublicationStatus.Draft).should('exist') + cy.findAllByText(PublicationStatus.InReview).should('exist') + cy.findAllByText(PublicationStatus.Unpublished).should('exist') + + cy.get('.badge').then((badges) => { + expect(badges[0].textContent).to.equal(PublicationStatus.Draft) + expect(badges[1].textContent).to.equal(PublicationStatus.InReview) + expect(badges[2].textContent).to.equal(PublicationStatus.Unpublished) + }) + }) + + it('should filter out and dont render the Published status badge', () => { + const dataset = DatasetItemTypePreviewMother.create() + cy.customMount( + + ) + + cy.findByText(PublicationStatus.Published).should('not.exist') + }) }) diff --git a/tests/component/sections/collection/collection-items-panel/file-card/FileCard.spec.tsx b/tests/component/sections/collection/collection-items-panel/file-card/FileCard.spec.tsx index 7ab9b3c30..de83b35bd 100644 --- a/tests/component/sections/collection/collection-items-panel/file-card/FileCard.spec.tsx +++ b/tests/component/sections/collection/collection-items-panel/file-card/FileCard.spec.tsx @@ -67,4 +67,20 @@ describe('FileCard', () => { .should('have.attr', 'href') .and('include', 'version=DRAFT') }) + + it('should not show any tag if the file has no tags', () => { + const filePreview = FileItemTypePreviewMother.create({ tags: [] }) + cy.customMount() + cy.findByTestId('file-labels').children().should('have.length', 0) + }) + + it('should default to 0 variables and 0 observations if file is tabular and they are not present', () => { + const filePreview = FileItemTypePreviewMother.create({ + fileType: 'Tab-Delimited', + variables: undefined, + observations: undefined + }) + cy.customMount() + cy.contains('0 variables, 0 observations').should('exist') + }) }) From d2b5ad4f1775645fa9a7b19e11609f00ec1720a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Tue, 3 Jun 2025 11:54:57 -0300 Subject: [PATCH 12/14] remove todo --- .../items-list/collection-card/CollectionCardBody.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx index 4fbd19856..f4136324c 100644 --- a/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx +++ b/src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx @@ -12,8 +12,6 @@ interface CollectionCardBodyProps { parentCollectionAlias?: string } -// TODO:ME - Add unit test for dataset card parent collection link. - export const CollectionCardBody = ({ collectionPreview, parentCollectionAlias From 6098f2343810f9a319affa3e3ac4d19920dc0dde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Tue, 3 Jun 2025 16:53:23 -0300 Subject: [PATCH 13/14] feat: pr comments --- .../collection-items-panel/dataset-card/DatasetCard.spec.tsx | 2 +- .../collection-items-panel/file-card/FileCard.spec.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCard.spec.tsx b/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCard.spec.tsx index d875099ff..4fd60fe41 100644 --- a/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCard.spec.tsx +++ b/tests/component/sections/collection/collection-items-panel/dataset-card/DatasetCard.spec.tsx @@ -1,8 +1,8 @@ +import { Route } from '@/sections/Route.enum' import { DatasetCard } from '@/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard' import { DatasetItemTypePreviewMother } from '@tests/component/dataset/domain/models/DatasetItemTypePreviewMother' import { DateHelper } from '@/shared/helpers/DateHelper' import styles from '@/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss' -import { Route } from '@/sections/Route.enum' describe('DatasetCard', () => { it('should render the card', () => { diff --git a/tests/component/sections/collection/collection-items-panel/file-card/FileCard.spec.tsx b/tests/component/sections/collection/collection-items-panel/file-card/FileCard.spec.tsx index de83b35bd..0d4259211 100644 --- a/tests/component/sections/collection/collection-items-panel/file-card/FileCard.spec.tsx +++ b/tests/component/sections/collection/collection-items-panel/file-card/FileCard.spec.tsx @@ -71,6 +71,7 @@ describe('FileCard', () => { it('should not show any tag if the file has no tags', () => { const filePreview = FileItemTypePreviewMother.create({ tags: [] }) cy.customMount() + cy.findByTestId('file-labels').children().should('have.length', 0) }) @@ -81,6 +82,7 @@ describe('FileCard', () => { observations: undefined }) cy.customMount() + cy.contains('0 variables, 0 observations').should('exist') }) }) From bd7f4e7c6411ee9f3c760728727fb327d4b0c82f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Tue, 3 Jun 2025 17:59:20 -0300 Subject: [PATCH 14/14] fix: a11ty test --- .../collection-items-panel/CollectionCard.stories.tsx | 1 + .../collection/domain/models/CollectionItemTypePreviewMother.ts | 2 ++ 2 files changed, 3 insertions(+) diff --git a/src/stories/collection/collection-items-panel/CollectionCard.stories.tsx b/src/stories/collection/collection-items-panel/CollectionCard.stories.tsx index e50285374..c3975d4f6 100644 --- a/src/stories/collection/collection-items-panel/CollectionCard.stories.tsx +++ b/src/stories/collection/collection-items-panel/CollectionCard.stories.tsx @@ -25,6 +25,7 @@ export const Default: Story = { export const WithLongDescription: Story = { render: () => { const collectionPreview = CollectionItemTypePreviewMother.create({ + name: 'Scientific Research Collection', description: FakerHelper.paragraph(20) }) return ( diff --git a/tests/component/collection/domain/models/CollectionItemTypePreviewMother.ts b/tests/component/collection/domain/models/CollectionItemTypePreviewMother.ts index 73fd9ff2c..a54079217 100644 --- a/tests/component/collection/domain/models/CollectionItemTypePreviewMother.ts +++ b/tests/component/collection/domain/models/CollectionItemTypePreviewMother.ts @@ -75,6 +75,7 @@ export class CollectionItemTypePreviewMother { } static createUnpublished(): CollectionItemTypePreview { return CollectionItemTypePreviewMother.createWithOnlyRequiredFields({ + name: 'Scientific Research Collection', isReleased: false, affiliation: FakerHelper.affiliation() }) @@ -93,6 +94,7 @@ export class CollectionItemTypePreviewMother { static createWithThumbnail(): CollectionItemTypePreview { return CollectionItemTypePreviewMother.create({ + name: 'Scientific Research Collection', thumbnail: FakerHelper.getImageUrl() }) }