mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-15 02:20:38 +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
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue