mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-15 10:30:37 +09:00
Add secrets provider vaults and remote import (#5429)
## Thinking Path
> - Paperclip orchestrates AI-agent companies and needs secrets handling
to work across local development, hosted operators, and governed agent
execution.
> - The affected subsystem is the company-scoped secrets control plane:
database schema, server services/routes, CLI workflows, and the Secrets
settings UI.
> - The gap was that secrets were local-only and operators could not
manage provider vaults or import existing remote references without
exposing plaintext.
> - This branch adds provider vault configuration plus an AWS Secrets
Manager remote-import path while preserving company boundaries, binding
context, and audit trails.
> - I kept the PR to a single branch PR, removed unrelated
lockfile/package drift, rebased the full branch onto the current
`public-gh/master`, and addressed fresh Greptile findings.
> - The benefit is a reviewable implementation of provider-backed
secrets with focused tests covering provider selection, import
conflicts, deleted secret reuse, rotation guards, and AWS signing
behavior.
## What Changed
- Added provider vault support for company secrets, including provider
config storage, default vault handling, health checks, binding usage,
access events, and remote import preview/commit.
- Added an AWS Secrets Manager provider using SigV4 request signing,
bounded request timeouts, namespace guardrails, cached runtime
credential resolution, and external-reference linking without plaintext
reads.
- Added Secrets UI surfaces for vault management and remote import, plus
CLI/API documentation for setup and operations.
- Stabilized routine webhook secret binding paths and SSH
environment-driver fixture bindings discovered during verification.
- Addressed Greptile and CI findings: no lockfile/package drift,
monotonic migration metadata, disabled-vault default races, soft-deleted
secret hiding/recreate behavior, remove behavior with disabled vaults,
soft-deleted external-reference re-import, non-active rotation guards,
managed-secret soft deletion through PATCH, and per-call AWS SDK
credential client churn.
- Rebased this branch onto `public-gh/master` at `0e1a5828` and
force-pushed with lease to keep this as the single PR for the branch.
## Verification
- `git fetch public-gh master`
- `git rebase public-gh/master`
- `git diff --name-only public-gh/master...HEAD | grep
'^pnpm-lock\.yaml$' || true` confirmed `pnpm-lock.yaml` is not in the PR
diff.
- Confirmed migration ordering: master ends at `0081_optimal_dormammu`;
this PR adds `0082_dry_vision` and
`0083_company_secret_provider_configs`.
- Inspected migrations for repeat safety: new tables/indexes use `IF NOT
EXISTS`; foreign keys are guarded by `DO $$ ... IF NOT EXISTS`; column
additions use `ADD COLUMN IF NOT EXISTS`.
- `pnpm -r typecheck` passed before the Greptile follow-up commits.
- `pnpm test:run` ran the full stable Vitest path before the Greptile
follow-up commits; it completed with 3 timing-related failures under
parallel load: `codex-local-execute.test.ts`,
`cursor-local-execute.test.ts`, and `environment-service.test.ts`.
- `pnpm --filter @paperclipai/server exec vitest run
src/__tests__/codex-local-execute.test.ts
src/__tests__/cursor-local-execute.test.ts
src/__tests__/environment-service.test.ts` passed on targeted rerun
(`24/24`).
- `pnpm build` passed before the Greptile follow-up commits. Vite
reported existing chunk-size/dynamic-import warnings.
- After Greptile follow-up commits: `pnpm --filter @paperclipai/server
exec vitest run src/__tests__/secrets-service.test.ts` passed (`26/26`).
- After Greptile follow-up commits: `pnpm --filter @paperclipai/server
exec vitest run src/__tests__/aws-secrets-manager-provider.test.ts
src/__tests__/secrets-service.test.ts` passed (`39/39`).
- After Greptile follow-up commits: `pnpm --filter @paperclipai/server
typecheck` passed.
- Captured Storybook screenshots from `ui/storybook-static` for visual
review.
- Latest PR checks on `5ca3a5cf`: `policy`, serialized server suites
1/4-4/4, `Canary Dry Run`, `e2e`, `security/snyk`, and `Greptile Review`
pass; aggregate `verify` is still registering the completed child
checks.
- Greptile review loop continued through the latest requested pass; all
Greptile review threads are resolved and the latest `Greptile Review`
check on `5ca3a5cf` passed with 0 comments added.
## Screenshots
Before: the provider-vault and remote-import surfaces did not exist on
`master`; these are after-state screenshots from the Storybook fixtures.
## Risks
- Migration risk: this adds new secret provider tables and extends
existing secret rows. The migrations were checked for monotonic ordering
and idempotent guards, but reviewers should still inspect upgrade
behavior carefully.
- Provider risk: AWS support uses direct SigV4 requests. Automated tests
cover signing, request timeouts, vault-config selection, namespace
guardrails, pending-version archival, sanitized provider errors, and
service-level cleanup paths. A real-vault AWS smoke test remains
deployment validation for an operator with AWS credentials rather than
an unverified merge blocker in this local branch.
- UI risk: the Secrets page and import dialog are large new surfaces;
screenshots are included above for reviewer inspection.
- Verification risk: the full local stable test command hit
parallel-load timing failures, although the exact failed files passed
when rerun directly.
- Operational risk: remote import intentionally avoids plaintext reads;
operators must understand that imported external references resolve at
runtime and may fail if AWS permissions change.
> 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, GPT-5 coding agent with local shell/tool use in the
Paperclip worktree. Exact context-window size was not exposed by the
runtime.
## 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
- [ ] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] If this change affects the UI, I have included before/after
screenshots
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before
requesting merge
---------
Co-authored-by: Paperclip <noreply@paperclip.ing>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotta
GitHub
parent
06e6ee25cd
commit
778e775c35
103 changed files with 16971 additions and 509 deletions
|
|
@ -32,6 +32,7 @@ import { CompanyEnvironments } from "./pages/CompanyEnvironments";
|
|||
import { CompanyAccess } from "./pages/CompanyAccess";
|
||||
import { CompanyInvites } from "./pages/CompanyInvites";
|
||||
import { CompanySkills } from "./pages/CompanySkills";
|
||||
import { Secrets } from "./pages/Secrets";
|
||||
import { CompanyExport } from "./pages/CompanyExport";
|
||||
import { CompanyImport } from "./pages/CompanyImport";
|
||||
import { DesignGuide } from "./pages/DesignGuide";
|
||||
|
|
@ -71,6 +72,7 @@ function boardRoutes() {
|
|||
<Route path="company/settings/invites" element={<CompanyInvites />} />
|
||||
<Route path="company/export/*" element={<CompanyExport />} />
|
||||
<Route path="company/import" element={<CompanyImport />} />
|
||||
<Route path="company/settings/secrets" element={<Secrets />} />
|
||||
<Route path="skills/*" element={<CompanySkills />} />
|
||||
<Route path="settings" element={<LegacySettingsRedirect />} />
|
||||
<Route path="settings/*" element={<LegacySettingsRedirect />} />
|
||||
|
|
|
|||
|
|
@ -1,25 +1,138 @@
|
|||
import type { CompanySecret, SecretProviderDescriptor, SecretProvider } from "@paperclipai/shared";
|
||||
import type {
|
||||
CompanySecret,
|
||||
CompanySecretUsageBinding,
|
||||
CompanySecretProviderConfig,
|
||||
RemoteSecretImportPreviewResult,
|
||||
RemoteSecretImportResult,
|
||||
SecretAccessEvent,
|
||||
SecretManagedMode,
|
||||
SecretProvider,
|
||||
SecretProviderConfigStatus,
|
||||
SecretProviderConfigHealthResponse,
|
||||
SecretProviderDescriptor,
|
||||
SecretStatus,
|
||||
} from "@paperclipai/shared";
|
||||
import { api } from "./client";
|
||||
|
||||
export interface SecretUsageResponse {
|
||||
secretId: string;
|
||||
bindings: CompanySecretUsageBinding[];
|
||||
}
|
||||
|
||||
export interface CreateSecretInput {
|
||||
name: string;
|
||||
key?: string;
|
||||
provider?: SecretProvider;
|
||||
managedMode?: SecretManagedMode;
|
||||
value?: string | null;
|
||||
description?: string | null;
|
||||
externalRef?: string | null;
|
||||
providerVersionRef?: string | null;
|
||||
providerConfigId?: string | null;
|
||||
providerMetadata?: Record<string, unknown> | null;
|
||||
}
|
||||
|
||||
export interface SecretProviderHealthResponse {
|
||||
providers: Array<{
|
||||
provider: SecretProvider;
|
||||
status: "ok" | "warn" | "error";
|
||||
message: string;
|
||||
warnings?: string[];
|
||||
backupGuidance?: string[];
|
||||
details?: Record<string, unknown>;
|
||||
}>;
|
||||
}
|
||||
|
||||
export interface UpdateSecretInput {
|
||||
name?: string;
|
||||
key?: string;
|
||||
status?: SecretStatus;
|
||||
description?: string | null;
|
||||
externalRef?: string | null;
|
||||
providerMetadata?: Record<string, unknown> | null;
|
||||
}
|
||||
|
||||
export interface RotateSecretInput {
|
||||
value?: string | null;
|
||||
externalRef?: string | null;
|
||||
providerVersionRef?: string | null;
|
||||
providerConfigId?: string | null;
|
||||
}
|
||||
|
||||
export interface CreateSecretProviderConfigInput {
|
||||
provider: SecretProvider;
|
||||
displayName: string;
|
||||
status?: SecretProviderConfigStatus;
|
||||
isDefault?: boolean;
|
||||
config?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface UpdateSecretProviderConfigInput {
|
||||
displayName?: string;
|
||||
status?: SecretProviderConfigStatus;
|
||||
isDefault?: boolean;
|
||||
config?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface RemoteImportPreviewInput {
|
||||
providerConfigId: string;
|
||||
query?: string | null;
|
||||
nextToken?: string | null;
|
||||
pageSize?: number;
|
||||
}
|
||||
|
||||
export interface RemoteImportSelectionInput {
|
||||
externalRef: string;
|
||||
name?: string | null;
|
||||
key?: string | null;
|
||||
description?: string | null;
|
||||
providerVersionRef?: string | null;
|
||||
providerMetadata?: Record<string, unknown> | null;
|
||||
}
|
||||
|
||||
export interface RemoteImportInput {
|
||||
providerConfigId: string;
|
||||
secrets: RemoteImportSelectionInput[];
|
||||
}
|
||||
|
||||
export const secretsApi = {
|
||||
list: (companyId: string) => api.get<CompanySecret[]>(`/companies/${companyId}/secrets`),
|
||||
providers: (companyId: string) =>
|
||||
api.get<SecretProviderDescriptor[]>(`/companies/${companyId}/secret-providers`),
|
||||
create: (
|
||||
companyId: string,
|
||||
data: {
|
||||
name: string;
|
||||
value: string;
|
||||
provider?: SecretProvider;
|
||||
description?: string | null;
|
||||
externalRef?: string | null;
|
||||
},
|
||||
) => api.post<CompanySecret>(`/companies/${companyId}/secrets`, data),
|
||||
rotate: (id: string, data: { value: string; externalRef?: string | null }) =>
|
||||
providerHealth: (companyId: string) =>
|
||||
api.get<SecretProviderHealthResponse>(`/companies/${companyId}/secret-providers/health`),
|
||||
providerConfigs: (companyId: string) =>
|
||||
api.get<CompanySecretProviderConfig[]>(`/companies/${companyId}/secret-provider-configs`),
|
||||
createProviderConfig: (companyId: string, data: CreateSecretProviderConfigInput) =>
|
||||
api.post<CompanySecretProviderConfig>(`/companies/${companyId}/secret-provider-configs`, data),
|
||||
updateProviderConfig: (id: string, data: UpdateSecretProviderConfigInput) =>
|
||||
api.patch<CompanySecretProviderConfig>(`/secret-provider-configs/${id}`, data),
|
||||
disableProviderConfig: (id: string) =>
|
||||
api.delete<CompanySecretProviderConfig>(`/secret-provider-configs/${id}`),
|
||||
setDefaultProviderConfig: (id: string) =>
|
||||
api.post<CompanySecretProviderConfig>(`/secret-provider-configs/${id}/default`, {}),
|
||||
checkProviderConfigHealth: (id: string) =>
|
||||
api.post<SecretProviderConfigHealthResponse>(`/secret-provider-configs/${id}/health`, {}),
|
||||
create: (companyId: string, data: CreateSecretInput) =>
|
||||
api.post<CompanySecret>(`/companies/${companyId}/secrets`, data),
|
||||
update: (id: string, data: UpdateSecretInput) =>
|
||||
api.patch<CompanySecret>(`/secrets/${id}`, data),
|
||||
rotate: (id: string, data: RotateSecretInput) =>
|
||||
api.post<CompanySecret>(`/secrets/${id}/rotate`, data),
|
||||
update: (
|
||||
id: string,
|
||||
data: { name?: string; description?: string | null; externalRef?: string | null },
|
||||
) => api.patch<CompanySecret>(`/secrets/${id}`, data),
|
||||
disable: (id: string) =>
|
||||
api.patch<CompanySecret>(`/secrets/${id}`, { status: "disabled" satisfies SecretStatus }),
|
||||
enable: (id: string) =>
|
||||
api.patch<CompanySecret>(`/secrets/${id}`, { status: "active" satisfies SecretStatus }),
|
||||
archive: (id: string) =>
|
||||
api.patch<CompanySecret>(`/secrets/${id}`, { status: "archived" satisfies SecretStatus }),
|
||||
remove: (id: string) => api.delete<{ ok: true }>(`/secrets/${id}`),
|
||||
usage: (id: string) => api.get<SecretUsageResponse>(`/secrets/${id}/usage`),
|
||||
accessEvents: (id: string) => api.get<SecretAccessEvent[]>(`/secrets/${id}/access-events`),
|
||||
remoteImportPreview: (companyId: string, data: RemoteImportPreviewInput) =>
|
||||
api.post<RemoteSecretImportPreviewResult>(
|
||||
`/companies/${companyId}/secrets/remote-import/preview`,
|
||||
data,
|
||||
),
|
||||
remoteImport: (companyId: string, data: RemoteImportInput) =>
|
||||
api.post<RemoteSecretImportResult>(`/companies/${companyId}/secrets/remote-import`, data),
|
||||
};
|
||||
|
|
|
|||
|
|
@ -112,6 +112,7 @@ describe("CompanySettingsSidebar", () => {
|
|||
expect(container.textContent).toContain("Environments");
|
||||
expect(container.textContent).toContain("Access");
|
||||
expect(container.textContent).toContain("Invites");
|
||||
expect(container.textContent).toContain("Secrets");
|
||||
expect(sidebarNavItemMock).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
to: "/company/settings",
|
||||
|
|
@ -141,6 +142,13 @@ describe("CompanySettingsSidebar", () => {
|
|||
end: true,
|
||||
}),
|
||||
);
|
||||
expect(sidebarNavItemMock).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
to: "/company/settings/secrets",
|
||||
label: "Secrets",
|
||||
end: true,
|
||||
}),
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ChevronLeft, MailPlus, MonitorCog, Settings, Shield, SlidersHorizontal } from "lucide-react";
|
||||
import { ChevronLeft, KeyRound, MailPlus, MonitorCog, Settings, Shield, SlidersHorizontal } from "lucide-react";
|
||||
import { sidebarBadgesApi } from "@/api/sidebarBadges";
|
||||
import { ApiError } from "@/api/client";
|
||||
import { Link } from "@/lib/router";
|
||||
|
|
@ -68,6 +68,7 @@ export function CompanySettingsSidebar() {
|
|||
end
|
||||
/>
|
||||
<SidebarNavItem to="/company/settings/invites" label="Invites" icon={MailPlus} end />
|
||||
<SidebarNavItem to="/company/settings/secrets" label="Secrets" icon={KeyRound} end />
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import type { CompanySecret, EnvBinding } from "@paperclipai/shared";
|
||||
import { X } from "lucide-react";
|
||||
import type { CompanySecret, EnvBinding, SecretVersionSelector } from "@paperclipai/shared";
|
||||
import { AlertCircle, X } from "lucide-react";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
const inputClass =
|
||||
|
|
@ -11,15 +11,20 @@ type Row = {
|
|||
source: "plain" | "secret";
|
||||
plainValue: string;
|
||||
secretId: string;
|
||||
version: SecretVersionSelector;
|
||||
};
|
||||
|
||||
function emptyRow(): Row {
|
||||
return { key: "", source: "plain", plainValue: "", secretId: "", version: "latest" };
|
||||
}
|
||||
|
||||
function toRows(rec: Record<string, EnvBinding> | null | undefined): Row[] {
|
||||
if (!rec || typeof rec !== "object") {
|
||||
return [{ key: "", source: "plain", plainValue: "", secretId: "" }];
|
||||
return [emptyRow()];
|
||||
}
|
||||
const entries = Object.entries(rec).map(([key, binding]) => {
|
||||
if (typeof binding === "string") {
|
||||
return { key, source: "plain" as const, plainValue: binding, secretId: "" };
|
||||
return { key, source: "plain" as const, plainValue: binding, secretId: "", version: "latest" as const };
|
||||
}
|
||||
if (
|
||||
typeof binding === "object" &&
|
||||
|
|
@ -27,12 +32,16 @@ function toRows(rec: Record<string, EnvBinding> | null | undefined): Row[] {
|
|||
"type" in binding &&
|
||||
(binding as { type?: unknown }).type === "secret_ref"
|
||||
) {
|
||||
const record = binding as { secretId?: unknown };
|
||||
const record = binding as { secretId?: unknown; version?: unknown };
|
||||
const version: SecretVersionSelector = typeof record.version === "number"
|
||||
? record.version
|
||||
: "latest";
|
||||
return {
|
||||
key,
|
||||
source: "secret" as const,
|
||||
plainValue: "",
|
||||
secretId: typeof record.secretId === "string" ? record.secretId : "",
|
||||
version,
|
||||
};
|
||||
}
|
||||
if (
|
||||
|
|
@ -47,11 +56,12 @@ function toRows(rec: Record<string, EnvBinding> | null | undefined): Row[] {
|
|||
source: "plain" as const,
|
||||
plainValue: typeof record.value === "string" ? record.value : "",
|
||||
secretId: "",
|
||||
version: "latest" as const,
|
||||
};
|
||||
}
|
||||
return { key, source: "plain" as const, plainValue: "", secretId: "" };
|
||||
return { key, source: "plain" as const, plainValue: "", secretId: "", version: "latest" as const };
|
||||
});
|
||||
return [...entries, { key: "", source: "plain", plainValue: "", secretId: "" }];
|
||||
return [...entries, emptyRow()];
|
||||
}
|
||||
|
||||
export function EnvVarEditor({
|
||||
|
|
@ -89,7 +99,7 @@ export function EnvVarEditor({
|
|||
if (!key) continue;
|
||||
if (row.source === "secret") {
|
||||
if (row.secretId) {
|
||||
rec[key] = { type: "secret_ref", secretId: row.secretId, version: "latest" };
|
||||
rec[key] = { type: "secret_ref", secretId: row.secretId, version: row.version };
|
||||
} else {
|
||||
rec[key] = { type: "plain", value: row.plainValue };
|
||||
}
|
||||
|
|
@ -102,13 +112,15 @@ export function EnvVarEditor({
|
|||
}
|
||||
|
||||
function updateRow(index: number, patch: Partial<Row>) {
|
||||
const withPatch = rows.map((row, rowIndex) => (rowIndex === index ? { ...row, ...patch } : row));
|
||||
const withPatch: Row[] = rows.map((row, rowIndex) =>
|
||||
rowIndex === index ? { ...row, ...patch, version: patch.version ?? row.version } : row,
|
||||
);
|
||||
if (
|
||||
withPatch[withPatch.length - 1].key ||
|
||||
withPatch[withPatch.length - 1].plainValue ||
|
||||
withPatch[withPatch.length - 1].secretId
|
||||
) {
|
||||
withPatch.push({ key: "", source: "plain", plainValue: "", secretId: "" });
|
||||
withPatch.push(emptyRow());
|
||||
}
|
||||
setRows(withPatch);
|
||||
emit(withPatch);
|
||||
|
|
@ -122,7 +134,7 @@ export function EnvVarEditor({
|
|||
next[next.length - 1].plainValue ||
|
||||
next[next.length - 1].secretId
|
||||
) {
|
||||
next.push({ key: "", source: "plain", plainValue: "", secretId: "" });
|
||||
next.push(emptyRow());
|
||||
}
|
||||
setRows(next);
|
||||
emit(next);
|
||||
|
|
@ -189,17 +201,46 @@ export function EnvVarEditor({
|
|||
{row.source === "secret" ? (
|
||||
<>
|
||||
<select
|
||||
className={cn(inputClass, "flex-[3] bg-background")}
|
||||
className={cn(inputClass, "flex-[3] bg-background", row.secretId && !secrets.some((s) => s.id === row.secretId) && "border-destructive text-destructive")}
|
||||
value={row.secretId}
|
||||
onChange={(event) => updateRow(index, { secretId: event.target.value })}
|
||||
>
|
||||
<option value="">Select secret...</option>
|
||||
{row.secretId && !secrets.some((s) => s.id === row.secretId) ? (
|
||||
<option value={row.secretId}>Missing ({row.secretId.slice(0, 8)}…)</option>
|
||||
) : null}
|
||||
{secrets.map((secret) => (
|
||||
<option key={secret.id} value={secret.id}>
|
||||
{secret.name}
|
||||
{secret.status !== "active" ? ` (${secret.status})` : ""}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className={cn(inputClass, "flex-[1] bg-background")}
|
||||
value={row.version === "latest" ? "latest" : String(row.version)}
|
||||
onChange={(event) => {
|
||||
const raw = event.target.value;
|
||||
updateRow(index, { version: raw === "latest" ? "latest" : Number.parseInt(raw, 10) });
|
||||
}}
|
||||
disabled={!row.secretId}
|
||||
aria-label="Version"
|
||||
>
|
||||
<option value="latest">latest</option>
|
||||
{(() => {
|
||||
const selected = secrets.find((s) => s.id === row.secretId);
|
||||
if (!selected) return null;
|
||||
return Array.from({ length: Math.max(0, selected.latestVersion) }, (_, idx) => {
|
||||
const version = selected.latestVersion - idx;
|
||||
if (version <= 0) return null;
|
||||
return (
|
||||
<option key={version} value={version}>
|
||||
v{version}
|
||||
</option>
|
||||
);
|
||||
});
|
||||
})()}
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent/50 transition-colors shrink-0"
|
||||
|
|
@ -244,8 +285,38 @@ export function EnvVarEditor({
|
|||
);
|
||||
})}
|
||||
{sealError && <p className="text-[11px] text-destructive">{sealError}</p>}
|
||||
{(() => {
|
||||
const issues: { key: string; reason: string }[] = [];
|
||||
for (const row of rows) {
|
||||
if (row.source !== "secret" || !row.secretId) continue;
|
||||
const secret = secrets.find((s) => s.id === row.secretId);
|
||||
if (!secret) {
|
||||
issues.push({ key: row.key.trim() || row.secretId, reason: "missing" });
|
||||
} else if (secret.status !== "active") {
|
||||
issues.push({ key: row.key.trim() || secret.name, reason: secret.status });
|
||||
}
|
||||
}
|
||||
if (!issues.length) return null;
|
||||
return (
|
||||
<p className="text-[11px] text-amber-700 dark:text-amber-400 inline-flex items-start gap-1">
|
||||
<AlertCircle className="h-3 w-3 mt-0.5 shrink-0" />
|
||||
<span>
|
||||
{issues.length} secret binding{issues.length === 1 ? "" : "s"} need attention:{" "}
|
||||
{issues.map((issue, idx) => (
|
||||
<span key={idx} className="font-mono">
|
||||
{issue.key}
|
||||
<span className="text-muted-foreground"> ({issue.reason})</span>
|
||||
{idx < issues.length - 1 ? ", " : ""}
|
||||
</span>
|
||||
))}
|
||||
. Runs will fail until you remap or re-enable.
|
||||
</span>
|
||||
</p>
|
||||
);
|
||||
})()}
|
||||
<p className="text-[11px] text-muted-foreground/60">
|
||||
PAPERCLIP_* variables are injected automatically at runtime.
|
||||
Set KEY to the env var name the process expects, for example GH_TOKEN. Choose Secret to resolve a stored
|
||||
value at run start. PAPERCLIP_* variables are injected automatically.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -72,6 +72,17 @@ async function waitForUi(assertion: () => void) {
|
|||
});
|
||||
}
|
||||
|
||||
async function waitForRetryButtonText(expected: string) {
|
||||
for (let i = 0; i < 20; i += 1) {
|
||||
if ((getRetryNowButton()?.textContent ?? "").includes(expected)) return;
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
await act(async () => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 0));
|
||||
});
|
||||
}
|
||||
expect(getRetryNowButton()!.textContent ?? "").toContain(expected);
|
||||
}
|
||||
|
||||
function renderWithProviders(ui: ReactNode) {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
|
||||
|
|
@ -174,12 +185,11 @@ describe("IssueScheduledRetryCard", () => {
|
|||
act(() => {
|
||||
button!.click();
|
||||
});
|
||||
await waitForUi(() => {
|
||||
expect(retryNowMock).toHaveBeenCalledWith("issue-1");
|
||||
const finalButton = getRetryNowButton();
|
||||
expect(finalButton!.textContent ?? "").toContain("Promoted");
|
||||
expect(finalButton!.disabled).toBe(true);
|
||||
});
|
||||
await waitForRetryButtonText("Promoted");
|
||||
expect(retryNowMock).toHaveBeenCalledWith("issue-1");
|
||||
const finalButton = getRetryNowButton();
|
||||
expect(finalButton!.textContent ?? "").toContain("Promoted");
|
||||
expect(finalButton!.disabled).toBe(true);
|
||||
});
|
||||
|
||||
it("shows already promoted state when backend reports duplicate click", async () => {
|
||||
|
|
@ -190,10 +200,9 @@ describe("IssueScheduledRetryCard", () => {
|
|||
act(() => {
|
||||
getRetryNowButton()!.click();
|
||||
});
|
||||
await waitForUi(() => {
|
||||
expect(getRetryNowButton()!.textContent ?? "").toContain("Already promoted");
|
||||
expect(container.querySelector('[data-testid="issue-scheduled-retry-error-band"]')).toBeNull();
|
||||
});
|
||||
await waitForRetryButtonText("Already promoted");
|
||||
expect(getRetryNowButton()!.textContent ?? "").toContain("Already promoted");
|
||||
expect(container.querySelector('[data-testid="issue-scheduled-retry-error-band"]')).toBeNull();
|
||||
});
|
||||
|
||||
it("renders an inline error band on backend failure", async () => {
|
||||
|
|
|
|||
282
ui/src/components/SecretBindingPicker.tsx
Normal file
282
ui/src/components/SecretBindingPicker.tsx
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
import { useMemo, useState } from "react";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { AlertCircle, KeyRound, Loader2, Plus, X } from "lucide-react";
|
||||
import type { CompanySecret, SecretVersionSelector } from "@paperclipai/shared";
|
||||
import { secretsApi } from "../api/secrets";
|
||||
import { queryKeys } from "../lib/queryKeys";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { cn } from "../lib/utils";
|
||||
|
||||
export interface SecretBindingValue {
|
||||
secretId: string;
|
||||
version?: SecretVersionSelector;
|
||||
}
|
||||
|
||||
interface SecretBindingPickerProps {
|
||||
value: SecretBindingValue | null;
|
||||
onChange: (next: SecretBindingValue | null) => void;
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
allowVersionSelector?: boolean;
|
||||
emptyHint?: string;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* Optional whitelist of secret statuses to show. Defaults to "active".
|
||||
* Pass null to disable the filter and show every secret in the company.
|
||||
*/
|
||||
statusFilter?: Array<CompanySecret["status"]> | null;
|
||||
}
|
||||
|
||||
const VERSION_LATEST: SecretVersionSelector = "latest";
|
||||
|
||||
function describeSecret(secret: CompanySecret): string {
|
||||
const provider = secret.provider.replaceAll("_", " ");
|
||||
if (secret.managedMode === "external_reference") {
|
||||
return `External · ${provider}`;
|
||||
}
|
||||
return provider;
|
||||
}
|
||||
|
||||
function statusTone(status: CompanySecret["status"]): string {
|
||||
switch (status) {
|
||||
case "active":
|
||||
return "text-emerald-600 dark:text-emerald-400";
|
||||
case "disabled":
|
||||
return "text-amber-600 dark:text-amber-400";
|
||||
case "archived":
|
||||
return "text-muted-foreground";
|
||||
case "deleted":
|
||||
return "text-destructive";
|
||||
default:
|
||||
return "text-muted-foreground";
|
||||
}
|
||||
}
|
||||
|
||||
export function SecretBindingPicker({
|
||||
value,
|
||||
onChange,
|
||||
label = "Secret",
|
||||
placeholder = "Select secret",
|
||||
allowVersionSelector = true,
|
||||
emptyHint = "No matching secrets. Create one to bind it here.",
|
||||
className,
|
||||
disabled,
|
||||
statusFilter = ["active"],
|
||||
}: SecretBindingPickerProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const { selectedCompanyId } = useCompany();
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [createName, setCreateName] = useState("");
|
||||
const [createValue, setCreateValue] = useState("");
|
||||
const [createDescription, setCreateDescription] = useState("");
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
|
||||
const secretsQuery = useQuery({
|
||||
queryKey: selectedCompanyId
|
||||
? queryKeys.secrets.list(selectedCompanyId)
|
||||
: ["secrets", "__disabled__"],
|
||||
queryFn: () => secretsApi.list(selectedCompanyId!),
|
||||
enabled: Boolean(selectedCompanyId),
|
||||
});
|
||||
|
||||
const filteredSecrets = useMemo(() => {
|
||||
const all = secretsQuery.data ?? [];
|
||||
if (statusFilter === null) return all;
|
||||
return all.filter((secret) => statusFilter.includes(secret.status));
|
||||
}, [secretsQuery.data, statusFilter]);
|
||||
|
||||
const selectedSecret = useMemo(() => {
|
||||
if (!value) return null;
|
||||
return (secretsQuery.data ?? []).find((secret) => secret.id === value.secretId) ?? null;
|
||||
}, [secretsQuery.data, value]);
|
||||
|
||||
const selectedMissing = Boolean(value && !selectedSecret);
|
||||
|
||||
const createMutation = useMutation({
|
||||
mutationFn: () =>
|
||||
secretsApi.create(selectedCompanyId!, {
|
||||
name: createName.trim(),
|
||||
value: createValue,
|
||||
description: createDescription.trim() || null,
|
||||
}),
|
||||
onSuccess: (created) => {
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.secrets.list(selectedCompanyId!) });
|
||||
onChange({ secretId: created.id, version: VERSION_LATEST });
|
||||
setCreateOpen(false);
|
||||
setCreateName("");
|
||||
setCreateValue("");
|
||||
setCreateDescription("");
|
||||
setCreateError(null);
|
||||
},
|
||||
onError: (error) => {
|
||||
setCreateError(error instanceof Error ? error.message : "Failed to create secret");
|
||||
},
|
||||
});
|
||||
|
||||
const versionDisplay = (selector: SecretVersionSelector | undefined) => {
|
||||
if (selector === undefined || selector === VERSION_LATEST) return "latest";
|
||||
return `v${selector}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("space-y-1.5", className)}>
|
||||
{label ? (
|
||||
<div className="flex items-center justify-between text-xs font-medium text-foreground/80">
|
||||
<span>{label}</span>
|
||||
{value ? (
|
||||
<button
|
||||
type="button"
|
||||
className="text-[11px] text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
|
||||
onClick={() => onChange(null)}
|
||||
disabled={disabled}
|
||||
>
|
||||
<X className="h-3 w-3" /> Clear
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<div className="relative flex-1">
|
||||
<KeyRound className="pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<select
|
||||
className={cn(
|
||||
"h-9 w-full rounded-md border border-border bg-background pl-7 pr-2 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-60",
|
||||
selectedMissing && "border-destructive text-destructive",
|
||||
)}
|
||||
value={value?.secretId ?? ""}
|
||||
onChange={(event) => {
|
||||
const next = event.target.value;
|
||||
if (!next) {
|
||||
onChange(null);
|
||||
return;
|
||||
}
|
||||
onChange({ secretId: next, version: value?.version ?? VERSION_LATEST });
|
||||
}}
|
||||
disabled={disabled || secretsQuery.isPending}
|
||||
>
|
||||
<option value="">{secretsQuery.isPending ? "Loading…" : placeholder}</option>
|
||||
{selectedMissing && value ? (
|
||||
<option value={value.secretId}>Missing secret ({value.secretId.slice(0, 8)}…)</option>
|
||||
) : null}
|
||||
{filteredSecrets.map((secret) => (
|
||||
<option key={secret.id} value={secret.id}>
|
||||
{secret.name} — {describeSecret(secret)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{allowVersionSelector ? (
|
||||
<select
|
||||
className="h-9 rounded-md border border-border bg-background px-2 text-xs outline-none disabled:cursor-not-allowed disabled:opacity-60"
|
||||
value={value?.version === undefined ? VERSION_LATEST : String(value.version)}
|
||||
onChange={(event) => {
|
||||
if (!value) return;
|
||||
const raw = event.target.value;
|
||||
const next: SecretVersionSelector = raw === VERSION_LATEST ? VERSION_LATEST : Number.parseInt(raw, 10);
|
||||
onChange({ ...value, version: next });
|
||||
}}
|
||||
disabled={disabled || !value || !selectedSecret}
|
||||
aria-label="Version"
|
||||
>
|
||||
<option value={VERSION_LATEST}>latest</option>
|
||||
{selectedSecret
|
||||
? Array.from({ length: Math.max(0, selectedSecret.latestVersion) }, (_, index) => {
|
||||
const version = selectedSecret.latestVersion - index;
|
||||
if (version <= 0) return null;
|
||||
return (
|
||||
<option key={version} value={version}>
|
||||
v{version}
|
||||
</option>
|
||||
);
|
||||
})
|
||||
: null}
|
||||
</select>
|
||||
) : null}
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setCreateOpen(true)}
|
||||
disabled={disabled || !selectedCompanyId}
|
||||
aria-label="Create secret"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{selectedSecret ? (
|
||||
<p className={cn("text-[11px] text-muted-foreground", statusTone(selectedSecret.status))}>
|
||||
{selectedSecret.status !== "active" ? `Status: ${selectedSecret.status}. ` : null}
|
||||
Bound to {versionDisplay(value?.version)} · {selectedSecret.key}
|
||||
</p>
|
||||
) : selectedMissing ? (
|
||||
<p className="text-[11px] text-destructive flex items-center gap-1">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
The previously selected secret is no longer available. Pick another or remove the binding.
|
||||
</p>
|
||||
) : (filteredSecrets.length === 0 && !secretsQuery.isPending) ? (
|
||||
<p className="text-[11px] text-muted-foreground">{emptyHint}</p>
|
||||
) : null}
|
||||
|
||||
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create new secret</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-xs font-medium text-foreground/80" htmlFor="secret-name">Name</label>
|
||||
<Input
|
||||
id="secret-name"
|
||||
value={createName}
|
||||
onChange={(event) => setCreateName(event.target.value)}
|
||||
placeholder="OPENAI_API_KEY"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-foreground/80" htmlFor="secret-value">Value</label>
|
||||
<Textarea
|
||||
id="secret-value"
|
||||
value={createValue}
|
||||
onChange={(event) => setCreateValue(event.target.value)}
|
||||
rows={3}
|
||||
placeholder="Paste the secret value"
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
<p className="text-[11px] text-muted-foreground mt-1">
|
||||
The value is stored once and never re-displayed. Rotate to replace.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs font-medium text-foreground/80" htmlFor="secret-description">Description</label>
|
||||
<Input
|
||||
id="secret-description"
|
||||
value={createDescription}
|
||||
onChange={(event) => setCreateDescription(event.target.value)}
|
||||
placeholder="Optional notes (no values)"
|
||||
/>
|
||||
</div>
|
||||
{createError ? <p className="text-xs text-destructive">{createError}</p> : null}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={() => setCreateOpen(false)}>Cancel</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => createMutation.mutate()}
|
||||
disabled={!createName.trim() || !createValue || createMutation.isPending}
|
||||
>
|
||||
{createMutation.isPending ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : null}
|
||||
Create & bind
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -135,6 +135,9 @@ export const queryKeys = {
|
|||
secrets: {
|
||||
list: (companyId: string) => ["secrets", companyId] as const,
|
||||
providers: (companyId: string) => ["secret-providers", companyId] as const,
|
||||
providerConfigs: (companyId: string) => ["secret-provider-configs", companyId] as const,
|
||||
usage: (secretId: string) => ["secrets", "usage", secretId] as const,
|
||||
accessEvents: (secretId: string) => ["secrets", "access-events", secretId] as const,
|
||||
},
|
||||
companySearch: {
|
||||
search: (companyId: string, q: string, scope: string, limit: number, offset: number) =>
|
||||
|
|
|
|||
308
ui/src/pages/Secrets.render.test.tsx
Normal file
308
ui/src/pages/Secrets.render.test.tsx
Normal file
|
|
@ -0,0 +1,308 @@
|
|||
// @vitest-environment jsdom
|
||||
|
||||
import { act } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import type { CompanySecretProviderConfig, SecretProviderDescriptor } from "@paperclipai/shared";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { ProviderVaultsTab, Secrets } from "./Secrets";
|
||||
|
||||
const mockSecretsApi = vi.hoisted(() => ({
|
||||
list: vi.fn(),
|
||||
providers: vi.fn(),
|
||||
providerHealth: vi.fn(),
|
||||
providerConfigs: vi.fn(),
|
||||
createProviderConfig: vi.fn(),
|
||||
updateProviderConfig: vi.fn(),
|
||||
disableProviderConfig: vi.fn(),
|
||||
setDefaultProviderConfig: vi.fn(),
|
||||
checkProviderConfigHealth: vi.fn(),
|
||||
create: vi.fn(),
|
||||
update: vi.fn(),
|
||||
rotate: vi.fn(),
|
||||
disable: vi.fn(),
|
||||
enable: vi.fn(),
|
||||
archive: vi.fn(),
|
||||
remove: vi.fn(),
|
||||
usage: vi.fn(),
|
||||
accessEvents: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockSetBreadcrumbs = vi.hoisted(() => vi.fn());
|
||||
const mockPushToast = vi.hoisted(() => vi.fn());
|
||||
|
||||
vi.mock("../api/secrets", () => ({
|
||||
secretsApi: mockSecretsApi,
|
||||
}));
|
||||
|
||||
vi.mock("../context/CompanyContext", () => ({
|
||||
useCompany: () => ({
|
||||
selectedCompanyId: "company-1",
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("../context/BreadcrumbContext", () => ({
|
||||
useBreadcrumbs: () => ({
|
||||
setBreadcrumbs: mockSetBreadcrumbs,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("../context/ToastContext", () => ({
|
||||
useToast: () => ({
|
||||
pushToast: mockPushToast,
|
||||
}),
|
||||
useToastActions: () => ({
|
||||
pushToast: mockPushToast,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock("../context/SidebarContext", () => ({
|
||||
useSidebar: () => ({
|
||||
isMobile: false,
|
||||
}),
|
||||
}));
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
const providers: SecretProviderDescriptor[] = [
|
||||
{
|
||||
id: "local_encrypted",
|
||||
label: "Local encrypted",
|
||||
requiresExternalRef: false,
|
||||
supportsManagedValues: true,
|
||||
supportsExternalReferences: false,
|
||||
configured: true,
|
||||
},
|
||||
{
|
||||
id: "aws_secrets_manager",
|
||||
label: "AWS Secrets Manager",
|
||||
requiresExternalRef: false,
|
||||
supportsManagedValues: true,
|
||||
supportsExternalReferences: true,
|
||||
configured: true,
|
||||
},
|
||||
{
|
||||
id: "gcp_secret_manager",
|
||||
label: "GCP Secret Manager",
|
||||
requiresExternalRef: false,
|
||||
supportsManagedValues: false,
|
||||
supportsExternalReferences: true,
|
||||
configured: false,
|
||||
},
|
||||
{
|
||||
id: "vault",
|
||||
label: "Vault",
|
||||
requiresExternalRef: false,
|
||||
supportsManagedValues: false,
|
||||
supportsExternalReferences: true,
|
||||
configured: false,
|
||||
},
|
||||
];
|
||||
|
||||
const providerConfigs = [
|
||||
{
|
||||
id: "vault-local",
|
||||
provider: "local_encrypted",
|
||||
displayName: "Local default",
|
||||
status: "ready",
|
||||
isDefault: true,
|
||||
healthStatus: "ready",
|
||||
healthCheckedAt: null,
|
||||
healthMessage: null,
|
||||
healthDetails: null,
|
||||
},
|
||||
{
|
||||
id: "vault-aws",
|
||||
provider: "aws_secrets_manager",
|
||||
displayName: "AWS production",
|
||||
status: "ready",
|
||||
isDefault: false,
|
||||
healthStatus: null,
|
||||
healthCheckedAt: null,
|
||||
healthMessage: null,
|
||||
healthDetails: null,
|
||||
},
|
||||
] satisfies Partial<CompanySecretProviderConfig>[];
|
||||
|
||||
async function flushReact() {
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
await new Promise((resolve) => window.setTimeout(resolve, 0));
|
||||
});
|
||||
}
|
||||
|
||||
describe("Secrets page layout", () => {
|
||||
let container: HTMLDivElement;
|
||||
|
||||
beforeEach(() => {
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
|
||||
mockSecretsApi.list.mockResolvedValue([]);
|
||||
mockSecretsApi.providers.mockResolvedValue(providers);
|
||||
mockSecretsApi.providerHealth.mockResolvedValue({
|
||||
providers: [
|
||||
{
|
||||
provider: "local_encrypted",
|
||||
status: "warn",
|
||||
message: "Local encrypted provider has a warning.",
|
||||
warnings: ["Backup reminder"],
|
||||
},
|
||||
],
|
||||
});
|
||||
mockSecretsApi.providerConfigs.mockResolvedValue(providerConfigs);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
container.remove();
|
||||
document.body.innerHTML = "";
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("uses the shared search/filter/tab affordances and keeps vault sections quiet", async () => {
|
||||
const root = createRoot(container);
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Secrets />
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
|
||||
expect(container.querySelector('input[data-page-search-target="true"][aria-label="Search secrets"]')).not.toBeNull();
|
||||
expect(container.textContent).toContain("Use secrets by binding them to runtime environment variables.");
|
||||
expect(container.textContent).toContain("GH_TOKEN");
|
||||
expect(container.querySelectorAll("select")).toHaveLength(0);
|
||||
expect(container.textContent).not.toContain("Provider warnings detected");
|
||||
expect(container.textContent).not.toContain("2/2 active");
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
|
||||
const vaultRoot = createRoot(container);
|
||||
await act(async () => {
|
||||
vaultRoot.render(
|
||||
<ProviderVaultsTab
|
||||
providers={providers}
|
||||
providerConfigs={providerConfigs as CompanySecretProviderConfig[]}
|
||||
loading={false}
|
||||
error={null}
|
||||
onRetry={vi.fn()}
|
||||
onCreate={vi.fn()}
|
||||
onEdit={vi.fn()}
|
||||
onDisable={vi.fn()}
|
||||
onSetDefault={vi.fn()}
|
||||
onHealthCheck={vi.fn()}
|
||||
pendingActionId={null}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
|
||||
expect(container.querySelector('a[href="#provider-vaults-local_encrypted"]')).not.toBeNull();
|
||||
expect(container.textContent).toContain("AWS production");
|
||||
expect(container.textContent).not.toContain("Managed writes");
|
||||
expect(container.textContent).not.toContain("External refs");
|
||||
|
||||
await act(async () => {
|
||||
vaultRoot.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("opens reference details from the secrets table count", async () => {
|
||||
mockSecretsApi.list.mockResolvedValue([
|
||||
{
|
||||
id: "secret-openai",
|
||||
companyId: "company-1",
|
||||
key: "openai_api_key",
|
||||
name: "OPENAI_API_KEY",
|
||||
provider: "local_encrypted",
|
||||
status: "active",
|
||||
managedMode: "paperclip_managed",
|
||||
externalRef: null,
|
||||
providerConfigId: null,
|
||||
providerMetadata: null,
|
||||
latestVersion: 1,
|
||||
description: null,
|
||||
lastResolvedAt: null,
|
||||
lastRotatedAt: null,
|
||||
deletedAt: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: "user-1",
|
||||
referenceCount: 2,
|
||||
createdAt: new Date("2026-05-06T00:00:00.000Z"),
|
||||
updatedAt: new Date("2026-05-06T00:00:00.000Z"),
|
||||
},
|
||||
]);
|
||||
mockSecretsApi.usage.mockResolvedValue({
|
||||
secretId: "secret-openai",
|
||||
bindings: [
|
||||
{
|
||||
id: "binding-agent",
|
||||
companyId: "company-1",
|
||||
secretId: "secret-openai",
|
||||
targetType: "agent",
|
||||
targetId: "agent-1",
|
||||
configPath: "env.OPENAI_API_KEY",
|
||||
versionSelector: "latest",
|
||||
required: true,
|
||||
label: null,
|
||||
target: {
|
||||
type: "agent",
|
||||
id: "agent-1",
|
||||
label: "CodexCoder",
|
||||
href: "/agents/codexcoder",
|
||||
status: "idle",
|
||||
},
|
||||
createdAt: new Date("2026-05-06T00:00:00.000Z"),
|
||||
updatedAt: new Date("2026-05-06T00:00:00.000Z"),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const root = createRoot(container);
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<MemoryRouter>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<Secrets />
|
||||
</QueryClientProvider>
|
||||
</MemoryRouter>,
|
||||
);
|
||||
});
|
||||
await flushReact();
|
||||
await flushReact();
|
||||
|
||||
const referencesButton = container.querySelector(
|
||||
'button[aria-label="View references for OPENAI_API_KEY"]',
|
||||
) as HTMLButtonElement | null;
|
||||
expect(referencesButton?.textContent).toBe("2");
|
||||
|
||||
await act(async () => {
|
||||
referencesButton?.click();
|
||||
});
|
||||
await flushReact();
|
||||
|
||||
expect(mockSecretsApi.usage).toHaveBeenCalledWith("secret-openai");
|
||||
expect(document.body.textContent).toContain("Secret references");
|
||||
expect(document.body.textContent).toContain("CodexCoder");
|
||||
expect(document.body.textContent).toContain("env.OPENAI_API_KEY");
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
});
|
||||
129
ui/src/pages/Secrets.test.ts
Normal file
129
ui/src/pages/Secrets.test.ts
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
// @vitest-environment jsdom
|
||||
|
||||
import { describe, expect, it } from "vitest";
|
||||
import type { SecretProviderDescriptor } from "@paperclipai/shared";
|
||||
import {
|
||||
getAwsManagedPathPreview,
|
||||
getCreateProviderBlockReason,
|
||||
getDefaultProviderConfigId,
|
||||
getProviderConfigBlockReason,
|
||||
} from "./Secrets";
|
||||
import type { SecretProviderHealthResponse } from "../api/secrets";
|
||||
|
||||
const awsProvider: SecretProviderDescriptor = {
|
||||
id: "aws_secrets_manager",
|
||||
label: "AWS Secrets Manager",
|
||||
requiresExternalRef: false,
|
||||
supportsManagedValues: true,
|
||||
supportsExternalReferences: true,
|
||||
configured: true,
|
||||
};
|
||||
|
||||
describe("Secrets page provider helpers", () => {
|
||||
it("previews the derived AWS managed path from provider health details", () => {
|
||||
const health: SecretProviderHealthResponse = {
|
||||
providers: [
|
||||
{
|
||||
provider: "aws_secrets_manager",
|
||||
status: "ok",
|
||||
message: "AWS Secrets Manager provider is configured",
|
||||
details: {
|
||||
prefix: "paperclip",
|
||||
deploymentId: "prod-us-1",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(
|
||||
getAwsManagedPathPreview({
|
||||
provider: awsProvider,
|
||||
health,
|
||||
companyId: "company-123",
|
||||
secretKeySource: "Anthropic API Key",
|
||||
}),
|
||||
).toBe("paperclip/prod-us-1/company-123/anthropic-api-key");
|
||||
});
|
||||
|
||||
it("blocks unconfigured providers before create submission", () => {
|
||||
expect(
|
||||
getCreateProviderBlockReason(
|
||||
{ ...awsProvider, configured: false },
|
||||
"managed",
|
||||
null,
|
||||
),
|
||||
).toBe("AWS Secrets Manager is not configured in this deployment.");
|
||||
});
|
||||
|
||||
it("uses provider health copy when an unconfigured provider reports missing bootstrap inputs", () => {
|
||||
const health: SecretProviderHealthResponse = {
|
||||
providers: [
|
||||
{
|
||||
provider: "aws_secrets_manager",
|
||||
status: "warn",
|
||||
message:
|
||||
"AWS Secrets Manager provider is not ready: missing PAPERCLIP_SECRETS_AWS_DEPLOYMENT_ID.",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
expect(
|
||||
getCreateProviderBlockReason(
|
||||
{ ...awsProvider, configured: false },
|
||||
"managed",
|
||||
health,
|
||||
),
|
||||
).toBe(
|
||||
"AWS Secrets Manager is not configured in this deployment. AWS Secrets Manager provider is not ready: missing PAPERCLIP_SECRETS_AWS_DEPLOYMENT_ID.",
|
||||
);
|
||||
});
|
||||
|
||||
it("blocks provider modes the backend does not support", () => {
|
||||
expect(
|
||||
getCreateProviderBlockReason(
|
||||
{
|
||||
id: "local_encrypted",
|
||||
label: "Local encrypted (default)",
|
||||
requiresExternalRef: false,
|
||||
supportsManagedValues: true,
|
||||
supportsExternalReferences: false,
|
||||
configured: true,
|
||||
},
|
||||
"external",
|
||||
null,
|
||||
),
|
||||
).toBe("Local encrypted (default) does not support linked external references.");
|
||||
});
|
||||
|
||||
it("chooses the ready default provider vault for a provider", () => {
|
||||
expect(
|
||||
getDefaultProviderConfigId(
|
||||
[
|
||||
{
|
||||
id: "draft",
|
||||
provider: "aws_secrets_manager",
|
||||
status: "disabled",
|
||||
isDefault: true,
|
||||
},
|
||||
{
|
||||
id: "prod",
|
||||
provider: "aws_secrets_manager",
|
||||
status: "ready",
|
||||
isDefault: true,
|
||||
},
|
||||
] as never,
|
||||
"aws_secrets_manager",
|
||||
),
|
||||
).toBe("prod");
|
||||
});
|
||||
|
||||
it("explains why coming-soon provider vaults cannot be selected", () => {
|
||||
expect(
|
||||
getProviderConfigBlockReason({
|
||||
id: "vault-draft",
|
||||
provider: "vault",
|
||||
status: "coming_soon",
|
||||
} as never),
|
||||
).toBe("This provider vault is saved as draft metadata only.");
|
||||
});
|
||||
});
|
||||
2155
ui/src/pages/Secrets.tsx
Normal file
2155
ui/src/pages/Secrets.tsx
Normal file
File diff suppressed because it is too large
Load diff
820
ui/src/pages/secrets/ImportFromVaultDialog.test.tsx
Normal file
820
ui/src/pages/secrets/ImportFromVaultDialog.test.tsx
Normal file
|
|
@ -0,0 +1,820 @@
|
|||
// @vitest-environment jsdom
|
||||
|
||||
import { act } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import type {
|
||||
CompanySecret,
|
||||
CompanySecretProviderConfig,
|
||||
RemoteSecretImportCandidate,
|
||||
RemoteSecretImportPreviewResult,
|
||||
RemoteSecretImportResult,
|
||||
} from "@paperclipai/shared";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { ApiError } from "../../api/client";
|
||||
|
||||
const mockSecretsApi = vi.hoisted(() => ({
|
||||
remoteImportPreview: vi.fn(),
|
||||
remoteImport: vi.fn(),
|
||||
}));
|
||||
|
||||
const mockPushToast = vi.hoisted(() => vi.fn());
|
||||
|
||||
vi.mock("../../api/secrets", () => ({
|
||||
secretsApi: mockSecretsApi,
|
||||
}));
|
||||
|
||||
vi.mock("../../context/ToastContext", () => ({
|
||||
useToastActions: () => ({
|
||||
pushToast: mockPushToast,
|
||||
dismissToast: vi.fn(),
|
||||
clearToasts: vi.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
import { ImportFromVaultDialog } from "./ImportFromVaultDialog";
|
||||
|
||||
const awsVault: CompanySecretProviderConfig = {
|
||||
id: "vault-aws",
|
||||
companyId: "company-1",
|
||||
provider: "aws_secrets_manager",
|
||||
displayName: "AWS production",
|
||||
status: "ready",
|
||||
isDefault: true,
|
||||
config: { region: "us-east-1" },
|
||||
healthStatus: null,
|
||||
healthCheckedAt: null,
|
||||
healthMessage: null,
|
||||
healthDetails: null,
|
||||
disabledAt: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: null,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
};
|
||||
|
||||
function makeCandidate(
|
||||
overrides: Partial<RemoteSecretImportCandidate> = {},
|
||||
): RemoteSecretImportCandidate {
|
||||
return {
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:prod/foo-AbCdEf",
|
||||
remoteName: "prod/foo",
|
||||
name: "prod/foo",
|
||||
key: "prod-foo",
|
||||
providerVersionRef: null,
|
||||
providerMetadata: { name: "prod/foo" },
|
||||
status: "ready",
|
||||
importable: true,
|
||||
conflicts: [],
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
function makePreview(
|
||||
candidates: RemoteSecretImportCandidate[],
|
||||
nextToken: string | null = null,
|
||||
): RemoteSecretImportPreviewResult {
|
||||
return {
|
||||
providerConfigId: awsVault.id,
|
||||
provider: "aws_secrets_manager",
|
||||
nextToken,
|
||||
candidates,
|
||||
};
|
||||
}
|
||||
|
||||
async function flush() {
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
await new Promise((resolve) => window.setTimeout(resolve, 0));
|
||||
});
|
||||
}
|
||||
|
||||
async function flushDebounce() {
|
||||
await act(async () => {
|
||||
await new Promise((resolve) => window.setTimeout(resolve, 300));
|
||||
});
|
||||
}
|
||||
|
||||
function makeWrapper() {
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { retry: false } },
|
||||
});
|
||||
return { queryClient };
|
||||
}
|
||||
|
||||
describe("ImportFromVaultDialog", () => {
|
||||
let container: HTMLDivElement;
|
||||
|
||||
beforeEach(() => {
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
container.remove();
|
||||
document.body.innerHTML = "";
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("loads candidates and selects rows, persisting through pagination", async () => {
|
||||
mockSecretsApi.remoteImportPreview
|
||||
.mockResolvedValueOnce(
|
||||
makePreview(
|
||||
[
|
||||
makeCandidate({
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:prod/stripe-ABC",
|
||||
remoteName: "prod/stripe",
|
||||
name: "prod/stripe",
|
||||
key: "prod-stripe",
|
||||
}),
|
||||
makeCandidate({
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:prod/openai-XYZ",
|
||||
remoteName: "prod/openai",
|
||||
name: "prod/openai",
|
||||
key: "prod-openai",
|
||||
}),
|
||||
],
|
||||
"page-2",
|
||||
),
|
||||
)
|
||||
.mockResolvedValueOnce(
|
||||
makePreview(
|
||||
[
|
||||
makeCandidate({
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:prod/sendgrid-Q9",
|
||||
remoteName: "prod/sendgrid",
|
||||
name: "prod/sendgrid",
|
||||
key: "prod-sendgrid",
|
||||
}),
|
||||
],
|
||||
null,
|
||||
),
|
||||
);
|
||||
|
||||
const { queryClient } = makeWrapper();
|
||||
const root = createRoot(container);
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ImportFromVaultDialog
|
||||
open
|
||||
onOpenChange={vi.fn()}
|
||||
companyId="company-1"
|
||||
providerConfigs={[awsVault]}
|
||||
existingSecrets={[]}
|
||||
/>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flush();
|
||||
await flush();
|
||||
|
||||
const tableBody = document.querySelector('[data-testid="vault-table-body"]');
|
||||
expect(tableBody).not.toBeNull();
|
||||
expect(document.body.textContent).toContain("prod/stripe");
|
||||
expect(document.body.textContent).toContain("prod/openai");
|
||||
|
||||
// Select stripe via row click
|
||||
const stripeRow = document.querySelector(
|
||||
'[data-testid="vault-row-arn:aws:secretsmanager:us-east-1:1:secret:prod/stripe-ABC"]',
|
||||
) as HTMLElement | null;
|
||||
expect(stripeRow).not.toBeNull();
|
||||
await act(async () => {
|
||||
stripeRow?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
await flush();
|
||||
expect(document.body.textContent).toContain("1 selected");
|
||||
|
||||
// Load more page
|
||||
const loadMore = document.querySelector('[data-testid="vault-load-more"]') as HTMLButtonElement | null;
|
||||
expect(loadMore).not.toBeNull();
|
||||
await act(async () => {
|
||||
loadMore!.click();
|
||||
});
|
||||
await flush();
|
||||
await flush();
|
||||
|
||||
expect(document.body.textContent).toContain("prod/sendgrid");
|
||||
// Selection persisted through pagination.
|
||||
expect(document.body.textContent).toContain("1 selected");
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("disables checkboxes for already-imported (duplicate) rows and shows a conflict badge for conflicts", async () => {
|
||||
mockSecretsApi.remoteImportPreview.mockResolvedValueOnce(
|
||||
makePreview([
|
||||
makeCandidate({
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:prod/sendgrid-Q9",
|
||||
remoteName: "prod/sendgrid",
|
||||
name: "prod/sendgrid",
|
||||
key: "prod-sendgrid",
|
||||
status: "duplicate",
|
||||
importable: false,
|
||||
conflicts: [
|
||||
{ type: "exact_reference", message: "Already imported", existingSecretId: "secret-sg" },
|
||||
],
|
||||
}),
|
||||
makeCandidate({
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:prod/openai-XYZ",
|
||||
remoteName: "prod/openai",
|
||||
name: "prod/openai",
|
||||
key: "prod-openai",
|
||||
status: "conflict",
|
||||
importable: true,
|
||||
conflicts: [
|
||||
{ type: "name", message: "Name already in use" },
|
||||
],
|
||||
}),
|
||||
]),
|
||||
);
|
||||
|
||||
const { queryClient } = makeWrapper();
|
||||
const root = createRoot(container);
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ImportFromVaultDialog
|
||||
open
|
||||
onOpenChange={vi.fn()}
|
||||
companyId="company-1"
|
||||
providerConfigs={[awsVault]}
|
||||
existingSecrets={[]}
|
||||
/>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flush();
|
||||
await flush();
|
||||
|
||||
const duplicateRow = document.querySelector(
|
||||
'[data-testid="vault-row-arn:aws:secretsmanager:us-east-1:1:secret:prod/sendgrid-Q9"]',
|
||||
);
|
||||
expect(duplicateRow?.getAttribute("data-row-state")).toBe("duplicate");
|
||||
const duplicateCheckbox = duplicateRow?.querySelector(
|
||||
'button[role="checkbox"]',
|
||||
) as HTMLButtonElement | null;
|
||||
expect(duplicateCheckbox?.getAttribute("data-disabled")).not.toBeNull();
|
||||
|
||||
expect(document.body.textContent).toContain("Conflict");
|
||||
expect(document.body.textContent).toContain("Name already in use");
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("blocks import when a review row collides with an existing Paperclip secret", async () => {
|
||||
const conflictCandidate = makeCandidate({
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:prod/openai-XYZ",
|
||||
remoteName: "prod/openai",
|
||||
name: "OPENAI_API_KEY",
|
||||
key: "openai_api_key",
|
||||
status: "conflict",
|
||||
conflicts: [{ type: "key", message: "Key already in use" }],
|
||||
});
|
||||
mockSecretsApi.remoteImportPreview.mockResolvedValueOnce(
|
||||
makePreview([conflictCandidate]),
|
||||
);
|
||||
|
||||
const existing: CompanySecret[] = [
|
||||
{
|
||||
id: "secret-existing",
|
||||
companyId: "company-1",
|
||||
key: "openai_api_key",
|
||||
name: "OPENAI_API_KEY",
|
||||
provider: "aws_secrets_manager",
|
||||
status: "active",
|
||||
managedMode: "external_reference",
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:other-XYZ",
|
||||
providerConfigId: awsVault.id,
|
||||
providerMetadata: null,
|
||||
latestVersion: 1,
|
||||
description: null,
|
||||
lastResolvedAt: null,
|
||||
lastRotatedAt: null,
|
||||
deletedAt: null,
|
||||
createdByAgentId: null,
|
||||
createdByUserId: null,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
},
|
||||
];
|
||||
|
||||
const { queryClient } = makeWrapper();
|
||||
const root = createRoot(container);
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ImportFromVaultDialog
|
||||
open
|
||||
onOpenChange={vi.fn()}
|
||||
companyId="company-1"
|
||||
providerConfigs={[awsVault]}
|
||||
existingSecrets={existing}
|
||||
/>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flush();
|
||||
await flush();
|
||||
|
||||
// Select the conflict row
|
||||
const row = document.querySelector(
|
||||
'[data-testid="vault-row-arn:aws:secretsmanager:us-east-1:1:secret:prod/openai-XYZ"]',
|
||||
) as HTMLElement | null;
|
||||
await act(async () => {
|
||||
row?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
await flush();
|
||||
|
||||
// Click "Continue → Review" button.
|
||||
const continueBtn = Array.from(document.querySelectorAll("button")).find(
|
||||
(btn) => btn.textContent?.includes("Continue"),
|
||||
);
|
||||
expect(continueBtn).toBeTruthy();
|
||||
await act(async () => {
|
||||
continueBtn!.click();
|
||||
});
|
||||
await flush();
|
||||
|
||||
// Review step: error message visible, Import button disabled.
|
||||
expect(document.body.textContent?.toLowerCase()).toContain("a paperclip secret already uses this");
|
||||
|
||||
const importBtn = Array.from(document.querySelectorAll("button")).find(
|
||||
(btn) => btn.textContent?.startsWith("Import "),
|
||||
) as HTMLButtonElement | undefined;
|
||||
expect(importBtn).toBeTruthy();
|
||||
expect(importBtn?.disabled).toBe(true);
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("requires lowercase operator-entered keys during review", async () => {
|
||||
const externalRef = "arn:aws:secretsmanager:us-east-1:1:secret:prod/openai-XYZ";
|
||||
mockSecretsApi.remoteImportPreview.mockResolvedValueOnce(
|
||||
makePreview([
|
||||
makeCandidate({
|
||||
externalRef,
|
||||
remoteName: "prod/openai",
|
||||
name: "OpenAI API key",
|
||||
key: "openai-api-key",
|
||||
}),
|
||||
]),
|
||||
);
|
||||
|
||||
const { queryClient } = makeWrapper();
|
||||
const root = createRoot(container);
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ImportFromVaultDialog
|
||||
open
|
||||
onOpenChange={vi.fn()}
|
||||
companyId="company-1"
|
||||
providerConfigs={[awsVault]}
|
||||
existingSecrets={[]}
|
||||
/>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flush();
|
||||
await flush();
|
||||
|
||||
const row = document.querySelector(
|
||||
`[data-testid="vault-row-${externalRef}"]`,
|
||||
) as HTMLElement | null;
|
||||
await act(async () => {
|
||||
row?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
await flush();
|
||||
|
||||
const continueBtn = Array.from(document.querySelectorAll("button")).find(
|
||||
(btn) => btn.textContent?.includes("Continue"),
|
||||
);
|
||||
await act(async () => {
|
||||
continueBtn!.click();
|
||||
});
|
||||
await flush();
|
||||
|
||||
const keyInput = document.querySelector(
|
||||
`[data-testid="review-key-${externalRef}"]`,
|
||||
) as HTMLInputElement | null;
|
||||
const valueSetter = Object.getOwnPropertyDescriptor(
|
||||
window.HTMLInputElement.prototype,
|
||||
"value",
|
||||
)?.set;
|
||||
await act(async () => {
|
||||
valueSetter?.call(keyInput, "MY_KEY");
|
||||
keyInput!.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
});
|
||||
await flush();
|
||||
|
||||
expect(document.body.textContent).toContain("lowercase letters");
|
||||
const importBtn = Array.from(document.querySelectorAll("button")).find(
|
||||
(btn) => btn.textContent?.startsWith("Import "),
|
||||
) as HTMLButtonElement | undefined;
|
||||
expect(importBtn?.disabled).toBe(true);
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("submits the operator-entered review description", async () => {
|
||||
const externalRef = "arn:aws:secretsmanager:us-east-1:1:secret:prod/openai-XYZ";
|
||||
mockSecretsApi.remoteImportPreview.mockResolvedValueOnce(
|
||||
makePreview([
|
||||
makeCandidate({
|
||||
externalRef,
|
||||
remoteName: "prod/openai",
|
||||
name: "OpenAI API key",
|
||||
key: "openai-api-key",
|
||||
providerMetadata: {
|
||||
description: "Raw AWS description should not seed the review field",
|
||||
},
|
||||
}),
|
||||
]),
|
||||
);
|
||||
mockSecretsApi.remoteImport.mockResolvedValueOnce({
|
||||
providerConfigId: awsVault.id,
|
||||
provider: "aws_secrets_manager",
|
||||
importedCount: 1,
|
||||
skippedCount: 0,
|
||||
errorCount: 0,
|
||||
results: [
|
||||
{
|
||||
externalRef,
|
||||
name: "OpenAI API key",
|
||||
key: "openai-api-key",
|
||||
status: "imported",
|
||||
reason: null,
|
||||
secretId: "secret-openai",
|
||||
conflicts: [],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const { queryClient } = makeWrapper();
|
||||
const root = createRoot(container);
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ImportFromVaultDialog
|
||||
open
|
||||
onOpenChange={vi.fn()}
|
||||
companyId="company-1"
|
||||
providerConfigs={[awsVault]}
|
||||
existingSecrets={[]}
|
||||
/>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flush();
|
||||
await flush();
|
||||
|
||||
const row = document.querySelector(
|
||||
`[data-testid="vault-row-${externalRef}"]`,
|
||||
) as HTMLElement | null;
|
||||
await act(async () => {
|
||||
row?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
await flush();
|
||||
|
||||
const continueBtn = Array.from(document.querySelectorAll("button")).find(
|
||||
(btn) => btn.textContent?.includes("Continue"),
|
||||
);
|
||||
await act(async () => {
|
||||
continueBtn!.click();
|
||||
});
|
||||
await flush();
|
||||
|
||||
const descriptionInput = document.querySelector(
|
||||
`[data-testid="review-description-${externalRef}"]`,
|
||||
) as HTMLInputElement | null;
|
||||
expect(descriptionInput?.value).toBe("");
|
||||
const valueSetter = Object.getOwnPropertyDescriptor(
|
||||
window.HTMLInputElement.prototype,
|
||||
"value",
|
||||
)?.set;
|
||||
await act(async () => {
|
||||
valueSetter?.call(descriptionInput, "Operator-entered OpenAI key");
|
||||
descriptionInput!.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
});
|
||||
await flush();
|
||||
|
||||
const importBtn = Array.from(document.querySelectorAll("button")).find(
|
||||
(btn) => btn.textContent?.startsWith("Import "),
|
||||
) as HTMLButtonElement | undefined;
|
||||
await act(async () => {
|
||||
importBtn!.click();
|
||||
});
|
||||
await flush();
|
||||
await flush();
|
||||
|
||||
expect(mockSecretsApi.remoteImport).toHaveBeenCalledWith("company-1", {
|
||||
providerConfigId: awsVault.id,
|
||||
secrets: [
|
||||
expect.objectContaining({
|
||||
externalRef,
|
||||
description: "Operator-entered OpenAI key",
|
||||
providerMetadata: null,
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("renders mixed import results (created/skipped/failed) and shows error reason", async () => {
|
||||
mockSecretsApi.remoteImportPreview.mockResolvedValueOnce(
|
||||
makePreview([
|
||||
makeCandidate({
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:a-AAA",
|
||||
remoteName: "alpha",
|
||||
name: "alpha",
|
||||
key: "alpha",
|
||||
}),
|
||||
makeCandidate({
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:b-BBB",
|
||||
remoteName: "beta",
|
||||
name: "beta",
|
||||
key: "beta",
|
||||
}),
|
||||
makeCandidate({
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:c-CCC",
|
||||
remoteName: "gamma",
|
||||
name: "gamma",
|
||||
key: "gamma",
|
||||
}),
|
||||
]),
|
||||
);
|
||||
|
||||
const result: RemoteSecretImportResult = {
|
||||
providerConfigId: awsVault.id,
|
||||
provider: "aws_secrets_manager",
|
||||
importedCount: 1,
|
||||
skippedCount: 1,
|
||||
errorCount: 1,
|
||||
results: [
|
||||
{
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:a-AAA",
|
||||
name: "alpha",
|
||||
key: "alpha",
|
||||
status: "imported",
|
||||
reason: null,
|
||||
secretId: "secret-alpha",
|
||||
conflicts: [],
|
||||
},
|
||||
{
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:b-BBB",
|
||||
name: "beta",
|
||||
key: "beta",
|
||||
status: "skipped",
|
||||
reason: "exact reference already imported",
|
||||
secretId: null,
|
||||
conflicts: [
|
||||
{ type: "exact_reference", message: "exact reference already imported" },
|
||||
],
|
||||
},
|
||||
{
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:c-CCC",
|
||||
name: "gamma",
|
||||
key: "gamma",
|
||||
status: "error",
|
||||
reason: "AWS Secrets Manager denied the request. Check IAM permissions for this provider vault.",
|
||||
secretId: null,
|
||||
conflicts: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
mockSecretsApi.remoteImport.mockResolvedValueOnce(result);
|
||||
|
||||
const { queryClient } = makeWrapper();
|
||||
const root = createRoot(container);
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ImportFromVaultDialog
|
||||
open
|
||||
onOpenChange={vi.fn()}
|
||||
companyId="company-1"
|
||||
providerConfigs={[awsVault]}
|
||||
existingSecrets={[]}
|
||||
/>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flush();
|
||||
await flush();
|
||||
|
||||
// Select all loaded
|
||||
const headerCheckbox = document.querySelector(
|
||||
'[data-testid="vault-table-body"]',
|
||||
)?.parentElement?.querySelector('thead button[role="checkbox"]') as HTMLButtonElement | null;
|
||||
expect(headerCheckbox).toBeTruthy();
|
||||
await act(async () => {
|
||||
headerCheckbox!.click();
|
||||
});
|
||||
await flush();
|
||||
|
||||
// Continue
|
||||
const continueBtn = Array.from(document.querySelectorAll("button")).find(
|
||||
(btn) => btn.textContent?.includes("Continue"),
|
||||
);
|
||||
await act(async () => {
|
||||
continueBtn!.click();
|
||||
});
|
||||
await flush();
|
||||
|
||||
// Import
|
||||
const importBtn = Array.from(document.querySelectorAll("button")).find(
|
||||
(btn) => btn.textContent?.startsWith("Import "),
|
||||
) as HTMLButtonElement | undefined;
|
||||
expect(importBtn).toBeTruthy();
|
||||
await act(async () => {
|
||||
importBtn!.click();
|
||||
});
|
||||
await flush();
|
||||
await flush();
|
||||
|
||||
expect(mockSecretsApi.remoteImport).toHaveBeenCalledTimes(1);
|
||||
expect(document.body.textContent).toContain("Import complete");
|
||||
expect(document.body.textContent).toContain("1 created");
|
||||
expect(document.body.textContent).toContain("1 skipped");
|
||||
expect(document.body.textContent).toContain("1 failed");
|
||||
expect(document.body.textContent).toContain("AWS Secrets Manager denied the request");
|
||||
expect(document.body.textContent).not.toContain("AccessDeniedException");
|
||||
expect(document.body.textContent).not.toContain("123456789012");
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows an empty state when no AWS vault is configured", async () => {
|
||||
const { queryClient } = makeWrapper();
|
||||
const root = createRoot(container);
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ImportFromVaultDialog
|
||||
open
|
||||
onOpenChange={vi.fn()}
|
||||
companyId="company-1"
|
||||
providerConfigs={[]}
|
||||
existingSecrets={[]}
|
||||
onManageVaults={vi.fn()}
|
||||
/>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flush();
|
||||
|
||||
expect(document.querySelector('[data-testid="select-empty-vaults"]')).not.toBeNull();
|
||||
expect(mockSecretsApi.remoteImportPreview).not.toHaveBeenCalled();
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("shows a permission-error banner when AWS denies ListSecrets", async () => {
|
||||
const error = Object.assign(new Error("AccessDeniedException"), {
|
||||
name: "ApiError",
|
||||
status: 403,
|
||||
body: null,
|
||||
});
|
||||
mockSecretsApi.remoteImportPreview.mockRejectedValueOnce(error);
|
||||
|
||||
const { queryClient } = makeWrapper();
|
||||
const root = createRoot(container);
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ImportFromVaultDialog
|
||||
open
|
||||
onOpenChange={vi.fn()}
|
||||
companyId="company-1"
|
||||
providerConfigs={[awsVault]}
|
||||
existingSecrets={[]}
|
||||
/>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flush();
|
||||
await flush();
|
||||
|
||||
const banner = document.querySelector('[data-testid="preview-error-banner"]');
|
||||
expect(banner).not.toBeNull();
|
||||
expect(banner?.textContent).toContain("Could not load remote secrets");
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("renders sanitized preview provider errors without raw AWS exception text", async () => {
|
||||
const rawProviderMessage =
|
||||
"AccessDeniedException: User: arn:aws:sts::123456789012:assumed-role/prod/Paperclip is not authorized";
|
||||
mockSecretsApi.remoteImportPreview.mockRejectedValueOnce(
|
||||
new ApiError(
|
||||
"AWS Secrets Manager denied the request. Check IAM permissions for this provider vault.",
|
||||
403,
|
||||
{ error: "AWS Secrets Manager denied the request. Check IAM permissions for this provider vault.", details: { code: "access_denied" } },
|
||||
),
|
||||
);
|
||||
|
||||
const { queryClient } = makeWrapper();
|
||||
const root = createRoot(container);
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ImportFromVaultDialog
|
||||
open
|
||||
onOpenChange={vi.fn()}
|
||||
companyId="company-1"
|
||||
providerConfigs={[awsVault]}
|
||||
existingSecrets={[]}
|
||||
/>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flush();
|
||||
await flush();
|
||||
|
||||
const banner = document.querySelector('[data-testid="preview-error-banner"]');
|
||||
expect(banner).not.toBeNull();
|
||||
expect(banner?.textContent).toContain("AWS denied list access");
|
||||
expect(banner?.textContent).toContain("missing secretsmanager:ListSecrets");
|
||||
expect(banner?.textContent).not.toContain(rawProviderMessage);
|
||||
expect(banner?.textContent).not.toContain("arn:aws");
|
||||
expect(banner?.textContent).not.toContain("123456789012");
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("debounces search and uses the new query for the next preview", async () => {
|
||||
mockSecretsApi.remoteImportPreview
|
||||
.mockResolvedValueOnce(makePreview([makeCandidate()]))
|
||||
.mockResolvedValueOnce(makePreview([
|
||||
makeCandidate({
|
||||
externalRef: "arn:aws:secretsmanager:us-east-1:1:secret:stripe-XYZ",
|
||||
remoteName: "stripe",
|
||||
name: "stripe",
|
||||
key: "stripe",
|
||||
}),
|
||||
]));
|
||||
|
||||
const { queryClient } = makeWrapper();
|
||||
const root = createRoot(container);
|
||||
await act(async () => {
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ImportFromVaultDialog
|
||||
open
|
||||
onOpenChange={vi.fn()}
|
||||
companyId="company-1"
|
||||
providerConfigs={[awsVault]}
|
||||
existingSecrets={[]}
|
||||
/>
|
||||
</QueryClientProvider>,
|
||||
);
|
||||
});
|
||||
await flush();
|
||||
await flush();
|
||||
|
||||
const search = document.querySelector('[data-testid="vault-search"]') as HTMLInputElement;
|
||||
expect(search).not.toBeNull();
|
||||
const valueSetter = Object.getOwnPropertyDescriptor(
|
||||
window.HTMLInputElement.prototype,
|
||||
"value",
|
||||
)?.set;
|
||||
await act(async () => {
|
||||
search.focus();
|
||||
valueSetter?.call(search, "stripe");
|
||||
search.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
});
|
||||
await flushDebounce();
|
||||
await flush();
|
||||
|
||||
expect(mockSecretsApi.remoteImportPreview).toHaveBeenCalledTimes(2);
|
||||
const lastCall = mockSecretsApi.remoteImportPreview.mock.calls.at(-1);
|
||||
expect(lastCall?.[1]).toMatchObject({ query: "stripe" });
|
||||
|
||||
await act(async () => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
});
|
||||
1477
ui/src/pages/secrets/ImportFromVaultDialog.tsx
Normal file
1477
ui/src/pages/secrets/ImportFromVaultDialog.tsx
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue