@checkstack/integration-frontend 0.4.5 → 0.5.0

package/src/pages/DeliveryLogsPage.tsx

@@ -1,300 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import {
-  FileText,
-  RefreshCw,
-  CheckCircle,
-  XCircle,
-  Clock,
-  AlertCircle,
-} from "lucide-react";
-import {
-  PageLayout,
-  Card,
-  Button,
-  Badge,
-  SectionHeader,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  useToast,
-  usePagination,
-  usePaginationSync,
-  BackLink,
-  ResponsiveTable,
-  MobileCardList,
-} from "@checkstack/ui";
-import { usePluginClient } 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 integrationClient = usePluginClient(IntegrationApi);
-  const toast = useToast();
-  const navigate = useNavigate();
-
-  const [retrying, setRetrying] = useState<string>();
-
-  // Pagination state
-  const pagination = usePagination({ defaultLimit: 20 });
-
-  // Fetch data with useQuery
-  const { data, isLoading, refetch } =
-    integrationClient.getDeliveryLogs.useQuery({
-      limit: pagination.limit,
-      offset: pagination.offset,
-    });
-
-  // Sync total from response
-  usePaginationSync(pagination, data?.total);
-
-  const logs = data?.items ?? [];
-
-  // Retry mutation
-  const retryMutation = integrationClient.retryDelivery.useMutation({
-    onSuccess: (result) => {
-      if (result.success) {
-        toast.success("Delivery re-queued");
-        void refetch();
-      } else {
-        toast.error(result.message ?? "Failed to retry delivery");
-      }
-    },
-    onError: () => {
-      toast.error("Failed to retry delivery");
-    },
-    onSettled: () => {
-      setRetrying(undefined);
-    },
-  });
-
-  const handleRetry = (logId: string) => {
-    setRetrying(logId);
-    retryMutation.mutate({ logId });
-  };
-
-  return (
-    <PageLayout
-      title="Delivery Logs"
-      subtitle="View and manage webhook delivery attempts"
-      icon={FileText}
-      loading={isLoading}
-      actions={
-        <BackLink onClick={() => navigate(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 && !isLoading ? (
-            <Card className="p-8">
-              <div className="text-center text-muted-foreground">
-                No delivery logs found
-              </div>
-            </Card>
-          ) : (
-            <>
-              <ResponsiveTable>
-                <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={() => 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>
-                </Card>
-              </ResponsiveTable>
-
-              <MobileCardList>
-                {logs.map((log: DeliveryLog) => {
-                  const config = statusConfig[log.status];
-                  return (
-                    <Card key={log.id} className="p-3">
-                      <div className="flex items-start justify-between gap-2">
-                        <span className="font-medium truncate">
-                          {log.subscriptionName ?? "Unknown"}
-                        </span>
-                        <Badge
-                          variant={config.variant}
-                          className="flex items-center gap-1 w-fit shrink-0"
-                        >
-                          {config.icon}
-                          {log.status}
-                        </Badge>
-                      </div>
-                      <div className="mt-1 text-xs text-muted-foreground font-mono break-all">
-                        {log.eventType}
-                      </div>
-                      <div className="mt-1 text-xs text-muted-foreground">
-                        {log.attempts} attempt
-                        {log.attempts === 1 ? "" : "s"} &middot;{" "}
-                        {new Date(log.createdAt).toLocaleString()}
-                      </div>
-                      {log.errorMessage && (
-                        <div
-                          className="mt-2 text-xs text-destructive line-clamp-2"
-                          title={log.errorMessage}
-                        >
-                          {log.errorMessage}
-                        </div>
-                      )}
-                      {log.status === "failed" && (
-                        <div className="mt-3 flex justify-end">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => handleRetry(log.id)}
-                            disabled={retrying === log.id}
-                          >
-                            <RefreshCw
-                              className={`h-4 w-4 mr-1 ${
-                                retrying === log.id ? "animate-spin" : ""
-                              }`}
-                            />
-                            Retry
-                          </Button>
-                        </div>
-                      )}
-                    </Card>
-                  );
-                })}
-              </MobileCardList>
-
-              {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>
-              )}
-            </>
-          )}
-        </section>
-      </div>
-    </PageLayout>
-  );
-};

package/src/pages/IntegrationsPage.tsx

