fix(webapp): minor webhook dashboard and deploy fixes

ericallam · ericallam · commit 25a505bd6d17 · 2026-08-08T14:38:30.000+01:00
Paginate the Deliveries and Runs tabs on the webhook page independently (they shared one cursor, so paging one broke the other). Exclude webhook handler tasks from the generic test-task list, since they have their own console. Invalidate the engine endpoint cache when a redeploy changes an endpoint, so filter and routing changes take effect immediately on the deploying instance. Reset the console body editor when a sample or replay payload is loaded.
diff --git a/apps/webapp/app/components/ListPagination.tsx b/apps/webapp/app/components/ListPagination.tsx
@@ -14,13 +14,31 @@ type List = {
 export const DirectionSchema = z.union([z.literal("forward"), z.literal("backward")]);
 export type Direction = z.infer<typeof DirectionSchema>;
 
-export function ListPagination({ list, className }: { list: List; className?: string }) {
+export function ListPagination({
+  list,
+  className,
+  cursorParam = "cursor",
+  directionParam = "direction",
+}: {
+  list: List;
+  className?: string;
+  cursorParam?: string;
+  directionParam?: string;
+}) {
   const bothDisabled = !list.pagination.previous && !list.pagination.next;
 
   return (
     <div className={cn("flex items-center", className)}>
-      <PreviousButton cursor={list.pagination.previous} />
-      <NextButton cursor={list.pagination.next} />
+      <PreviousButton
+        cursor={list.pagination.previous}
+        cursorParam={cursorParam}
+        directionParam={directionParam}
+      />
+      <NextButton
+        cursor={list.pagination.next}
+        cursorParam={cursorParam}
+        directionParam={directionParam}
+      />
       <div
         className={cn(
           "order-2 h-6 w-px bg-surface-control transition-colors peer-hover/next:bg-surface-control-hover peer-hover/prev:bg-surface-control-hover",
@@ -31,8 +49,16 @@ export function ListPagination({ list, className }: { list: List; className?: st
   );
 }
 
-function PreviousButton({ cursor }: { cursor?: string }) {
-  const path = useCursorPath(cursor, "backward");
+function PreviousButton({
+  cursor,
+  cursorParam,
+  directionParam,
+}: {
+  cursor?: string;
+  cursorParam: string;
+  directionParam: string;
+}) {
+  const path = useCursorPath(cursor, "backward", cursorParam, directionParam);
 
   return (
     <div className={cn("peer/prev order-1", !path && "pointer-events-none")}>
@@ -53,8 +79,16 @@ function PreviousButton({ cursor }: { cursor?: string }) {
   );
 }
 
-function NextButton({ cursor }: { cursor?: string }) {
-  const path = useCursorPath(cursor, "forward");
+function NextButton({
+  cursor,
+  cursorParam,
+  directionParam,
+}: {
+  cursor?: string;
+  cursorParam: string;
+  directionParam: string;
+}) {
+  const path = useCursorPath(cursor, "forward", cursorParam, directionParam);
 
   return (
     <div className={cn("peer/next order-3", !path && "pointer-events-none")}>
@@ -75,15 +109,20 @@ function NextButton({ cursor }: { cursor?: string }) {
   );
 }
 
-function useCursorPath(cursor: string | undefined, direction: Direction) {
+function useCursorPath(
+  cursor: string | undefined,
+  direction: Direction,
+  cursorParam: string,
+  directionParam: string
+) {
   const location = useLocation();
 
   if (!cursor) {
     return undefined;
   }
 
   const search = new URLSearchParams(location.search);
-  search.set("cursor", cursor);
-  search.set("direction", direction);
+  search.set(cursorParam, cursor);
+  search.set(directionParam, direction);
   return location.pathname + "?" + search.toString();
 }
diff --git a/apps/webapp/app/components/webhookConsole/WebhookComposer.tsx b/apps/webapp/app/components/webhookConsole/WebhookComposer.tsx
@@ -72,6 +72,7 @@ export function WebhookComposer({
   const [sourceTab, setSourceTab] = useState<SourceTab>("body");
   const [bodyDefault, setBodyDefault] = useState(defaultBody ?? DEFAULT_BODY);
   const bodyRef = useRef(bodyDefault);
+  const [payloadReloadKey, setPayloadReloadKey] = useState(0);
   const [headerRows, setHeaderRows] = useState<HeaderRow[]>([]);
   const headerIdRef = useRef(0);
 
@@ -89,6 +90,7 @@ export function WebhookComposer({
     (body: string, headers: Record<string, string>) => {
       setBodyDefault(body);
       bodyRef.current = body;
+      setPayloadReloadKey((key) => key + 1);
       const entries = Object.entries(headers);
       if (entries.length > 0) {
         setHeaderRows(entries.map(([key, value]) => newHeaderRow(key, value)));
@@ -192,6 +194,7 @@ export function WebhookComposer({
             <div className="relative flex-1 overflow-hidden">
               <div className={cn("h-full", sourceTab !== "body" && "hidden")}>
                 <JSONEditor
+                  key={payloadReloadKey}
                   defaultValue={bodyDefault}
                   readOnly={false}
                   basicSetup
diff --git a/apps/webapp/app/presenters/v3/TestPresenter.server.ts b/apps/webapp/app/presenters/v3/TestPresenter.server.ts
@@ -52,11 +52,13 @@ export class TestPresenter extends BasePresenter {
         SELECT bwt.id, version, slug, "filePath", bwt."friendlyId", bwt."triggerSource"
         FROM latest_workers
         JOIN ${sqlDatabaseSchema}."BackgroundWorkerTask" bwt ON bwt."workerId" = latest_workers.id
-        WHERE bwt."triggerSource" NOT IN ('AGENT')
+        WHERE bwt."triggerSource" NOT IN ('AGENT', 'WEBHOOK')
         ORDER BY slug ASC;`;
     } else {
       const currentDeployment = await findCurrentWorkerDeployment({ environmentId: envId });
-      return (currentDeployment?.worker?.tasks ?? []).filter((t) => t.triggerSource !== "AGENT");
+      return (currentDeployment?.worker?.tasks ?? []).filter(
+        (t) => t.triggerSource !== "AGENT" && t.triggerSource !== "WEBHOOK"
+      );
     }
   }
 }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.webhooks.$webhookParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.webhooks.$webhookParam/route.tsx
@@ -105,9 +105,14 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const period = url.searchParams.get("period") ?? undefined;
   const from = parseFiniteInt(url.searchParams.get("from"));
   const to = parseFiniteInt(url.searchParams.get("to"));
-  const cursor = url.searchParams.get("cursor") ?? undefined;
-  const directionRaw = url.searchParams.get("direction") ?? undefined;
-  const direction = directionRaw ? DirectionSchema.parse(directionRaw) : undefined;
+  const deliveriesCursor = url.searchParams.get("deliveriesCursor") ?? undefined;
+  const deliveriesDirectionRaw = url.searchParams.get("deliveriesDirection") ?? undefined;
+  const deliveriesDirection = deliveriesDirectionRaw
+    ? DirectionSchema.parse(deliveriesDirectionRaw)
+    : undefined;
+  const runsCursor = url.searchParams.get("runsCursor") ?? undefined;
+  const runsDirectionRaw = url.searchParams.get("runsDirection") ?? undefined;
+  const runsDirection = runsDirectionRaw ? DirectionSchema.parse(runsDirectionRaw) : undefined;
 
   const clickhouse = await clickhouseFactory.getClickhouseForOrganization(
     project.organizationId,
@@ -157,8 +162,8 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       period,
       from,
       to,
-      cursor,
-      direction,
+      cursor: runsCursor,
+      direction: runsDirection,
     })
     .catch(() => null);
 
@@ -171,8 +176,8 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       period,
       from,
       to,
-      cursor,
-      direction,
+      cursor: deliveriesCursor,
+      direction: deliveriesDirection,
     })
     .catch(() => null);
 
@@ -299,13 +304,29 @@ export default function Page() {
                     {tab === "deliveries" ? (
                       <Suspense fallback={null}>
                         <TypedAwait resolve={deliveriesList} errorElement={null}>
-                          {(list) => (list ? <ListPagination list={list} /> : null)}
+                          {(list) =>
+                            list ? (
+                              <ListPagination
+                                list={list}
+                                cursorParam="deliveriesCursor"
+                                directionParam="deliveriesDirection"
+                              />
+                            ) : null
+                          }
                         </TypedAwait>
                       </Suspense>
                     ) : (
                       <Suspense fallback={null}>
                         <TypedAwait resolve={runList} errorElement={null}>
-                          {(list) => (list ? <ListPagination list={list} /> : null)}
+                          {(list) =>
+                            list ? (
+                              <ListPagination
+                                list={list}
+                                cursorParam="runsCursor"
+                                directionParam="runsDirection"
+                              />
+                            ) : null
+                          }
                         </TypedAwait>
                       </Suspense>
                     )}
diff --git a/apps/webapp/app/v3/services/createBackgroundWorker.server.ts b/apps/webapp/app/v3/services/createBackgroundWorker.server.ts
@@ -31,6 +31,7 @@ import {
 import { taskMetadataCacheInstance } from "~/services/taskMetadataCacheInstance.server";
 import { generateFriendlyId } from "../friendlyIdentifiers";
 import { engine } from "../runEngine.server";
+import { webhookEngine } from "../webhookEngine.server";
 import {
   removeQueueConcurrencyLimits,
   updateEnvConcurrencyLimits,
@@ -756,6 +757,7 @@ export async function syncDeclarativeWebhooks(
           ...filterData,
         },
       });
+      webhookEngine.invalidateEndpoint(found.opaqueId);
     } else {
       const { id, friendlyId } = WebhookEndpointId.generate();
       await webhookPrisma.webhookEndpoint.create({

Original file line number	Diff line number	Diff line change
`@@ -52,11 +52,13 @@ export class TestPresenter extends BasePresenter {`
`52`	`52`	`SELECT bwt.id, version, slug, "filePath", bwt."friendlyId", bwt."triggerSource"`
`53`	`53`	`FROM latest_workers`
`54`	`54`	`JOIN ${sqlDatabaseSchema}."BackgroundWorkerTask" bwt ON bwt."workerId" = latest_workers.id`
`55`		`- WHERE bwt."triggerSource" NOT IN ('AGENT')`
	`55`	`+ WHERE bwt."triggerSource" NOT IN ('AGENT', 'WEBHOOK')`
`56`	`56`	ORDER BY slug ASC;`;
`57`	`57`	`} else {`
`58`	`58`	`const currentDeployment = await findCurrentWorkerDeployment({ environmentId: envId });`
`59`		`- return (currentDeployment?.worker?.tasks ?? []).filter((t) => t.triggerSource !== "AGENT");`
	`59`	`+ return (currentDeployment?.worker?.tasks ?? []).filter(`
	`60`	`+ (t) => t.triggerSource !== "AGENT" && t.triggerSource !== "WEBHOOK"`
	`61`	`+ );`
`60`	`62`	`}`
`61`	`63`	`}`
`62`	`64`	`}`