@shipfox/client-integrations 0.2.0

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@shipfox/client-integrations",
+  "license": "MIT",
+  "version": "0.2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
+    "directory": "libs/client/integrations"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "imports": {
+    "#*": {
+      "types": "./src/*",
+      "workspace-source": "./src/*",
+      "development": "./src/*",
+      "default": "./dist/*"
+    },
+    "#test/*": "./test/*"
+  },
+  "exports": {
+    ".": {
+      "development": {
+        "types": "./src/index.ts",
+        "default": "./src/index.ts"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./feature": {
+      "development": {
+        "types": "./src/feature.ts",
+        "default": "./src/feature.ts"
+      },
+      "default": {
+        "types": "./dist/feature.d.ts",
+        "default": "./dist/feature.js"
+      }
+    },
+    "./routes/*": {
+      "development": {
+        "types": "./src/routes/*.tsx",
+        "default": "./src/routes/*.tsx"
+      },
+      "default": {
+        "types": "./dist/routes/*.d.ts",
+        "default": "./dist/routes/*.js"
+      }
+    }
+  },
+  "dependencies": {
+    "@swc/helpers": "^0.5.17",
+    "@tanstack/react-form": "^1.32.0",
+    "@shipfox/api-integration-core-dto": "3.0.0",
+    "@shipfox/api-integration-gitea-dto": "3.0.0",
+    "@shipfox/api-integration-github-dto": "3.0.0",
+    "@shipfox/api-integration-sentry-dto": "3.0.0",
+    "@shipfox/api-integration-linear-dto": "3.0.0",
+    "@shipfox/client-api": "0.2.0",
+    "@shipfox/api-integration-webhook-dto": "3.0.0",
+    "@shipfox/client-auth": "0.2.0",
+    "@shipfox/client-shell": "0.2.0",
+    "@shipfox/react-ui": "0.3.1",
+    "@shipfox/client-ui": "0.2.0"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-router": "^1.170.16",
+    "jotai": "^2.19.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@argos-ci/cli": "^5.0.0",
+    "@argos-ci/storybook": "^6.0.0",
+    "@storybook/addon-vitest": "^10.3.6",
+    "@storybook/react": "^10.0.0",
+    "@storybook/react-vite": "^10.0.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "@tanstack/react-query": "^5.101.0",
+    "@tanstack/react-router": "^1.170.16",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.1.11",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react": "^6.0.0",
+    "@vitest/browser-playwright": "^4.1.5",
+    "jotai": "^2.19.1",
+    "jsdom": "^29.0.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "storybook": "^10.0.0",
+    "storybook-addon-pseudo-states": "^10.0.0",
+    "tailwindcss": "^4.1.13",
+    "vite": "^8.0.3",
+    "vitest": "^4.1.5",
+    "@shipfox/biome": "1.8.1",
+    "@shipfox/swc": "1.2.5",
+    "@shipfox/client-test-setup": "0.0.2",
+    "@shipfox/typescript": "1.1.6",
+    "@shipfox/ts-config": "1.3.8",
+    "@shipfox/vite": "1.2.4",
+    "@shipfox/vitest": "1.2.2"
+  },
+  "scripts": {
+    "build": "shipfox-swc",
+    "check": "shipfox-biome-check",
+    "check:fix": "shipfox-biome-check --write",
+    "storybook": "storybook dev -p 6011",
+    "storybook:build": "storybook build -o storybook-static",
+    "test": "shipfox-vitest-run",
+    "test:watch": "shipfox-vitest-watch",
+    "type": "shipfox-tsc-check",
+    "type:emit": "shipfox-tsc-emit"
+  }
+}

package/src/components/connection-picker.tsx

