@open-mercato/core 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3260.1.dc719cac84

package/dist/modules/integrations/backend/integrations/[id]/page.js

@@ -33,7 +33,9 @@ import {
   LEGACY_INTEGRATION_DETAIL_TABS_SPOT_ID
 } from "@open-mercato/shared/modules/integrations/types";
 import { LoadingMessage, ErrorMessage } from "@open-mercato/ui/backend/detail";
-import { Activity, AlertTriangle, Bell, Calendar, CheckCircle2, ChevronDown, ChevronRight, CreditCard, FileText, HardDrive, Key, MessageSquare, RefreshCw, Settings, Truck, Webhook, XCircle, Zap } from "lucide-react";
+import { LogList } from "@open-mercato/ui/backend/LogList";
+import { Activity, AlertTriangle, Bell, Calendar, CheckCircle2, CreditCard, FileText, FileX, HardDrive, Key, MessageSquare, RefreshCw, Settings, Truck, Webhook, XCircle, Zap } from "lucide-react";
+import { EmptyState } from "@open-mercato/ui/primitives/empty-state";
 import { IntegrationScheduleTab } from "../../../../data_sync/components/IntegrationScheduleTab.js";
 import {
   buildIntegrationDetailInjectedTabs,
@@ -45,11 +47,6 @@ const UNSUPPORTED_CREDENTIAL_FIELD_TYPES = /* @__PURE__ */ new Set(["oauth", "ss
 function isEditableCredentialField(field) {
   return !UNSUPPORTED_CREDENTIAL_FIELD_TYPES.has(field.type);
 }
-const LOG_LEVEL_STYLES = {
-  info: "bg-blue-100 text-blue-800",
-  warn: "bg-yellow-100 text-yellow-800",
-  error: "bg-red-100 text-red-800"
-};
 const HEALTH_STATUS_STYLES = {
   healthy: "bg-green-100 text-green-800",
   degraded: "bg-yellow-100 text-yellow-800",
@@ -218,7 +215,6 @@ function IntegrationDetailPage({ params }) {
   const [logs, setLogs] = React.useState([]);
   const [logLevel, setLogLevel] = React.useState("");
   const [isLoadingLogs, setIsLoadingLogs] = React.useState(false);
-  const [expandedLogId, setExpandedLogId] = React.useState(null);
   const [isCheckingHealth, setIsCheckingHealth] = React.useState(false);
   const [isTogglingState, setIsTogglingState] = React.useState(false);
   const [latestHealthResult, setLatestHealthResult] = React.useState(null);
@@ -385,9 +381,6 @@ function IntegrationDetailPage({ params }) {
   React.useEffect(() => {
     void loadLogs();
   }, [loadLogs]);
-  React.useEffect(() => {
-    setExpandedLogId((current) => current && logs.some((log) => log.id === current) ? current : null);
-  }, [logs]);
   const handleToggleState = React.useCallback(async (enabled) => {
     const currentIntegrationId = resolveCurrentIntegrationId();
     if (!currentIntegrationId) return;
@@ -924,94 +917,85 @@ function IntegrationDetailPage({ params }) {
             ]
           }
         ) }) }),
-        isLoadingLogs ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, {}) }) : logs.length === 0 ? /* @__PURE__ */ jsx("p", { className: "py-4 text-sm text-muted-foreground", children: t("integrations.detail.logs.empty") }) : /* @__PURE__ */ jsx("div", { className: "rounded-lg border", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
-          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b bg-muted/50", children: [
-            /* @__PURE__ */ jsx("th", { className: "px-4 py-2 text-left font-medium", children: t("integrations.detail.logs.columns.time") }),
-            /* @__PURE__ */ jsx("th", { className: "px-4 py-2 text-left font-medium", children: t("integrations.detail.logs.columns.level") }),
-            /* @__PURE__ */ jsx("th", { className: "px-4 py-2 text-left font-medium", children: t("integrations.detail.logs.columns.message") })
-          ] }) }),
-          /* @__PURE__ */ jsx("tbody", { children: logs.map((log) => {
-            const isExpanded = expandedLogId === log.id;
-            const metadataEntries = [
-              ["Time", new Date(log.createdAt).toLocaleString()],
-              ["Level", log.level],
-              ["Code", log.code ?? null],
-              ["Run ID", log.runId ?? null],
-              ["Entity Type", log.scopeEntityType ?? null],
-              ["Entity ID", log.scopeEntityId ?? null]
-            ].filter((entry) => typeof entry[1] === "string" && entry[1].trim().length > 0);
-            const { inlineEntries, nestedEntries } = splitLogPayload(log.payload);
-            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsxs("tr", { className: "border-b last:border-0", children: [
-                /* @__PURE__ */ jsx("td", { className: "whitespace-nowrap px-4 py-2 text-muted-foreground", children: new Date(log.createdAt).toLocaleString() }),
-                /* @__PURE__ */ jsx("td", { className: "px-4 py-2", children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: LOG_LEVEL_STYLES[log.level] ?? "", children: log.level }) }),
-                /* @__PURE__ */ jsx("td", { className: "px-4 py-2", children: /* @__PURE__ */ jsxs(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    size: "sm",
-                    className: "h-auto w-full justify-start gap-2 px-0 py-0 text-left hover:bg-transparent",
-                    onClick: () => setExpandedLogId((current) => current === log.id ? null : log.id),
-                    children: [
-                      isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0" }),
-                      /* @__PURE__ */ jsx("span", { className: "truncate", children: log.message })
-                    ]
-                  }
-                ) })
-              ] }),
-              isExpanded ? /* @__PURE__ */ jsx("tr", { className: "border-b bg-muted/30 last:border-0", children: /* @__PURE__ */ jsx("td", { colSpan: 3, className: "px-4 py-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-4 rounded-lg border bg-card p-4", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]", children: [
-                /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-                  /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t("integrations.detail.logs.details.summary", "Summary") }),
-                      /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: log.message })
+        isLoadingLogs ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(
+          LogList,
+          {
+            entries: logs.map((log) => {
+              const metadataEntries = [
+                ["Time", new Date(log.createdAt).toLocaleString()],
+                ["Level", log.level],
+                ["Code", log.code ?? null],
+                ["Run ID", log.runId ?? null],
+                ["Entity Type", log.scopeEntityType ?? null],
+                ["Entity ID", log.scopeEntityId ?? null]
+              ].filter((entry) => typeof entry[1] === "string" && entry[1].trim().length > 0);
+              const { inlineEntries, nestedEntries } = splitLogPayload(log.payload);
+              return {
+                id: log.id,
+                time: new Date(log.createdAt).toLocaleString(),
+                level: log.level,
+                message: log.message,
+                body: /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                    /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+                      /* @__PURE__ */ jsxs("div", { children: [
+                        /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t("integrations.detail.logs.details.summary", "Summary") }),
+                        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium", children: log.message })
+                      ] }),
+                      metadataEntries.length > 0 ? /* @__PURE__ */ jsx("dl", { className: "grid gap-3 sm:grid-cols-2", children: metadataEntries.map(([label, value]) => /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-muted/30 px-3 py-2", children: [
+                        /* @__PURE__ */ jsx("dt", { className: "text-overline font-medium uppercase tracking-wide text-muted-foreground", children: label }),
+                        /* @__PURE__ */ jsx("dd", { className: "mt-1 break-all text-sm", children: value })
+                      ] }, label)) }) : null
                     ] }),
