diff --git a/ui/src/pages/Secrets.render.test.tsx b/ui/src/pages/Secrets.render.test.tsx index a983b62932..c42a0d6680 100644 --- a/ui/src/pages/Secrets.render.test.tsx +++ b/ui/src/pages/Secrets.render.test.tsx @@ -52,6 +52,12 @@ const mockSecretsApi = vi.hoisted(() => ({ removeMyUserSecret: vi.fn(), })); +const mockAgentsApi = vi.hoisted(() => ({ + list: vi.fn(), + get: vi.fn(), + update: vi.fn(), +})); + const mockSetBreadcrumbs = vi.hoisted(() => vi.fn()); const mockPushToast = vi.hoisted(() => vi.fn()); @@ -59,6 +65,10 @@ vi.mock("../api/secrets", () => ({ secretsApi: mockSecretsApi, })); +vi.mock("../api/agents", () => ({ + agentsApi: mockAgentsApi, +})); + vi.mock("../context/CompanyContext", () => ({ useCompany: () => ({ selectedCompanyId: "company-1", @@ -346,6 +356,7 @@ describe("Secrets page layout", () => { mockSecretsApi.listUserSecretDefinitions.mockResolvedValue([]); mockSecretsApi.userSecretDefinitionCoverage.mockResolvedValue(userSecretCoverage); mockSecretsApi.listMyUserSecrets.mockResolvedValue([]); + mockAgentsApi.list.mockResolvedValue([]); }); afterEach(() => { @@ -673,6 +684,18 @@ describe("Secrets page layout", () => { }); await flushReact(); + const companyKeyInput = document.getElementById("new-secret-key") as HTMLInputElement; + expect(companyKeyInput.readOnly).toBe(true); + + const editKeyButton = Array.from(document.body.querySelectorAll("button")).find( + (button) => button.textContent?.trim() === "Edit", + ) as HTMLButtonElement | undefined; + await act(async () => { + editKeyButton?.click(); + }); + await flushReact(); + expect(companyKeyInput.readOnly).toBe(false); + const eachUserButton = Array.from(document.body.querySelectorAll("button")).find( (button) => button.textContent?.trim() === "Each user", ) as HTMLButtonElement | undefined; @@ -686,6 +709,12 @@ describe("Secrets page layout", () => { const nameInput = document.getElementById("new-secret-name") as HTMLInputElement; const keyInput = document.getElementById("new-secret-key") as HTMLInputElement; const usageGuidance = document.getElementById("new-secret-usage-guidance") as HTMLTextAreaElement; + expect(keyInput.readOnly).toBe(true); + expect( + Array.from(document.body.querySelectorAll("button")).some( + (button) => button.textContent?.trim() === "Edit", + ), + ).toBe(true); expect(document.getElementById("new-secret-provider")).toBeNull(); expect(document.getElementById("new-secret-vault")).toBeNull(); expect(document.getElementById("new-secret-value")).toBeNull(); @@ -1191,6 +1220,185 @@ describe("Secrets page layout", () => { }); }); + it("auto-generates the key from the name and keeps it read-only until Edit", async () => { + const root = createRoot(container); + const queryClient = new QueryClient({ + defaultOptions: { queries: { retry: false } }, + }); + + await act(async () => { + root.render( + + + + + , + ); + }); + await flushReact(); + await flushReact(); + + const newSecretButton = Array.from(container.querySelectorAll("button")).find( + (button) => button.textContent?.includes("New secret"), + ) as HTMLButtonElement | undefined; + await act(async () => { + newSecretButton?.click(); + }); + await flushReact(); + + const nameInput = document.getElementById("new-secret-name") as HTMLInputElement; + const keyInput = document.getElementById("new-secret-key") as HTMLInputElement; + const valueTextarea = document.getElementById("new-secret-value") as HTMLTextAreaElement; + + // Path-style placeholder and value directly after name for natural tab order. + expect(nameInput.placeholder).toBe("/dev/foo/bar"); + expect( + nameInput.compareDocumentPosition(valueTextarea) & Node.DOCUMENT_POSITION_FOLLOWING, + ).toBeTruthy(); + expect( + valueTextarea.compareDocumentPosition(keyInput) & Node.DOCUMENT_POSITION_FOLLOWING, + ).toBeTruthy(); + + expect(keyInput.readOnly).toBe(true); + await act(async () => { + setInputValue(nameInput, "OpenAI API Key"); + }); + await flushReact(); + expect(keyInput.value).toBe("openai-api-key"); + + const editKeyButton = Array.from(document.body.querySelectorAll("button")).find( + (button) => button.textContent?.trim() === "Edit", + ) as HTMLButtonElement | undefined; + expect(editKeyButton).toBeDefined(); + await act(async () => { + editKeyButton?.click(); + }); + await flushReact(); + + expect((document.getElementById("new-secret-key") as HTMLInputElement).readOnly).toBe(false); + + await act(async () => { + setInputValue(document.getElementById("new-secret-key") as HTMLInputElement, "custom-key"); + setInputValue(nameInput, "OpenAI API Key v2"); + }); + await flushReact(); + + // Once edited, the key stops following the name. + expect((document.getElementById("new-secret-key") as HTMLInputElement).value).toBe("custom-key"); + + await act(async () => { + root.unmount(); + }); + }); + + it("grants and revokes agent access from the secret detail sheet", async () => { + mockSecretsApi.list.mockResolvedValue([makeCompanySecret()]); + mockSecretsApi.usage.mockResolvedValue({ secretId: "secret-openai", bindings: [] }); + mockSecretsApi.accessEvents.mockResolvedValue([]); + const coder = { + id: "agent-coder", + name: "CodexCoder", + status: "active", + adapterConfig: {}, + }; + const reviewer = { + id: "agent-reviewer", + name: "Reviewer", + status: "active", + adapterConfig: { + env: { OPENAI_API_KEY: { type: "secret_ref", secretId: "secret-openai" } }, + }, + }; + mockAgentsApi.list.mockResolvedValue([coder, reviewer]); + mockAgentsApi.get.mockImplementation(async (id: string) => + id === "agent-coder" ? coder : reviewer, + ); + mockAgentsApi.update.mockImplementation(async (id: string) => + id === "agent-coder" ? coder : reviewer, + ); + + const root = createRoot(container); + const queryClient = new QueryClient({ + defaultOptions: { queries: { retry: false } }, + }); + + await act(async () => { + root.render( + + + + + , + ); + }); + await flushReact(); + await flushReact(); + + const companyRow = Array.from(container.querySelectorAll("[role='row']")).find( + (row) => row.textContent?.includes("OPENAI_API_KEY"), + ) as HTMLElement | undefined; + await act(async () => { + companyRow?.click(); + }); + await flushReact(); + await flushReact(); + + // Existing access is listed right in the Details tab. + expect(document.body.textContent).toContain("Agent access"); + expect(document.body.textContent).toContain("Reviewer"); + + const agentSelect = document.getElementById("agent-access-agent") as HTMLSelectElement; + const envKeyInput = document.getElementById("agent-access-env-key") as HTMLInputElement; + expect(envKeyInput.value).toBe("OPENAI_API_KEY"); + // Agents that already have access are not offered again. + expect(Array.from(agentSelect.options).map((option) => option.textContent)).not.toContain("Reviewer"); + + await act(async () => { + setSelectValue(agentSelect, "agent-coder"); + }); + await flushReact(); + + const addButton = Array.from(document.body.querySelectorAll("button")).find( + (button) => button.textContent?.trim() === "Add", + ) as HTMLButtonElement | undefined; + await act(async () => { + addButton?.click(); + }); + await flushReact(); + await flushReact(); + + expect(mockAgentsApi.update).toHaveBeenCalledWith( + "agent-coder", + { + adapterConfig: { + env: { OPENAI_API_KEY: { type: "secret_ref", secretId: "secret-openai" } }, + }, + replaceAdapterConfig: true, + }, + "company-1", + ); + + const revokeButton = document.body.querySelector( + 'button[aria-label="Remove access for Reviewer"]', + ) as HTMLButtonElement | null; + expect(revokeButton).not.toBeNull(); + await act(async () => { + revokeButton?.click(); + }); + await flushReact(); + await flushReact(); + + expect(mockAgentsApi.update).toHaveBeenCalledWith( + "agent-reviewer", + { adapterConfig: { env: {} }, replaceAdapterConfig: true }, + "company-1", + ); + + await act(async () => { + root.unmount(); + }); + }); + it("shows an empty AWS discovery result without blocking manual entry", async () => { mockSecretsApi.providerConfigDiscoveryPreview.mockResolvedValueOnce( makeDiscoveryPreview({ candidates: [], sampledSecretCount: 0 }), diff --git a/ui/src/pages/Secrets.tsx b/ui/src/pages/Secrets.tsx index c3beceea05..7463862d57 100644 --- a/ui/src/pages/Secrets.tsx +++ b/ui/src/pages/Secrets.tsx @@ -58,6 +58,8 @@ import { } from "../api/secrets"; import { ApiError } from "../api/client"; import { accessApi, type CompanyUserDirectoryEntry } from "../api/access"; +import { agentsApi } from "../api/agents"; +import { envKeyFromSecretName } from "../components/environment-variables-editor/model"; import { queryKeys } from "../lib/queryKeys"; import { EmptyState } from "../components/EmptyState"; import { Button } from "@/components/ui/button"; @@ -615,6 +617,7 @@ export function Secrets() { const [createMode, setCreateMode] = useState("managed"); const [editingDefinition, setEditingDefinition] = useState(null); const [createKeyDirty, setCreateKeyDirty] = useState(false); + const [createKeyEditable, setCreateKeyEditable] = useState(false); const [createForm, setCreateForm] = useState({ name: "", key: "", @@ -712,6 +715,14 @@ export function Secrets() { () => userDefinitions.find((definition) => definition.id === selectedDefinitionId) ?? null, [selectedDefinitionId, userDefinitions], ); + const selectedSecretAccessReference = useMemo( + () => selectedSecret ? { kind: "company", secret: selectedSecret } : null, + [selectedSecret], + ); + const selectedDefinitionAccessReference = useMemo( + () => selectedDefinition ? { kind: "user", definition: selectedDefinition } : null, + [selectedDefinition], + ); const selectedDefinitionMyEntry = useMemo(() => { if (!selectedDefinition) return null; return myUserSecrets.find((entry) => entry.definition.id === selectedDefinition.id) ?? { @@ -845,6 +856,7 @@ export function Secrets() { setSecretValueProvider("company"); setCreateMode("managed"); setCreateKeyDirty(false); + setCreateKeyEditable(false); setCreateError(null); setCreateForm({ name: "", @@ -864,6 +876,7 @@ export function Secrets() { setSecretValueProvider("user"); setCreateMode("managed"); setCreateKeyDirty(true); + setCreateKeyEditable(false); setCreateError(null); setCreateForm({ name: definition.name, @@ -933,6 +946,7 @@ export function Secrets() { setEditingDefinition(null); setSecretValueProvider("company"); setCreateKeyDirty(false); + setCreateKeyEditable(false); setCreateForm({ name: "", key: "", @@ -1835,12 +1849,18 @@ export function Secrets() {
- setSecretDetailTab("usage")} - /> +
+ + setSecretDetailTab("usage")} + /> +
@@ -1968,11 +1988,17 @@ export function Secrets() {
- setSecretDetailTab("coverage")} - /> +
+ + setSecretDetailTab("coverage")} + /> +
-
-
-
- - { - const name = event.target.value; +
+ {!editingDefinition ? ( +
+

Who provides the value?

+ { + const next = value as SecretValueProvider; + setSecretValueProvider(next); + setCreateKeyEditable(false); setCreateForm((current) => ({ ...current, - name, key: createKeyDirty ? current.key - : secretValueProvider === "user" - ? normalizeUserSecretKeyForPreview(name) - : normalizeSecretKeyForPreview(name), + : next === "user" + ? normalizeUserSecretKeyForPreview(current.name) + : normalizeSecretKeyForPreview(current.name), })); }} - placeholder={secretValueProvider === "user" ? "Personal GitHub token" : "OPENAI_API_KEY"} - autoFocus - /> -
-
- - { - setCreateKeyDirty(true); - setCreateForm((current) => ({ ...current, key: event.target.value })); - }} - placeholder={secretValueProvider === "user" ? "PERSONAL_GH_TOKEN" : "auto from name"} - disabled={Boolean(editingDefinition)} - className={secretValueProvider === "user" ? "font-mono text-sm" : undefined} - /> -

- {secretValueProvider === "user" - ? editingDefinition - ? "Stable env binding key. Cannot be changed." - : "Env-style key used by user-secret bindings." - : "Shared secret keys keep lowercase dash normalization."} + > + + Company + Each user + + +

+ Company stores one shared value. Each user lets every member supply their own value under My secrets.

+ ) : null} + + {secretValueProvider === "company" && !editingDefinition ? ( + setCreateMode(value as CreateMode)}> + + Managed value + External reference + + + ) : null} + +
+ + { + const name = event.target.value; + setCreateForm((current) => ({ + ...current, + name, + key: createKeyDirty + ? current.key + : secretValueProvider === "user" + ? normalizeUserSecretKeyForPreview(name) + : normalizeSecretKeyForPreview(name), + })); + }} + placeholder={secretValueProvider === "user" ? "Personal GitHub token" : "/dev/foo/bar"} + autoFocus + />
+ + {secretValueProvider === "company" && createMode === "managed" ? ( +
+ +