@@ -0,0 +1,89 @@
+import type {IntegrationConnectionDto} from '@shipfox/api-integration-core-dto';
+import {useIsTextTruncated} from '@shipfox/react-ui/hooks';
+import {Label} from '@shipfox/react-ui/label';
+import {RadioGroup, RadioGroupItem} from '@shipfox/react-ui/radio-group';
+import {Tooltip, TooltipContent, TooltipTrigger} from '@shipfox/react-ui/tooltip';
+import {Text} from '@shipfox/react-ui/typography';
+import {useId} from 'react';
+import {IntegrationIcon} from '#integration-icon.js';
+
+export function ConnectionPicker({
+  connections,
+  selectedConnectionId,
+  onSelect,
+}: {
+  connections: IntegrationConnectionDto[];
+  selectedConnectionId: string | undefined;
+  onSelect: (connectionId: string) => void;
+}) {
+  const labelId = useId();
+
+  return (
+    <div className="flex flex-col gap-10">
+      <Label id={labelId} className="sr-only">
+        Source integration
+      </Label>
+      <RadioGroup
+        aria-labelledby={labelId}
+        value={selectedConnectionId ?? ''}
+        onValueChange={onSelect}
+        className="grid grid-cols-2 gap-8 min-[1200px]:grid-cols-3 max-[760px]:grid-cols-1"
+      >
+        {connections.map((connection) => (
+          <RadioGroupItem key={connection.id} value={connection.id} className="p-12">
+            <ConnectionOption connection={connection} />
+          </RadioGroupItem>
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}
+
+function ConnectionOption({connection}: {connection: IntegrationConnectionDto}) {
+  const {ref: nameRef, isTruncated} = useIsTextTruncated<HTMLSpanElement>(connection.display_name);
+
+  return (
+    <span className="flex min-w-0 items-center gap-10">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="shrink-0">
+            <IntegrationIcon
+              source={connection.provider}
+              aria-hidden
+              className="size-20 text-foreground-neutral-base"
+            />
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>{integrationName(connection.provider)}</TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span ref={nameRef} className="min-w-0 truncate">
+            <Text as="span" size="sm" bold>
+              {connection.display_name}
+            </Text>
+          </span>
+        </TooltipTrigger>
+        {isTruncated ? <TooltipContent>{connection.display_name}</TooltipContent> : null}
+      </Tooltip>
+    </span>
+  );
+}
+
+function integrationName(provider: string): string {
+  switch (provider) {
+    case 'github':
+      return 'GitHub';
+    case 'gitea':
+      return 'Gitea';
+    case 'sentry':
+      return 'Sentry';
+    case 'webhook':
+      return 'Webhook';
+    case 'debug':
+      return 'Debug';
+    default:
+      return provider;
+  }
+}

package/src/components/installed-integrations-section.tsx

@@ -0,0 +1,198 @@
+import type {
+  IntegrationConnectionDto,
+  ListIntegrationConnectionsResponseDto,
+} from '@shipfox/api-integration-core-dto';
+import {QueryLoadError} from '@shipfox/client-ui';
+import {IconButton} from '@shipfox/react-ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@shipfox/react-ui/dropdown-menu';
+import {EmptyState} from '@shipfox/react-ui/empty-state';
+import {Skeleton} from '@shipfox/react-ui/skeleton';
+import {Header, Text} from '@shipfox/react-ui/typography';
+import {cn, formatDate} from '@shipfox/react-ui/utils';
+import type {UseQueryResult} from '@tanstack/react-query';
+import {Link} from '@tanstack/react-router';
+import {ConnectionStatusBadge} from '#connection-status-badge.js';
+import {IntegrationIcon} from '#integration-icon.js';
+import {usageEventsForConnection} from './integration-usage-events.js';
+
+interface InstalledIntegrationsSectionProps {
+  connectionsQuery: UseQueryResult<ListIntegrationConnectionsResponseDto, Error>;
+  connections: IntegrationConnectionDto[];
+  isMutating: boolean;
+  onUse: (connectionId: string) => void;
+  onSetActive: (connection: IntegrationConnectionDto, active: boolean) => void;
+  onDelete: (connectionId: string) => void;
+  providerDisplayName: (provider: string) => string | undefined;
+}
+
+const INSTALLED_SURFACE_CLASS =
+  'overflow-hidden rounded-8 border border-border-neutral-base bg-background-neutral-base';
+
+export function InstalledIntegrationsSection({
+  connectionsQuery,
+  connections,
+  isMutating,
+  onUse,
+  onSetActive,
+  onDelete,
+  providerDisplayName,
+}: InstalledIntegrationsSectionProps) {
+  return (
+    <section className="flex flex-col gap-16" aria-label="Installed integrations">
+      <div className="flex flex-col gap-4">
+        <Header variant="h3">Installed integrations</Header>
+        <Text size="sm" className="text-foreground-neutral-muted">
+          Provider accounts installed in this workspace.
+        </Text>
+      </div>
+
+      {connectionsQuery.isPending ? <InstalledSkeleton label="Loading integrations" /> : null}
+
+      {connectionsQuery.isError && connectionsQuery.data === undefined ? (
+        <div className={cn(INSTALLED_SURFACE_CLASS, 'px-16')}>
+          <QueryLoadError query={connectionsQuery} subject="integrations" />
+        </div>
+      ) : null}
+
+      {connectionsQuery.data !== undefined && connections.length === 0 ? (
+        <div className={cn(INSTALLED_SURFACE_CLASS, 'px-16')}>
+          <EmptyState
+            icon="componentLine"
+            title="No integrations installed yet"
+            description="Install a provider below to get started."
+          />
+        </div>
+      ) : null}
+
+      {connections.length > 0 ? (
+        <ul className={cn('divide-y divide-border-neutral-base', INSTALLED_SURFACE_CLASS)}>
+          {connections.map((connection) => (
+            <InstalledRow
+              key={connection.id}
+              connection={connection}
+              isMutating={isMutating}
+              onUse={onUse}
+              onSetActive={(nextActive) => onSetActive(connection, nextActive)}
+              onDelete={onDelete}
+              providerDisplayName={providerDisplayName}
+            />
+          ))}
+        </ul>
+      ) : null}
+    </section>
+  );
+}
+
+function InstalledRow({
+  connection,
+  isMutating,
+  onUse,
+  onSetActive,
+  onDelete,
+  providerDisplayName,
+}: {
+  connection: IntegrationConnectionDto;
+  isMutating: boolean;
+  onUse: (connectionId: string) => void;
+  onSetActive: (active: boolean) => void;
+  onDelete: (connectionId: string) => void;
+  providerDisplayName: (provider: string) => string | undefined;
+}) {
+  const muted = connection.lifecycle_status === 'disabled';
+  const active = connection.lifecycle_status === 'active';
+  const recentEventsEvent = usageEventsForConnection(connection)[0]?.value ?? 'received';
+  const providerName = providerDisplayName(connection.provider);
+
+  return (
+    <li className="flex items-center gap-12 px-16 py-12 transition-colors hover:bg-background-components-hover">
+      <IntegrationIcon
+        source={connection.provider}
+        aria-hidden
+        className={cn(
+          'size-24 shrink-0',
+          muted ? 'text-foreground-neutral-disabled' : 'text-foreground-neutral-base',
+        )}
+      />
+      <div className="flex min-w-0 flex-1 flex-col gap-2">
+        <div className="flex min-w-0 items-center gap-8">
+          <Text
+            size="md"
+            bold
+            className={cn('truncate', muted ? 'text-foreground-neutral-disabled' : undefined)}
+          >
+            {connection.display_name}
+          </Text>
+          <ConnectionStatusBadge status={connection.lifecycle_status} className="shrink-0" />
+        </div>
+        <Text size="sm" className="truncate text-foreground-neutral-muted">
+          Added {formatDate(connection.created_at)}
+        </Text>
+      </div>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <IconButton
+            size="sm"
+            variant="transparent"
+            icon="more2Line"
+            aria-label={`Open ${connection.display_name} integration actions`}
+          />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          {connection.external_url ? (
+            <DropdownMenuItem asChild>
+              <a href={connection.external_url} target="_blank" rel="noreferrer noopener">
+                {providerName ? `Open in ${providerName}` : 'Open provider settings'}
+              </a>
+            </DropdownMenuItem>
+          ) : null}
+          <DropdownMenuItem onSelect={() => onUse(connection.id)}>
+            Use this integration
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <Link
+              to="/workspaces/$wid/settings/events"
+              params={{wid: connection.workspace_id}}
+              search={{source: [connection.slug], event: [recentEventsEvent]}}
+            >
+              View recent events
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem disabled={isMutating} onSelect={() => onSetActive(!active)}>
+            {active ? 'Disable integration' : 'Enable integration'}
+          </DropdownMenuItem>
+          <DropdownMenuItem disabled={isMutating} onSelect={() => onDelete(connection.id)}>
+            Delete integration
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </li>
+  );
+}
+
+function InstalledSkeleton({label}: {label: string}) {
+  return (
+    <ul
+      role="status"
+      aria-label={label}
+      className={cn('divide-y divide-border-neutral-base', INSTALLED_SURFACE_CLASS)}
+    >
+      {[0, 1, 2].map((row) => (
+        <li key={row} className="flex items-center gap-12 px-16 py-12">
+          <Skeleton className="size-24 shrink-0" />
+          <div className="flex min-w-0 flex-1 flex-col gap-2">
+            <Skeleton className="h-16 w-120" />
+            <Skeleton className="h-12 w-80" />
+          </div>
+          <Skeleton className="h-20 w-72 shrink-0" />
+        </li>
+      ))}
+    </ul>
+  );
+}

package/src/components/integration-delete-confirm-modal.tsx

@@ -0,0 +1,62 @@
+import {Button} from '@shipfox/react-ui/button';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+} from '@shipfox/react-ui/modal';
+import {Text} from '@shipfox/react-ui/typography';
+
+interface IntegrationDeleteConfirmModalProps {
+  connectionName: string | undefined;
+  open: boolean;
+  isPending: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+}
+
+export function IntegrationDeleteConfirmModal({
+  connectionName,
+  open,
+  isPending,
+  onOpenChange,
+  onConfirm,
+}: IntegrationDeleteConfirmModalProps) {
+  const name = connectionName ?? 'this integration';
+  return (
+    <Modal
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (isPending && !nextOpen) return;
+        onOpenChange(nextOpen);
+      }}
+    >
+      <ModalContent aria-describedby={undefined}>
+        <ModalTitle className="sr-only">Delete integration</ModalTitle>
+        <ModalHeader title="Delete integration" showClose={!isPending} />
+        <ModalBody className="gap-16">
+          <Text size="sm">
+            Are you sure you want to delete <strong className="font-medium">{name}</strong>? Once
+            deleted, Shipfox will immediately stop processing events from this integration. This
+            cannot be undone.
+          </Text>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            type="button"
+            variant="secondary"
+            disabled={isPending}
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button type="button" variant="danger" isLoading={isPending} onClick={onConfirm}>
+            Delete integration
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

package/src/components/integration-gallery-for-workspace.tsx

@@ -0,0 +1,193 @@
+import type {
+  IntegrationCapabilityDto,
+  IntegrationConnectionDto,
+  IntegrationProviderDto,
+} from '@shipfox/api-integration-core-dto';
+import {toast} from '@shipfox/react-ui/toast';
+import {Header, Text} from '@shipfox/react-ui/typography';
+import {useState} from 'react';
+import {
+  useDeleteIntegrationConnectionMutation,
+  useIntegrationConnectionsQuery,
+  useIntegrationProvidersQuery,
+  useUpdateIntegrationConnectionMutation,
+} from '#hooks/api/integrations.js';
+import {
+  useDeleteWebhookConnectionMutation,
+  useUpdateWebhookConnectionMutation,
+} from '#hooks/api/webhook-connections.js';
+import {InstalledIntegrationsSection} from './installed-integrations-section.js';
+import {IntegrationDeleteConfirmModal} from './integration-delete-confirm-modal.js';
+import {usageEventsForConnection} from './integration-usage-events.js';
+import {IntegrationUsageModal} from './integration-usage-modal.js';
+import {ProviderGrid} from './provider-grid.js';
+import {WebhookCreateModal} from './webhook/webhook-create-modal.js';
+import {WebhookUsageDetails} from './webhook/webhook-usage-details.js';
+
+interface IntegrationGalleryForWorkspaceProps {
+  capability: IntegrationCapabilityDto | undefined;
+  emptyProvidersMessage: string;
+  workspaceId: string;
+}
+
+export function IntegrationGalleryForWorkspace({
+  capability,
+  emptyProvidersMessage,
+  workspaceId,
+}: IntegrationGalleryForWorkspaceProps) {
+  const [createProvider, setCreateProvider] = useState<string | undefined>();
+  const [usageConnectionId, setUsageConnectionId] = useState<string | undefined>();
+  const [createdUsageConnection, setCreatedUsageConnection] = useState<
+    IntegrationConnectionDto | undefined
+  >();
+  const [deleteConnectionId, setDeleteConnectionId] = useState<string | undefined>();
+  const providersQuery = useIntegrationProvidersQuery(capability ? {capability} : undefined);
+  const connectionsQuery = useIntegrationConnectionsQuery(workspaceId);
+  const updateConnection = useUpdateIntegrationConnectionMutation();
+  const deleteConnection = useDeleteIntegrationConnectionMutation();
+  const updateWebhookConnection = useUpdateWebhookConnectionMutation();
+  const deleteWebhookConnection = useDeleteWebhookConnectionMutation();
+
+  const providers = providersQuery.data?.providers ?? [];
+  const providersMap = new Map<string, IntegrationProviderDto>(
+    providers.map((provider) => [provider.provider, provider]),
+  );
+
+  const allConnections = connectionsQuery.data?.connections ?? [];
+  // Filter in memory so the all-status cache key stays shared; passing capability
+  // into the hook would collide with the active-only `source_control` key used
+  // elsewhere.
+  const connections = capability
+    ? allConnections.filter((connection) => connection.capabilities.includes(capability))
+    : allConnections;
+
+  const providerDisplayName = (provider: string) => providersMap.get(provider)?.display_name;
+  const providerLabel = (provider: string) => providerDisplayName(provider) ?? provider;
+
+  const sortedConnections = [...connections].sort((a, b) => {
+    const byProvider = providerLabel(a.provider).localeCompare(providerLabel(b.provider));
+    if (byProvider !== 0) return byProvider;
+    return a.created_at.localeCompare(b.created_at);
+  });
+  const usageConnection =
+    sortedConnections.find((connection) => connection.id === usageConnectionId) ??
+    (createdUsageConnection?.id === usageConnectionId ? createdUsageConnection : null) ??
+    null;
+  const deleteConnectionTarget = sortedConnections.find(
+    (connection) => connection.id === deleteConnectionId,
+  );
+
+  async function setConnectionActive(connection: IntegrationConnectionDto, active: boolean) {
+    try {
+      const body = {lifecycle_status: active ? 'active' : 'disabled'} as const;
+      if (connection.provider === 'webhook') {
+        await updateWebhookConnection.mutateAsync({
+          workspaceId,
+          connectionId: connection.id,
+          body,
+        });
+      } else {
+        await updateConnection.mutateAsync({
+          connectionId: connection.id,
+          body,
+        });
+      }
+      toast.success(active ? 'Integration enabled.' : 'Integration disabled.');
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Could not update integration.');
+    }
+  }
+
+  async function confirmDeleteConnection() {
+    if (!deleteConnectionTarget) return;
+    try {
+      if (deleteConnectionTarget.provider === 'webhook') {
+        await deleteWebhookConnection.mutateAsync({
+          workspaceId,
+          connectionId: deleteConnectionTarget.id,
+        });
+      } else {
+        await deleteConnection.mutateAsync({
+          workspaceId,
+          connectionId: deleteConnectionTarget.id,
+        });
+      }
+      toast.success('Integration deleted.');
+      setDeleteConnectionId(undefined);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Could not delete integration.');
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-24">
+      <InstalledIntegrationsSection
+        connectionsQuery={connectionsQuery}
+        connections={sortedConnections}
+        isMutating={
+          updateConnection.isPending ||
+          deleteConnection.isPending ||
+          updateWebhookConnection.isPending ||
+          deleteWebhookConnection.isPending
+        }
+        onUse={setUsageConnectionId}
+        onSetActive={(connection, active) => {
+          void setConnectionActive(connection, active);
+        }}
+        onDelete={setDeleteConnectionId}
+        providerDisplayName={providerDisplayName}
+      />
+
+      <section className="flex flex-col gap-16" aria-label="Available integrations">
+        <div className="flex flex-col gap-4">
+          <Header variant="h3">Available integrations</Header>
+          <Text size="sm" className="text-foreground-neutral-muted">
+            Providers available to install in this workspace.
+          </Text>
+        </div>
+
+        <ProviderGrid
+          providersQuery={providersQuery}
+          workspaceId={workspaceId}
+          emptyMessage={emptyProvidersMessage}
+          onOpenProvider={setCreateProvider}
+        />
+      </section>
+      <WebhookCreateModal
+        workspaceId={workspaceId}
+        open={createProvider === 'webhook'}
+        onOpenChange={(open) => setCreateProvider(open ? 'webhook' : undefined)}
+        onCreated={(connection) => {
+          setCreatedUsageConnection(connection);
+          setUsageConnectionId(connection.id);
+        }}
+      />
+      <IntegrationUsageModal
+        connection={usageConnection}
+        events={usageConnection ? usageEventsForConnection(usageConnection) : []}
+        open={usageConnection !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setUsageConnectionId(undefined);
+            setCreatedUsageConnection(undefined);
+          }
+        }}
+      >
+        {usageConnection?.provider === 'webhook' ? (
+          <WebhookUsageDetails workspaceId={workspaceId} connectionId={usageConnection.id} />
+        ) : null}
+      </IntegrationUsageModal>
+      <IntegrationDeleteConfirmModal
+        connectionName={deleteConnectionTarget?.display_name}
+        open={deleteConnectionId !== undefined}
+        isPending={deleteConnection.isPending || deleteWebhookConnection.isPending}
+        onOpenChange={(open) => {
+          if (!open) setDeleteConnectionId(undefined);
+        }}
+        onConfirm={() => {
+          void confirmDeleteConnection();
+        }}
+      />
+    </div>
+  );
+}