PaperClipAI/ui/src/pages/apps/Connections.test.tsx

// @vitest-environment jsdom

import { flushSync } from "react-dom";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { Connections } from "./Connections";

const listGalleryMock = vi.hoisted(() => vi.fn());
const listApplicationsMock = vi.hoisted(() => vi.fn());
const listConnectionsMock = vi.hoisted(() => vi.fn());
const listAppsAttentionMock = vi.hoisted(() => vi.fn());
const listProfilesMock = vi.hoisted(() => vi.fn());
const archiveConnectionMock = vi.hoisted(() => vi.fn());
const pushToastMock = vi.hoisted(() => vi.fn());
const mockNavigate = vi.hoisted(() => vi.fn());

vi.mock("@/api/tools", () => ({
  toolsApi: {
    listGallery: (companyId: string) => listGalleryMock(companyId),
    listApplications: (companyId: string) => listApplicationsMock(companyId),
    listConnections: (companyId: string) => listConnectionsMock(companyId),
    listAppsAttention: (companyId: string) => listAppsAttentionMock(companyId),
    listProfiles: (companyId: string) => listProfilesMock(companyId),
    archiveConnection: (connectionId: string) => archiveConnectionMock(connectionId),
  },
}));

vi.mock("@/lib/router", () => ({
  useNavigate: () => mockNavigate,
  Link: ({ children, to }: { children: React.ReactNode; to: string }) => (
    <a href={to}>{children}</a>
  ),
}));

vi.mock("@/context/CompanyContext", () => ({
  useCompany: () => ({
    selectedCompanyId: "company-1",
    selectedCompany: { id: "company-1", name: "Paperclip" },
  }),
}));

vi.mock("@/context/BreadcrumbContext", () => ({
  useBreadcrumbs: () => ({ setBreadcrumbs: vi.fn() }),
}));

vi.mock("@/context/ToastContext", () => ({
  useToast: () => ({ pushToast: pushToastMock }),
}));

// eslint-disable-next-line @typescript-eslint/no-explicit-any
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;

// React 19 does not export a usable `act` in this vitest/jsdom setup; use the
// flushSync-based helper the sibling apps tests use (PAP-12371 gotcha).
async function act(callback: () => void | Promise<void>) {
  let result: void | Promise<void> = undefined;
  flushSync(() => {
    result = callback();
  });
  await result;
}

async function flushReact() {
  await act(async () => {
    await Promise.resolve();
    await new Promise((resolve) => window.setTimeout(resolve, 0));
  });
}

function application(overrides: Record<string, unknown>) {
  return {
    id: "app-x",
    companyId: "company-1",
    applicationKey: undefined,
    name: "GitHub",
    description: null,
    type: "mcp_http",
    status: "active",
    pluginId: null,
    ownerAgentId: null,
    ownerUserId: null,
    metadata: null,
    archivedAt: null,
    createdAt: new Date("2026-01-01T00:00:00Z"),
    updatedAt: new Date("2026-01-01T00:00:00Z"),
    ...overrides,
  };
}

function connection(overrides: Record<string, unknown>) {
  return {
    id: "conn-x",
    companyId: "company-1",
    applicationId: "app-x",
    name: "GitHub",
    connectionKind: "managed",
    transport: "mcp_remote",
    status: "active",
    transportConfig: {},
    config: {},
    credentialSecretRefs: [],
    healthStatus: "healthy",
    healthCheckedAt: null,
    lastError: null,
    enabled: true,
    lastUsedAt: null,
    createdByAgentId: null,
    createdByUserId: null,
    createdAt: new Date("2026-01-01T00:00:00Z"),
    updatedAt: new Date("2026-01-01T00:00:00Z"),
    ...overrides,
  };
}

