From 02f0f4a0106a9c5d3eb73fc42258d198b95329ab Mon Sep 17 00:00:00 2001
From: Josh Larson <theMutatedShrimp@gmail.com>
Date: Wed, 2 Oct 2024 14:26:49 -0400
Subject: [PATCH]  fix: Add images to alerts that are rendered on react pages
 (#2181)

---
 assets/ts/__v3api.d.ts          | 12 +++++++-----
 assets/ts/components/Alerts.tsx |  9 +++++++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/assets/ts/__v3api.d.ts b/assets/ts/__v3api.d.ts
index 1ea0d81b17..ef6ece34b0 100644
--- a/assets/ts/__v3api.d.ts
+++ b/assets/ts/__v3api.d.ts
@@ -257,16 +257,18 @@ export type TimePeriodPairs = [string, string];
 export interface Alert {
   id: string;
   active_period: TimePeriodPairs[];
+  banner: string | null;
   header: string;
-  informed_entity: InformedEntitySet;
+  description: string;
   effect: string;
-  severity: number;
+  image?: string;
+  image_alternative_text?: string;
+  informed_entity: InformedEntitySet;
   lifecycle: Lifecycle;
-  updated_at: string;
-  description: string;
   priority: Priority;
+  severity: number;
+  updated_at: string;
   url: string | null;
-  banner: string | null;
 }
 
 interface DatesNotes {
diff --git a/assets/ts/components/Alerts.tsx b/assets/ts/components/Alerts.tsx
index f36fb26d6e..a9c946441a 100644
--- a/assets/ts/components/Alerts.tsx
+++ b/assets/ts/components/Alerts.tsx
@@ -174,6 +174,15 @@ const alertDescription = (alert: AlertType): ReactElement<HTMLElement> => (
     aria-labelledby={`alert-${alert.id}`}
     ref={panel => panel && panel.focus()}
   >
+    {alert.image && (
+      <a href={alert.image} target="_blank" rel="noopener noreferrer">
+        <img
+          src={alert.image}
+          alt={alert.image_alternative_text}
+          className="w-100"
+        />
+      </a>
+    )}
     <div className="c-alert-item__description">
       <div
         // eslint-disable-next-line react/no-danger