From 1b4edbaf940e598952731ea0dac1824816af413f Mon Sep 17 00:00:00 2001
From: Ellen Kraffmiller <ekraffmiller@hmdc.harvard.edu>
Date: Mon, 6 Nov 2023 16:11:17 -0500
Subject: [PATCH] feat: refactor DatasetAlerts.tsx to call a generic Alerts
 component

---
 src/sections/alerts/Alerts.module.scss        |  4 +++
 src/sections/alerts/Alerts.tsx                | 34 +++++++++++++++++++
 .../dataset/dataset-alerts/DatasetAlerts.tsx  | 25 ++------------
 3 files changed, 40 insertions(+), 23 deletions(-)
 create mode 100644 src/sections/alerts/Alerts.module.scss
 create mode 100644 src/sections/alerts/Alerts.tsx

diff --git a/src/sections/alerts/Alerts.module.scss b/src/sections/alerts/Alerts.module.scss
new file mode 100644
index 000000000..3a63a82e6
--- /dev/null
+++ b/src/sections/alerts/Alerts.module.scss
@@ -0,0 +1,4 @@
+.container > * {
+  margin-top: 1em;
+  margin-right: 0.5em;
+}
\ No newline at end of file
diff --git a/src/sections/alerts/Alerts.tsx b/src/sections/alerts/Alerts.tsx
new file mode 100644
index 000000000..3d4337f2e
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx b/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx
index e532591af..ae081dce4 100644
--- a/src/sections/dataset/dataset-alerts/DatasetAlerts.tsx
+++ b/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>
 }