Fix for Configure alerts form action path

Author: matt-aitken

apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx

@@ -46,6 +46,7 @@ export const ErrorAlertsFormSchema = z.object({
 
 type ConfigureErrorAlertsProps = ErrorAlertChannelData & {
   connectToSlackHref?: string;
+  formAction: string;
 };
 
 export function ConfigureErrorAlerts({
@@ -55,6 +56,7 @@ export function ConfigureErrorAlerts({
   slack,
   emailAlertsEnabled,
   connectToSlackHref,
+  formAction,
 }: ConfigureErrorAlertsProps) {
   const fetcher = useFetcher<{ ok?: boolean }>();
   const navigate = useNavigate();
@@ -125,7 +127,7 @@ export function ConfigureErrorAlerts({
       </div>
 
       <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-        <fetcher.Form method="post" {...form.props}>
+        <fetcher.Form method="post" action={formAction} {...form.props}>
           <Fieldset className="flex flex-col gap-3 p-4">
             <div className="flex flex-col">
               <Paragraph variant="small/dimmed">You'll receive alerts when</Paragraph>

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors/route.tsx

@@ -18,7 +18,11 @@ import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { requireUserId } from "~/services/session.server";
 import { env } from "~/env.server";
-import { EnvironmentParamSchema, v3ErrorsConnectToSlackPath } from "~/utils/pathBuilder";
+import {
+  EnvironmentParamSchema,
+  v3ErrorsConnectToSlackPath,
+  v3ErrorsPath,
+} from "~/utils/pathBuilder";
 import {
   type CreateAlertChannelOptions,
   CreateAlertChannelService,
@@ -46,12 +50,15 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     slug: envParam,
   });
 
+  const errorsPath = v3ErrorsPath({ slug: organizationSlug }, project, { slug: envParam });
+
   return typedjson({
     alertData,
     projectRef: project.externalRef,
     projectId: project.id,
     environmentType: environment.type,
     connectToSlackHref,
+    errorsPath,
   });
 };
 
@@ -162,7 +169,7 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
 };
 
 export default function Page() {
-  const { alertData, connectToSlackHref } = useTypedLoaderData<typeof loader>();
+  const { alertData, connectToSlackHref, errorsPath } = useTypedLoaderData<typeof loader>();
   const { has } = useSearchParams();
   const showAlerts = has("alerts") ?? false;
 
@@ -176,7 +183,11 @@ export default function Page() {
           <>
             <ResizableHandle id="errors-alerts-handle" />
             <ResizablePanel id="errors-alerts" min="320px" default="420px" max="560px">
-              <ConfigureErrorAlerts {...alertData} connectToSlackHref={connectToSlackHref} />
+              <ConfigureErrorAlerts
+                {...alertData}
+                connectToSlackHref={connectToSlackHref}
+                formAction={errorsPath}
+              />
             </ResizablePanel>
           </>
         )}