@shipfox/client-integrations 0.2.0

package/src/components/redirect-install-page.tsx

@@ -0,0 +1,68 @@
+import {ApiError} from '@shipfox/client-api';
+import {useActiveWorkspace} from '@shipfox/client-auth';
+import {ButtonLink} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {FullPageLoader} from '@shipfox/react-ui/loader';
+import {Text} from '@shipfox/react-ui/typography';
+import {Link} from '@tanstack/react-router';
+import {useEffect, useRef, useState} from 'react';
+
+interface RedirectInstallPageProps {
+  installRequest: (body: {workspace_id: string}) => Promise<{install_url: string}>;
+  errorFallbackMessage: string;
+  /**
+   * Runs before leaving the app (e.g. to persist the workspace id for a
+   * state-less provider callback). Must not throw — a failed side effect
+   * should never block the redirect.
+   */
+  beforeRedirect?: (workspaceId: string) => void;
+  /** Injectable for tests: jsdom's window.location cannot be stubbed. */
+  assignLocation?: (url: string) => void;
+}
+
+export function RedirectInstallPage({
+  installRequest,
+  errorFallbackMessage,
+  beforeRedirect,
+  assignLocation = (url) => window.location.assign(url),
+}: RedirectInstallPageProps) {
+  const workspace = useActiveWorkspace();
+  const startedRef = useRef(false);
+  const [errorMessage, setErrorMessage] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (startedRef.current) return;
+    startedRef.current = true;
+    // The side effect is best-effort persistence; a throw here must never
+    // block the install redirect, so swallow it and continue.
+    try {
+      beforeRedirect?.(workspace.id);
+    } catch {
+      // ignore
+    }
+    installRequest({workspace_id: workspace.id})
+      .then((response) => {
+        assignLocation(response.install_url);
+      })
+      .catch((error: unknown) => {
+        setErrorMessage(error instanceof ApiError ? error.message : errorFallbackMessage);
+      });
+  }, [workspace, installRequest, beforeRedirect, errorFallbackMessage, assignLocation]);
+
+  if (errorMessage) {
+    return (
+      <div className="mx-auto flex w-full max-w-[480px] flex-col gap-16">
+        <Callout role="alert" type="error">
+          <Text size="sm">{errorMessage}</Text>
+        </Callout>
+        <ButtonLink asChild variant="muted" className="w-fit">
+          <Link to="/workspaces/$wid/integrations" params={{wid: workspace.id}}>
+            Back to integrations
+          </Link>
+        </ButtonLink>
+      </div>
+    );
+  }
+
+  return <FullPageLoader />;
+}

package/src/components/repository-picker.tsx

