feat: refactor DatasetAlerts.tsx to call a generic Alerts component

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/dataset-alerts/DatasetAlerts.tsx

@@ -1,9 +1,7 @@
-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[]
@@ -13,24 +11,5 @@ export function DatasetAlerts({ alerts }: DatasetAlertsProps) {
   const { t } = useTranslation('dataset')
   const statusAlerts = useDatasetAlertContext()
   alerts = alerts.concat(statusAlerts.datasetAlerts)
-  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>
-  )
+  return <Alerts alerts={alerts}></Alerts>
 }