fix(webapp): minor webhook dashboard and deploy fixes

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.

Author: ericallam

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();
 }

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

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"
+      );
     }
   }
 }

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>
                     )}

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({