Feature/127 add alert messages to dataset view

public/locales/en/dataset.json

@@ -22,8 +22,17 @@
     "uploadFiles": "Upload Files"
   },
   "alerts": {
-    "draftVersion": "<b>This draft version needs to be published</b>. When ready for sharing, please <b>publish</b> it so that others can see these changes",
-    "requestedVersionNotFound": "Info – Version {0} was not found. This is version {1}",
-    "unpublishedDataset": "Privately share this dataset before it is published: {0}"
+    "draftVersion": {
+      "heading": "This draft version needs to be published",
+      "alertText": "When ready for sharing, please <b>publish</b> it so that others can see these changes"
+    },
+    "requestedVersionNotFound": {
+      "heading": "Information",
+      "alertText": "Version {{requestedVersion}} was not found. This is version {{returnedVersion}}."
+    },
+    "unpublishedDataset": {
+      "heading": "Unpublished Dataset Private URL",
+      "alertText": "Privately share this dataset before it is published: {{privateUrl}}"
+    }
   }
 }

src/dataset/domain/models/Dataset.ts

@@ -34,8 +34,7 @@ export class DatasetAlert {
   constructor(
     public readonly variant: AlertVariant,
     public readonly message: DatasetAlertMessageKey,
-    public readonly dynamicFields?: string[],
-    public readonly customHeading?: string
+    public readonly dynamicFields?: object
   ) {}
 }
 
