Redirect on successful test, show events in dropdown if > 1

apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/index.tsx

@@ -7,6 +7,7 @@ import { ConnectionSelector } from "~/components/integrations/ConnectionSelector
 import { Panel } from "~/components/layout/Panel";
 import { PanelHeader } from "~/components/layout/PanelHeader";
 import { PrimaryButton } from "~/components/primitives/Buttons";
+import { Select } from "~/components/primitives/Select";
 import { Body } from "~/components/primitives/text/Body";
 import { Header1, Header2 } from "~/components/primitives/text/Headers";
 import { TriggerBody } from "~/components/triggers/Trigger";
@@ -72,6 +73,7 @@ export default function Page() {
           <Tester
             organizationSlug={organization.slug}
             workflowSlug={workflow.slug}
+            eventNames={workflow.eventNames}
           />
         </Panel>
       )}
@@ -82,12 +84,15 @@ export default function Page() {
 function Tester({
   organizationSlug,
   workflowSlug,
+  eventNames,
 }: {
   organizationSlug: string;
   workflowSlug: string;
+  eventNames: string[];
 }) {
   const testFetcher = useFetcher();
   const [testContent, setTestContent] = useState<string>("");
+  const [eventName, setEventName] = useState<string>(eventNames[0]);
 
   const submit = useCallback(() => {
     console.log({
@@ -96,6 +101,7 @@ function Tester({
 
     testFetcher.submit(
       {
+        eventName,
         payload: testContent,
       },
       {
@@ -103,10 +109,23 @@ function Tester({
         action: `/resources/run/${organizationSlug}/test/${workflowSlug}`,
       }
     );
-  }, [organizationSlug, testContent, testFetcher, workflowSlug]);
+  }, [eventName, organizationSlug, testContent, testFetcher, workflowSlug]);
 
   return (
     <div className="flex flex-col gap-2">
+      {eventNames.length > 1 ? (
+        <Select
+          name="eventName"
+          defaultValue={eventName}
+          onChange={(e) => setEventName(e.currentTarget.value)}
+        >
+          {eventNames.map((eventName) => (
+            <option key={eventName} value={eventName}>
+              {eventName}
+            </option>
+          ))}
+        </Select>
+      ) : null}
       <JSONEditor
         content={testContent}
         readOnly={false}

apps/webapp/app/routes/resources/run/$organizationSlug/test/$workflowSlug.ts

@@ -2,6 +2,7 @@ import type { ActionArgs } from "@remix-run/server-runtime";
 import invariant from "tiny-invariant";
 import { ulid } from "ulid";
 import { z } from "zod";
+import { redirectWithSuccessMessage } from "~/models/message.server";
 import { getOrganizationFromSlug } from "~/models/organization.server";
 import {
   getRuntimeEnvironment,
@@ -12,6 +13,7 @@ import { IngestEvent } from "~/services/events/ingest.server";
 import { requireUserId } from "~/services/session.server";
 
 const requestSchema = z.object({
+  eventName: z.string(),
   payload: z.string(),
 });
 
@@ -32,7 +34,7 @@ export const action = async ({ request, params }: ActionArgs) => {
   try {
     const formData = await request.formData();
     const body = Object.fromEntries(formData.entries());
-    const { payload } = requestSchema.parse(body);
+    const { eventName, payload } = requestSchema.parse(body);
 
     const jsonPayload = JSON.parse(payload);
 
@@ -61,7 +63,7 @@ export const action = async ({ request, params }: ActionArgs) => {
     await ingestService.call(
       {
         id: ulid(),
-        name: workflow.eventNames[0],
+        name: eventName,
         type: workflow.type,
         service: workflow.service,
         payload: jsonPayload,
@@ -72,8 +74,11 @@ export const action = async ({ request, params }: ActionArgs) => {
       organization
     );
 
-    //todo redirect to the runs page
-    return null;
+    return redirectWithSuccessMessage(
+      `/orgs/${organizationSlug}/workflows/${workflowSlug}/runs`,
+      request,
+      "Test event successfully sent"
+    );
   } catch (error: any) {
     console.error(error);
     throw new Response(error.message, { status: 400 });