@checkstack/integration-frontend 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,76 @@
 # @checkstack/integration-frontend
 
+## 0.2.1
+
+### Patch Changes
+
+- Updated dependencies [4eed42d]
+  - @checkstack/frontend-api@0.3.0
+  - @checkstack/ui@0.2.2
+
+## 0.2.0
+
+### Minor Changes
+
+- 7a23261: ## TanStack Query Integration
+
+  Migrated all frontend components to use `usePluginClient` hook with TanStack Query integration, replacing the legacy `forPlugin()` pattern.
+
+  ### New Features
+
+  - **`usePluginClient` hook**: Provides type-safe access to plugin APIs with `.useQuery()` and `.useMutation()` methods
+  - **Automatic request deduplication**: Multiple components requesting the same data share a single network request
+  - **Built-in caching**: Configurable stale time and cache duration per query
+  - **Loading/error states**: TanStack Query provides `isLoading`, `error`, `isRefetching` states automatically
+  - **Background refetching**: Stale data is automatically refreshed when components mount
+
+  ### Contract Changes
+
+  All RPC contracts now require `operationType: "query"` or `operationType: "mutation"` metadata:
+
+  ```typescript
+  const getItems = proc()
+    .meta({ operationType: "query", access: [access.read] })
+    .output(z.array(itemSchema))
+    .query();
+
+  const createItem = proc()
+    .meta({ operationType: "mutation", access: [access.manage] })
+    .input(createItemSchema)
+    .output(itemSchema)
+    .mutation();
+  ```
+
+  ### Migration
+
+  ```typescript
+  // Before (forPlugin pattern)
+  const api = useApi(myPluginApiRef);
+  const [items, setItems] = useState<Item[]>([]);
+  useEffect(() => {
+    api.getItems().then(setItems);
+  }, [api]);
+
+  // After (usePluginClient pattern)
+  const client = usePluginClient(MyPluginApi);
+  const { data: items, isLoading } = client.getItems.useQuery({});
+  ```
+
+  ### Bug Fixes
+
+  - Fixed `rpc.test.ts` test setup for middleware type inference
+  - Fixed `SearchDialog` to use `setQuery` instead of deprecated `search` method
+  - Fixed null→undefined warnings in notification and queue frontends
+
+### Patch Changes
+
+- Updated dependencies [7a23261]
+  - @checkstack/frontend-api@0.2.0
+  - @checkstack/common@0.3.0
+  - @checkstack/integration-common@0.2.0
+  - @checkstack/ui@0.2.1
+  - @checkstack/signal-frontend@0.0.7
+
 ## 0.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/integration-frontend",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {

