feat: support markdown in notifications (#17075)

BrunoQuaresma · web-flow · commit e8d5f98edef0 · 2025-03-24T13:46:43.000-03:00
To make the notification content more appealing, we are sending the
notification content as markdown from the server, so we need to adjust
the FE to display it properly.
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx
@@ -48,6 +48,16 @@ export const LongText: Story = {
 	},
 };
 
+export const Markdown: Story = {
+	args: {
+		notification: {
+			...MockNotification,
+			read_at: null,
+			content: "Hello **world**!",
+		},
+	},
+};
+
 export const UnreadFocus: Story = {
 	args: {
 		notification: {
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx
@@ -3,7 +3,9 @@ import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
 import { SquareCheckBig } from "lucide-react";
 import type { FC } from "react";
+import Markdown from "react-markdown";
 import { Link as RouterLink } from "react-router-dom";
+import { cn } from "utils/cn";
 import { relativeTime } from "utils/time";
 
 type InboxItemProps = {
@@ -26,8 +28,13 @@ export const InboxItem: FC<InboxItemProps> = ({
 			</div>
 
 			<div className="flex flex-col gap-3 flex-1">
-				<span className="text-content-secondary text-sm font-medium whitespace-break-spaces [overflow-wrap:anywhere]">
-					{notification.content}
+				<span
+					className={cn([
+						"text-content-secondary text-sm font-medium whitespace-break-spaces [overflow-wrap:anywhere]",
+						"[&_p]:m-0",
+					])}
+				>
+					<Markdown>{notification.content}</Markdown>
 				</span>
 				<div className="flex items-center gap-1">
 					{notification.actions.map((action) => {