@@ -0,0 +1,102 @@
+import type {RepositoryDto} from '@shipfox/api-integration-core-dto';
+import {Button} from '@shipfox/react-ui/button';
+import {Input} from '@shipfox/react-ui/input';
+import {Label} from '@shipfox/react-ui/label';
+import {RadioGroup, RadioGroupItem} from '@shipfox/react-ui/radio-group';
+import {Skeleton} from '@shipfox/react-ui/skeleton';
+import {Text} from '@shipfox/react-ui/typography';
+import {useId} from 'react';
+
+export function RepositoryPicker({
+  repositories,
+  selectedRepositoryId,
+  onSelect,
+  isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  onLoadMore,
+  emptyMessage = 'No repositories found.',
+  searchValue,
+  onSearchChange,
+  searchDisabled,
+}: {
+  repositories: RepositoryDto[];
+  selectedRepositoryId: string | undefined;
+  onSelect: (repositoryId: string) => void;
+  isLoading: boolean;
+  isFetchingNextPage?: boolean;
+  hasNextPage?: boolean;
+  onLoadMore?: () => void;
+  emptyMessage?: string;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  searchDisabled?: boolean;
+}) {
+  const labelId = useId();
+  const showSearch = onSearchChange !== undefined;
+
+  return (
+    <div className="flex flex-col gap-10">
+      <Label id={labelId} className="sr-only">
+        Repository
+      </Label>
+
+      {showSearch ? (
+        <Input
+          type="search"
+          placeholder="Search repositories…"
+          aria-label="Search repositories"
+          value={searchValue ?? ''}
+          onChange={(event) => onSearchChange?.(event.target.value)}
+          disabled={searchDisabled}
+        />
+      ) : null}
+
+      {isLoading ? <Skeleton className="h-58 w-full" /> : null}
+
+      {!isLoading && repositories.length === 0 ? (
+        <div className="rounded-8 border border-border-neutral-base bg-background-subtle-base p-14">
+          <Text size="sm">{emptyMessage}</Text>
+        </div>
+      ) : null}
+
+      {repositories.length > 0 ? (
+        <RadioGroup
+          aria-labelledby={labelId}
+          value={selectedRepositoryId ?? ''}
+          onValueChange={onSelect}
+          className="grid grid-cols-2 gap-8 min-[1200px]:grid-cols-3 max-[760px]:grid-cols-1"
+        >
+          {repositories.map((repository) => (
+            <RadioGroupItem
+              key={repository.external_repository_id}
+              value={repository.external_repository_id}
+              className="p-12"
+            >
+              <span className="flex min-w-0 items-center justify-between gap-10">
+                <Text as="span" size="sm" bold className="truncate">
+                  {repository.full_name}
+                </Text>
+                <Text as="span" size="xs" className="shrink-0 text-foreground-neutral-muted">
+                  {repository.default_branch}
+                </Text>
+              </span>
+            </RadioGroupItem>
+          ))}
+        </RadioGroup>
+      ) : null}
+
+      {hasNextPage && onLoadMore ? (
+        <Button
+          type="button"
+          variant="secondary"
+          size="sm"
+          isLoading={isFetchingNextPage ?? false}
+          onClick={onLoadMore}
+        >
+          Load more
+        </Button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/webhook/copyable-value.test.tsx

@@ -0,0 +1,41 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest';
+import {toast} from '@shipfox/react-ui/toast';
+import {fireEvent, render, screen, waitFor} from '@testing-library/react';
+import {CopyableValue} from './copyable-value.js';
+
+const WEBHOOK_URL = 'https://api.example.test/webhook/77777777-7777-4777-8777-777777777777';
+const clipboardDescriptor = Object.getOwnPropertyDescriptor(navigator, 'clipboard');
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  if (clipboardDescriptor) {
+    Object.defineProperty(navigator, 'clipboard', clipboardDescriptor);
+  } else {
+    Reflect.deleteProperty(navigator, 'clipboard');
+  }
+});
+
+describe('CopyableValue', () => {
+  test('keeps long values readable for manual selection', () => {
+    render(<CopyableValue label="inbound URL" value={WEBHOOK_URL} />);
+
+    const value = screen.getByText(WEBHOOK_URL);
+
+    expect(value).toHaveClass('break-all');
+    expect(value).not.toHaveClass('truncate');
+  });
+
+  test('shows an error toast when browser copy APIs fail', async () => {
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: {writeText: vi.fn().mockRejectedValue(new Error('denied'))},
+    });
+    const errorSpy = vi.spyOn(toast, 'error').mockImplementation(() => 'toast-id');
+    render(<CopyableValue label="inbound URL" value={WEBHOOK_URL} />);
+
+    fireEvent.click(screen.getByRole('button', {name: 'Copy inbound URL'}));
+
+    await waitFor(() => expect(errorSpy).toHaveBeenCalledWith('Could not copy.'));
+  });
+});

package/src/components/webhook/copyable-value.tsx

