fix(e2e): configure preview keys through credential dialogs

e2e/cases/ui/preview-credential-dialog.spec.ts

@@ -0,0 +1,91 @@
+import { expect, test } from "@playwright/test";
+
+import {
+  CONSOLE_FIXTURE_IDS,
+  fulfillJson,
+  getOperationName,
+  installConsoleFixtures,
+  parseGraphQLRequestBody,
+} from "../../lib/console-fixtures";
+import { configureProviderCompanyKey } from "../../lib/setup-agent";
+
+for (const existingDefault of [false, true]) {
+  test(`Preview credential helper saves its selected key through the dialog (existing default: ${existingDefault})`, async ({
+    page,
+  }) => {
+    test.setTimeout(30_000);
+    page.setDefaultTimeout(5_000);
+    await installConsoleFixtures(page, { locale: "en" });
+    const credentials: Record<string, unknown>[] = existingDefault
+      ? [
+          {
+            apiBase: null,
+            id: "01J00000000000000000000602",
+            isDefault: true,
+            maskedApiKey: "fixture-old-key",
+            modelProtocol: null,
+            models: null,
+            name: "Existing default",
+            projectId: CONSOLE_FIXTURE_IDS.projectId,
+            vendorId: "openai",
+          },
+        ]
+      : [];
+    let defaultWrites = 0;
+    const savedInputs: unknown[] = [];
+    await page.route("**/api/graphql", async (route) => {
+      const body = parseGraphQLRequestBody(route.request().postData());
+      const operation = getOperationName(body);
+      if (operation === "VendorCredentialList") {
+        await fulfillJson(route, { vendorCredentialList: credentials });
+        return;
+      }
+      if (operation === "CreateVendorCredential") {
+        savedInputs.push(body.variables?.["input"]);
+        const credential = {
+          apiBase: null,
+          id: "01J00000000000000000000601",
+          isDefault: !existingDefault,
+          maskedApiKey: "fixture-key",
+          modelProtocol: null,
+          models: null,
+          name: "Preview smoke dialog-fixture",
+          projectId: CONSOLE_FIXTURE_IDS.projectId,
+          vendorId: "openai",
+        };
+        credentials.push(credential);
+        await fulfillJson(route, { createVendorCredential: credential });
+        return;
+      }
+      if (operation === "SetDefaultVendorCredential") {
+        defaultWrites += 1;
+        for (const credential of credentials)
+          credential["isDefault"] = credential["id"] === "01J00000000000000000000601";
+        await fulfillJson(route, {
+          setDefaultVendorCredential: credentials.find((credential) => credential["isDefault"]),
+        });
+        return;
+      }
+      await route.fallback();
+    });
+    await configureProviderCompanyKey(page, {
+      apiKey: "fixture-not-a-real-key",
+      providerId: "openai",
+      runId: "dialog-fixture",
+    });
+    expect(defaultWrites).toBe(existingDefault ? 1 : 0);
+    expect(
+      credentials.find((credential) => credential["id"] === "01J00000000000000000000601")?.[
+        "isDefault"
+      ],
+    ).toBe(true);
+    expect(savedInputs).toEqual([
+      expect.objectContaining({
+        apiKey: "fixture-not-a-real-key",
+        vendorId: "openai",
+        name: "Preview smoke dialog-fixture",
+        projectId: CONSOLE_FIXTURE_IDS.projectId,
+      }),
+    ]);
+  });
+}

e2e/lib/setup-agent.ts

@@ -162,11 +162,26 @@ export async function configureProviderCompanyKey(
     .filter({ has: page.getByRole("button", { name: "Add Key" }) })
     .first();
   await providerCard.getByRole("button", { name: "Add Key" }).click();
-  await providerCard.getByPlaceholder("e.g. Production").fill(`Preview smoke ${input.runId}`);
-  await providerCard.getByPlaceholder("sk-...").fill(input.apiKey);
-  await providerCard.getByLabel("Use as default credential for this provider").check();
-  await providerCard.getByRole("button", { name: "Save" }).click();
-  await expect(providerCard.getByText("Default")).toBeVisible({
+  const dialog = page.getByRole("dialog");
+  await expect(dialog).toBeVisible();
+  await dialog
+    .getByRole("textbox", { name: "Name", exact: true })
+    .fill(`Preview smoke ${input.runId}`);
+  await dialog.getByLabel("API key", { exact: true }).fill(input.apiKey);
+  await dialog.getByRole("button", { name: "Save", exact: true }).click();
+  await expect(dialog).toHaveCount(0);
+  const savedCredential = providerCard.locator('[data-slot="connection-row"]').filter({
+    has: page.getByText(`Preview smoke ${input.runId}`, { exact: true }),
+  });
+  await expect(savedCredential).toBeVisible();
+  const setDefaultButton = savedCredential.getByRole("button", {
+    name: "Set default",
+    exact: true,
+  });
+  if (await setDefaultButton.isVisible()) {
+    await setDefaultButton.click();
+  }
+  await expect(savedCredential.getByText("Default", { exact: true })).toBeVisible({
     timeout: 30_000,
   });
 }