package/src/components/CreateSubscriptionDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useMemo } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { Link } from "react-router-dom";
 import { Trash2, ScrollText } from "lucide-react";
 import {
@@ -23,15 +23,13 @@ import {
   ConfirmationModal,
   type LucideIconName,
 } from "@checkstack/ui";
-import { useApi, rpcApiRef } from "@checkstack/frontend-api";
+import { usePluginClient } from "@checkstack/frontend-api";
 import { resolveRoute } from "@checkstack/common";
 import {
   IntegrationApi,
   integrationRoutes,
   type WebhookSubscription,
   type IntegrationProviderInfo,
-  type IntegrationEventInfo,
-  type ProviderConnectionRedacted,
   type PayloadProperty,
 } from "@checkstack/integration-common";
 import { ProviderDocumentation } from "./ProviderDocumentation";
@@ -60,8 +58,7 @@ export const SubscriptionDialog = ({
   onUpdated,
   onDeleted,
 }: SubscriptionDialogProps) => {
-  const rpcApi = useApi(rpcApiRef);
-  const client = rpcApi.forPlugin(IntegrationApi);
+  const client = usePluginClient(IntegrationApi);
   const toast = useToast();
 
   // Edit mode detection
@@ -70,16 +67,11 @@ export const SubscriptionDialog = ({
   const [step, setStep] = useState<"provider" | "config">("provider");
   const [selectedProvider, setSelectedProvider] =
     useState<IntegrationProviderInfo>();
-  const [events, setEvents] = useState<IntegrationEventInfo[]>([]);
   const [saving, setSaving] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   // Connection state for providers with connectionSchema
-  const [connections, setConnections] = useState<ProviderConnectionRedacted[]>(
-    []
-  );
   const [selectedConnectionId, setSelectedConnectionId] = useState<string>("");
-  const [loadingConnections, setLoadingConnections] = useState(false);
 
   // Form state
   const [name, setName] = useState("");
@@ -88,69 +80,78 @@ export const SubscriptionDialog = ({
     {}
   );
   const [selectedEventId, setSelectedEventId] = useState<string>("");
-  const [payloadProperties, setPayloadProperties] = useState<PayloadProperty[]>(
-    []
-  );
   // Track whether DynamicForm fields are valid (all required fields filled)
   const [providerConfigValid, setProviderConfigValid] = useState(false);
 
-  // Fetch events when dialog opens
-  const fetchEvents = useCallback(async () => {
-    try {
-      const result = await client.listEventTypes();
-      setEvents(result);
-    } catch (error) {
-      console.error("Failed to fetch events:", error);
-    }
-  }, [client]);
-
-  // Fetch connections for providers with connectionSchema
-  const fetchConnections = useCallback(
-    async (providerId: string) => {
-      setLoadingConnections(true);
-      try {
-        const result = await client.listConnections({ providerId });
-        setConnections(result);
-        // Auto-select if only one connection
-        if (result.length === 1) {
-          setSelectedConnectionId(result[0].id);
-        }
-      } catch (error) {
-        console.error("Failed to fetch connections:", error);
-      } finally {
-        setLoadingConnections(false);
-      }
-    },
-    [client]
+  // Queries using hooks
+  const { data: events = [] } = client.listEventTypes.useQuery(
+    {},
+    { enabled: open }
   );
 
-  useEffect(() => {
-    if (open) {
-      void fetchEvents();
-    }
-  }, [open, fetchEvents]);
+  const { data: connections = [], isLoading: loadingConnections } =
+    client.listConnections.useQuery(
+      { providerId: selectedProvider?.qualifiedId ?? "" },
+      { enabled: open && !!selectedProvider?.hasConnectionSchema }
+    );
 
-  // Fetch payload schema when event changes
-  useEffect(() => {
-    if (!selectedEventId) {
-      setPayloadProperties([]);
-      return;
-    }
+  const { data: payloadSchemaData } = client.getEventPayloadSchema.useQuery(
+    { eventId: selectedEventId },
+    { enabled: open && !!selectedEventId }
+  );
 
-    const fetchPayloadSchema = async () => {
-      try {
-        const result = await client.getEventPayloadSchema({
-          eventId: selectedEventId,
-        });
-        setPayloadProperties(result.availableProperties);
-      } catch (error) {
-        console.error("Failed to fetch payload schema:", error);
-        setPayloadProperties([]);
-      }
-    };
+  const payloadProperties: PayloadProperty[] =
+    payloadSchemaData?.availableProperties ?? [];
+
+  // Mutations
+  const createMutation = client.createSubscription.useMutation({
+    onSuccess: (result) => {
+      onCreated?.(result);
+      toast.success("Subscription created");
+      setSaving(false);
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to create subscription"
+      );
+      setSaving(false);
+    },
+  });
 
-    void fetchPayloadSchema();
-  }, [selectedEventId, client]);
+  const updateMutation = client.updateSubscription.useMutation({
+    onSuccess: () => {
+      toast.success("Subscription updated");
+      onUpdated?.(subscription!);
+      onOpenChange(false);
+      setSaving(false);
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to update subscription"
+      );
+      setSaving(false);
+    },
+  });
+
+  const deleteMutation = client.deleteSubscription.useMutation({
+    onSuccess: () => {
+      toast.success("Subscription deleted");
+      onDeleted?.(subscription!.id);
+      onOpenChange(false);
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete subscription"
+      );
+    },
+  });
+
+  // Auto-select if only one connection
+  useEffect(() => {
+    if (connections.length === 1 && !selectedConnectionId) {
+      setSelectedConnectionId(connections[0].id);
+    }
+  }, [connections, selectedConnectionId]);
 
   // Pre-populate form in edit mode
   useEffect(() => {
@@ -162,9 +163,6 @@ export const SubscriptionDialog = ({
       if (provider) {
         setSelectedProvider(provider);
         setStep("config"); // Skip provider selection
-        if (provider.hasConnectionSchema) {
-          void fetchConnections(provider.qualifiedId);
-        }
       }
       // Populate form fields
       setName(subscription.name);
@@ -177,7 +175,7 @@ export const SubscriptionDialog = ({
         setSelectedConnectionId(connId);
       }
     }
-  }, [open, subscription, providers, fetchConnections]);
+  }, [open, subscription, providers]);
 
   // Reset when dialog closes (only in create mode)
   useEffect(() => {
@@ -188,8 +186,6 @@ export const SubscriptionDialog = ({
       setDescription("");
       setProviderConfig({});
       setSelectedEventId("");
-      setPayloadProperties([]);
-      setConnections([]);
       setSelectedConnectionId("");
       setDeleteDialogOpen(false);
       setProviderConfigValid(false);
@@ -217,62 +213,39 @@ export const SubscriptionDialog = ({
   const handleProviderSelect = (provider: IntegrationProviderInfo) => {
     setSelectedProvider(provider);
     setStep("config");
-    // Fetch connections if provider supports them
-    if (provider.hasConnectionSchema) {
-      void fetchConnections(provider.qualifiedId);
-    }
   };
 
   // Handle update (edit mode)
-  const handleSave = async () => {
+  const handleSave = () => {
     if (!subscription || !selectedProvider) return;
 
-    try {
-      setSaving(true);
-      // Include connectionId in providerConfig for providers with connections
-      const configWithConnection = selectedProvider.hasConnectionSchema
-        ? { ...providerConfig, connectionId: selectedConnectionId }
-        : providerConfig;
-
-      await client.updateSubscription({
-        id: subscription.id,
-        updates: {
-          name,
-          description: description || undefined,
-          providerConfig: configWithConnection,
-          eventId:
-            selectedEventId === subscription.eventId
-              ? undefined
-              : selectedEventId,
-        },
-      });
-      toast.success("Subscription updated");
-      onUpdated?.(subscription);
-      onOpenChange(false);
-    } catch (error) {
-      console.error("Failed to update subscription:", error);
-      toast.error("Failed to update subscription");
-    } finally {
-      setSaving(false);
-    }
+    setSaving(true);
+    // Include connectionId in providerConfig for providers with connections
+    const configWithConnection = selectedProvider.hasConnectionSchema
+      ? { ...providerConfig, connectionId: selectedConnectionId }
+      : providerConfig;
+
+    updateMutation.mutate({
+      id: subscription.id,
+      updates: {
+        name,
+        description: description || undefined,
+        providerConfig: configWithConnection,
+        eventId:
+          selectedEventId === subscription.eventId
+            ? undefined
+            : selectedEventId,
+      },
+    });
   };
 
   // Handle delete
-  const handleDelete = async () => {
+  const handleDelete = () => {
     if (!subscription) return;
-
-    try {
-      await client.deleteSubscription({ id: subscription.id });
-      toast.success("Subscription deleted");
-      onDeleted?.(subscription.id);
-      onOpenChange(false);
-    } catch (error) {
-      console.error("Failed to delete subscription:", error);
-      toast.error("Failed to delete subscription");
-    }
+    deleteMutation.mutate({ id: subscription.id });
   };
 
-  const handleCreate = async () => {
+  const handleCreate = () => {
     if (!selectedProvider) return;
 
     // For providers with connections, require a connection to be selected
@@ -281,32 +254,24 @@ export const SubscriptionDialog = ({
       return;
     }
 
-    try {
-      setSaving(true);
-      // Include connectionId in providerConfig for providers with connections
-      const configWithConnection = selectedProvider.hasConnectionSchema
-        ? { ...providerConfig, connectionId: selectedConnectionId }
-        : providerConfig;
-
-      const result = await client.createSubscription({
-        name,
-        description: description || undefined,
-        providerId: selectedProvider.qualifiedId,
-        providerConfig: configWithConnection,
-        eventId: selectedEventId,
-      });
-      onCreated?.(result);
-      toast.success("Subscription created");
-    } catch (error) {
-      console.error("Failed to create subscription:", error);
-      toast.error(
-        error instanceof Error ? error.message : "Failed to create subscription"
-      );
-    } finally {
-      setSaving(false);
-    }
+    setSaving(true);
+    // Include connectionId in providerConfig for providers with connections
+    const configWithConnection = selectedProvider.hasConnectionSchema
+      ? { ...providerConfig, connectionId: selectedConnectionId }
+      : providerConfig;
+
+    createMutation.mutate({
+      name,
+      description: description || undefined,
+      providerId: selectedProvider.qualifiedId,
+      providerConfig: configWithConnection,
+      eventId: selectedEventId,
+    });
   };
 
+  // Mutation for fetching dynamic dropdown options (called at component level)
+  const getOptionsMutation = client.getConnectionOptions.useMutation();
+
   // Create optionsResolvers for dynamic dropdown fields (x-options-resolver)
   // Uses a Proxy to handle any resolver name dynamically
   const optionsResolvers = useMemo(() => {
@@ -319,10 +284,10 @@ export const SubscriptionDialog = ({
       {},
       {
         get: (_target, resolverName: string) => {
-          // Return a resolver function for this resolver name
+          // Return a resolver function that uses mutateAsync from the hook defined above
           return async (formValues: Record<string, unknown>) => {
             try {
-              const result = await client.getConnectionOptions({
+              const result = await getOptionsMutation.mutateAsync({
                 providerId: selectedProvider.qualifiedId,
                 connectionId: selectedConnectionId,
                 resolverName,
@@ -349,7 +314,8 @@ export const SubscriptionDialog = ({
         formValues: Record<string, unknown>
       ) => Promise<{ value: string; label: string }[]>
     >;
-  }, [client, selectedProvider, selectedConnectionId]);
+    // Note: getOptionsMutation intentionally omitted - mutation objects change on every render
+  }, [selectedProvider, selectedConnectionId]);
 
   return (
     <>

package/src/pages/DeliveryLogsPage.tsx

@@ -21,9 +21,10 @@ import {
   TableRow,
   useToast,
   usePagination,
+  usePaginationSync,
   BackLink,
 } from "@checkstack/ui";
-import { useApi, rpcApiRef } from "@checkstack/frontend-api";
+import { usePluginClient } from "@checkstack/frontend-api";
 import { resolveRoute } from "@checkstack/common";
 import {
   IntegrationApi,
@@ -58,49 +59,56 @@ const statusConfig: Record<
 };
 
 export const DeliveryLogsPage = () => {
-  const rpcApi = useApi(rpcApiRef);
-  const client = rpcApi.forPlugin(IntegrationApi);
+  const integrationClient = usePluginClient(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,
-  });
+  // Pagination state
+  const pagination = usePagination({ defaultLimit: 20 });
+
+  // Fetch data with useQuery
+  const page = Math.floor(pagination.offset / pagination.limit) + 1;
+  const { data, isLoading, refetch } =
+    integrationClient.getDeliveryLogs.useQuery({
+      page,
+      pageSize: pagination.limit,
+    });
+
+  // Sync total from response
+  usePaginationSync(pagination, data?.total);
+
+  const logs = data?.logs ?? [];
 
-  const handleRetry = async (logId: string) => {
-    try {
-      setRetrying(logId);
-      const result = await client.retryDelivery({ logId });
+  // Retry mutation
+  const retryMutation = integrationClient.retryDelivery.useMutation({
+    onSuccess: (result) => {
       if (result.success) {
         toast.success("Delivery re-queued");
-        pagination.refetch();
+        void refetch();
       } else {
         toast.error(result.message ?? "Failed to retry delivery");
       }
-    } catch (error) {
+    },
+    onError: (error) => {
       console.error("Failed to retry delivery:", error);
       toast.error("Failed to retry delivery");
-    } finally {
+    },
+    onSettled: () => {
       setRetrying(undefined);
-    }
+    },
+  });
+
+  const handleRetry = (logId: string) => {
+    setRetrying(logId);
+    retryMutation.mutate({ logId });
   };
 
   return (
     <PageLayout
       title="Delivery Logs"
       subtitle="View and manage webhook delivery attempts"
-      loading={loading}
+      loading={isLoading}
       actions={
         <BackLink to={resolveRoute(integrationRoutes.routes.list)}>
           Back to Subscriptions
@@ -115,7 +123,7 @@ export const DeliveryLogsPage = () => {
             icon={<FileText className="h-5 w-5" />}
           />
 
-          {logs.length === 0 && !loading ? (
+          {logs.length === 0 && !isLoading ? (
             <Card className="p-8">
               <div className="text-center text-muted-foreground">
                 No delivery logs found
@@ -180,7 +188,7 @@ export const DeliveryLogsPage = () => {
                             <Button
                               variant="ghost"
                               size="sm"
-                              onClick={() => void handleRetry(log.id)}
+                              onClick={() => handleRetry(log.id)}
                               disabled={retrying === log.id}
                             >
                               <RefreshCw

package/src/pages/IntegrationsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
 import { Link, useSearchParams } from "react-router-dom";
 import { Plus, Webhook, ArrowRight, Activity } from "lucide-react";
 import {
@@ -19,7 +19,7 @@ import {
   useToast,
   type LucideIconName,
 } from "@checkstack/ui";
-import { useApi, rpcApiRef } from "@checkstack/frontend-api";
+import { usePluginClient } from "@checkstack/frontend-api";
 import { resolveRoute } from "@checkstack/common";
 import {
   IntegrationApi,
@@ -30,48 +30,44 @@ import {
 import { SubscriptionDialog } from "../components/CreateSubscriptionDialog";
 
 export const IntegrationsPage = () => {
-  const rpcApi = useApi(rpcApiRef);
-  const client = rpcApi.forPlugin(IntegrationApi);
+  const client = usePluginClient(IntegrationApi);
   const toast = useToast();
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const [subscriptions, setSubscriptions] = useState<WebhookSubscription[]>([]);
-  const [providers, setProviders] = useState<IntegrationProviderInfo[]>([]);
-  const [loading, setLoading] = useState(true);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [selectedSubscription, setSelectedSubscription] =
     useState<WebhookSubscription>();
 
-  // Stats state
-  const [stats, setStats] = useState<{
-    total: number;
-    successful: number;
-    failed: number;
-    retrying: number;
-    pending: number;
-  }>();
+  // Queries using hooks
+  const {
+    data: subscriptionsData,
+    isLoading: subsLoading,
+    refetch: refetchSubs,
+  } = client.listSubscriptions.useQuery({ page: 1, pageSize: 100 });
 
-  const fetchData = useCallback(async () => {
-    try {
-      const [subsResult, providersResult, statsResult] = await Promise.all([
-        client.listSubscriptions({ page: 1, pageSize: 100 }),
-        client.listProviders(),
-        client.getDeliveryStats({ hours: 24 }),
-      ]);
-      setSubscriptions(subsResult.subscriptions);
-      setProviders(providersResult);
-      setStats(statsResult);
-    } catch (error) {
-      console.error("Failed to load integrations data:", error);
-      toast.error("Failed to load integrations data");
-    } finally {
-      setLoading(false);
-    }
-  }, [client, toast]);
+  const { data: providers = [], isLoading: providersLoading } =
+    client.listProviders.useQuery({});
 
-  useEffect(() => {
-    void fetchData();
-  }, [fetchData]);
+  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(
+        error instanceof Error ? error.message : "Failed to toggle subscription"
+      );
+    },
+  });
+
+  const subscriptions = subscriptionsData?.subscriptions ?? [];
+  const loading = subsLoading || providersLoading || statsLoading;
 
   // Handle ?action=create URL parameter (from command palette)
   useEffect(() => {
@@ -87,37 +83,29 @@ export const IntegrationsPage = () => {
   const getProviderInfo = (
     providerId: string
   ): IntegrationProviderInfo | undefined => {
-    return providers.find((p) => p.qualifiedId === providerId);
+    return (providers as IntegrationProviderInfo[]).find(
+      (p) => p.qualifiedId === providerId
+    );
   };
 
-  const handleToggle = async (id: string, enabled: boolean) => {
-    try {
-      await client.toggleSubscription({ id, enabled });
-      setSubscriptions((prev) =>
-        prev.map((s) => (s.id === id ? { ...s, enabled } : s))
-      );
-      toast.success(enabled ? "Subscription enabled" : "Subscription disabled");
-    } catch (error) {
-      console.error("Failed to toggle subscription:", error);
-      toast.error("Failed to toggle subscription");
-    }
+  const handleToggle = (id: string, enabled: boolean) => {
+    toggleMutation.mutate({ id, enabled });
   };
 
-  const handleCreated = (newSub: WebhookSubscription) => {
-    setSubscriptions((prev) => [newSub, ...prev]);
+  const handleCreated = () => {
+    void refetchSubs();
     setDialogOpen(false);
     setSelectedSubscription(undefined);
   };
 
   const handleUpdated = () => {
-    // Refresh data after update
-    void fetchData();
+    void refetchSubs();
     setDialogOpen(false);
     setSelectedSubscription(undefined);
   };
 
-  const handleDeleted = (id: string) => {
-    setSubscriptions((prev) => prev.filter((s) => s.id !== id));
+  const handleDeleted = () => {
+    void refetchSubs();
     setDialogOpen(false);
     setSelectedSubscription(undefined);
   };
@@ -277,7 +265,7 @@ export const IntegrationsPage = () => {
                             size="sm"
                             onClick={(e) => {
                               e.stopPropagation();
-                              void handleToggle(sub.id, !sub.enabled);
+                              handleToggle(sub.id, !sub.enabled);
                             }}
                           >
                             {sub.enabled ? "Disable" : "Enable"}
@@ -308,7 +296,7 @@ export const IntegrationsPage = () => {
             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) => (
+            {(providers as IntegrationProviderInfo[]).map((provider) => (
               <Card key={provider.qualifiedId}>
                 <CardContent className="p-4">
                   <div className="flex items-center justify-between">
@@ -344,7 +332,7 @@ export const IntegrationsPage = () => {
                 </CardContent>
               </Card>
             ))}
-            {providers.length === 0 && (
+            {(providers as IntegrationProviderInfo[]).length === 0 && (
               <Card className="col-span-full">
                 <CardContent className="p-4">
                   <div className="text-center text-muted-foreground py-4">
@@ -364,7 +352,7 @@ export const IntegrationsPage = () => {
           setDialogOpen(open);
           if (!open) setSelectedSubscription(undefined);
         }}
-        providers={providers}
+        providers={providers as IntegrationProviderInfo[]}
         subscription={selectedSubscription}
         onCreated={handleCreated}
         onUpdated={handleUpdated}

package/src/pages/ProviderConnectionsPage.tsx

@@ -4,7 +4,7 @@
  * Manages site-wide connections for a specific integration provider.
  * Uses the provider's connectionSchema with DynamicForm for the configuration UI.
  */
-import { useState, useEffect, useCallback } from "react";
+import { useState } from "react";
 import { useParams } from "react-router-dom";
 import {
   Plus,
@@ -44,7 +44,7 @@ import {
   BackLink,
   type LucideIconName,
 } from "@checkstack/ui";
-import { useApi, rpcApiRef } from "@checkstack/frontend-api";
+import { usePluginClient } from "@checkstack/frontend-api";
 import { resolveRoute } from "@checkstack/common";
 import {
   IntegrationApi,
@@ -55,17 +55,9 @@ import {
 
 export const ProviderConnectionsPage = () => {
   const { providerId } = useParams<{ providerId: string }>();
-  const rpcApi = useApi(rpcApiRef);
-  const client = rpcApi.forPlugin(IntegrationApi);
-  const toast = useToast();
 
-  const [loading, setLoading] = useState(true);
-  const [provider, setProvider] = useState<
-    IntegrationProviderInfo | undefined
-  >();
-  const [connections, setConnections] = useState<ProviderConnectionRedacted[]>(
-    []
-  );
+  const client = usePluginClient(IntegrationApi);
+  const toast = useToast();
 
   // Dialog states
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
@@ -89,128 +81,135 @@ export const ProviderConnectionsPage = () => {
   // Form validation state
   const [configValid, setConfigValid] = useState(false);
 
-  const fetchData = useCallback(async () => {
-    if (!providerId) return;
+  // Queries using hooks
+  const { data: providers = [], isLoading: providersLoading } =
+    client.listProviders.useQuery({});
 
-    try {
-      const [providersResult, connectionsResult] = await Promise.all([
-        client.listProviders(),
-        client.listConnections({ providerId }),
-      ]);
-
-      const foundProvider = providersResult.find(
-        (p) => p.qualifiedId === providerId
-      );
-      setProvider(foundProvider);
-      setConnections(connectionsResult);
-    } catch (error) {
-      console.error("Failed to load connections:", error);
-      toast.error("Failed to load connections");
-    } finally {
-      setLoading(false);
-    }
-  }, [providerId, client, toast]);
-
-  useEffect(() => {
-    void fetchData();
-  }, [fetchData]);
+  const {
+    data: connections = [],
+    isLoading: connectionsLoading,
+    refetch: refetchConnections,
+  } = client.listConnections.useQuery(
+    { providerId: providerId ?? "" },
+    { enabled: !!providerId }
+  );
 
-  const handleCreate = async () => {
-    if (!providerId || !formName.trim()) return;
+  const loading = providersLoading || connectionsLoading;
+  const provider = (providers as IntegrationProviderInfo[]).find(
+    (p) => p.qualifiedId === providerId
+  );
 
-    setSaving(true);
-    try {
-      const newConnection = await client.createConnection({
-        providerId,
-        name: formName.trim(),
-        config: formConfig,
-      });
-      setConnections((prev) => [...prev, newConnection]);
+  // Mutations
+  const createMutation = client.createConnection.useMutation({
+    onSuccess: () => {
+      void refetchConnections();
       setCreateDialogOpen(false);
       setFormName("");
       setFormConfig({});
       toast.success("Connection created successfully");
-    } catch (error) {
-      console.error("Failed to create connection:", error);
-      toast.error("Failed to create connection");
-    } finally {
       setSaving(false);
-    }
-  };
-
-  // Reset form when creating
-  const openCreateDialog = () => {
-    setFormName("");
-    setFormConfig({});
-    setConfigValid(false);
-    setCreateDialogOpen(true);
-  };
-
-  const handleUpdate = async () => {
-    if (!selectedConnection) return;
-
-    setSaving(true);
-    try {
-      const updated = await client.updateConnection({
-        connectionId: selectedConnection.id,
-        updates: {
-          name: formName.trim() || selectedConnection.name,
-          config: formConfig,
-        },
-      });
-      setConnections((prev) =>
-        prev.map((c) => (c.id === updated.id ? updated : c))
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to create connection"
       );
+      setSaving(false);
+    },
+  });
+
+  const updateMutation = client.updateConnection.useMutation({
+    onSuccess: () => {
+      void refetchConnections();
       setEditDialogOpen(false);
       setSelectedConnection(undefined);
       toast.success("Connection updated successfully");
-    } catch (error) {
-      console.error("Failed to update connection:", error);
-      toast.error("Failed to update connection");
-    } finally {
       setSaving(false);
-    }
-  };
-
-  const handleDelete = async () => {
-    if (!selectedConnection) return;
-
-    try {
-      await client.deleteConnection({ connectionId: selectedConnection.id });
-      setConnections((prev) =>
-        prev.filter((c) => c.id !== selectedConnection.id)
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to update connection"
       );
+      setSaving(false);
+    },
+  });
+
+  const deleteMutation = client.deleteConnection.useMutation({
+    onSuccess: () => {
+      void refetchConnections();
       setDeleteConfirmOpen(false);
       setSelectedConnection(undefined);
       toast.success("Connection deleted");
-    } catch (error) {
-      console.error("Failed to delete connection:", error);
-      toast.error("Failed to delete connection");
-    }
-  };
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete connection"
+      );
+    },
+  });
 
-  const handleTest = async (connectionId: string) => {
-    setTestingId(connectionId);
-    try {
-      const result = await client.testConnection({ connectionId });
+  const testMutation = client.testConnection.useMutation({
+    onSuccess: (result, variables) => {
       setTestResults((prev) => ({
         ...prev,
-        [connectionId]: result,
+        [variables.connectionId]: result,
       }));
       if (result.success) {
         toast.success(result.message ?? "Connection test successful");
       } else {
         toast.error(result.message ?? "Connection test failed");
       }
-    } catch {
+      setTestingId(undefined);
+    },
+    onError: (error, variables) => {
       setTestResults((prev) => ({
         ...prev,
-        [connectionId]: { success: false, message: "Test failed" },
+        [variables.connectionId]: { success: false, message: "Test failed" },
       }));
-      toast.error("Connection test failed");
-    } finally {
+      toast.error(
+        error instanceof Error ? error.message : "Connection test failed"
+      );
       setTestingId(undefined);
-    }
+    },
+  });
+
+  const handleCreate = () => {
+    if (!providerId || !formName.trim()) return;
+    setSaving(true);
+    createMutation.mutate({
+      providerId,
+      name: formName.trim(),
+      config: formConfig,
+    });
+  };
+
+  // Reset form when creating
+  const openCreateDialog = () => {
+    setFormName("");
+    setFormConfig({});
+    setConfigValid(false);
+    setCreateDialogOpen(true);
+  };
+
+  const handleUpdate = () => {
+    if (!selectedConnection) return;
+    setSaving(true);
+    updateMutation.mutate({
+      connectionId: selectedConnection.id,
+      updates: {
+        name: formName.trim() || selectedConnection.name,
+        config: formConfig,
+      },
+    });
+  };
+
+  const handleDelete = () => {
+    if (!selectedConnection) return;
+    deleteMutation.mutate({ connectionId: selectedConnection.id });
+  };
+
+  const handleTest = (connectionId: string) => {
+    setTestingId(connectionId);
+    testMutation.mutate({ connectionId });
   };
 
   const openEditDialog = (connection: ProviderConnectionRedacted) => {
@@ -271,7 +270,7 @@ export const ProviderConnectionsPage = () => {
         </div>
       }
     >
-      {connections.length === 0 ? (
+      {(connections as ProviderConnectionRedacted[]).length === 0 ? (
         <EmptyState
           icon={
             <DynamicIcon
@@ -309,7 +308,7 @@ export const ProviderConnectionsPage = () => {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {connections.map((conn) => {
+                {(connections as ProviderConnectionRedacted[]).map((conn) => {
                   const testResult = testResults[conn.id];
                   const isTesting = testingId === conn.id;