Merge pull request IQSS#372 from IQSS/feature/358-add-unpublished-lab…

…el-to-collections-page

Feature/358 add unpublished label to collections page

src/collection/domain/models/Collection.ts

@@ -4,6 +4,7 @@ export interface Collection {
   id: string
   name: string
   hierarchy: UpwardHierarchyNode
+  isReleased: boolean
   description?: string
   affiliation?: string
 }

src/collection/infrastructure/mappers/JSCollectionMapper.ts

@@ -14,6 +14,7 @@ export class JSCollectionMapper {
     return {
       id: jsCollection.alias,
       name: jsCollection.name,
+      isReleased: true, // TODO: replace with real value, waiting for https://github.com/IQSS/dataverse-client-javascript/issues/139
       description: jsCollection.description,
       affiliation: jsCollection.affiliation,
       hierarchy: JSCollectionMapper.toHierarchy(

src/sections/collection/Collection.module.scss

@@ -12,6 +12,11 @@
   margin-bottom: $spacer;
 }
 
+.infoContainer {
+  display: flex;
+  gap: 10px;
+}
+
 .subtext {
   color: $dv-subtext-color;
 }

src/sections/collection/CollectionInfo.tsx

@@ -1,6 +1,8 @@
 import { Collection } from '../../collection/domain/models/Collection'
 import styles from './Collection.module.scss'
 import { MarkdownComponent } from '../dataset/markdown/MarkdownComponent'
+import { Badge } from '@iqss/dataverse-design-system'
+import { DatasetLabelSemanticMeaning } from '../../dataset/domain/models/Dataset'
 
 interface CollectionInfoProps {
   collection: Collection
@@ -11,9 +13,14 @@ export function CollectionInfo({ collection }: CollectionInfoProps) {
     <>
       <header className={styles.header}>
         <h1>{collection.name}</h1>
-        {collection.affiliation && (
-          <span className={styles.subtext}>({collection.affiliation})</span>
-        )}
+        <div className={styles.infoContainer}>
+          {collection.affiliation && (
+            <span className={styles.subtext}>({collection.affiliation})</span>
+          )}
+          {!collection.isReleased && (
+            <Badge variant={DatasetLabelSemanticMeaning.WARNING}>Unpublished</Badge>
+          )}
+        </div>
       </header>
       {collection.description && (
         <div>

src/stories/collection/CollectionInfo.stories.tsx

@@ -24,6 +24,9 @@ export const WithAffiliation: Story = {
   render: () => <CollectionInfo collection={CollectionMother.createWithAffiliation()} />
 }
 
+export const Unpublished: Story = {
+  render: () => <CollectionInfo collection={CollectionMother.createUnpublished()} />
+}
 export const WithDescription: Story = {
   render: () => <CollectionInfo collection={CollectionMother.createWithDescription()} />
 }

tests/component/collection/domain/models/CollectionMother.ts

@@ -8,6 +8,7 @@ export class CollectionMother {
     return {
       id: faker.datatype.uuid(),
       name: faker.lorem.words(3),
+      isReleased: faker.datatype.boolean(),
       description: faker.datatype.boolean()
         ? `${faker.lorem.paragraph()} **${faker.lorem.sentence()}** ${faker.lorem.paragraph()}`
         : undefined,
@@ -20,6 +21,7 @@ export class CollectionMother {
   static createRealistic(): Collection {
     return CollectionMother.create({
       id: 'science',
+      isReleased: true,
       name: 'Collection Name',
       description: 'We do all the science.',
       affiliation: 'Scientific Research University'
@@ -30,6 +32,7 @@ export class CollectionMother {
     return CollectionMother.create({
       id: faker.datatype.uuid(),
       name: FakerHelper.collectionName(),
+      isReleased: faker.datatype.boolean(),
       affiliation: undefined,
       description: undefined,
       ...props
@@ -39,12 +42,18 @@ export class CollectionMother {
   static createComplete(): Collection {
     return CollectionMother.create({
       id: faker.datatype.uuid(),
+      isReleased: faker.datatype.boolean(),
       name: FakerHelper.collectionName(),
       description: FakerHelper.paragraph(),
       affiliation: FakerHelper.affiliation()
     })
   }
-
+  static createUnpublished(): Collection {
+    return CollectionMother.createWithOnlyRequiredFields({
+      isReleased: false,
+      affiliation: FakerHelper.affiliation()
+    })
+  }
   static createWithDescription(): Collection {
     return CollectionMother.createWithOnlyRequiredFields({
       description: FakerHelper.paragraph()

tests/component/sections/collection/CollectionInfo.spec.tsx

@@ -6,6 +6,7 @@ describe('CollectionInfo', () => {
     const collection = CollectionMother.create({
       name: 'Collection Name',
       affiliation: 'Affiliation',
+      isReleased: true,
       description: 'Here is a description with [a link](https://dataverse.org)'
     })
     cy.customMount(<CollectionInfo collection={collection} />)
@@ -14,6 +15,7 @@ describe('CollectionInfo', () => {
     cy.findByText('(Affiliation)').should('exist')
     cy.findByText(/Here is a description with/).should('exist')
     cy.findByRole('link', { name: 'a link' }).should('exist')
+    cy.findByText('Unpublished').should('not.exist')
   })
 
   it('does not render affiliation when it is not present', () => {
@@ -33,4 +35,10 @@ describe('CollectionInfo', () => {
 
     cy.findByText('Description').should('not.exist')
   })
+  it('renders unpublished label when isReleased is false', () => {
+    const collection = CollectionMother.createUnpublished()
+    cy.customMount(<CollectionInfo collection={collection} />)
+
+    cy.findByText('Unpublished').should('exist')
+  })
 })

tests/e2e-integration/integration/collection/CollectionJSDataverseRepository.spec.ts

@@ -12,6 +12,7 @@ const collectionExpected = {
   id: 'new-collection',
   name: 'Scientific Research',
   description: 'We do all the science.',
+  isReleased: true,
   affiliation: 'Scientific Research University',
   hierarchy: new UpwardHierarchyNode(
     'Scientific Research',