add WEBHOOK_REQUEST_ACTORS

Author: steven-tey

apps/web/lib/api-logs/constants.ts

@@ -90,9 +90,3 @@ export const METHOD_BADGE_VARIANTS: Record<string, string> = {
   DELETE: "error",
   GET: "success",
 } as const;
-
-export const WEBHOOK_DISPLAY_NAMES: Record<string, string> = {
-  "/appsflyer/webhook": "AppsFlyer",
-  "/stripe/integration/webhook": "Stripe",
-  "/shopify/integration/webhook": "Shopify",
-};

apps/web/lib/api-logs/enrich-api-logs.ts

@@ -1,6 +1,30 @@
 import { prisma } from "@dub/prisma";
 import { ApiLogTB, EnrichedApiLog } from "../types";
 
+const WEBHOOK_REQUEST_ACTORS: Record<
+  string,
+  { id: string; name: string; image: string }
+> = {
+  "/appsflyer/webhook": {
+    id: "appsflyer",
+    name: "AppsFlyer",
+    image:
+      "https://dubassets.com/integrations/int_1KN8JP7ET3VQQRF7ZQEVNFPJ5_2Geprc8",
+  },
+  "/stripe/integration/webhook": {
+    id: "stripe",
+    name: "Stripe",
+    image:
+      "https://dubassets.com/integrations/clzra1ya60001wnj4a89zcg9h_jtyaGa7",
+  },
+  "/shopify/integration/webhook": {
+    id: "shopify",
+    name: "Shopify",
+    image:
+      "https://dubassets.com/integrations/int_iWOtrZgmcyU6XDwKr4AYYqLN_jUmF77W",
+  },
+};
+
 export async function enrichApiLogs(
   logs: ApiLogTB | ApiLogTB[],
 ): Promise<EnrichedApiLog | EnrichedApiLog[]> {
@@ -52,7 +76,14 @@ export async function enrichApiLogs(
   const enriched = logsArray.map((log) => ({
     ...log,
     token: log.token_id ? tokenMap.get(log.token_id) ?? null : null,
-    user: log.user_id ? userMap.get(log.user_id) ?? null : null,
+    user: WEBHOOK_REQUEST_ACTORS[log.path]
+      ? {
+          ...WEBHOOK_REQUEST_ACTORS[log.path],
+          email: null,
+        }
+      : log.user_id
+        ? userMap.get(log.user_id) ?? null
+        : null,
   }));
 
   return isSingle ? enriched[0] : enriched;

apps/web/ui/logs/logs-table.tsx

@@ -3,7 +3,6 @@
 import {
   API_LOGS_MAX_PAGE_SIZE,
   METHOD_BADGE_VARIANTS,
-  WEBHOOK_DISPLAY_NAMES,
 } from "@/lib/api-logs/constants";
 import { useApiLogsCount } from "@/lib/swr/use-api-logs-count";
 import useWorkspace from "@/lib/swr/use-workspace";
@@ -43,7 +42,6 @@ export function LogsTable() {
     onRemove,
     onRemoveAll,
     searchQuery,
-    setSearch,
     setSelectedFilter,
   } = useLogFilters();
 
@@ -77,18 +75,14 @@ export function LogsTable() {
       {
         id: "path",
         header: "Endpoint",
-        cell: ({ row }: { row: Row<EnrichedApiLog> }) => {
-          const displayName = WEBHOOK_DISPLAY_NAMES[row.original.path];
-
-          return (
-            <span
-              className="truncate"
-              title={row.original.route_pattern || undefined}
-            >
-              {displayName || row.original.path}
-            </span>
-          );
-        },
+        cell: ({ row }: { row: Row<EnrichedApiLog> }) => (
+          <span
+            className="truncate"
+            title={row.original.route_pattern || undefined}
+          >
+            {row.original.path}
+          </span>
+        ),
         meta: {
           filterParams: ({ row }: { row: Row<EnrichedApiLog> }) => ({
             routePattern: row.original.route_pattern,
@@ -246,7 +240,6 @@ export function LogsTable() {
         onSelect={onSelect}
         onRemove={onRemove}
         onRemoveAll={onRemoveAll}
-        setSearch={setSearch}
         setSelectedFilter={setSelectedFilter}
       />
       {logs?.length !== 0 ? (
@@ -277,15 +270,13 @@ function LogsFilters({
   onSelect,
   onRemove,
   onRemoveAll,
-  setSearch,
   setSelectedFilter,
 }: {
   filters: any[];
   activeFilters: any[];
   onSelect: (key: string, value: any) => void;
   onRemove: (key: string) => void;
   onRemoveAll: () => void;
-  setSearch: (s: string) => void;
   setSelectedFilter: (f: string | null) => void;
 }) {
   return (
@@ -297,7 +288,6 @@ function LogsFilters({
           activeFilters={activeFilters}
           onSelect={onSelect}
           onRemove={onRemove}
-          onSearchChange={setSearch}
           onSelectedFilterChange={setSelectedFilter}
         />
         <SearchBoxPersisted

apps/web/ui/logs/use-log-filters.ts

@@ -4,7 +4,6 @@ import {
   HTTP_METHODS,
   HTTP_STATUS_CODES,
   REQUEST_TYPES,
-  WEBHOOK_DISPLAY_NAMES,
 } from "@/lib/api-logs/constants";
 import { useApiLogsCount } from "@/lib/swr/use-api-logs-count";
 import useWorkspace from "@/lib/swr/use-workspace";
@@ -24,8 +23,6 @@ import useSWR from "swr";
 export function useLogFilters() {
   const { searchParamsObj, queryParams } = useRouterStuff();
   const { id: workspaceId } = useWorkspace();
-
-  const [search, setSearch] = useState("");
   const [selectedFilter, setSelectedFilter] = useState<string | null>(null);
 
   const { data: tokens } = useSWR<TokenProps[]>(
@@ -83,7 +80,7 @@ export function useLogFilters() {
         label: "Endpoint",
         options: routePatterns?.map(({ routePattern, count }) => ({
           value: routePattern,
-          label: WEBHOOK_DISPLAY_NAMES[routePattern] ?? routePattern,
+          label: routePattern,
           right: nFormatter(count, { full: true }),
         })),
       },
@@ -165,7 +162,6 @@ export function useLogFilters() {
     onRemove,
     onRemoveAll,
     searchQuery,
-    setSearch,
     setSelectedFilter,
   };
 }