@@ -326,12 +325,13 @@ export class Dataset {
 
     private withAlerts(): void {
       if (this.version.publishingStatus === DatasetPublishingStatus.DRAFT) {
-        this.alerts.push(
-          new DatasetAlert('warning', DatasetAlertMessageKey.DRAFT_VERSION, undefined, 'Info')
-        )
+        this.alerts.push(new DatasetAlert('warning', DatasetAlertMessageKey.DRAFT_VERSION))
       }
       if (this.version.requestedVersion) {
-        const dynamicFields = [this.version.requestedVersion, `${this.version.toString()}`]
+        const dynamicFields = {
+          requestedVersion: this.version.requestedVersion,
+          returnedVersion: `${this.version.toString()}`
+        }
 
         this.alerts.push(
           new DatasetAlert(
@@ -342,14 +342,9 @@ export class Dataset {
         )
       }
       if (this.privateUrl) {
-        const dynamicFields = [this.privateUrl]
+        const dynamicFields = { privateUrl: this.privateUrl }
         this.alerts.push(
-          new DatasetAlert(
-            'info',
-            DatasetAlertMessageKey.UNPUBLISHED_DATASET,
-            dynamicFields,
-            'Unpublished Dataset Private URL'
-          )
+          new DatasetAlert('info', DatasetAlertMessageKey.UNPUBLISHED_DATASET, dynamicFields)
         )
       }
     }

src/sections/dataset/Dataset.tsx

@@ -12,6 +12,7 @@ import { DatasetSummary } from './dataset-summary/DatasetSummary'
 import { DatasetCitation } from './dataset-citation/DatasetCitation'
 import { DatasetFiles } from './dataset-files/DatasetFiles'
 import { FileRepository } from '../../files/domain/repositories/FileRepository'
+import { DatasetAlerts } from './dataset-alerts/DatasetAlerts'
 
 interface DatasetProps {
   datasetRepository: DatasetRepository
@@ -38,6 +39,7 @@ export function Dataset({ datasetRepository, fileRepository, searchParams }: Dat
         <PageNotFound />
       ) : (
         <article>
+          <DatasetAlerts alerts={dataset.alerts} />
           <header className={styles.header}>
             <h1>{dataset.getTitle()}</h1>
             <DatasetLabels labels={dataset.labels} />

src/sections/dataset/dataset-alerts/DatasetAlerts.module.scss

@@ -0,0 +1,3 @@
+.container > * {
+  margin-right: 0.5em;
+}

src/sections/dataset/dataset-alerts/DatasetAlerts.tsx

@@ -0,0 +1,34 @@
+import { Alert } from '@iqss/dataverse-design-system'
+import { DatasetAlert } from '../../../dataset/domain/models/Dataset'
+import { useTranslation } from 'react-i18next'
+import styles from './DatasetAlerts.module.scss'
+import parse from 'html-react-parser'
+
+interface DatasetAlertsProps {
+  alerts: DatasetAlert[]
+}
+
+export function DatasetAlerts({ alerts }: DatasetAlertsProps) {
+  const { t } = useTranslation('dataset')
+
+  return (
+    <div className={styles.container}>
+      {alerts.map((alert: DatasetAlert, index) => {
+        const translatedMsg = alert.dynamicFields
+          ? t(`alerts.${alert.message}.alertText`, alert.dynamicFields)
+          : t(`alerts.${alert.message}.alertText`)
+        const translatedHeading = t(`alerts.${alert.message}.heading`)
+        const alertKey = `alert-${index}`
+        return (
+          <Alert
+            key={alertKey}
+            variant={alert.variant}
+            customHeading={translatedHeading}
+            dismissible={false}>
+            {parse(translatedMsg)}
+          </Alert>
+        )
+      })}
+    </div>
+  )
+}

src/stories/dataset/Dataset.stories.tsx

@@ -13,6 +13,7 @@ import { WithSettings } from '../WithSettings'
 import { WithLoggedInUser } from '../WithLoggedInUser'
 import { WithFilePermissionsDenied } from '../files/file-permission/WithFilePermissionsDenied'
 import { WithFilePermissionsGranted } from '../files/file-permission/WithFilePermissionsGranted'
+import { DatasetMockDraftVersionRepository } from './DatasetMockDraftVersionRepository'
 
 const meta: Meta<typeof Dataset> = {
   title: 'Pages/Dataset',
@@ -41,7 +42,7 @@ export const LoggedInAsOwner: Story = {
   decorators: [WithLayout, WithLoggedInUser, WithFilePermissionsGranted],
   render: () => (
     <Dataset
-      datasetRepository={new DatasetMockRepository()}
+      datasetRepository={new DatasetMockDraftVersionRepository()}
       fileRepository={new FileMockRepository()}
       searchParams={{ persistentId: 'doi:10.5082/FK2/ABC123' }}
     />

src/stories/dataset/DatasetMockDataDraftVersion.ts

@@ -0,0 +1,111 @@
+import {
+  ANONYMIZED_FIELD_VALUE,
+  DatasetPublishingStatus,
+  DatasetVersion,
+  DatasetLabelSemanticMeaning,
+  DatasetLabelValue,
+  DatasetMetadataBlocks
+} from '../../dataset/domain/models/Dataset'
+import { MetadataBlockName } from '../../dataset/domain/models/Dataset'
+import { Dataset } from '../../dataset/domain/models/Dataset'
+
+export const DatasetMockDataDraftVersion = (
+  props?: Partial<Dataset>,
+  anonymized = false
+): Dataset => {
+  const dataset = {
+    persistentId: 'doi:10.5072/FK2/ABC123',
+    citation: `${
+      anonymized ? 'Author name(s) withheld' : 'Bennet, Elizabeth; Darcy, Fitzwilliam'
+    }, 2023, "Dataset Title", <a href="https://doi.org/10.5072/FK2/BUDNRV" target="_blank">https://doi.org/10.5072/FK2/BUDNRV</a>, Root, V1`,
+    version: new DatasetVersion(1, DatasetPublishingStatus.DRAFT, 1, 0),
+    labels: [
+      { value: 'Version 1.0', semanticMeaning: DatasetLabelSemanticMeaning.FILE },
+      { value: DatasetLabelValue.DRAFT, semanticMeaning: DatasetLabelSemanticMeaning.DATASET }
+    ],
+    license: {
+      name: 'CC0 1.0',
+      uri: 'https://creativecommons.org/publicdomain/zero/1.0/',
+      iconUri: 'https://licensebuttons.net/p/zero/1.0/88x31.png'
+    },
+    summaryFields: [
+      {
+        name: MetadataBlockName.CITATION,
+        fields: {
+          dsDescription: [
+            {
+              dsDescriptionValue:
+                'This text is *italic* and this is **bold**. Here is an image ![Alt text](https://picsum.photos/id/10/20/20) '
+            }
+          ],
+          keyword: 'Malaria, Tuberculosis, Drug Resistant',
+          subject: 'Medicine, Health and Life Sciences, Social Sciences',
+          publication: 'CNN Journal [CNN.com](https://cnn.com)',
+          notesText: 'Here is an image ![Alt text](https://picsum.photos/id/10/40/40)'
+        }
+      }
+    ],
+    metadataBlocks: [
+      {
+        name: MetadataBlockName.CITATION,
+        fields: {
+          alternativePersistentId: 'doi:10.5072/FK2/ABC123',
+          publicationDate: anonymized ? ANONYMIZED_FIELD_VALUE : '2021-01-01',
+          citationDate: '2023-01-01',
+          title: 'Dataset Title',
+          subject: ['Subject1', 'Subject2'],
+          author: anonymized
+            ? ANONYMIZED_FIELD_VALUE
+            : [
+                {
+                  authorName: 'Admin, Dataverse',
+                  authorAffiliation: 'Dataverse.org',
+                  authorIdentifierScheme: 'ORCID',
+                  authorIdentifier: '0000-0002-1825-1097'
+                },
+                {
+                  authorName: 'Owner, Dataverse',
+                  authorAffiliation: 'Dataverse.org',
+                  authorIdentifierScheme: 'ORCID',
+                  authorIdentifier: '0000-0032-1825-0098'
+                }
+              ],
+          datasetContact: anonymized
+            ? ANONYMIZED_FIELD_VALUE
+            : [
+                {
+                  datasetContactName: 'Admin, Dataverse'
+                }
+              ],
+          dsDescription: [
+            {
+              dsDescriptionValue:
+                'This text is *italic* and this is **bold**. Here is an image ![Alt text](https://picsum.photos/id/10/20/20) '
+            }
+          ]
+        }
+      },
+      {
+        name: MetadataBlockName.GEOSPATIAL,
+        fields: {
+          geographicUnit: 'km',
+          geographicCoverage: anonymized
+            ? ANONYMIZED_FIELD_VALUE
+            : {
+                geographicCoverageCountry: 'United States',
+                geographicCoverageCity: 'Cambridge'
+              }
+        }
+      }
+    ] as DatasetMetadataBlocks,
+    ...props
+  }
+  return new Dataset.Builder(
+    dataset.persistentId,
+    dataset.version,
+    dataset.citation,
+    dataset.summaryFields,
+    dataset.license,
+    dataset.metadataBlocks
+  ).build()
+}

src/stories/dataset/DatasetMockDraftVersionRepository.ts

@@ -0,0 +1,22 @@
+import { DatasetRepository } from '../../dataset/domain/repositories/DatasetRepository'
+import { Dataset as DatasetModel } from '../../dataset/domain/models/Dataset'
+import { DatasetMockDataDraftVersion } from './DatasetMockDataDraftVersion'
+
+export class DatasetMockDraftVersionRepository implements DatasetRepository {
+  getByPersistentId(persistentId: string): Promise<DatasetModel | undefined> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(DatasetMockDataDraftVersion({ persistentId: persistentId }))
+      }, 1000)
+    })
+  }
+
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  getByPrivateUrlToken(privateUrlToken: string): Promise<DatasetModel | undefined> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(DatasetMockDataDraftVersion({}, true))
+      }, 1000)
+    })
+  }
+}

