From d5918fcb072d504a787a56f5eb826d29d4d0123a Mon Sep 17 00:00:00 2001
From: Kaitlyn <kandres@mozilla.com>
Date: Fri, 15 May 2026 10:59:53 -0400
Subject: [PATCH] Use the right server url for storybook links

---
 .../(authenticated)/admin/emails/EmailTrigger.tsx  |  6 ++++--
 .../(authenticated)/admin/emails/page.tsx          | 14 +++++++-------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/app/[locale]/(redesign)/(authenticated)/admin/emails/EmailTrigger.tsx b/src/app/[locale]/(redesign)/(authenticated)/admin/emails/EmailTrigger.tsx
index 64056e2fa87..7934d806428 100644
--- a/src/app/[locale]/(redesign)/(authenticated)/admin/emails/EmailTrigger.tsx
+++ b/src/app/[locale]/(redesign)/(authenticated)/admin/emails/EmailTrigger.tsx
@@ -18,13 +18,13 @@ import {
   triggerVerificationEmail,
 } from "./actions";
 import { Button } from "../../../../../components/client/Button";
+import { getEnvString } from "../../../../../../config";
 
 export type Props = {
   emailAddresses: string[];
+  serverUrl: string;
 };
 
-const STORYBOOK_BASE = "http://localhost:6006/?path=/story";
-
 type EmailCard = {
   title: string;
   description: string;
@@ -50,6 +50,7 @@ const otherEmails: EmailCard[] = [
   },
 ];
 
+// Hard-coded the storybook IDs for now
 const breachAlertVariants: EmailCard[] = [
   {
     title: "Default",
@@ -82,6 +83,7 @@ const breachAlertVariants: EmailCard[] = [
 ];
 
 export const EmailTrigger = (props: Props) => {
+  const STORYBOOK_BASE = `${props.serverUrl}/?path=/story`;
   const [selectedEmailAddress, setSelectedEmailAddress] = useState(
     props.emailAddresses[0],
   );
diff --git a/src/app/[locale]/(redesign)/(authenticated)/admin/emails/page.tsx b/src/app/[locale]/(redesign)/(authenticated)/admin/emails/page.tsx
index f594129b063..067f52bbafc 100644
--- a/src/app/[locale]/(redesign)/(authenticated)/admin/emails/page.tsx
+++ b/src/app/[locale]/(redesign)/(authenticated)/admin/emails/page.tsx
@@ -7,6 +7,7 @@ import { notFound } from "next/navigation";
 import { isAdmin } from "../../../../../api/utils/auth";
 import { EmailTrigger } from "./EmailTrigger";
 import { getUserEmails } from "../../../../../../db/tables/emailAddresses";
+import { config } from "../../../../../../config";
 
 export default async function DevPage() {
   const session = await getServerSession();
@@ -22,12 +23,11 @@ export default async function DevPage() {
   const emailRows = await getUserEmails(session.user.subscriber.id);
 
   return (
-    <>
-      <EmailTrigger
-        emailAddresses={[session.user.email].concat(
-          emailRows.map((emailRow) => emailRow.email),
-        )}
-      />
-    </>
+    <EmailTrigger
+      serverUrl={config.serverUrl}
+      emailAddresses={[session.user.email].concat(
+        emailRows.map((emailRow) => emailRow.email),
+      )}
+    />
   );
 }