@@ -0,0 +1,72 @@
+import {Button} from '@shipfox/react-ui/button';
+import {useCopyToClipboard} from '@shipfox/react-ui/hooks';
+import {toast} from '@shipfox/react-ui/toast';
+import {Code, Text} from '@shipfox/react-ui/typography';
+import {cn} from '@shipfox/react-ui/utils';
+import type {ReactNode} from 'react';
+import {useEffect, useRef, useState} from 'react';
+
+interface CopyableValueProps {
+  label: string;
+  value: string;
+  note?: ReactNode;
+  className?: string;
+}
+
+export function CopyableValue({label, value, note, className}: CopyableValueProps) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const {copy} = useCopyToClipboard({
+    text: value,
+    onCopy: () => {
+      setCopied(true);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setCopied(false), 2000);
+    },
+  });
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  async function handleCopy() {
+    try {
+      await copy();
+    } catch {
+      toast.error('Could not copy.');
+    }
+  }
+
+  return (
+    <div className={cn('flex w-full min-w-0 flex-col gap-8', className)}>
+      <div className="flex min-w-0 items-center gap-8">
+        <Code
+          as="span"
+          variant="paragraph"
+          className="min-w-0 flex-1 break-all rounded-4 border border-border-neutral-base bg-background-components-base px-8 py-6 text-foreground-neutral-base"
+        >
+          {value}
+        </Code>
+        <Button
+          type="button"
+          variant="secondary"
+          size="sm"
+          iconLeft={copied ? 'check' : 'copy'}
+          aria-label={`Copy ${label}`}
+          onClick={() => {
+            void handleCopy();
+          }}
+        >
+          Copy
+        </Button>
+      </div>
+      {note ? (
+        <Text size="sm" className="text-foreground-neutral-muted">
+          {note}
+        </Text>
+      ) : null}
+    </div>
+  );
+}

package/src/components/webhook/webhook-create-modal.tsx