src/stories/dataset/dataset-alerts/DatasetAlert.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DatasetMockData } from '../DatasetMockData'
+import {
+  DatasetAlert,
+  DatasetAlertMessageKey,
+  DatasetPublishingStatus,
+  DatasetVersion
+} from '../../../dataset/domain/models/Dataset'
+import { DatasetAlerts } from '../../../sections/dataset/dataset-alerts/DatasetAlerts'
+import { WithI18next } from '../../WithI18next'
+
+const meta: Meta<typeof DatasetAlerts> = {
+  title: 'Sections/Dataset Page/DatasetAlerts',
+  component: DatasetAlerts,
+  decorators: [WithI18next]
+}
+
+export default meta
+type Story = StoryObj<typeof DatasetAlerts>
+
+export const DraftVersion: Story = {
+  render: () => {
+    const dataset = DatasetMockData({
+      version: new DatasetVersion(1, DatasetPublishingStatus.DRAFT, 1, 0)
+    })
+    return (
+      <div>
+        <DatasetAlerts alerts={dataset.alerts} />
+      </div>
+    )
+  }
+}
+export const VersionNotFound: Story = {
+  render: () => {
+    const dataset = DatasetMockData({
+      version: new DatasetVersion(1, DatasetPublishingStatus.RELEASED, 1, 0, '3.0')
+    })
+    return (
+      <div>
+        <DatasetAlerts alerts={dataset.alerts} />
+      </div>
+    )
+  }
+}
+export const PrivateUrl: Story = {
+  render: () => {
+    const alerts = [
+      new DatasetAlert(
+        'info',
+        DatasetAlertMessageKey.UNPUBLISHED_DATASET,
+        {
+          privateUrl:
+            'http://localhost:8080/privateurl.xhtml?token=f6815782-1227-4d80-a46d-91621c2d9386'
+        },
+        'Unpublished Dataset Private URL'
+      )
+    ]
+
+    return (
+      <div>
+        <DatasetAlerts alerts={alerts} />
+      </div>
+    )
+  }
+}

tests/component/dataset/infrastructure/mappers/JSDatasetMapper.spec.ts

@@ -65,9 +65,7 @@ const expectedDataset = {
     { semanticMeaning: 'dataset', value: 'Draft' },
     { semanticMeaning: 'warning', value: 'Unpublished' }
   ],
-  alerts: [
-    { variant: 'warning', message: 'draftVersion', dynamicFields: undefined, customHeading: 'Info' }
-  ],
+  alerts: [{ variant: 'warning', message: 'draftVersion', dynamicFields: undefined }],
   summaryFields: [
     {
       name: 'citation',
@@ -126,14 +124,12 @@ const expectedDatasetAlternateVersion = {
     {
       variant: 'warning',
       message: 'draftVersion',
-      dynamicFields: undefined,
-      customHeading: 'Info'
+      dynamicFields: undefined
     },
     {
       message: 'requestedVersionNotFound',
       variant: 'info',
-      dynamicFields: ['4.0', '0.0'],
-      customHeading: undefined
+      dynamicFields: { requestedVersion: '4.0', returnedVersion: '0.0' }
     }
   ],
   summaryFields: [