fix(dashboard): allow deleting the last extra-upstream-header row even when invalid (#12251)

changelog.d/fixes/12251-extra-upstream-headers-delete.md

@@ -0,0 +1 @@
+- fix(dashboard): allow deleting the last extra-upstream-header row even when invalid (#12251)

src/app/(dashboard)/dashboard/providers/[id]/components/ModelCompatPopover.tsx

@@ -707,7 +707,10 @@ export default function ModelCompatPopover({
                       </div>
                       <button
                         type="button"
-                        disabled={disabled || headerRows.length <= 1}
+                        disabled={
+                          disabled ||
+                          (headerRows.length <= 1 && !row.name.trim() && !row.value.trim())
+                        }
                         onClick={() => removeHeaderRow(row.id)}
                         title={t("compatUpstreamRemoveRow")}
                         className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border/80 text-text-muted hover:bg-red-500/10 hover:text-red-600 dark:hover:text-red-400 disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-text-muted transition-colors"

src/app/(dashboard)/dashboard/providers/[id]/components/__tests__/modelCompatPopover-12251-delete-invalid-header.test.tsx

@@ -0,0 +1,113 @@
+// @vitest-environment jsdom
+// Repro for #12251
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import ModelCompatPopover from "../ModelCompatPopover";
+
+vi.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+let container: HTMLDivElement;
+let root: Root;
+
+async function flushEffects() {
+  await act(async () => {
+    await Promise.resolve();
+  });
+}
+
+async function openPopover() {
+  const trigger = container.querySelector("button") as HTMLButtonElement;
+  await act(async () => trigger.click());
+  await flushEffects();
+}
+
+describe("ModelCompatPopover upstream headers — invalid single row cannot be deleted (#12251)", () => {
+  beforeEach(() => {
+    (
+      globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+    ).IS_REACT_ACT_ENVIRONMENT = true;
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    document.body.innerHTML = "";
+    vi.unstubAllGlobals();
+  });
+
+  it("lets the user delete the invalid header via the delete icon when it is the ONLY row present", async () => {
+    const onCompatPatch = vi.fn();
+
+    act(() => {
+      root.render(
+        <ModelCompatPopover
+          t={(key) => key}
+          providerId="openai"
+          modelId="gpt-test"
+          effectiveModelNormalize={() => false}
+          effectiveModelPreserveDeveloper={() => true}
+          getUpstreamHeadersRecord={() => ({
+            "https://evil.example.com/callback": "some-secret-value",
+          })}
+          onCompatPatch={onCompatPatch}
+        />
+      );
+    });
+
+    await openPopover();
+
+    const nameInput = document.querySelector(
+      'input[placeholder="compatUpstreamHeaderNamePlaceholder"]'
+    ) as HTMLInputElement;
+    expect(nameInput).toBeTruthy();
+    expect(nameInput.value).toBe("https://evil.example.com/callback");
+
+    const rowButtons = document.querySelectorAll('button[title="compatUpstreamRemoveRow"]');
+    expect(rowButtons.length).toBe(1);
+
+    const removeButton = rowButtons[0] as HTMLButtonElement;
+
+    // EXPECTED (fixed) behavior: a populated row should always be removable via
+    // its own delete icon, even when it is the only row.
+    expect(removeButton.disabled).toBe(false);
+
+    await act(async () => removeButton.click());
+    await flushEffects();
+
+    expect(onCompatPatch).toHaveBeenCalledWith("openai", { upstreamHeaders: {} });
+  });
+
+  it("keeps the delete button disabled when the sole row is genuinely blank", async () => {
+    const onCompatPatch = vi.fn();
+
+    act(() => {
+      root.render(
+        <ModelCompatPopover
+          t={(key) => key}
+          providerId="openai"
+          modelId="gpt-test"
+          effectiveModelNormalize={() => false}
+          effectiveModelPreserveDeveloper={() => true}
+          getUpstreamHeadersRecord={() => ({})}
+          onCompatPatch={onCompatPatch}
+        />
+      );
+    });
+
+    await openPopover();
+
+    const rowButtons = document.querySelectorAll('button[title="compatUpstreamRemoveRow"]');
+    expect(rowButtons.length).toBe(1);
+
+    const removeButton = rowButtons[0] as HTMLButtonElement;
+
+    // A blank sole row must stay non-deletable so the form always shows an
+    // editable add-affordance.
+    expect(removeButton.disabled).toBe(true);
+  });
+});