@@ -0,0 +1,247 @@
+import type {IntegrationConnectionDto} from '@shipfox/api-integration-core-dto';
+import {
+  createWebhookConnectionBodySchema,
+  WEBHOOK_RESERVED_SLUGS,
+  type WebhookConnectionDto,
+  webhookSlugSchema,
+} from '@shipfox/api-integration-webhook-dto';
+import {displayNameFieldError} from '@shipfox/client-ui';
+import {Button} from '@shipfox/react-ui/button';
+import {Callout} from '@shipfox/react-ui/callout';
+import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+} from '@shipfox/react-ui/modal';
+import {toast} from '@shipfox/react-ui/toast';
+import {Code, Text} from '@shipfox/react-ui/typography';
+import {useForm} from '@tanstack/react-form';
+import {useEffect, useRef, useState} from 'react';
+import {useCreateWebhookConnectionMutation} from '#hooks/api/webhook-connections.js';
+import {webhookCreateErrorToFormError} from './webhook-form-errors.js';
+
+interface WebhookCreateModalProps {
+  workspaceId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated: (connection: IntegrationConnectionDto) => void;
+}
+
+export function WebhookCreateModal({
+  workspaceId,
+  open,
+  onOpenChange,
+  onCreated,
+}: WebhookCreateModalProps) {
+  const createWebhook = useCreateWebhookConnectionMutation();
+  const [formError, setFormError] = useState<string | undefined>();
+  const [hasManualSlug, setHasManualSlug] = useState(false);
+  const nameInputRef = useRef<HTMLInputElement | null>(null);
+
+  const form = useForm({
+    defaultValues: {name: '', slug: ''},
+    onSubmit: async ({value}) => {
+      setFormError(undefined);
+      try {
+        const body = createWebhookConnectionBodySchema.parse({
+          workspace_id: workspaceId,
+          name: value.name.trim(),
+          slug: value.slug.trim(),
+        });
+        const connection = await createWebhook.mutateAsync(body);
+        onCreated(toIntegrationConnection(connection));
+        toast.success('Webhook created.');
+        onOpenChange(false);
+      } catch (error) {
+        const mapped = webhookCreateErrorToFormError(error);
+        if (mapped.kind === 'field') {
+          form.setFieldMeta(mapped.field, (prev) => ({
+            ...prev,
+            errorMap: {...prev.errorMap, onServer: mapped.message},
+          }));
+        } else {
+          setFormError(mapped.message);
+        }
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (!open) {
+      setFormError(undefined);
+      setHasManualSlug(false);
+      form.reset();
+      return;
+    }
+    requestAnimationFrame(() => nameInputRef.current?.focus());
+  }, [form, open]);
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (createWebhook.isPending && !nextOpen) return;
+    onOpenChange(nextOpen);
+  };
+
+  return (
+    <Modal open={open} onOpenChange={handleOpenChange}>
+      <ModalContent aria-describedby={undefined}>
+        <ModalTitle className="sr-only">Add webhook</ModalTitle>
+        <ModalHeader title="Add webhook" showClose={!createWebhook.isPending} />
+        <form
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void form.handleSubmit();
+          }}
+        >
+          <ModalBody className="gap-16">
+            <Text size="sm" className="text-foreground-neutral-muted">
+              Create a named inbound webhook URL for this workspace.
+            </Text>
+            {formError ? (
+              <Callout role="alert" type="error">
+                {formError}
+              </Callout>
+            ) : null}
+            <form.Field
+              name="name"
+              validators={{
+                onBlur: ({value}) => webhookNameFieldError(value),
+                onSubmit: ({value}) => webhookNameFieldError(value),
+              }}
+            >
+              {(field) => (
+                <FormField
+                  label="Name"
+                  id="webhook-name"
+                  error={fieldError(field)}
+                  className="w-full"
+                >
+                  <FormFieldInput
+                    ref={nameInputRef}
+                    name="name"
+                    value={field.state.value}
+                    onChange={(event) => {
+                      const nextName = event.target.value;
+                      field.handleChange(nextName);
+                      if (!hasManualSlug) {
+                        form.setFieldValue(
+                          'slug',
+                          nextName.trim() ? suggestWebhookSlug(nextName) : '',
+                        );
+                      }
+                    }}
+                    onBlur={field.handleBlur}
+                    placeholder="Stripe production"
+                    disabled={createWebhook.isPending}
+                  />
+                </FormField>
+              )}
+            </form.Field>
+            <form.Field
+              name="slug"
+              validators={{
+                onBlur: ({value}) => webhookSlugFieldError(value),
+                onSubmit: ({value}) => webhookSlugFieldError(value),
+              }}
+            >
+              {(field) => (
+                <FormField
+                  label="Slug"
+                  id="webhook-slug"
+                  error={fieldError(field)}
+                  className="w-full"
+                >
+                  <FormFieldInput
+                    name="slug"
+                    value={field.state.value}
+                    onChange={(event) => {
+                      const nextSlug = event.target.value;
+                      setHasManualSlug(nextSlug.trim().length > 0);
+                      field.handleChange(nextSlug);
+                      if (nextSlug.trim().length === 0 && form.state.values.name.trim()) {
+                        form.setFieldValue('slug', suggestWebhookSlug(form.state.values.name));
+                      }
+                    }}
+                    onBlur={field.handleBlur}
+                    placeholder="webhook-stripe-production"
+                    disabled={createWebhook.isPending}
+                  />
+                  <Text size="sm" className="text-foreground-neutral-muted">
+                    Reference in workflows with{' '}
+                    <Code as="span">
+                      source: {field.state.value || 'webhook-stripe-production'}
+                    </Code>
+                    .
+                  </Text>
+                </FormField>
+              )}
+            </form.Field>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              type="button"
+              variant="secondary"
+              disabled={createWebhook.isPending}
+              onClick={() => onOpenChange(false)}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" isLoading={createWebhook.isPending}>
+              Create
+            </Button>
+          </ModalFooter>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+function webhookNameFieldError(value: string): string | undefined {
+  return displayNameFieldError(
+    value.trim(),
+    'Webhook name',
+    createWebhookConnectionBodySchema.shape.name,
+  );
+}
+
+function webhookSlugFieldError(value: string): string | undefined {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) return 'Slug is required.';
+  if (WEBHOOK_RESERVED_SLUGS.includes(trimmed as (typeof WEBHOOK_RESERVED_SLUGS)[number])) {
+    return 'That slug is reserved.';
+  }
+  if (webhookSlugSchema.safeParse(trimmed).success) return undefined;
+  return 'Use lowercase letters, numbers, hyphens, or underscores.';
+}
+
+function suggestWebhookSlug(name: string): string {
+  const prefix = 'webhook';
+  const suffix = name
+    .toLowerCase()
+    .replaceAll(/[^a-z0-9]+/g, '-')
+    .replaceAll(/^-+|-+$/g, '')
+    .slice(0, 100 - prefix.length - 1)
+    .replaceAll(/-+$/g, '');
+
+  return suffix ? `${prefix}-${suffix}` : prefix;
+}
+
+function toIntegrationConnection(connection: WebhookConnectionDto): IntegrationConnectionDto {
+  return {
+    id: connection.id,
+    workspace_id: connection.workspace_id,
+    provider: 'webhook',
+    external_account_id: connection.slug,
+    slug: connection.slug,
+    display_name: connection.name,
+    lifecycle_status: connection.lifecycle_status,
+    capabilities: [],
+    created_at: connection.created_at,
+    updated_at: connection.updated_at,
+  };
+}

