Feature/211 edit publish alert messages

.eslintrc.json

@@ -39,12 +39,23 @@
   "plugins": ["react", "simple-import-sort", "import", "unused-imports"],
   "rules": {
     "@typescript-eslint/no-unused-vars": "off",
+    "react/prop-types": "off",
     "unused-imports/no-unused-imports": "error",
     "unused-imports/no-unused-vars": [
       "warn",
-      { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "@typescript-eslint/no-empty-function": [
+      "error",
+      {
+        "allow": ["arrowFunctions"]
+      }
     ],
-    "@typescript-eslint/no-empty-function": ["error", { "allow": ["arrowFunctions"] }],
     "react/react-in-jsx-scope": "off",
     "prettier/prettier": [
       "error",

public/locales/en/dataset.json

@@ -58,6 +58,30 @@
     "uploadFiles": "Upload Files"
   },
   "alerts": {
+    "publishInProgress": {
+      "heading": "Publish in Progress",
+      "alertText": "The dataset is locked while the persistent identifiers are being registered or updated, and/or the physical files are being validated."
+    },
+    "filesUpdated": {
+      "heading": "Success!",
+      "alertText": "One or more files have been updated."
+    },
+    "termsUpdated": {
+      "heading": "Success!",
+      "alertText": "The terms for this dataset have been updated."
+    },
+    "thumbnailUpdated": {
+      "heading": "Success!",
+      "alertText": "Dataset thumbnail updated."
+    },
+    "datasetDeleted": {
+      "heading": "Success!",
+      "alertText": "This dataset draft has been deleted."
+    },
+    "metadataUpdated": {
+      "heading": "Success!",
+      "alertText": "The metadata for this dataset has been updated."
+    },
     "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"

src/dataset/domain/models/Dataset.ts

@@ -29,14 +29,20 @@ export enum DatasetAlertMessageKey {
   REQUESTED_VERSION_NOT_FOUND = 'requestedVersionNotFound',
   REQUESTED_VERSION_NOT_FOUND_SHOW_DRAFT = 'requestedVersionNotFoundShowDraft',
   SHARE_UNPUBLISHED_DATASET = 'shareUnpublishedDataset',
-  UNPUBLISHED_DATASET = 'unpublishedDataset'
+  UNPUBLISHED_DATASET = 'unpublishedDataset',
+  METADATA_UPDATED = 'metadataUpdated',
+  FILES_UPDATED = 'filesUpdated',
+  TERMS_UPDATED = 'termsUpdated',
+  THUMBNAIL_UPDATED = 'thumbnailUpdated',
+  DATASET_DELETED = 'datasetDeleted',
+  PUBLISH_IN_PROGRESS = 'publishInProgress'
 }
 
 export class DatasetAlert {
   constructor(
     public readonly variant: AlertVariant,
-    public readonly message: DatasetAlertMessageKey,
-    public readonly dynamicFields?: object
+    public readonly messageKey: DatasetAlertMessageKey,
+    public dynamicFields?: object
   ) {}
 }
 

src/sections/alerts/Alerts.module.scss

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

src/sections/alerts/Alerts.tsx

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

src/sections/dataset/DatasetAlertContext.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react'
+
+import { DatasetAlert, DatasetAlertMessageKey } from '../../dataset/domain/models/Dataset'
+
+interface DatasetAlertContextProps {
+  setDatasetAlerts: (datasetAlerts: DatasetAlert[]) => void
+  datasetAlerts: DatasetAlert[]
+  addDatasetAlert: (newAlert: DatasetAlert) => void
+  removeDatasetAlert: (alertId: DatasetAlertMessageKey) => void
+}
+
+export const DatasetAlertContext = createContext<DatasetAlertContextProps>({
+  datasetAlerts: [],
+  setDatasetAlerts: /* istanbul ignore next */ () => {},
+  addDatasetAlert: () => {},
+  removeDatasetAlert: () => {}
+})
+export const useDatasetAlertContext = () => useContext(DatasetAlertContext)

src/sections/dataset/DatasetAlertProvider.tsx

@@ -0,0 +1,32 @@
+import { PropsWithChildren, useState } from 'react'
+import { DatasetAlertContext } from './DatasetAlertContext'
+
+import { DatasetAlert, DatasetAlertMessageKey } from '../../dataset/domain/models/Dataset'
+
+export const DatasetAlertProvider = ({ children }: PropsWithChildren) => {
+  const [datasetAlerts, setDatasetAlerts] = useState<DatasetAlert[]>([])
+
+  const addDatasetAlert = (newAlert: DatasetAlert) => {
+    setDatasetAlerts((prevAlerts) => [...prevAlerts, newAlert])
+  }
+  // This function will be accessible by any child component to update the datasetAlerts state
+  const handleSetDatasetAlerts = (alerts: DatasetAlert[]) => {
+    setDatasetAlerts(alerts)
+  }
+  const removeDatasetAlert = (alertId: DatasetAlertMessageKey) => {
+    console.log('deleting alert', alertId)
+    setDatasetAlerts((prevAlerts) => prevAlerts.filter((alert) => alert.messageKey !== alertId))
+  }
+
+  return (
+    <DatasetAlertContext.Provider
+      value={{
+        datasetAlerts,
+        setDatasetAlerts: handleSetDatasetAlerts,
+        addDatasetAlert,
+        removeDatasetAlert
+      }}>
+      {children}
+    </DatasetAlertContext.Provider>
+  )
+}

src/sections/dataset/DatasetFactory.tsx

@@ -11,6 +11,7 @@ import { SettingJSDataverseRepository } from '../../settings/infrastructure/Sett
 import { FilePermissionsProvider } from '../file/file-permissions/FilePermissionsProvider'
 import { SettingsProvider } from '../settings/SettingsProvider'
 import { DatasetProvider } from './DatasetProvider'
+import { DatasetAlertProvider } from './DatasetAlertProvider'
 
 const datasetRepository = new DatasetJSDataverseRepository()
 const fileRepository = new FileJSDataverseRepository()
@@ -24,7 +25,9 @@ export class DatasetFactory {
         <SettingsProvider repository={settingRepository}>
           <MetadataBlockInfoProvider repository={metadataBlockInfoRepository}>
             <AnonymizedProvider>
-              <DatasetWithSearchParams />
+              <DatasetAlertProvider>
+                <DatasetWithSearchParams />
+              </DatasetAlertProvider>
             </AnonymizedProvider>
           </MetadataBlockInfoProvider>
         </SettingsProvider>

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

@@ -1,34 +1,13 @@
-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'
+import { useDatasetAlertContext } from '../DatasetAlertContext'
+import { Alerts } from '../../alerts/Alerts'
 
 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>
-  )
+  const statusAlerts = useDatasetAlertContext()
+  alerts = alerts.concat(statusAlerts.datasetAlerts)
+  return <Alerts alerts={alerts}></Alerts>
 }

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

@@ -1,22 +1,75 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { DatasetPublishingStatus, DatasetVersion } from '../../../dataset/domain/models/Dataset'
+import {
+  DatasetAlert,
+  DatasetAlertMessageKey,
+  DatasetPublishingStatus,
+  DatasetVersion
+} from '../../../dataset/domain/models/Dataset'
 import { DatasetAlerts } from '../../../sections/dataset/dataset-alerts/DatasetAlerts'
 import { WithI18next } from '../../WithI18next'
 
 import {
   DatasetMother,
   DatasetPermissionsMother
 } from '../../../../tests/component/dataset/domain/models/DatasetMother'
+import { DatasetAlertContext } from '../../../sections/dataset/DatasetAlertContext'
 
 const meta: Meta<typeof DatasetAlerts> = {
   title: 'Sections/Dataset Page/DatasetAlerts',
   component: DatasetAlerts,
   decorators: [WithI18next]
 }
+const allUpdateAlerts: DatasetAlert[] = [
+  new DatasetAlert('success', DatasetAlertMessageKey.METADATA_UPDATED),
+  new DatasetAlert('success', DatasetAlertMessageKey.THUMBNAIL_UPDATED),
+  new DatasetAlert('success', DatasetAlertMessageKey.TERMS_UPDATED),
+  new DatasetAlert('success', DatasetAlertMessageKey.FILES_UPDATED),
+  new DatasetAlert('success', DatasetAlertMessageKey.DATASET_DELETED)
+]
 
 export default meta
 type Story = StoryObj<typeof DatasetAlerts>
+export const UpdateAlerts: Story = {
+  render: () => {
+    const dataset = DatasetMother.createRealistic()
+
+    return (
+      <DatasetAlertContext.Provider
+        value={{
+          datasetAlerts: allUpdateAlerts,
+          setDatasetAlerts: () => {},
+          addDatasetAlert: () => {},
+          removeDatasetAlert: () => {}
+        }}>
+        <div>
+          <DatasetAlerts alerts={dataset.alerts} />
+        </div>
+      </DatasetAlertContext.Provider>
+    )
+  }
+}
+
+const publishAlert = new DatasetAlert('warning', DatasetAlertMessageKey.PUBLISH_IN_PROGRESS)
+export const PublishInProgress: Story = {
+  render: () => {
+    const dataset = DatasetMother.createRealistic()
+
+    return (
+      <DatasetAlertContext.Provider
+        value={{
+          datasetAlerts: [publishAlert],
+          setDatasetAlerts: () => {},
+          addDatasetAlert: () => {},
+          removeDatasetAlert: () => {}
+        }}>
+        <div>
+          <DatasetAlerts alerts={dataset.alerts} />
+        </div>
+      </DatasetAlertContext.Provider>
+    )
+  }
+}
 
 export const DraftVersion: Story = {
   render: () => {

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

@@ -69,7 +69,7 @@ const expectedDataset = {
     { semanticMeaning: 'dataset', value: 'Draft' },
     { semanticMeaning: 'warning', value: 'Unpublished' }
   ],
-  alerts: [{ variant: 'warning', message: 'draftVersion', dynamicFields: undefined }],
+  alerts: [{ variant: 'warning', messageKey: 'draftVersion', dynamicFields: undefined }],
   summaryFields: [
     {
       name: 'citation',
@@ -148,11 +148,11 @@ const expectedDatasetAlternateVersion = {
   alerts: [
     {
       variant: 'warning',
-      message: 'draftVersion',
+      messageKey: 'draftVersion',
       dynamicFields: undefined
     },
     {
-      message: 'requestedVersionNotFoundShowDraft',
+      messageKey: 'requestedVersionNotFoundShowDraft',
       variant: 'warning',
       dynamicFields: { requestedVersion: '4.0' }
     }

tests/component/sections/dataset/dataset-alerts/DatasetAlerts.spec.tsx

@@ -28,6 +28,12 @@ interface DatasetTranslation {
     [DatasetAlertMessageKey.REQUESTED_VERSION_NOT_FOUND_SHOW_DRAFT]: AlertTranslation
     [DatasetAlertMessageKey.UNPUBLISHED_DATASET]: AlertTranslation
     [DatasetAlertMessageKey.SHARE_UNPUBLISHED_DATASET]: AlertTranslation
+    [DatasetAlertMessageKey.METADATA_UPDATED]: AlertTranslation
+    [DatasetAlertMessageKey.FILES_UPDATED]: AlertTranslation
+    [DatasetAlertMessageKey.PUBLISH_IN_PROGRESS]: AlertTranslation
+    [DatasetAlertMessageKey.TERMS_UPDATED]: AlertTranslation
+    [DatasetAlertMessageKey.DATASET_DELETED]: AlertTranslation
+    [DatasetAlertMessageKey.THUMBNAIL_UPDATED]: AlertTranslation
   }
 }
 
@@ -63,8 +69,8 @@ it('renders alerts with correct text', () => {
   cy.fixture('../../../public/locales/en/dataset.json').then((dataset: DatasetTranslation) => {
     cy.mount(<DatasetAlerts alerts={alerts} />)
 
-    const alertHeading = dataset.alerts[draftAlert.message].heading
-    const alertText = removeMarkup(dataset.alerts[draftAlert.message].alertText)
+    const alertHeading = dataset.alerts[draftAlert.messageKey].heading
+    const alertText = removeMarkup(dataset.alerts[draftAlert.messageKey].alertText)
     cy.findByText(alertHeading).should('exist')
     cy.findByRole('alert').should(($element) => {
       // text() removes markup, so we can compare to the expected text