-                    metadataEntries.length > 0 ? /* @__PURE__ */ jsx("dl", { className: "grid gap-3 sm:grid-cols-2", children: metadataEntries.map(([label, value]) => /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-muted/30 px-3 py-2", children: [
-                      /* @__PURE__ */ jsx("dt", { className: "text-overline font-medium uppercase tracking-wide text-muted-foreground", children: label }),
-                      /* @__PURE__ */ jsx("dd", { className: "mt-1 break-all text-sm", children: value })
-                    ] }, label)) }) : null
+                    inlineEntries.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+                      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t("integrations.detail.logs.details.fields", "Fields") }),
+                      /* @__PURE__ */ jsx("dl", { className: "grid gap-3 sm:grid-cols-2", children: inlineEntries.map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-muted/30 px-3 py-2", children: [
+                        /* @__PURE__ */ jsx("dt", { className: "text-overline font-medium uppercase tracking-wide text-muted-foreground", children: formatLogDetailLabel(key) }),
+                        /* @__PURE__ */ jsx("dd", { className: "mt-1 break-words text-sm", children: formatLogPrimitiveValue(value) })
+                      ] }, key)) })
+                    ] }) : null
                   ] }),
-                  inlineEntries.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
-                    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t("integrations.detail.logs.details.fields", "Fields") }),
-                    /* @__PURE__ */ jsx("dl", { className: "grid gap-3 sm:grid-cols-2", children: inlineEntries.map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "rounded-md border bg-muted/30 px-3 py-2", children: [
-                      /* @__PURE__ */ jsx("dt", { className: "text-overline font-medium uppercase tracking-wide text-muted-foreground", children: formatLogDetailLabel(key) }),
-                      /* @__PURE__ */ jsx("dd", { className: "mt-1 break-words text-sm", children: formatLogPrimitiveValue(value) })
-                    ] }, key)) })
-                  ] }) : null
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-                  nestedEntries.map(([key, value]) => /* @__PURE__ */ jsx(
-                    JsonDisplay,
-                    {
-                      data: value,
-                      title: formatLogDetailLabel(key),
-                      defaultExpanded: true,
-                      maxInitialDepth: 1,
-                      theme: "dark",
-                      maxHeight: "16rem",
-                      className: "p-4"
-                    },
-                    key
-                  )),
-                  log.payload && nestedEntries.length === 0 ? /* @__PURE__ */ jsx(
-                    JsonDisplay,
-                    {
-                      data: log.payload,
-                      title: t("integrations.detail.logs.details.payload", "Payload"),
-                      defaultExpanded: true,
-                      maxInitialDepth: 1,
-                      theme: "dark",
-                      maxHeight: "16rem",
-                      className: "p-4"
-                    }
-                  ) : null,
-                  !log.payload ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed px-4 py-6 text-sm text-muted-foreground", children: t("integrations.detail.logs.details.noPayload", "No structured payload was stored for this log entry.") }) : null
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+                    nestedEntries.map(([key, value]) => /* @__PURE__ */ jsx(
+                      JsonDisplay,
+                      {
+                        data: value,
+                        title: formatLogDetailLabel(key),
+                        defaultExpanded: true,
+                        maxInitialDepth: 1,
+                        theme: "dark",
+                        maxHeight: "16rem",
+                        className: "p-4"
+                      },
+                      key
+                    )),
+                    log.payload && nestedEntries.length === 0 ? /* @__PURE__ */ jsx(
+                      JsonDisplay,
+                      {
+                        data: log.payload,
+                        title: t("integrations.detail.logs.details.payload", "Payload"),
+                        defaultExpanded: true,
+                        maxInitialDepth: 1,
+                        theme: "dark",
+                        maxHeight: "16rem",
+                        className: "p-4"
+                      }
+                    ) : null,
+                    !log.payload ? /* @__PURE__ */ jsx(
+                      EmptyState,
+                      {
+                        size: "sm",
+                        icon: /* @__PURE__ */ jsx(FileX, { className: "h-8 w-8", "aria-hidden": "true" }),
+                        title: t("integrations.detail.logs.details.noPayload", "No structured payload was stored for this log entry.")
+                      }
+                    ) : null
+                  ] })
                 ] })
-              ] }) }) }) }) : null
-            ] }, log.id);
-          }) })
-        ] }) })
+              };
+            }),
+            emptyMessage: t("integrations.detail.logs.empty")
+          }
+        )
       ] }) : null,
       injectedTabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, { value: tab.id, className: "mt-0 space-y-4", children: /* @__PURE__ */ jsx(
         InjectionSpot,