@@ -1,378 +0,0 @@
-import { useState, useEffect } from "react";
-import { Link, useSearchParams } from "react-router-dom";
-import {
-  Plus,
-  Webhook,
-  ArrowRight,
-  Activity,
-  Link as LinkIcon,
-} from "lucide-react";
-import {
-  PageLayout,
-  Card,
-  CardContent,
-  Button,
-  Badge,
-  SectionHeader,
-  DynamicIcon,
-  EmptyState,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  useToast,
-  type LucideIconName,
-} from "@checkstack/ui";
-import { usePluginClient } from "@checkstack/frontend-api";
-import { resolveRoute, extractErrorMessage} from "@checkstack/common";
-import {
-  IntegrationApi,
-  integrationRoutes,
-  pluginMetadata as integrationPluginMetadata,
-  type WebhookSubscription,
-  type IntegrationProviderInfo,
-} from "@checkstack/integration-common";
-import { Tip } from "@checkstack/tips-frontend";
-import { SubscriptionDialog } from "../components/CreateSubscriptionDialog";
-
-export const IntegrationsPage = () => {
-  const client = usePluginClient(IntegrationApi);
-  const toast = useToast();
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [selectedSubscription, setSelectedSubscription] =
-    useState<WebhookSubscription>();
-
-  // Queries using hooks
-  const {
-    data: subscriptionsData,
-    isLoading: subsLoading,
-    refetch: refetchSubs,
-  } = client.listSubscriptions.useQuery({ limit: 100, offset: 0 });
-
-  const { data: providers = [], isLoading: providersLoading } =
-    client.listProviders.useQuery({});
-
-  const { data: stats, isLoading: statsLoading } =
-    client.getDeliveryStats.useQuery({ hours: 24 });
-
-  // Mutation for toggling
-  const toggleMutation = client.toggleSubscription.useMutation({
-    onSuccess: (_result, variables) => {
-      toast.success(
-        variables.enabled ? "Subscription enabled" : "Subscription disabled",
-      );
-      void refetchSubs();
-    },
-    onError: (error) => {
-      toast.error(
-        extractErrorMessage(error, "Failed to toggle subscription"),
-      );
-    },
-  });
-
-  const subscriptions = subscriptionsData?.items ?? [];
-  const loading = subsLoading || providersLoading || statsLoading;
-
-  // Handle ?action=create URL parameter (from command palette)
-  useEffect(() => {
-    if (searchParams.get("action") === "create") {
-      setSelectedSubscription(undefined);
-      setDialogOpen(true);
-      // Clear the URL param after opening
-      searchParams.delete("action");
-      setSearchParams(searchParams, { replace: true });
-    }
-  }, [searchParams, setSearchParams]);
-
-  const getProviderInfo = (
-    providerId: string,
-  ): IntegrationProviderInfo | undefined => {
-    return providers.find((p) => p.qualifiedId === providerId);
-  };
-
-  const handleToggle = (id: string, enabled: boolean) => {
-    toggleMutation.mutate({ id, enabled });
-  };
-
-  const handleDialogClose = () => {
-    void refetchSubs();
-    setDialogOpen(false);
-    setSelectedSubscription(undefined);
-  };
-
-  const openEditDialog = (sub: WebhookSubscription) => {
-    setSelectedSubscription(sub);
-    setDialogOpen(true);
-  };
-
-  const openCreateDialog = () => {
-    setSelectedSubscription(undefined);
-    setDialogOpen(true);
-  };
-
-  return (
-    <PageLayout
-      title="Integrations"
-      subtitle="Configure webhooks to send events to external systems"
-      icon={LinkIcon}
-      loading={loading}
-      actions={
-        <Tip
-          plugin={integrationPluginMetadata}
-          id="subscriptions.create"
-          title="Send Checkstack events anywhere"
-          description="A subscription forwards events (incidents, status changes, deployments) to an external system. Pick a connected provider — webhook, Jira, Teams, Slack — and choose which event types it cares about. Failed deliveries retry automatically and show up in the delivery logs."
-          side="bottom"
-          align="end"
-        >
-          <Button onClick={openCreateDialog}>
-            <Plus className="h-4 w-4 mr-2" />
-            New Subscription
-          </Button>
-        </Tip>
-      }
-    >
-      <div className="space-y-8">
-        {/* Stats Overview */}
-        {stats && (
-          <section>
-            <SectionHeader
-              title="Delivery Activity (24h)"
-              icon={<Activity className="h-5 w-5" />}
-            />
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <Card>
-                <CardContent className="p-4">
-                  <div className="text-2xl font-bold">{stats.total}</div>
-                  <div className="text-sm text-muted-foreground">
-                    Total Deliveries
-                  </div>
-                </CardContent>
-              </Card>
-              <Card>
-                <CardContent className="p-4">
-                  <div className="text-2xl font-bold text-green-600">
-                    {stats.successful}
-                  </div>
-                  <div className="text-sm text-muted-foreground">
-                    Successful
-                  </div>
-                </CardContent>
-              </Card>
-              <Card>
-                <CardContent className="p-4">
-                  <div className="text-2xl font-bold text-red-600">
-                    {stats.failed}
-                  </div>
-                  <div className="text-sm text-muted-foreground">Failed</div>
-                </CardContent>
-              </Card>
-              <Card>
-                <CardContent className="p-4">
-                  <div className="text-2xl font-bold text-yellow-600">
-                    {stats.retrying + stats.pending}
-                  </div>
-                  <div className="text-sm text-muted-foreground">
-                    In Progress
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
-          </section>
-        )}
-
-        {/* Subscriptions List */}
-        <section>
-          <div className="flex items-center justify-between mb-4">
-            <SectionHeader
-              title="Webhook Subscriptions"
-              description="Subscriptions route events to external systems via providers"
-              icon={<Webhook className="h-5 w-5" />}
-            />
-            <Link
-              to={resolveRoute(integrationRoutes.routes.logs)}
-              className="text-sm text-primary hover:underline flex items-center gap-1"
-            >
-              View Delivery Logs
-              <ArrowRight className="h-4 w-4" />
-            </Link>
-          </div>
-
-          {subscriptions.length === 0 ? (
-            <EmptyState
-              icon={<Webhook className="h-12 w-12" />}
-              title="No webhook subscriptions yet"
-              description="A subscription forwards events from Checkstack (incidents, status changes, deployments) to external systems — Jira, ServiceNow, your own webhook receiver, anything that speaks HTTP."
-              steps={[
-                "Connect at least one provider on the Provider Connections page (Jira, Webhook, Teams, …).",
-                "Create a subscription that picks one or more event types to forward.",
-                "Watch the Delivery Logs to confirm payloads are reaching their destination.",
-              ]}
-              actions={
-                <Button onClick={openCreateDialog}>
-                  <Plus className="h-4 w-4 mr-2" />
-                  New subscription
-                </Button>
-              }
-            />
-          ) : (
-            <Card>
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Subscription</TableHead>
-                    <TableHead>Provider</TableHead>
-                    <TableHead>Events</TableHead>
-                    <TableHead>Status</TableHead>
-                    <TableHead></TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {subscriptions.map((sub) => {
-                    const provider = getProviderInfo(sub.providerId);
-                    return (
-                      <TableRow
-                        key={sub.id}
-                        className="cursor-pointer"
-                        onClick={() => openEditDialog(sub)}
-                      >
-                        <TableCell>
-                          <div className="flex items-center gap-3">
-                            <div className="p-2 rounded-lg bg-muted">
-                              <DynamicIcon
-                                name={
-                                  (provider?.icon as LucideIconName | undefined) ??
-                                    "Webhook"
-                                }
-                                className="h-5 w-5 text-muted-foreground"
-                              />
-                            </div>
-                            <div>
-                              <div className="font-medium">{sub.name}</div>
-                              {sub.description && (
-                                <div className="text-sm text-muted-foreground">
-                                  {sub.description}
-                                </div>
-                              )}
-                            </div>
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          {provider?.displayName ?? sub.providerId}
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">{sub.eventId}</Badge>
-                        </TableCell>
-                        <TableCell>
-                          <Badge
-                            variant={sub.enabled ? "success" : "secondary"}
-                          >
-                            {sub.enabled ? "Active" : "Disabled"}
-                          </Badge>
-                        </TableCell>
-                        <TableCell className="text-right">
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleToggle(sub.id, !sub.enabled);
-                            }}
-                          >
-                            {sub.enabled ? "Disable" : "Enable"}
-                          </Button>
-                        </TableCell>
-                      </TableRow>
-                    );
-                  })}
-                </TableBody>
-              </Table>
-            </Card>
-          )}
-
-          {subscriptions.length === 0 && (
-            <div className="mt-4 flex justify-center">
-              <Button onClick={openCreateDialog}>
-                <Plus className="h-4 w-4 mr-2" />
-                Create Subscription
-              </Button>
-            </div>
-          )}
-        </section>
-
-        {/* Providers Overview */}
-        <section>
-          <SectionHeader
-            title="Available Providers"
-            description="Providers handle the delivery of events to external systems"
-          />
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {providers.map((provider) => (
-              <Card key={provider.qualifiedId}>
-                <CardContent className="p-4">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <div className="p-2 rounded-lg bg-muted">
-                        <DynamicIcon
-                          name={(provider.icon as LucideIconName | undefined) ?? "Webhook"}
-                          className="h-6 w-6"
-                        />
-                      </div>
-                      <div>
-                        <div className="font-medium">
-                          {provider.displayName}
-                        </div>
-                        {provider.description && (
-                          <div className="text-sm text-muted-foreground">
-                            {provider.description}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                    {provider.hasConnectionSchema && (
-                      <Link
-                        to={resolveRoute(integrationRoutes.routes.connections, {
-                          providerId: provider.qualifiedId,
-                        })}
-                        className="text-sm text-primary hover:underline"
-                      >
-                        Connections
-                      </Link>
-                    )}
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-            {providers.length === 0 && (
-              <Card className="col-span-full">
-                <CardContent className="p-4">
-                  <div className="text-center text-muted-foreground py-4">
-                    No providers registered. Install provider plugins to enable
-                    webhook delivery.
-                  </div>
-                </CardContent>
-              </Card>
-            )}
-          </div>
-        </section>
-      </div>
-
-      <SubscriptionDialog
-        open={dialogOpen}
-        onOpenChange={(open) => {
-          setDialogOpen(open);
-          if (!open) setSelectedSubscription(undefined);
-        }}
-        providers={providers}
-        subscription={selectedSubscription}
-        onCreated={handleDialogClose}
-        onUpdated={handleDialogClose}
-        onDeleted={handleDialogClose}
-      />
-    </PageLayout>
-  );
-};