refactor: improve markdown rendering on notifications (cherry-pick #17112) (#17197)

gcp-cherry-pick-bot[bot] · BrunoQuaresma · web-flow · commit ebefec696820 · 2025-04-01T17:11:15.000-05:00
Cherry-picked refactor: improve markdown rendering on notifications (#17112) **Before:** <img width="753" alt="Screenshot 2025-03-26 at 11 11 46" src="https://github.com/user-attachments/assets/d4504de9-d007-43bf-9e0b-a8ff1b04da2c" /> **After:** ![image](https://github.com/user-attachments/assets/5a249a48-e2ec-4573-97ea-7a978fbe3c9a) Co-authored-by: Bruno Quaresma <bruno@coder.com>
diff --git a/site/package.json b/site/package.json
@@ -140,6 +140,7 @@
 		"@storybook/test": "8.4.6",
 		"@swc/core": "1.3.38",
 		"@swc/jest": "0.2.37",
+		"@tailwindcss/typography": "0.5.16",
 		"@testing-library/jest-dom": "6.6.3",
 		"@testing-library/react": "14.3.1",
 		"@testing-library/react-hooks": "8.0.1",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx
@@ -53,7 +53,14 @@ export const Markdown: Story = {
 		notification: {
 			...MockNotification,
 			read_at: null,
-			content: "Hello **world**!",
+			content:
+				"Template **Write Coder on Coder with AI** has failed to build 1/33 times over the last week.\n\n**Report:**\n\n**sweet_cannon7** failed 1 time:\n\n* [edward / coder-on-coder-claude / #34](https://dev.coder.com/@edward/coder-on-coder-claude/builds/34)\n\nWe recommend reviewing these issues to ensure future builds are successful.",
+			actions: [
+				{
+					label: "View workspaces",
+					url: "https://dev.coder.com/workspaces?filter=template%3Acoder-with-ai",
+				},
+			],
 		},
 	},
 };
diff --git a/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx b/site/src/modules/notifications/NotificationsInbox/InboxItem.tsx
@@ -1,6 +1,7 @@
 import type { InboxNotification } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
+import { Link } from "components/Link/Link";
 import { SquareCheckBig } from "lucide-react";
 import type { FC } from "react";
 import Markdown from "react-markdown";
@@ -28,14 +29,16 @@ export const InboxItem: FC<InboxItemProps> = ({
 			</div>
 
 			<div className="flex flex-col gap-3 flex-1">
-				<span
-					className={cn([
-						"text-content-secondary text-sm font-medium whitespace-break-spaces [overflow-wrap:anywhere]",
-						"[&_p]:m-0",
-					])}
+				<Markdown
+					className="text-content-secondary prose-sm font-medium [overflow-wrap:anywhere]"
+					components={{
+						a: ({ node, ...props }) => {
+							return <Link {...props} />;
+						},
+					}}
 				>
-					<Markdown>{notification.content}</Markdown>
-				</span>
+					{notification.content}
+				</Markdown>
 				<div className="flex items-center gap-1">
 					{notification.actions.map((action) => {
 						return (
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
@@ -75,5 +75,5 @@ module.exports = {
 			},
 		},
 	},
-	plugins: [require("tailwindcss-animate")],
+	plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
 };
