merged develop

cypress.config.ts

@@ -15,7 +15,8 @@ export default defineConfig({
     supportFile: 'tests/support/e2e.ts',
     setupNodeEvents(on) {
       on('file:preprocessor', vitePreprocessor(path.resolve(__dirname, './vite.config.ts')))
-    }
+    },
+    defaultCommandTimeout: 10_000 // https://docs.cypress.io/guides/references/configuration#Timeouts
   },
   component: {
     indexHtmlFile: 'tests/support/component-index.html',

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-pr169.aa49f06",
+    "@iqss/dataverse-client-javascript": "2.0.0-pr187.f29c0e6",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",
@@ -45,7 +45,8 @@
     "use-deep-compare": "1.2.1",
     "vite-plugin-istanbul": "4.0.1",
     "web-vitals": "2.1.4",
-    "js-md5": "0.8.3"
+    "js-md5": "0.8.3",
+    "async-mutex": "0.5.0"
   },
   "scripts": {
     "start": "vite --base=/spa",

src/collection/domain/models/CollectionPreview.ts

@@ -0,0 +1,11 @@
+export interface CollectionPreview {
+  id: string
+  name: string
+  isReleased: boolean
+  releaseOrCreateDate: Date
+  parentCollectionId?: string
+  parentCollectionName?: string
+  description?: string
+  affiliation?: string
+  thumbnail?: string
+}

src/dataset/domain/models/Dataset.ts

@@ -217,10 +217,6 @@ export enum DatasetNonNumericVersion {
 export enum DatasetNonNumericVersionSearchParam {
   DRAFT = 'DRAFT'
 }
-// TODO: Maybe add this to some routing related folder or file
-export enum QueryParamsKeys {
-  VERSION = 'version'
-}
 
 export class DatasetVersionNumber {
   constructor(public readonly majorNumber?: number, public readonly minorNumber?: number) {}

src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts

@@ -131,15 +131,11 @@ export class DatasetJSDataverseRepository implements DatasetRepository {
       .execute(persistentId, version, includeDeaccessioned)
       .then((jsDataset) => this.fetchDatasetDetails(jsDataset, version))
       .then((datasetDetails) => {
-        if (datasetDetails.jsDatasetPermissions.canEditDataset) {
-          return this.fetchDownloadSizes(persistentId, version).then((downloadSizes) => {
-            datasetDetails.jsDatasetFilesTotalOriginalDownloadSize = downloadSizes[0]
-            datasetDetails.jsDatasetFilesTotalArchivalDownloadSize = downloadSizes[1]
-            return datasetDetails
-          })
-        } else {
+        return this.fetchDownloadSizes(persistentId, version).then((downloadSizes) => {
+          datasetDetails.jsDatasetFilesTotalOriginalDownloadSize = downloadSizes[0]
+          datasetDetails.jsDatasetFilesTotalArchivalDownloadSize = downloadSizes[1]
           return datasetDetails
-        }
+        })
       })
       .then((datasetDetails) => {
         return JSDatasetMapper.toDataset(

src/files/domain/models/FileUploadState.ts

@@ -152,7 +152,7 @@ export class FileUploadTools {
         uploadedFile.restricted,
         uploadedFile.storageId as string,
         uploadedFile.checksumValue as string,
-        uploadedFile.fileType
+        uploadedFile.fileType === '' ? 'application/octet-stream' : uploadedFile.fileType // some browsers (e.g., chromium for .java files) fail to detect the mime type for some files and leave the fileType as an empty string, we use the default value 'application/octet-stream' in that case
       )
     )
   }

src/sections/Route.enum.ts

@@ -17,3 +17,8 @@ export const RouteWithParams = {
   CREATE_COLLECTION: (ownerCollectionId?: string) =>
     `/collections/${ownerCollectionId ?? 'root'}/create`
 }
+
+export enum QueryParamKey {
+  VERSION = 'version',
+  PERSISTENT_ID = 'persistentId'
+}

src/sections/collection/datasets-list/DatasetsList.tsx

@@ -56,7 +56,7 @@ export function DatasetsList({ datasetRepository, page, collectionId }: Datasets
             <PaginationResultsInfo paginationInfo={paginationInfo} />
           </div>
           {datasets.map((dataset) => (
-            <DatasetCard dataset={dataset} key={dataset.persistentId} />
+            <DatasetCard dataset={dataset} key={`${dataset.persistentId}-${dataset.version.id}`} />
           ))}
           <PaginationControls
             onPaginationInfoChange={setPaginationInfo}

src/sections/collection/datasets-list/DatasetsListWithInfiniteScroll.tsx

@@ -91,7 +91,7 @@ export function DatasetsListWithInfiniteScroll({
             <PaginationResultsInfo paginationInfo={paginationInfo} accumulated={accumulatedCount} />
           </div>
           {accumulatedDatasets.map((dataset) => (
-            <DatasetCard dataset={dataset} key={dataset.persistentId} />
+            <DatasetCard dataset={dataset} key={`${dataset.persistentId}-${dataset.version.id}`} />
           ))}
         </>
       )}

src/sections/collection/datasets-list/collection-card/CollectionCard.module.scss

@@ -0,0 +1,70 @@
+@use 'sass:color';
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module";
+@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module";
+
+.container {
+  margin: 6px 0;
+  padding: 4px 10px;
+  border: 1px solid $dv-collection-border-color;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.title {
+  display: flex;gap: 8px;
+}
+
+.icon {
+  margin-top: 2px;
+  color: $dv-collection-border-color;
+  font-size: 1.3em;
+  line-height: 1.1;
+
+  > div >span {
+    margin-right: 0;
+  }
+}
+
+.thumbnail {
+  width: 48px;
+  margin: 8px 12px 6px 0;
+  font-size: 2.8em;
+
+  img {
+      vertical-align: top;
+  }
+}
+
+.info {
+  display: flex;
+  color: $dv-subtext-color;
+}
+
+.card-info-container {
+  display: flex;
+  font-size: $dv-font-size-sm;
+}
+
+.description {
+  display: -webkit-box; -webkit-line-clamp: 3;  line-clamp: 3; -webkit-box-orient: vertical;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+  color: black;
+}
+
+.date {
+  color: $dv-subtext-color;
+
+}
+
+.affiliation {
+  color: $dv-subtext-color;
+}
+
+.badge {
+  margin-right: 0.5em;
+}

src/sections/collection/datasets-list/collection-card/CollectionCard.tsx

@@ -0,0 +1,24 @@
+import { CollectionCardHeader } from './CollectionCardHeader'
+import { CollectionCardThumbnail } from './CollectionCardThumbnail'
+import { CollectionCardInfo } from './CollectionCardInfo'
+import { Stack } from '@iqss/dataverse-design-system'
+import { CollectionPreview } from '../../../../collection/domain/models/CollectionPreview'
+import styles from './CollectionCard.module.scss'
+
+interface CollectionCardProps {
+  collectionPreview: CollectionPreview
+}
+
+export function CollectionCard({ collectionPreview }: CollectionCardProps) {
+  return (
+    <article className={styles.container}>
+      <CollectionCardHeader collectionPreview={collectionPreview} />
+      <div className={styles.info}>
+        <Stack direction={'horizontal'} gap={3}>
+          <CollectionCardThumbnail collectionPreview={collectionPreview} />
+          <CollectionCardInfo collectionPreview={collectionPreview} />
+        </Stack>
+      </div>
+    </article>
+  )
+}

src/sections/collection/datasets-list/collection-card/CollectionCardHeader.tsx

@@ -0,0 +1,39 @@
+import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
+import { Route } from '../../../Route.enum'
+import { CollectionPreview } from '../../../../collection/domain/models/CollectionPreview'
+import styles from './CollectionCard.module.scss'
+import { Badge, Icon, IconName } from '@iqss/dataverse-design-system'
+import { DvObjectType } from '../../../../shared/hierarchy/domain/models/UpwardHierarchyNode'
+
+interface CollectionCardHeaderProps {
+  collectionPreview: CollectionPreview
+}
+
+export function CollectionCardHeader({ collectionPreview }: CollectionCardHeaderProps) {
+  return (
+    <>
+      <div className={styles.header}>
+        <div className={styles.title}>
+          <LinkToPage
+            type={DvObjectType.COLLECTION}
+            page={Route.COLLECTIONS}
+            searchParams={{ id: collectionPreview.id.toString() }}>
+            {collectionPreview.name}
+          </LinkToPage>
+          {collectionPreview.affiliation && (
+            <span className={styles.affiliation}> ({collectionPreview.affiliation})</span>
+          )}
+          {!collectionPreview.isReleased && (
+            <div className={styles.badge}>
+              <Badge variant="warning">Unpublished</Badge>
+            </div>
+          )}
+        </div>
+
+        <div className={styles.icon}>
+          <Icon name={IconName.COLLECTION} />
+        </div>
+      </div>
+    </>
+  )
+}

src/sections/collection/datasets-list/collection-card/CollectionCardHelper.ts

@@ -0,0 +1,17 @@
+import {
+  DatasetLabel,
+  DatasetLabelSemanticMeaning,
+  DatasetLabelValue
+} from '../../../../dataset/domain/models/Dataset'
+export class CollectionCardHelper {
+  static getLabel(isReleased: boolean) {
+    const labels: DatasetLabel[] = []
+
+    if (!isReleased) {
+      labels.push(
+        new DatasetLabel(DatasetLabelSemanticMeaning.WARNING, DatasetLabelValue.UNPUBLISHED)
+      )
+    }
+    return labels
+  }
+}

src/sections/collection/datasets-list/collection-card/CollectionCardInfo.tsx

@@ -0,0 +1,35 @@
+import styles from './CollectionCard.module.scss'
+import { DateHelper } from '../../../../shared/helpers/DateHelper'
+import { Stack } from '@iqss/dataverse-design-system'
+import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
+import { Route } from '../../../Route.enum'
+import { CollectionPreview } from '../../../../collection/domain/models/CollectionPreview'
+import { DvObjectType } from '../../../../shared/hierarchy/domain/models/UpwardHierarchyNode'
+
+interface CollectionCardInfoProps {
+  collectionPreview: CollectionPreview
+}
+
+export function CollectionCardInfo({ collectionPreview }: CollectionCardInfoProps) {
+  return (
+    <div className={styles['card-info-container']}>
+      <Stack gap={1}>
+        <Stack direction="horizontal" gap={2}>
+          <span className={styles.date}>
+            {DateHelper.toDisplayFormat(collectionPreview.releaseOrCreateDate)}
+          </span>
+          {collectionPreview.parentCollectionName && collectionPreview.parentCollectionId && (
+            <LinkToPage
+              type={DvObjectType.COLLECTION}
+              page={Route.COLLECTIONS}
+              searchParams={{ id: collectionPreview.parentCollectionId.toString() }}>
+              {collectionPreview.parentCollectionName}
+            </LinkToPage>
+          )}
+        </Stack>
+
+        <p className={styles.description}>{collectionPreview.description}</p>
+      </Stack>
+    </div>
+  )
+}

src/sections/collection/datasets-list/collection-card/CollectionCardThumbnail.tsx

@@ -0,0 +1,33 @@
+import styles from './CollectionCard.module.scss'
+import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
+import { Route } from '../../../Route.enum'
+import { Icon, IconName } from '@iqss/dataverse-design-system'
+import { CollectionPreview } from '../../../../collection/domain/models/CollectionPreview'
+import { DvObjectType } from '../../../../shared/hierarchy/domain/models/UpwardHierarchyNode'
+
+interface CollectionCardCardThumbnailProps {
+  collectionPreview: CollectionPreview
+}
+
+export function CollectionCardThumbnail({ collectionPreview }: CollectionCardCardThumbnailProps) {
+  return (
+    <div className={styles.thumbnail}>
+      <LinkToPage
+        type={DvObjectType.COLLECTION}
+        page={Route.COLLECTIONS}
+        searchParams={{ id: collectionPreview.id.toString() }}>
+        {collectionPreview.thumbnail ? (
+          <img
+            className={styles['preview-image']}
+            src={collectionPreview.thumbnail}
+            alt={collectionPreview.name}
+          />
+        ) : (
+          <div className={styles.icon}>
+            <Icon name={IconName.COLLECTION} />
+          </div>
+        )}
+      </LinkToPage>
+    </div>
+  )
+}