feat: refine app connections and legacy worktree startup (#11040)
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work. > - The Apps UI manages app discovery and app connections. > - The managed worktree runtime starts agent work in repository worktrees. > - The Apps routes do not match the main discovery flow, and the connections view lacks a delete action. > - Legacy managed worktrees can also start before their pending seed operation runs. > - This pull request makes app discovery the main Apps route and makes connection management explicit. > - It also seeds legacy managed worktrees before runtime startup and makes the CLI read the repository-local config. > - The benefit is a clearer Apps workflow and a safer managed-worktree startup path. ## Linked Issues or Issue Description **What existing behavior does this improve?** This improves the Apps navigation, app connection management, managed git-worktree startup, and CLI worktree selection. **Subsystem affected** Cross-cutting. The change affects `ui/`, `server/`, `cli/`, and development documentation. **Current behavior** The `/apps` route opens the connections list while discovery uses a nested route. The connections list has no delete action. Some legacy managed worktrees can start runtime work before their pending seed operation runs. The CLI can also read an ambient Paperclip config instead of the repository-local config. **Proposed behavior** The `/apps` route opens Browse, and `/apps/connections` opens the connection list. Users can delete a connection after confirmation. Runtime startup seeds legacy managed worktrees when required. The CLI resolves the current worktree from the repository-local `.paperclip/config.json` file. **Reason and benefit** Users can discover apps from the canonical Apps route and can manage existing connections from a dedicated route. Legacy worktrees receive their required repository content before agent runtime starts. CLI worktree selection stays scoped to the current repository. **Breaking changes** The `/apps` and `/apps/browse` route behavior changes. Old Browse links redirect to `/apps`. The change does not modify an API schema or database schema. ## What Changed - Make Browse the canonical `/apps` page and move the connection list to `/apps/connections`. - Align Apps navigation, redirects, attention links, empty states, and connection actions with the new routes. - Add connection deletion with confirmation and clear failure feedback. - Seed legacy managed git worktrees before runtime startup when their seed status is pending. - Read the CLI worktree selection from the repository-local Paperclip config. - Update focused UI, server, CLI, and development documentation coverage. ## Verification - Ran 202 focused UI, server, and CLI tests. All tests passed. - Ran `pnpm -r typecheck`. All projects passed. - Ran `pnpm build`. All projects built successfully. - Ran `pnpm test:run`. The server and UI stages passed 7,168 tests. The CLI stage found one environment-sensitive secrets test because this workspace injects static AWS credentials. The isolated CLI file passed all 8 tests after those injected variables were unset. - Ran `pnpm check:token-gates`. It reports 12 existing color-token violations in the unchanged `PaperclipOrbit3D.tsx` file from the target branch. This pull request does not modify that file. - Ran focused regression coverage for repository-root CLI config resolution and connection deletion state. All tests and affected package typechecks passed. - Collected all 27 tests in the six changed Playwright specifications successfully. - GitHub Actions passed every latest-head CI gate, including all three e2e shards and the aggregate `e2e` and `verify` jobs. - Greptile reviewed the final commit at 5/5 with zero unresolved threads. ## Risks - Existing bookmarks for `/apps/browse` redirect to `/apps`. - Connection deletion changes visible connection state and requires user confirmation. - The legacy seed path runs only for managed git worktrees with pending seed state. Tests cover the startup condition. - The rebase preserves the target branch's direct OAuth policy for the Notion connection flow. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used OpenAI Codex with the GPT-5 model family assisted this change. The agent used reasoning, repository tools, code execution, and test execution. The runtime does not expose the exact model snapshot or context-window size. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
GitHub
parent
42c73562c5
commit
b18b0fc39b
|
|
@ -31,6 +31,7 @@ import {
|
|||
resolveWorktreeReseedTargetPaths,
|
||||
resolveGitWorktreeAddArgs,
|
||||
resolvePnpmInstallInvocation,
|
||||
resolveCurrentWorktreeEndpoint,
|
||||
resolveWorktreeSeedBackupEngine,
|
||||
resolveWorktreeMakeTargetPath,
|
||||
worktreeRepairCommand,
|
||||
|
|
@ -167,6 +168,49 @@ function buildSourceConfig(): PaperclipConfig {
|
|||
}
|
||||
|
||||
describe("worktree helpers", () => {
|
||||
it("uses the repo-local config for the current worktree", () => {
|
||||
const targetRoot = fs.mkdtempSync(path.join(os.tmpdir(), "paperclip-current-worktree-"));
|
||||
try {
|
||||
const localConfig = path.join(targetRoot, ".paperclip", "config.json");
|
||||
fs.mkdirSync(path.dirname(localConfig), { recursive: true });
|
||||
fs.writeFileSync(localConfig, "{}\n");
|
||||
process.env.PAPERCLIP_CONFIG = "/tmp/ambient-paperclip/config.json";
|
||||
process.chdir(targetRoot);
|
||||
|
||||
expect(resolveCurrentWorktreeEndpoint()).toMatchObject({
|
||||
rootPath: targetRoot,
|
||||
configPath: localConfig,
|
||||
isCurrent: true,
|
||||
});
|
||||
} finally {
|
||||
process.chdir(ORIGINAL_CWD);
|
||||
fs.rmSync(targetRoot, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
it("uses the repository config from a nested working directory", () => {
|
||||
const targetRoot = fs.mkdtempSync(path.join(os.tmpdir(), "paperclip-current-worktree-nested-"));
|
||||
try {
|
||||
execFileSync("git", ["init", "-q"], { cwd: targetRoot });
|
||||
const nestedDirectory = path.join(targetRoot, "packages", "example", "src");
|
||||
const localConfig = path.join(targetRoot, ".paperclip", "config.json");
|
||||
fs.mkdirSync(nestedDirectory, { recursive: true });
|
||||
fs.mkdirSync(path.dirname(localConfig), { recursive: true });
|
||||
fs.writeFileSync(localConfig, "{}\n");
|
||||
process.env.PAPERCLIP_CONFIG = "/tmp/ambient-paperclip/config.json";
|
||||
process.chdir(nestedDirectory);
|
||||
|
||||
expect(resolveCurrentWorktreeEndpoint()).toMatchObject({
|
||||
rootPath: targetRoot,
|
||||
configPath: localConfig,
|
||||
isCurrent: true,
|
||||
});
|
||||
} finally {
|
||||
process.chdir(ORIGINAL_CWD);
|
||||
fs.rmSync(targetRoot, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
|
||||
it("sanitizes instance ids", () => {
|
||||
expect(sanitizeWorktreeInstanceId("feature/worktree-support")).toBe("feature-worktree-support");
|
||||
expect(sanitizeWorktreeInstanceId(" ")).toBe("worktree");
|
||||
|
|
|
|||
|
|
@ -2218,10 +2218,13 @@ async function closeDb(db: ClosableDb): Promise<void> {
|
|||
await db.$client?.end?.({ timeout: 5 }).catch(() => undefined);
|
||||
}
|
||||
|
||||
function resolveCurrentEndpoint(): ResolvedWorktreeEndpoint {
|
||||
export function resolveCurrentWorktreeEndpoint(): ResolvedWorktreeEndpoint {
|
||||
const cwd = path.resolve(process.cwd());
|
||||
const rootPath = detectGitWorkspaceInfo(cwd)?.root ?? cwd;
|
||||
const localConfigPath = path.join(rootPath, ".paperclip", "config.json");
|
||||
return {
|
||||
rootPath: path.resolve(process.cwd()),
|
||||
configPath: resolveConfigPath(),
|
||||
rootPath,
|
||||
configPath: existsSync(localConfigPath) ? localConfigPath : resolveConfigPath(),
|
||||
label: "current",
|
||||
isCurrent: true,
|
||||
};
|
||||
|
|
@ -2233,7 +2236,7 @@ function resolveAttachmentLookupStorages(input: {
|
|||
}): ConfiguredStorage[] {
|
||||
const orderedConfigPaths = [
|
||||
input.sourceEndpoint.configPath,
|
||||
resolveCurrentEndpoint().configPath,
|
||||
resolveCurrentWorktreeEndpoint().configPath,
|
||||
input.targetEndpoint.configPath,
|
||||
...toMergeSourceChoices(process.cwd())
|
||||
.filter((choice) => choice.hasPaperclipConfig)
|
||||
|
|
@ -2804,7 +2807,7 @@ export async function worktreeListCommand(opts: WorktreeListOptions): Promise<vo
|
|||
|
||||
function resolveEndpointFromChoice(choice: MergeSourceChoice): ResolvedWorktreeEndpoint {
|
||||
if (choice.isCurrent) {
|
||||
return resolveCurrentEndpoint();
|
||||
return resolveCurrentWorktreeEndpoint();
|
||||
}
|
||||
return {
|
||||
rootPath: choice.worktree,
|
||||
|
|
@ -2824,7 +2827,7 @@ function resolveWorktreeEndpointFromSelector(
|
|||
throw new Error("Worktree selector cannot be empty.");
|
||||
}
|
||||
|
||||
const currentEndpoint = resolveCurrentEndpoint();
|
||||
const currentEndpoint = resolveCurrentWorktreeEndpoint();
|
||||
if (allowCurrent && trimmed === "current") {
|
||||
return currentEndpoint;
|
||||
}
|
||||
|
|
@ -2866,7 +2869,7 @@ function resolveWorktreeEndpointFromSelector(
|
|||
|
||||
async function promptForSourceEndpoint(excludeWorktreePath?: string): Promise<ResolvedWorktreeEndpoint> {
|
||||
const excluded = excludeWorktreePath ? path.resolve(excludeWorktreePath) : null;
|
||||
const currentEndpoint = resolveCurrentEndpoint();
|
||||
const currentEndpoint = resolveCurrentWorktreeEndpoint();
|
||||
const choices = toMergeSourceChoices(process.cwd())
|
||||
.filter((choice) => choice.hasPaperclipConfig || choice.isCurrent)
|
||||
.filter((choice) => path.resolve(choice.worktree) !== excluded)
|
||||
|
|
@ -3295,7 +3298,7 @@ export async function worktreeMergeHistoryCommand(sourceArg: string | undefined,
|
|||
|
||||
const targetEndpoint = opts.to
|
||||
? resolveWorktreeEndpointFromSelector(opts.to, { allowCurrent: true })
|
||||
: resolveCurrentEndpoint();
|
||||
: resolveCurrentWorktreeEndpoint();
|
||||
const sourceEndpoint = opts.from
|
||||
? resolveWorktreeEndpointFromSelector(opts.from, { allowCurrent: true })
|
||||
: sourceArg
|
||||
|
|
@ -3400,7 +3403,7 @@ async function runWorktreeReseed(opts: WorktreeReseedOptions): Promise<void> {
|
|||
|
||||
const targetEndpoint = opts.to
|
||||
? resolveWorktreeEndpointFromSelector(opts.to, { allowCurrent: true })
|
||||
: resolveCurrentEndpoint();
|
||||
: resolveCurrentWorktreeEndpoint();
|
||||
const source = resolveWorktreeReseedSource(opts);
|
||||
|
||||
if (path.resolve(source.configPath) === path.resolve(targetEndpoint.configPath)) {
|
||||
|
|
|
|||
|
|
@ -471,6 +471,7 @@ The default `worktree init` still seeds eagerly and writes `seed-complete` immed
|
|||
|
||||
- `pnpm paperclipai worktree ensure-seeded` performs the deferred seed **exactly once**. It is lock-guarded and idempotent: a present `seed-complete` marker or a missing `seed-pending` marker short-circuits it, so it is safe to call repeatedly and from concurrent processes. It reads the source instance from the `seed-pending` marker unless you pass `--from-config`.
|
||||
- `paperclipai run` calls `ensureWorktreeSeeded` automatically before doctor/boot, so `run` transparently seeds a lean worktree on first launch.
|
||||
- Managed git-worktree runtime startup also runs `scripts/provision-worktree-runtime.sh` automatically when a legacy workspace policy has no explicit runtime provision command and the worktree is still `seed-pending`. An explicitly configured runtime provision command always takes precedence.
|
||||
- Worktrees created before lazy seeding shipped have neither marker; they are treated as already-seeded for backward compatibility (never re-cloned).
|
||||
|
||||
**Seed-pending guard.** `pnpm dev` (the dev-runner) refuses to boot a worktree whose database is still `seed-pending` and points you at the fix:
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ import {
|
|||
refreshRemoteTrackingBaseRef,
|
||||
releaseRuntimeServicesForRun,
|
||||
resetRuntimeServicesForTests,
|
||||
resolveRuntimeProvisionCommand,
|
||||
resolveWorkspaceRuntimeReadinessTimeoutSec,
|
||||
resolveShell,
|
||||
sanitizeRuntimeServiceBaseEnv,
|
||||
|
|
@ -380,6 +381,41 @@ describe("sanitizeRuntimeServiceBaseEnv", () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe("resolveRuntimeProvisionCommand", () => {
|
||||
it("backfills deferred seeding for legacy managed git worktrees", async () => {
|
||||
const baseCwd = await fs.mkdtemp(path.join(os.tmpdir(), "paperclip-runtime-provision-"));
|
||||
const cwd = path.join(baseCwd, "worktree");
|
||||
try {
|
||||
await fs.mkdir(path.join(baseCwd, "scripts"), { recursive: true });
|
||||
await fs.writeFile(
|
||||
path.join(baseCwd, "scripts", "provision-worktree-runtime.sh"),
|
||||
"#!/usr/bin/env bash\n",
|
||||
);
|
||||
await fs.mkdir(path.join(cwd, ".paperclip"), { recursive: true });
|
||||
await fs.writeFile(path.join(cwd, ".paperclip", "seed-pending"), "{}\n");
|
||||
const workspace = {
|
||||
...buildWorkspace(cwd),
|
||||
baseCwd,
|
||||
strategy: "git_worktree" as const,
|
||||
worktreePath: cwd,
|
||||
};
|
||||
|
||||
expect(resolveRuntimeProvisionCommand({ config: {}, workspace })).toBe(
|
||||
"bash ./scripts/provision-worktree-runtime.sh",
|
||||
);
|
||||
expect(resolveRuntimeProvisionCommand({
|
||||
config: { runtimeProvisionCommand: "./custom-provision.sh" },
|
||||
workspace,
|
||||
})).toBe("./custom-provision.sh");
|
||||
|
||||
await fs.writeFile(path.join(cwd, ".paperclip", "seed-complete"), "{}\n");
|
||||
expect(resolveRuntimeProvisionCommand({ config: {}, workspace })).toBe("");
|
||||
} finally {
|
||||
await fs.rm(baseCwd, { recursive: true, force: true });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe("refreshRemoteTrackingBaseRef git auth", () => {
|
||||
it("offers the remote URL to the provider and keeps ambient behavior when it returns null", async () => {
|
||||
const { remotePath, repoRoot } = await createClonedRepoWithRemote();
|
||||
|
|
|
|||
|
|
@ -4109,6 +4109,34 @@ function readRuntimeProvisionCommand(config: Record<string, unknown>) {
|
|||
).trim();
|
||||
}
|
||||
|
||||
export function resolveRuntimeProvisionCommand(input: {
|
||||
config: Record<string, unknown>;
|
||||
workspace: RealizedExecutionWorkspace;
|
||||
}) {
|
||||
const configuredCommand = readRuntimeProvisionCommand(input.config);
|
||||
if (configuredCommand) return configuredCommand;
|
||||
|
||||
if (input.workspace.strategy !== "git_worktree") return "";
|
||||
|
||||
const stateDir = path.join(input.workspace.cwd, ".paperclip");
|
||||
const pendingMarker = path.join(stateDir, "seed-pending");
|
||||
const completeMarker = path.join(stateDir, "seed-complete");
|
||||
const provisionScript = path.join(
|
||||
input.workspace.baseCwd,
|
||||
"scripts",
|
||||
"provision-worktree-runtime.sh",
|
||||
);
|
||||
if (
|
||||
!existsSync(pendingMarker)
|
||||
|| existsSync(completeMarker)
|
||||
|| !existsSync(provisionScript)
|
||||
) {
|
||||
return "";
|
||||
}
|
||||
|
||||
return "bash ./scripts/provision-worktree-runtime.sh";
|
||||
}
|
||||
|
||||
function runtimeProvisionWorkspaceKey(input: StartLocalRuntimeServiceInput) {
|
||||
return input.executionWorkspaceId
|
||||
? `execution-workspace:${input.executionWorkspaceId}`
|
||||
|
|
@ -4794,7 +4822,7 @@ export async function ensureRuntimeServicesForRun(input: {
|
|||
});
|
||||
const acquiredServiceIds: string[] = [];
|
||||
const refs: RuntimeServiceRef[] = [];
|
||||
const runtimeProvisionCommand = readRuntimeProvisionCommand(input.config);
|
||||
const runtimeProvisionCommand = resolveRuntimeProvisionCommand(input);
|
||||
const provisionCoordinator = createRuntimeProvisionCoordinator();
|
||||
runtimeServiceLeasesByRun.set(input.runId, acquiredServiceIds);
|
||||
|
||||
|
|
@ -5007,7 +5035,7 @@ export async function startRuntimeServicesForWorkspaceControl(
|
|||
serviceStates: readConfiguredServiceStates(input.config),
|
||||
});
|
||||
const invocationId = input.invocationId ?? randomUUID();
|
||||
const runtimeProvisionCommand = readRuntimeProvisionCommand(input.config);
|
||||
const runtimeProvisionCommand = resolveRuntimeProvisionCommand(input);
|
||||
const provisionCoordinator = createRuntimeProvisionCoordinator();
|
||||
|
||||
if (rawServices.length === 0 || !input.db || (!input.executionWorkspaceId && !input.workspace.workspaceId)) {
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ test.describe.serial("not-connected app page", () => {
|
|||
applicationId = body.application.id as string;
|
||||
|
||||
// Archive the connection (Remove app), then resurrect the application so
|
||||
// it shows on /apps as "Not connected" — the state in Dotta's screenshot.
|
||||
// it shows on /apps/connections as "Not connected" — the state in Dotta's screenshot.
|
||||
const archive = await request.delete(`/api/tool-connections/${connectionId}`);
|
||||
expect(archive.ok(), `archive failed ${archive.status()}: ${await archive.text()}`).toBe(true);
|
||||
const revive = await request.patch(`/api/tool-applications/${applicationId}`, {
|
||||
|
|
@ -100,7 +100,7 @@ test.describe.serial("not-connected app page", () => {
|
|||
});
|
||||
|
||||
test("not-connected row opens the app page, not the generic wizard", async ({ page }) => {
|
||||
await page.goto(`/${seed.prefix}/apps`);
|
||||
await page.goto(`/${seed.prefix}/apps/connections`);
|
||||
const row = page.locator("tbody tr", { hasText: "Bla" });
|
||||
await expect(row).toBeVisible({ timeout: 30_000 });
|
||||
await expect(row.getByText("Not connected")).toBeVisible();
|
||||
|
|
@ -147,7 +147,7 @@ test.describe.serial("not-connected app page", () => {
|
|||
await page.goto(`/${seed.prefix}/apps/app/${applicationId}`);
|
||||
await expect(page).toHaveURL(new RegExp(`/${seed.prefix}/apps/${connectionId}/setup$`), { timeout: 20_000 });
|
||||
|
||||
await page.goto(`/${seed.prefix}/apps`);
|
||||
await page.goto(`/${seed.prefix}/apps/connections`);
|
||||
const row = page.locator("tbody tr", { hasText: "Bla" });
|
||||
await expect(row).toBeVisible({ timeout: 30_000 });
|
||||
await expect(row.getByRole("button", { name: /Open|Review/ })).toBeVisible();
|
||||
|
|
@ -173,8 +173,9 @@ test.describe.serial("not-connected app page", () => {
|
|||
await page.getByRole("button", { name: "Remove app", exact: true }).click();
|
||||
await page.screenshot({ path: `${SCREENSHOT_DIR}/apps-nav-w6-04-app-page-danger.png`, fullPage: true });
|
||||
await page.getByRole("button", { name: "Yes, remove it" }).click();
|
||||
await expect(page).toHaveURL(new RegExp(`/${seed.prefix}/apps$`), { timeout: 20_000 });
|
||||
await expect(page).toHaveURL(new RegExp(`/${seed.prefix}/apps/connections$`), { timeout: 20_000 });
|
||||
await expect(page.getByText("App removed").first()).toBeVisible({ timeout: 20_000 });
|
||||
await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible();
|
||||
await expect(page.locator("tbody tr", { hasText: "Doomed app" })).toHaveCount(0);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ async function createConnection(
|
|||
}
|
||||
|
||||
async function gotoApps(page: Page, prefix: string) {
|
||||
await page.goto(`/${prefix}/apps`);
|
||||
await page.goto(`/${prefix}/apps/connections`);
|
||||
await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible({ timeout: 30_000 });
|
||||
}
|
||||
|
||||
|
|
@ -143,8 +143,9 @@ test.describe.serial("applications lifecycle", () => {
|
|||
await expect(page.getByRole("button", { name: "Yes, remove it" })).toBeVisible();
|
||||
await page.screenshot({ path: `${SCREENSHOT_DIR}/applications-crud-current-remove-connected.png`, fullPage: true });
|
||||
await page.getByRole("button", { name: "Yes, remove it" }).click();
|
||||
await expect(page).toHaveURL(new RegExp(`/${seed.prefix}/apps$`), { timeout: 20_000 });
|
||||
await expect(page).toHaveURL(new RegExp(`/${seed.prefix}/apps/connections$`), { timeout: 20_000 });
|
||||
await expect(page.getByText("App removed").first()).toBeVisible({ timeout: 20_000 });
|
||||
await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible();
|
||||
await expect(page.locator("tbody tr", { hasText: renamed })).toHaveCount(0);
|
||||
});
|
||||
|
||||
|
|
@ -158,8 +159,9 @@ test.describe.serial("applications lifecycle", () => {
|
|||
await page.getByRole("button", { name: "Remove app", exact: true }).click();
|
||||
await page.screenshot({ path: `${SCREENSHOT_DIR}/applications-crud-current-remove-not-connected.png`, fullPage: true });
|
||||
await page.getByRole("button", { name: "Yes, remove it" }).click();
|
||||
await expect(page).toHaveURL(new RegExp(`/${seed.prefix}/apps$`), { timeout: 20_000 });
|
||||
await expect(page).toHaveURL(new RegExp(`/${seed.prefix}/apps/connections$`), { timeout: 20_000 });
|
||||
await expect(page.getByText("App removed").first()).toBeVisible({ timeout: 20_000 });
|
||||
await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible();
|
||||
await expect(page.locator("tbody tr", { hasText: cleanAppName })).toHaveCount(0);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@ test.describe.serial("dark-mode Apps surfaces", () => {
|
|||
|
||||
test("apps list dark mode with attention banner", async ({ page }) => {
|
||||
await forceDark(page);
|
||||
await page.goto(`/${seed.prefix}/apps`);
|
||||
await page.goto(`/${seed.prefix}/apps/connections`);
|
||||
await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible({ timeout: 30_000 });
|
||||
await expect(page.getByText(/needs attention/i).first()).toBeVisible({ timeout: 30_000 });
|
||||
await page.screenshot({ path: `${SCREENSHOT_DIR}/apps-nav-01-apps-dark.png`, fullPage: true });
|
||||
|
|
@ -135,7 +135,7 @@ test.describe.serial("dark-mode Apps surfaces", () => {
|
|||
|
||||
test("attention banner dark mode", async ({ page }) => {
|
||||
await forceDark(page);
|
||||
await page.goto(`/${seed.prefix}/apps`);
|
||||
await page.goto(`/${seed.prefix}/apps/connections`);
|
||||
await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible({ timeout: 30_000 });
|
||||
await expect(page.getByText(/app needs attention/i).first()).toBeVisible({ timeout: 30_000 });
|
||||
await page.screenshot({ path: `${SCREENSHOT_DIR}/apps-nav-02-attention-dark.png`, fullPage: true });
|
||||
|
|
@ -166,7 +166,7 @@ test.describe.serial("dark-mode Apps surfaces", () => {
|
|||
await expect(page.locator('a[href$="/apps/advanced/audit"]', { hasText: "Activity" })).toBeVisible();
|
||||
await expect(page.getByRole("link", { name: "Applications", exact: true })).toHaveCount(0);
|
||||
// Apps section lives in the same sidebar now.
|
||||
await expect(page.locator('a[href$="/apps"]', { hasText: "Connections" })).toBeVisible();
|
||||
await expect(page.locator('a[href$="/apps/connections"]', { hasText: "Connections" })).toBeVisible();
|
||||
await page.screenshot({ path: `${SCREENSHOT_DIR}/apps-nav-05-developer-overview-dark.png`, fullPage: true });
|
||||
});
|
||||
|
||||
|
|
@ -183,8 +183,9 @@ test.describe.serial("dark-mode Apps surfaces", () => {
|
|||
await page.getByRole("button", { name: "Remove app", exact: true }).click();
|
||||
await page.screenshot({ path: `${SCREENSHOT_DIR}/apps-nav-06-danger-zone-dark.png`, fullPage: true });
|
||||
await page.getByRole("button", { name: "Yes, remove it" }).click();
|
||||
await expect(page).toHaveURL(new RegExp(`/${seed.prefix}/apps$`), { timeout: 20_000 });
|
||||
await expect(page).toHaveURL(new RegExp(`/${seed.prefix}/apps/connections$`), { timeout: 20_000 });
|
||||
await expect(page.getByText("App removed").first()).toBeVisible({ timeout: 20_000 });
|
||||
await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible();
|
||||
await page.screenshot({ path: `${SCREENSHOT_DIR}/apps-nav-07-after-remove-dark.png`, fullPage: true });
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -113,11 +113,11 @@ async function startMockMcp(options: { expectedHeader?: string } = {}): Promise<
|
|||
// ---- Helpers ----------------------------------------------------------------
|
||||
|
||||
async function gotoApps(page: Page, prefix: string) {
|
||||
await page.goto(`/${prefix}/apps`);
|
||||
await page.goto(`/${prefix}/apps/connections`);
|
||||
}
|
||||
|
||||
async function gotoConnect(page: Page, prefix: string) {
|
||||
await page.goto(`/${prefix}/apps/browse`);
|
||||
await page.goto(`/${prefix}/apps`);
|
||||
await expect(page.getByRole("heading", { name: "Browse" })).toBeVisible({ timeout: 30_000 });
|
||||
await page.getByRole("button", { name: /Connect your own tool/i }).click();
|
||||
}
|
||||
|
|
@ -127,7 +127,7 @@ async function gotoAdvanced(page: Page, prefix: string) {
|
|||
}
|
||||
|
||||
async function gotoNeedsAttention(page: Page, prefix: string) {
|
||||
await page.goto(`/${prefix}/apps`);
|
||||
await page.goto(`/${prefix}/apps/connections`);
|
||||
}
|
||||
|
||||
// ---- Tests ------------------------------------------------------------------
|
||||
|
|
@ -212,7 +212,7 @@ test.describe.serial("prosumer MCP flow prosumer MCP flow", () => {
|
|||
// Verify the mock saw a tools/list call from the catalog refresh.
|
||||
expect(mock.captures.some((c) => c.method === "tools/list")).toBe(true);
|
||||
|
||||
// The new connection should show up on /apps.
|
||||
// The new connection should show up on /apps/connections.
|
||||
await gotoApps(page, seed.prefix);
|
||||
await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible({ timeout: 15_000 });
|
||||
await page.screenshot({ path: `${SCREENSHOT_DIR}/prosumer-mcp-06-apps-list.png`, fullPage: true });
|
||||
|
|
|
|||
|
|
@ -403,7 +403,7 @@ test.describe.serial("MCP prod Phase 5a user-story harness", () => {
|
|||
|
||||
const health = await request.post(`/api/tool-connections/${connectionId}/health-check`);
|
||||
expect(health.status()).toBe(502);
|
||||
await page.goto(`/${seed.prefix}/apps`);
|
||||
await page.goto(`/${seed.prefix}/apps/connections`);
|
||||
await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible({ timeout: 30_000 });
|
||||
await screenshot(page, "US-8", "01-needs-attention");
|
||||
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ async function navigateForEvidence(page: Page, seed: Seed, connectionId: string,
|
|||
return;
|
||||
}
|
||||
if (scenario.uiEntryPath === "attention") {
|
||||
await page.goto(`/${seed.prefix}/apps`);
|
||||
await page.goto(`/${seed.prefix}/apps/connections`);
|
||||
await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible({ timeout: 20_000 });
|
||||
return;
|
||||
}
|
||||
|
|
@ -391,7 +391,7 @@ test.describe.serial("Smoke Lab scenario catalog mirror", () => {
|
|||
await request.post(`/api/tool-connections/${connection.id}/catalog/refresh`),
|
||||
);
|
||||
expect(refresh.quarantinedCount).toBeGreaterThan(0);
|
||||
await page.goto(`/${seed.prefix}/apps`);
|
||||
await page.goto(`/${seed.prefix}/apps/connections`);
|
||||
return `Catalog refresh quarantined ${refresh.quarantinedCount} changed entries.`;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -242,3 +242,13 @@ describe("Skill Studio routes", () => {
|
|||
expect(createIndexes[1]).toBeLessThan(detailIndexes[1]!);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Apps routes", () => {
|
||||
it("uses browse as the Apps landing page and gives connections a canonical URL", () => {
|
||||
expect(appSource).toContain('<Route path="apps" element={<Browse />} />');
|
||||
expect(appSource).toContain('<Route path="apps/browse" element={<Navigate to="/apps" replace />} />');
|
||||
expect(appSource).toContain('<Route path="apps/connections" element={<Connections />} />');
|
||||
expect(appSource).toContain('<Route path="apps/connect/:appKey" element={<Navigate to="/apps" replace />} />');
|
||||
expect(appSource).toContain('<Route path="apps/connect/:appKey/:stage" element={<Navigate to="/apps" replace />} />');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -122,14 +122,15 @@ function boardRoutes() {
|
|||
<Route path="tools" element={<LegacyToolsRedirect />} />
|
||||
<Route path="tools/:tab" element={<LegacyToolsRedirect />} />
|
||||
<Route element={<AppsExperimentalGate />}>
|
||||
<Route path="apps" element={<Connections />} />
|
||||
<Route path="apps/browse" element={<Browse />} />
|
||||
<Route path="apps" element={<Browse />} />
|
||||
<Route path="apps/browse" element={<Navigate to="/apps" replace />} />
|
||||
<Route path="apps/connections" element={<Connections />} />
|
||||
<Route path="apps/connect" element={<AppsConnectEntryRoute />} />
|
||||
<Route path="apps/connect/:appKey" element={<Navigate to="/apps/browse" replace />} />
|
||||
<Route path="apps/connect/:appKey/:stage" element={<Navigate to="/apps/browse" replace />} />
|
||||
<Route path="apps/connect/:appKey" element={<Navigate to="/apps" replace />} />
|
||||
<Route path="apps/connect/:appKey/:stage" element={<Navigate to="/apps" replace />} />
|
||||
<Route path="apps/review" element={<AppsReview />} />
|
||||
{/* Needs attention folded into Connections (PAP-13254); keep legacy links working. */}
|
||||
<Route path="apps/attention" element={<Navigate to="/apps" replace />} />
|
||||
<Route path="apps/attention" element={<Navigate to="/apps/connections" replace />} />
|
||||
<Route path="apps/gateways" element={<GatewaysList />} />
|
||||
<Route path="apps/gateways/:gatewayId" element={<Navigate to="overview" replace />} />
|
||||
<Route path="apps/gateways/:gatewayId/:tab" element={<GatewayDetail />} />
|
||||
|
|
@ -309,7 +310,7 @@ function boardRoutes() {
|
|||
function AppsConnectEntryRoute() {
|
||||
const location = useLocation();
|
||||
const searchParams = new URLSearchParams(location.search);
|
||||
return canEnterAppsConnect(searchParams) ? <AppsConnect /> : <Navigate to="/apps/browse" replace />;
|
||||
return canEnterAppsConnect(searchParams) ? <AppsConnect /> : <Navigate to="/apps" replace />;
|
||||
}
|
||||
|
||||
function InboxRootRedirect() {
|
||||
|
|
@ -403,7 +404,7 @@ function LegacyToolsRedirect() {
|
|||
|
||||
function legacyToolsRedirectTarget(tab?: string) {
|
||||
if (!tab) return "/apps/advanced/profiles";
|
||||
if (tab === "applications" || tab === "connections" || tab === "overview" || tab === "examples") return "/apps";
|
||||
if (tab === "applications" || tab === "connections" || tab === "overview" || tab === "examples") return "/apps/connections";
|
||||
return `/apps/advanced/${tab}`;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ describe("AppConnectionSidebar", () => {
|
|||
it("renders a back link and the connected app tabs (including Test)", async () => {
|
||||
await renderSidebar();
|
||||
|
||||
expect(container.querySelector('a[href="/apps"]')?.textContent).toContain("All apps");
|
||||
expect(container.querySelector('a[href="/apps/connections"]')?.textContent).toContain("All apps");
|
||||
expect(container.textContent).toContain("GitHub");
|
||||
expect(container.querySelectorAll("[data-to]").length).toBe(6);
|
||||
expect(sidebarNavItemMock).toHaveBeenCalledWith(expect.objectContaining({ to: "/apps/conn-1/setup", label: "Setup", end: true }));
|
||||
|
|
@ -190,7 +190,7 @@ describe("AppConnectionSidebar", () => {
|
|||
|
||||
await renderSidebar(<AppDetailSidebar kind="application" applicationId="app-1" />);
|
||||
|
||||
expect(container.querySelector('a[href="/apps"]')?.textContent).toContain("All apps");
|
||||
expect(container.querySelector('a[href="/apps/connections"]')?.textContent).toContain("All apps");
|
||||
expect(container.textContent).toContain("GitHub");
|
||||
expect(mockToolsApi.getConnection).not.toHaveBeenCalled();
|
||||
expect(sidebarNavItemMock).toHaveBeenCalledWith(expect.objectContaining({ to: "/apps/app/app-1/setup", label: "Setup", end: true }));
|
||||
|
|
@ -212,7 +212,7 @@ describe("AppConnectionSidebar", () => {
|
|||
await renderSidebar();
|
||||
|
||||
expect(container.textContent).toContain("App");
|
||||
expect(container.querySelector('a[href="/apps"]')?.textContent).toContain("All apps");
|
||||
expect(container.querySelector('a[href="/apps/connections"]')?.textContent).toContain("All apps");
|
||||
expect(container.querySelectorAll("[data-to]").length).toBe(6);
|
||||
});
|
||||
|
||||
|
|
@ -225,7 +225,7 @@ describe("AppConnectionSidebar", () => {
|
|||
await renderSidebar(<AppDetailSidebar kind="application" applicationId="missing-app" />);
|
||||
|
||||
expect(container.textContent).toContain("App");
|
||||
expect(container.querySelector('a[href="/apps"]')?.textContent).toContain("All apps");
|
||||
expect(container.querySelector('a[href="/apps/connections"]')?.textContent).toContain("All apps");
|
||||
expect(container.querySelectorAll("[data-to]").length).toBe(5);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ export function AppDetailSidebar(props: AppDetailSidebarProps) {
|
|||
<aside className="flex h-full min-h-0 w-full flex-col border-r border-border bg-background">
|
||||
<div className="flex shrink-0 flex-col gap-3 px-3 py-3">
|
||||
<Link
|
||||
to="/apps"
|
||||
to="/apps/connections"
|
||||
onClick={() => {
|
||||
if (isMobile) setSidebarOpen(false);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -128,10 +128,10 @@ describe("AppsSidebar", () => {
|
|||
|
||||
// Three peer consumer doors: Browse (store) · Connections · Review (PAP-13254).
|
||||
expect(sidebarNavItemMock).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ to: "/apps/browse", label: "Browse" }),
|
||||
expect.objectContaining({ to: "/apps", label: "Browse", end: true }),
|
||||
);
|
||||
expect(sidebarNavItemMock).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ to: "/apps", label: "Connections", end: true }),
|
||||
expect.objectContaining({ to: "/apps/connections", label: "Connections", end: true }),
|
||||
);
|
||||
expect(sidebarNavItemMock).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ to: "/apps/review", label: "Review" }),
|
||||
|
|
|
|||
|
|
@ -71,8 +71,8 @@ export function AppsSidebar() {
|
|||
Apps
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<SidebarNavItem to="/apps/browse" label="Browse" icon={Store} />
|
||||
<SidebarNavItem to="/apps" label="Connections" icon={AppWindow} end />
|
||||
<SidebarNavItem to="/apps" label="Browse" icon={Store} end />
|
||||
<SidebarNavItem to="/apps/connections" label="Connections" icon={AppWindow} end />
|
||||
<SidebarNavItem
|
||||
to="/apps/review"
|
||||
label="Review"
|
||||
|
|
|
|||
|
|
@ -530,7 +530,7 @@ describe("Layout", () => {
|
|||
});
|
||||
|
||||
it("does not mount the Apps secondary sidebar while experimental apps are disabled", async () => {
|
||||
currentPathname = "/PAP/apps/browse";
|
||||
currentPathname = "/PAP/apps";
|
||||
mockInstanceSettingsApi.getExperimental.mockResolvedValue({ enableApps: false });
|
||||
const root = createRoot(container);
|
||||
const queryClient = new QueryClient({
|
||||
|
|
|
|||
|
|
@ -261,7 +261,7 @@ export function AppDetail() {
|
|||
body: `${appName} no longer has access. You can connect it again any time.`,
|
||||
tone: "success",
|
||||
});
|
||||
navigate("/apps");
|
||||
navigate("/apps/connections");
|
||||
},
|
||||
onError: (error) =>
|
||||
pushToast({
|
||||
|
|
@ -325,7 +325,7 @@ export function AppDetail() {
|
|||
});
|
||||
|
||||
if (!connectionId || !activeTab) {
|
||||
return <Navigate replace to={connectionId ? appTabHref(connectionId, "setup") : "/apps"} />;
|
||||
return <Navigate replace to={connectionId ? appTabHref(connectionId, "setup") : "/apps/connections"} />;
|
||||
}
|
||||
|
||||
if (!selectedCompanyId) {
|
||||
|
|
@ -344,7 +344,7 @@ export function AppDetail() {
|
|||
return (
|
||||
<div className="max-w-3xl p-6">
|
||||
<p className="text-sm text-muted-foreground">We couldn't find that app.</p>
|
||||
<Button className="mt-4" variant="outline" onClick={() => navigate("/apps")}>
|
||||
<Button className="mt-4" variant="outline" onClick={() => navigate("/apps/connections")}>
|
||||
Back to apps
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ export function AppNotConnected() {
|
|||
body: `${appName} no longer shows in your apps. You can connect it again any time.`,
|
||||
tone: "success",
|
||||
});
|
||||
navigate("/apps");
|
||||
navigate("/apps/connections");
|
||||
},
|
||||
onError: (error) => {
|
||||
pushToast({
|
||||
|
|
@ -105,7 +105,7 @@ export function AppNotConnected() {
|
|||
return <div className="p-6 text-sm text-muted-foreground">Select a company to manage apps.</div>;
|
||||
}
|
||||
if (!applicationId || !activeTab) {
|
||||
return <Navigate to={applicationId ? appApplicationTabHref(applicationId, "setup") : "/apps"} replace />;
|
||||
return <Navigate to={applicationId ? appApplicationTabHref(applicationId, "setup") : "/apps/connections"} replace />;
|
||||
}
|
||||
if (applicationsQuery.isLoading || connectionsQuery.isLoading) {
|
||||
return (
|
||||
|
|
@ -119,7 +119,7 @@ export function AppNotConnected() {
|
|||
return (
|
||||
<div className="max-w-3xl space-y-3 p-6 text-sm text-muted-foreground">
|
||||
<p>This app doesn’t exist anymore.</p>
|
||||
<Button variant="outline" size="sm" onClick={() => navigate("/apps")}>Back to apps</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => navigate("/apps/connections")}>Back to apps</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -517,7 +517,7 @@ export function AppsConnect() {
|
|||
? { name: "Zapier", logoUrl: zapierEntry?.branding.logoUrl ?? null }
|
||||
: undefined
|
||||
}
|
||||
onCancel={() => navigate(zapierSource ? "/apps/browse" : "/apps")}
|
||||
onCancel={() => navigate("/apps")}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -625,7 +625,7 @@ export function AppsConnect() {
|
|||
link={linkUrl}
|
||||
onLinkChange={setLinkUrl}
|
||||
submitting={connectMutation.isPending}
|
||||
onBack={() => navigate("/apps/browse")}
|
||||
onBack={() => navigate("/apps")}
|
||||
onConnect={() => connectMutation.mutate(undefined)}
|
||||
/>
|
||||
)}
|
||||
|
|
@ -685,7 +685,7 @@ export function AppsConnect() {
|
|||
access={access}
|
||||
installMode={installMode}
|
||||
installCount={installAgentIds.size}
|
||||
onDone={() => navigate("/apps")}
|
||||
onDone={() => navigate("/apps/connections")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,8 +48,7 @@ export function Browse() {
|
|||
useEffect(() => {
|
||||
setBreadcrumbs([
|
||||
{ label: selectedCompany?.name ?? "Company", href: "/dashboard" },
|
||||
{ label: "Apps", href: "/apps" },
|
||||
{ label: "Browse" },
|
||||
{ label: "Apps" },
|
||||
]);
|
||||
return () => setBreadcrumbs([]);
|
||||
}, [setBreadcrumbs, selectedCompany?.name]);
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ 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", () => ({
|
||||
|
|
@ -20,6 +22,7 @@ vi.mock("@/api/tools", () => ({
|
|||
listConnections: (companyId: string) => listConnectionsMock(companyId),
|
||||
listAppsAttention: (companyId: string) => listAppsAttentionMock(companyId),
|
||||
listProfiles: (companyId: string) => listProfilesMock(companyId),
|
||||
archiveConnection: (connectionId: string) => archiveConnectionMock(connectionId),
|
||||
},
|
||||
}));
|
||||
|
||||
|
|
@ -41,6 +44,10 @@ 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;
|
||||
|
||||
|
|
@ -147,6 +154,7 @@ describe("Connections table (M1b / PAP-13254 door 2)", () => {
|
|||
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);
|
||||
});
|
||||
|
|
@ -322,4 +330,133 @@ describe("Connections table (M1b / PAP-13254 door 2)", () => {
|
|||
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.",
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useEffect, useMemo, useState, type ReactNode } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { AppWindow, ShieldAlert, ShieldQuestion } from "lucide-react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { AppWindow, Loader2, ShieldAlert, ShieldQuestion, Trash2 } from "lucide-react";
|
||||
import type {
|
||||
ToolApplication,
|
||||
ToolConnection,
|
||||
|
|
@ -13,8 +13,19 @@ import {
|
|||
import { useNavigate } from "@/lib/router";
|
||||
import { useCompany } from "@/context/CompanyContext";
|
||||
import { useBreadcrumbs } from "@/context/BreadcrumbContext";
|
||||
import { useToast } from "@/context/ToastContext";
|
||||
import { queryKeys } from "@/lib/queryKeys";
|
||||
import { toolsApi } from "@/api/tools";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
|
@ -29,7 +40,7 @@ import {
|
|||
import { useReviewCount } from "./useReviewCount";
|
||||
import { AdvancedToolsLink } from "./store-cards";
|
||||
|
||||
const BROWSE_HREF = "/apps/browse";
|
||||
const BROWSE_HREF = "/apps";
|
||||
|
||||
type StatusFilter = "all" | "attention";
|
||||
|
||||
|
|
@ -41,6 +52,7 @@ type AppStatus = {
|
|||
type AppRow = {
|
||||
application: ToolApplication;
|
||||
primaryConnection: ToolConnection | null;
|
||||
agentAvailableConnectionCount: number;
|
||||
status: AppStatus;
|
||||
actionCount: number;
|
||||
lastUsedAt: Date | string | null;
|
||||
|
|
@ -83,10 +95,17 @@ const STATUS_CLASS: Record<AppStatus["tone"], string> = {
|
|||
|
||||
export function Connections() {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const { pushToast } = useToast();
|
||||
const { selectedCompany, selectedCompanyId } = useCompany();
|
||||
const { setBreadcrumbs } = useBreadcrumbs();
|
||||
const reviewCount = useReviewCount();
|
||||
const [filter, setFilter] = useState<StatusFilter>("all");
|
||||
const [connectionToDelete, setConnectionToDelete] = useState<{
|
||||
id: string;
|
||||
appName: string;
|
||||
remainingConnectionCount: number;
|
||||
} | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setBreadcrumbs([
|
||||
|
|
@ -118,6 +137,30 @@ export function Connections() {
|
|||
enabled: !!selectedCompanyId,
|
||||
});
|
||||
|
||||
const deleteConnection = useMutation({
|
||||
mutationFn: (target: { id: string; appName: string; remainingConnectionCount: number }) =>
|
||||
toolsApi.archiveConnection(target.id),
|
||||
onSuccess: (_connection, target) => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.tools.connections(selectedCompanyId!) });
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.tools.applications(selectedCompanyId!) });
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.apps.attention(selectedCompanyId!) });
|
||||
pushToast({
|
||||
title: "Connection deleted",
|
||||
body: target.remainingConnectionCount > 0
|
||||
? `${target.appName} still has ${target.remainingConnectionCount} active ${target.remainingConnectionCount === 1 ? "connection" : "connections"} available to agents.`
|
||||
: `${target.appName} is no longer available to agents. You can connect it again later.`,
|
||||
tone: "success",
|
||||
});
|
||||
setConnectionToDelete(null);
|
||||
},
|
||||
onError: (error) =>
|
||||
pushToast({
|
||||
title: "Couldn't delete the connection",
|
||||
body: error instanceof Error ? error.message : "Please try again.",
|
||||
tone: "error",
|
||||
}),
|
||||
});
|
||||
|
||||
const gallery = (galleryQuery.data?.apps ?? []) as AppGalleryDisplayEntry[];
|
||||
const logoByName = useMemo(() => {
|
||||
const map = new Map<string, AppGalleryDisplayEntry>();
|
||||
|
|
@ -175,6 +218,9 @@ export function Connections() {
|
|||
return {
|
||||
application,
|
||||
primaryConnection,
|
||||
agentAvailableConnectionCount: appConnections.filter(
|
||||
(connection) => connection.status === "active" && connection.enabled,
|
||||
).length,
|
||||
status: statusFor(application, appConnections),
|
||||
actionCount,
|
||||
lastUsedAt,
|
||||
|
|
@ -344,16 +390,40 @@ export function Connections() {
|
|||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<Button
|
||||
variant={attention ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
navigate(appHref);
|
||||
}}
|
||||
>
|
||||
{actionLabel}
|
||||
</Button>
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button
|
||||
variant={attention ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
navigate(appHref);
|
||||
}}
|
||||
>
|
||||
{actionLabel}
|
||||
</Button>
|
||||
{primaryConnection && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
aria-label={`Delete ${application.name} connection`}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
setConnectionToDelete({
|
||||
id: primaryConnection.id,
|
||||
appName: application.name,
|
||||
remainingConnectionCount: Math.max(
|
||||
0,
|
||||
row.agentAvailableConnectionCount -
|
||||
(primaryConnection.status === "active" && primaryConnection.enabled ? 1 : 0),
|
||||
),
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
|
|
@ -370,6 +440,40 @@ export function Connections() {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<AlertDialog
|
||||
open={connectionToDelete !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open && !deleteConnection.isPending) setConnectionToDelete(null);
|
||||
}}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>
|
||||
Delete {connectionToDelete?.appName ?? "this"} connection?
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{connectionToDelete && connectionToDelete.remainingConnectionCount > 0
|
||||
? `This connection will be removed. Agents can still use ${connectionToDelete.appName} through ${connectionToDelete.remainingConnectionCount} other active ${connectionToDelete.remainingConnectionCount === 1 ? "connection" : "connections"}.`
|
||||
: "Agents will lose access immediately. You can connect it again later."}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={deleteConnection.isPending}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
disabled={!connectionToDelete || deleteConnection.isPending}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
if (connectionToDelete) deleteConnection.mutate(connectionToDelete);
|
||||
}}
|
||||
>
|
||||
{deleteConnection.isPending && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||
{deleteConnection.isPending ? "Deleting..." : "Delete connection"}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
|
|||
type SubNavKey = "connected" | "gateways" | "activity";
|
||||
|
||||
const ITEMS: { key: SubNavKey; label: string; href: string }[] = [
|
||||
{ key: "connected", label: "Connected", href: "/apps" },
|
||||
{ key: "connected", label: "Connected", href: "/apps/connections" },
|
||||
{ key: "gateways", label: "Gateways", href: "/apps/gateways" },
|
||||
{ key: "activity", label: "Activity", href: "/activity" },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@ describe("PasteConfigTab — discoverability copy (PAP-11091)", () => {
|
|||
a.textContent?.includes("Browse planned app connections"),
|
||||
);
|
||||
expect(link).toBeTruthy();
|
||||
expect(link?.getAttribute("href")).toBe("/apps/browse");
|
||||
expect(link?.getAttribute("href")).toBe("/apps");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ export function PasteConfigTab({ companyId }: { companyId: string }) {
|
|||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Just a URL?{" "}
|
||||
<Link to="/apps/browse" className="text-primary hover:underline">
|
||||
<Link to="/apps" className="text-primary hover:underline">
|
||||
Browse planned app connections
|
||||
</Link>{" "}
|
||||
instead.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// @vitest-environment jsdom
|
||||
|
||||
import { act } from "react";
|
||||
import { flushSync } from "react-dom";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { ToolsAccess } from "./ToolsAccess";
|
||||
|
|
@ -52,6 +52,14 @@ vi.mock("./RunYourOwnTab", () => ({
|
|||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
async function act(callback: () => void | Promise<void>) {
|
||||
let result: void | Promise<void> = undefined;
|
||||
flushSync(() => {
|
||||
result = callback();
|
||||
});
|
||||
await result;
|
||||
}
|
||||
|
||||
async function flushReact() {
|
||||
await Promise.resolve();
|
||||
await new Promise((resolve) => window.setTimeout(resolve, 0));
|
||||
|
|
@ -88,7 +96,7 @@ describe("ToolsAccess", () => {
|
|||
mockParams.tab = tab;
|
||||
await render();
|
||||
|
||||
expect(navigateMock).toHaveBeenCalledWith(expect.objectContaining({ to: "/apps", replace: true }));
|
||||
expect(navigateMock).toHaveBeenCalledWith(expect.objectContaining({ to: "/apps/connections", replace: true }));
|
||||
},
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ export function ToolsAccess() {
|
|||
params.tab === "overview" ||
|
||||
params.tab === "examples"
|
||||
) {
|
||||
return <Navigate to="/apps" replace />;
|
||||
return <Navigate to="/apps/connections" replace />;
|
||||
}
|
||||
|
||||
if (advanced) {
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ export function WizardToolsStep(props: WizardToolsStepProps) {
|
|||
</p>
|
||||
</div>
|
||||
<Button asChild variant="outline">
|
||||
<Link to="/apps/browse">Browse app connections</Link>
|
||||
<Link to="/apps">Browse app connections</Link>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue