@checkstack/integration-frontend 0.0.2

package/src/components/ProviderDocumentation.tsx

@@ -0,0 +1,137 @@
+import { useState } from "react";
+import {
+  Card,
+  Button,
+  Badge,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@checkstack/ui";
+import { ChevronDown, ChevronUp, ExternalLink, FileJson } from "lucide-react";
+import type { IntegrationProviderInfo } from "@checkstack/integration-common";
+
+interface ProviderDocumentationProps {
+  provider: IntegrationProviderInfo;
+}
+
+/**
+ * Displays provider documentation in a collapsible section.
+ * Shows setup guide, example payload, headers, and external docs link.
+ */
+export const ProviderDocumentation = ({
+  provider,
+}: ProviderDocumentationProps) => {
+  const { documentation } = provider;
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  // Don't render if no documentation defined
+  if (!documentation) {
+    return <></>;
+  }
+
+  // Check if there's any actual content to display
+  const hasContent =
+    documentation.setupGuide ??
+    documentation.examplePayload ??
+    documentation.headers?.length ??
+    documentation.externalDocsUrl;
+
+  if (!hasContent) {
+    return <></>;
+  }
+
+  return (
+    <div className="border rounded-md">
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between p-3 hover:bg-muted/50 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <FileJson className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm font-medium">Documentation</span>
+          <Badge variant="secondary" className="text-xs">
+            {isExpanded ? "Hide" : "Show"}
+          </Badge>
+        </div>
+        {isExpanded ? (
+          <ChevronUp className="h-4 w-4 text-muted-foreground" />
+        ) : (
+          <ChevronDown className="h-4 w-4 text-muted-foreground" />
+        )}
+      </button>
+
+      {isExpanded && (
+        <div className="px-3 pb-3 space-y-4">
+          {/* Setup Guide */}
+          {documentation.setupGuide && (
+            <div>
+              <h4 className="text-sm font-medium mb-2">Setup Guide</h4>
+              <div className="bg-muted/50 p-3 rounded-md text-sm whitespace-pre-wrap">
+                {documentation.setupGuide}
+              </div>
+            </div>
+          )}
+
+          {/* Example Payload */}
+          {documentation.examplePayload && (
+            <div>
+              <h4 className="text-sm font-medium mb-2">Example Payload</h4>
+              <pre className="bg-muted p-3 rounded-md text-xs overflow-x-auto">
+                <code>{documentation.examplePayload}</code>
+              </pre>
+            </div>
+          )}
+
+          {/* Headers */}
+          {documentation.headers && documentation.headers.length > 0 && (
+            <div>
+              <h4 className="text-sm font-medium mb-2">HTTP Headers</h4>
+              <Card>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-1/3">Header</TableHead>
+                      <TableHead>Description</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {documentation.headers.map((header) => (
+                      <TableRow key={header.name}>
+                        <TableCell className="font-mono text-sm">
+                          {header.name}
+                        </TableCell>
+                        <TableCell className="text-sm text-muted-foreground">
+                          {header.description}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </Card>
+            </div>
+          )}
+
+          {/* External Docs Link */}
+          {documentation.externalDocsUrl && (
+            <div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() =>
+                  window.open(documentation.externalDocsUrl, "_blank")
+                }
+              >
+                <ExternalLink className="h-4 w-4 mr-2" />
+                View Full Documentation
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,60 @@
+import {
+  createFrontendPlugin,
+  createSlotExtension,
+  UserMenuItemsSlot,
+} from "@checkstack/frontend-api";
+import {
+  integrationRoutes,
+  pluginMetadata,
+  permissions,
+} from "@checkstack/integration-common";
+import { IntegrationsPage } from "./pages/IntegrationsPage";
+import { DeliveryLogsPage } from "./pages/DeliveryLogsPage";
+import { ProviderConnectionsPage } from "./pages/ProviderConnectionsPage";
+import { IntegrationMenuItem } from "./components/IntegrationMenuItem";
+
+export const integrationPlugin = createFrontendPlugin({
+  metadata: pluginMetadata,
+  routes: [
+    {
+      route: integrationRoutes.routes.list,
+      element: <IntegrationsPage />,
+      permission: permissions.integrationManage,
+    },
+    {
+      route: integrationRoutes.routes.logs,
+      element: <DeliveryLogsPage />,
+      permission: permissions.integrationManage,
+    },
+    {
+      route: integrationRoutes.routes.deliveryLogs,
+      element: <DeliveryLogsPage />,
+      permission: permissions.integrationManage,
+    },
+    {
+      route: integrationRoutes.routes.connections,
+      element: <ProviderConnectionsPage />,
+      permission: permissions.integrationManage,
+    },
+  ],
+  extensions: [
+    createSlotExtension(UserMenuItemsSlot, {
+      id: "integration.user-menu.link",
+      component: IntegrationMenuItem,
+    }),
+  ],
+});
+
+export default integrationPlugin;
+
+// Re-export registry and types for providers to register custom config components
+export {
+  registerProviderConfigExtension,
+  getProviderConfigExtension,
+  hasProviderConfigExtension,
+} from "./provider-config-registry";
+
+export type {
+  ProviderConfigProps,
+  ProviderConfigExtension,
+} from "./provider-config-registry";

package/src/pages/DeliveryLogsPage.tsx

@@ -0,0 +1,229 @@
+import { useState } from "react";
+import {
+  FileText,
+  RefreshCw,
+  CheckCircle,
+  XCircle,
+  Clock,
+  AlertCircle,
+} from "lucide-react";
+import {
+  PageLayout,
+  Card,
+  Button,
+  Badge,
+  SectionHeader,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  useToast,
+  usePagination,
+  BackLink,
+} from "@checkstack/ui";
+import { useApi, rpcApiRef } from "@checkstack/frontend-api";
+import { resolveRoute } from "@checkstack/common";
+import {
+  IntegrationApi,
+  integrationRoutes,
+  type DeliveryLog,
+  type DeliveryStatus,
+} from "@checkstack/integration-common";
+
+const statusConfig: Record<
+  DeliveryStatus,
+  {
+    icon: React.ReactNode;
+    variant: "success" | "destructive" | "warning" | "secondary";
+  }
+> = {
+  success: {
+    icon: <CheckCircle className="h-4 w-4" />,
+    variant: "success",
+  },
+  failed: {
+    icon: <XCircle className="h-4 w-4" />,
+    variant: "destructive",
+  },
+  retrying: {
+    icon: <Clock className="h-4 w-4" />,
+    variant: "warning",
+  },
+  pending: {
+    icon: <AlertCircle className="h-4 w-4" />,
+    variant: "secondary",
+  },
+};
+
+export const DeliveryLogsPage = () => {
+  const rpcApi = useApi(rpcApiRef);
+  const client = rpcApi.forPlugin(IntegrationApi);
+  const toast = useToast();
+
+  const [retrying, setRetrying] = useState<string>();
+
+  const {
+    items: logs,
+    loading,
+    pagination,
+  } = usePagination({
+    fetchFn: async ({ limit, offset }) => {
+      const page = Math.floor(offset / limit) + 1;
+      return client.getDeliveryLogs({ page, pageSize: limit });
+    },
+    getItems: (response) => response.logs,
+    getTotal: (response) => response.total,
+    defaultLimit: 20,
+  });
+
+  const handleRetry = async (logId: string) => {
+    try {
+      setRetrying(logId);
+      const result = await client.retryDelivery({ logId });
+      if (result.success) {
+        toast.success("Delivery re-queued");
+        pagination.refetch();
+      } else {
+        toast.error(result.message ?? "Failed to retry delivery");
+      }
+    } catch (error) {
+      console.error("Failed to retry delivery:", error);
+      toast.error("Failed to retry delivery");
+    } finally {
+      setRetrying(undefined);
+    }
+  };
+
+  return (
+    <PageLayout
+      title="Delivery Logs"
+      subtitle="View and manage webhook delivery attempts"
+      loading={loading}
+      actions={
+        <BackLink to={resolveRoute(integrationRoutes.routes.list)}>
+          Back to Subscriptions
+        </BackLink>
+      }
+    >
+      <div className="space-y-6">
+        <section>
+          <SectionHeader
+            title="Recent Deliveries"
+            description="All webhook delivery attempts across subscriptions"
+            icon={<FileText className="h-5 w-5" />}
+          />
+
+          {logs.length === 0 && !loading ? (
+            <Card className="p-8">
+              <div className="text-center text-muted-foreground">
+                No delivery logs found
+              </div>
+            </Card>
+          ) : (
+            <Card>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Status</TableHead>
+                    <TableHead>Subscription</TableHead>
+                    <TableHead>Event</TableHead>
+                    <TableHead>Attempts</TableHead>
+                    <TableHead>Created</TableHead>
+                    <TableHead>Error</TableHead>
+                    <TableHead></TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {logs.map((log: DeliveryLog) => {
+                    const config = statusConfig[log.status];
+                    return (
+                      <TableRow key={log.id}>
+                        <TableCell>
+                          <Badge
+                            variant={config.variant}
+                            className="flex items-center gap-1 w-fit"
+                          >
+                            {config.icon}
+                            {log.status}
+                          </Badge>
+                        </TableCell>
+                        <TableCell>
+                          <div className="font-medium">
+                            {log.subscriptionName ?? "Unknown"}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="text-sm font-mono">
+                            {log.eventType}
+                          </div>
+                        </TableCell>
+                        <TableCell>{log.attempts}</TableCell>
+                        <TableCell>
+                          <div className="text-sm text-muted-foreground">
+                            {new Date(log.createdAt).toLocaleString()}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          {log.errorMessage ? (
+                            <div
+                              className="text-sm text-destructive max-w-[200px] truncate"
+                              title={log.errorMessage}
+                            >
+                              {log.errorMessage}
+                            </div>
+                          ) : undefined}
+                        </TableCell>
+                        <TableCell>
+                          {log.status === "failed" && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => void handleRetry(log.id)}
+                              disabled={retrying === log.id}
+                            >
+                              <RefreshCw
+                                className={`h-4 w-4 mr-1 ${
+                                  retrying === log.id ? "animate-spin" : ""
+                                }`}
+                              />
+                              Retry
+                            </Button>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+              {pagination.totalPages > 1 && (
+                <div className="p-4 border-t flex justify-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={!pagination.hasPrev}
+                    onClick={pagination.prevPage}
+                  >
+                    Previous
+                  </Button>
+                  <span className="flex items-center text-sm text-muted-foreground">
+                    Page {pagination.page} of {pagination.totalPages}
+                  </span>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={!pagination.hasNext}
+                    onClick={pagination.nextPage}
+                  >
+                    Next
+                  </Button>
+                </div>
+              )}
+            </Card>
+          )}
+        </section>
+      </div>
+    </PageLayout>
+  );
+};