function profile(connectionId: string, includedEntryIds: string[]) {
  return {
    id: `profile-${connectionId}`,
    companyId: "company-1",
    profileKey: `app:${connectionId}`,
    name: connectionId,
    description: null,
    status: "active",
    defaultAction: "deny",
    metadata: null,
    createdAt: new Date("2026-01-01T00:00:00Z"),
    updatedAt: new Date("2026-01-01T00:00:00Z"),
    entries: includedEntryIds.map((catalogEntryId, index) => ({
      id: `entry-${connectionId}-${index}`,
      companyId: "company-1",
      profileId: `profile-${connectionId}`,
      selectorType: "catalog_entry",
      effect: "include",
      applicationId: null,
      connectionId,
      catalogEntryId,
      toolName: null,
      riskLevel: null,
      conditions: null,
      createdAt: new Date("2026-01-01T00:00:00Z"),
      updatedAt: new Date("2026-01-01T00:00:00Z"),
    })),
    bindings: [],
  };
}

describe("Connections table (M1b / PAP-13254 door 2)", () => {
  let container: HTMLDivElement;
  let root: ReturnType<typeof createRoot>;

  beforeEach(() => {
    listGalleryMock.mockResolvedValue({ apps: [] });
    listAppsAttentionMock.mockResolvedValue({ apps: [] });
    listApplicationsMock.mockResolvedValue({ applications: [] });
    listConnectionsMock.mockResolvedValue({ connections: [] });
    listProfilesMock.mockResolvedValue({ profiles: [] });
    archiveConnectionMock.mockResolvedValue(connection({ id: "c-deleted", status: "archived" }));
    container = document.createElement("div");
    document.body.appendChild(container);
  });

  afterEach(() => {
    act(() => root?.unmount());
    container.remove();
    vi.clearAllMocks();
  });

  async function renderApps() {
    const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
    root = createRoot(container);
    await act(async () => {
      root.render(
        <QueryClientProvider client={client}>
          <Connections />
        </QueryClientProvider>,
      );
    });
    await flushReact();
  }

  it("renders applications without connections as not connected with a Connect action", async () => {
    listApplicationsMock.mockResolvedValue({
      applications: [application({ id: "app-github", name: "GitHub" })],
    });

    await renderApps();

    const text = container.textContent ?? "";
    expect(text).toContain("All (1)");
    expect(text).toContain("GitHub");
    expect(text).toContain("Not connected");
    expect(text).toContain("Connect it so agents can use it.");
    expect(text).toContain("Connect");

    const row = Array.from(container.querySelectorAll("tbody tr")).find((tr) =>
      tr.textContent?.includes("GitHub"),
    );
    row?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    expect(mockNavigate).toHaveBeenCalledWith("/apps/app/app-github");

    mockNavigate.mockClear();
    const connectButton = Array.from(container.querySelectorAll("button")).find((button) =>
      button.textContent?.includes("Connect") && !button.textContent.includes("Connect an app"),
    );
    connectButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    expect(mockNavigate).toHaveBeenCalledWith("/apps/app/app-github");
  });

  it("rolls up multi-connection status, attention count, actions, and navigation by application", async () => {
    listApplicationsMock.mockResolvedValue({
      applications: [
        application({ id: "app-github", name: "GitHub" }),
        application({ id: "app-slack", name: "Slack" }),
        application({ id: "app-notion", name: "Notion" }),
      ],
    });
    listConnectionsMock.mockResolvedValue({
      connections: [
        connection({ id: "c-connected", applicationId: "app-github", name: "GitHub", healthStatus: "healthy" }),
        connection({
          id: "c-attention",
          applicationId: "app-slack",
          name: "Slack",
          healthStatus: "error",
          lastUsedAt: new Date("2026-06-09T00:00:00Z"),
        }),
        connection({ id: "c-attention-2", applicationId: "app-slack", name: "Slack Team", healthStatus: "healthy" }),
        connection({ id: "c-paused", applicationId: "app-notion", name: "Notion", enabled: false }),
      ],
    });
    listAppsAttentionMock.mockResolvedValue({
      apps: [
        {
          connection: connection({ id: "c-attention", applicationId: "app-slack", name: "Slack", healthStatus: "error" }),
          healthNeedsAttention: true,
          quarantinedCatalogEntryCount: 0,
          pendingActionRequestCount: 0,
          reasons: ["health"],
        },
        {
          connection: connection({ id: "c-attention-2", applicationId: "app-slack", name: "Slack Team", healthStatus: "healthy" }),
          healthNeedsAttention: false,
          quarantinedCatalogEntryCount: 1,
          pendingActionRequestCount: 0,
          reasons: ["quarantined_catalog_entries"],
        },
      ],
    });
    listProfilesMock.mockResolvedValue({
      profiles: [
        profile("c-connected", ["a", "b", "c"]),
        profile("c-attention", ["a"]),
        profile("c-attention-2", ["b", "c"]),
      ],
    });

    await renderApps();

    const text = container.textContent ?? "";
    // 1. Connected rows lose the repeated hint.
    expect(text).not.toContain("Connected and ready");
    // 2. Attention + Paused rows keep their explanatory hint.
    expect(text).toContain("The key stopped working");
    expect(text).toContain("Paused — agents can");
    // 3. Filter chips and attention banner are application-counted, not connection-counted.
    expect(text).toContain("All (3)");
    expect(text).toContain("Needs attention (1)");
    expect(text).toContain("1 app needs attention");
    // 3. New header columns are present.
    const headers = Array.from(container.querySelectorAll("th")).map((th) => th.textContent?.trim());
    expect(headers).toEqual(["App", "Status", "Actions", "Last used", ""]);
    // 4. Actions column reflects enabled catalog entries rolled up by application; missing profile => 0 on.
    expect(text).toContain("3 on");
    expect(text).toContain("0 on");
    // 5. Last used renders a relative timestamp when present, dash when absent.
    expect(text).toContain("—");
    // 6. Multi-connection app appears once and opens its first connection detail.
    expect(Array.from(container.querySelectorAll("tbody tr")).filter((tr) => tr.textContent?.includes("Slack"))).toHaveLength(1);
    const slackRow = Array.from(container.querySelectorAll("tbody tr")).find((tr) =>
      tr.textContent?.includes("Slack"),
    );
    slackRow?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    expect(mockNavigate).toHaveBeenCalledWith("/apps/c-attention");
    // 7. Button labels are honest: broken health says Reconnect, healthy/paused say Open.
    const rowButtonLabel = (name: string) =>
      Array.from(container.querySelectorAll("tbody tr"))
        .find((tr) => tr.textContent?.includes(name))
        ?.querySelector("td:last-child button")?.textContent;
    expect(rowButtonLabel("GitHub")).toBe("Open");
    expect(rowButtonLabel("Slack")).toBe("Reconnect");
    expect(rowButtonLabel("Notion")).toBe("Open");
  });

  // F6 (PAP-13254 §4): the row highlight and the Status pill derive from ONE
  // health signal, so they can never disagree. A healthy connection stays
  // "Healthy" / "Open" and is not amber-highlighted, even if the broader
  // attention endpoint would once have flagged it (quarantine/new-tools review
  // now live on the app detail + Review door, not the Connections highlight).
  it("keeps a healthy app un-highlighted and Open — pill and highlight agree (F6)", async () => {
    listApplicationsMock.mockResolvedValue({
      applications: [application({ id: "app-github", name: "GitHub" })],
    });
    listConnectionsMock.mockResolvedValue({
      connections: [connection({ id: "c-healthy", applicationId: "app-github", healthStatus: "healthy" })],
    });
    listAppsAttentionMock.mockResolvedValue({
      apps: [
        {
          connection: connection({ id: "c-healthy", applicationId: "app-github", healthStatus: "healthy" }),
          healthNeedsAttention: false,
          quarantinedCatalogEntryCount: 2,
          pendingActionRequestCount: 0,
          reasons: ["quarantined_catalog_entries"],
        },
      ],
    });

    await renderApps();

    expect(container.textContent).toContain("Healthy");
    // No attention: the danger banner and attention filter chip are inert.
    expect(container.textContent).not.toContain("needs attention");
    expect(container.textContent).toContain("Needs attention (0)");
    const row = Array.from(container.querySelectorAll("tbody tr")).find((tr) =>
      tr.textContent?.includes("GitHub"),
    );
    expect(row?.className).not.toContain("amber");
    const button = row?.querySelector("td:last-child button");
    expect(button?.textContent).toBe("Open");
    button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    expect(mockNavigate).toHaveBeenCalledWith("/apps/c-healthy");
  });

  it("deletes a connection only after trash-can confirmation", async () => {
    listApplicationsMock.mockResolvedValue({
      applications: [application({ id: "app-github", name: "GitHub" })],
    });
    listConnectionsMock.mockResolvedValue({
      connections: [connection({ id: "c-github", applicationId: "app-github", name: "GitHub" })],
    });

    await renderApps();

    const deleteButton = container.querySelector<HTMLButtonElement>(
      'button[aria-label="Delete GitHub connection"]',
    );
    expect(deleteButton).toBeTruthy();

    await act(async () => {
      deleteButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });

    expect(mockNavigate).not.toHaveBeenCalled();
    expect(archiveConnectionMock).not.toHaveBeenCalled();
    expect(document.body.textContent).toContain("Delete GitHub connection?");

    const confirmButton = Array.from(document.body.querySelectorAll("button")).find(
      (button) => button.textContent?.trim() === "Delete connection",
    );
    expect(confirmButton).toBeTruthy();

    await act(async () => {
      confirmButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();

    expect(archiveConnectionMock).toHaveBeenCalledWith("c-github");
    expect(pushToastMock).toHaveBeenCalledWith(
      expect.objectContaining({
        title: "Connection deleted",
        body: "GitHub is no longer available to agents. You can connect it again later.",
        tone: "success",
      }),
    );
  });

  it("reports the remaining active connections after deleting one", async () => {
    listApplicationsMock.mockResolvedValue({
      applications: [application({ id: "app-github", name: "GitHub" })],
    });
    listConnectionsMock.mockResolvedValue({
      connections: [
        connection({ id: "c-github-primary", applicationId: "app-github", name: "GitHub" }),
        connection({ id: "c-github-secondary", applicationId: "app-github", name: "GitHub Team" }),
      ],
    });

    await renderApps();

    const deleteButton = container.querySelector<HTMLButtonElement>(
      'button[aria-label="Delete GitHub connection"]',
    );
    await act(async () => {
      deleteButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });

    expect(document.body.textContent).toContain(
      "Agents can still use GitHub through 1 other active connection.",
    );

    const confirmButton = Array.from(document.body.querySelectorAll("button")).find(
      (button) => button.textContent?.trim() === "Delete connection",
    );
    await act(async () => {
      confirmButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();

    expect(archiveConnectionMock).toHaveBeenCalledWith("c-github-primary");
    expect(pushToastMock).toHaveBeenCalledWith(
      expect.objectContaining({
        title: "Connection deleted",
        body: "GitHub still has 1 active connection available to agents.",
        tone: "success",
      }),
    );
  });

  it("does not count disabled connections as available after deletion", async () => {
    listApplicationsMock.mockResolvedValue({
      applications: [application({ id: "app-github", name: "GitHub" })],
    });
    listConnectionsMock.mockResolvedValue({
      connections: [
        connection({ id: "c-github-primary", applicationId: "app-github", name: "GitHub" }),
        connection({
          id: "c-github-disabled",
          applicationId: "app-github",
          name: "GitHub Disabled",
          status: "disabled",
          enabled: false,
        }),
      ],
    });

    await renderApps();

    const deleteButton = container.querySelector<HTMLButtonElement>(
      'button[aria-label="Delete GitHub connection"]',
    );
    await act(async () => {
      deleteButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });

    expect(document.body.textContent).toContain("Agents will lose access immediately.");
    expect(document.body.textContent).not.toContain("Agents can still use GitHub");

    const confirmButton = Array.from(document.body.querySelectorAll("button")).find(
      (button) => button.textContent?.trim() === "Delete connection",
    );
    await act(async () => {
      confirmButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    await flushReact();

    expect(pushToastMock).toHaveBeenCalledWith(
      expect.objectContaining({
        body: "GitHub is no longer available to agents. You can connect it again later.",
      }),
    );
  });
});