package/src/components/webhook/webhook-form-errors.test.ts

@@ -0,0 +1,45 @@
+import {ApiError} from '@shipfox/client-api';
+import {webhookCreateErrorToFormError} from './webhook-form-errors.js';
+
+function apiError(code: string, status = 400, message = `${code} server message`) {
+  return new ApiError({code, message, status});
+}
+
+describe('webhookCreateErrorToFormError', () => {
+  test('routes slug-already-exists to the slug field', () => {
+    const result = webhookCreateErrorToFormError(apiError('slug-already-exists', 409));
+
+    expect(result).toEqual({
+      kind: 'field',
+      field: 'slug',
+      message: 'A webhook with this slug already exists.',
+    });
+  });
+
+  test('routes provider errors to a form-level alert with the server message', () => {
+    const result = webhookCreateErrorToFormError(apiError('validation-failed', 400));
+
+    expect(result).toEqual({kind: 'form', message: 'validation-failed server message'});
+  });
+
+  test('hides the raw URL in a network-error behind a friendly form-level message', () => {
+    const result = webhookCreateErrorToFormError(apiError('network-error', 0));
+
+    expect(result).toEqual({
+      kind: 'form',
+      message: "We couldn't reach the server. Check your connection and try again.",
+    });
+  });
+
+  test('routes a non-ApiError to a generic form-level alert', () => {
+    const result = webhookCreateErrorToFormError(new Error('boom'));
+
+    expect(result).toEqual({kind: 'form', message: 'boom'});
+  });
+
+  test('falls back for a non-Error value', () => {
+    const result = webhookCreateErrorToFormError('nope');
+
+    expect(result).toEqual({kind: 'form', message: 'Something went wrong. Try again.'});
+  });
+});

package/src/components/webhook/webhook-form-errors.ts

@@ -0,0 +1,32 @@
+import {ApiError} from '@shipfox/client-api';
+
+export type WebhookCreateField = 'slug';
+
+export type WebhookCreateFormErrorMapping =
+  | {kind: 'field'; field: WebhookCreateField; message: string}
+  | {kind: 'form'; message: string};
+
+export function webhookCreateErrorToFormError(error: unknown): WebhookCreateFormErrorMapping {
+  const code = error instanceof ApiError ? error.code : undefined;
+
+  if (code === 'slug-already-exists') {
+    return {
+      kind: 'field',
+      field: 'slug',
+      message: 'A webhook with this slug already exists.',
+    };
+  }
+
+  return {kind: 'form', message: webhookCreateErrorMessage(error)};
+}
+
+function webhookCreateErrorMessage(error: unknown): string {
+  if (error instanceof ApiError) {
+    if (error.code === 'network-error') {
+      return "We couldn't reach the server. Check your connection and try again.";
+    }
+    return error.message;
+  }
+  if (error instanceof Error) return error.message;
+  return 'Something went wrong. Try again.';
+}