fix(dashboard): refresh the providers list after deleting a compatible provider node (#12298)

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

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

changelog.d/fixes/12298-provider-node-delete-refresh.md

@@ -0,0 +1 @@
+- fix(dashboard): refresh the providers list after deleting a compatible provider node (#12298)

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

@@ -110,6 +110,7 @@ export default function CompatibleNodeCard({
                 });
                 if (res.ok) {
                   router.push("/dashboard/providers");
+                  router.refresh();
                 }
               } catch (error) {
                 console.error("Error deleting provider node:", error);

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

@@ -707,10 +707,7 @@ export default function ModelCompatPopover({
                       </div>
                       <button
                         type="button"
-                        disabled={
-                          disabled ||
-                          (headerRows.length <= 1 && !row.name.trim() && !row.value.trim())
-                        }
+                        disabled={disabled || headerRows.length <= 1}
                         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

@@ -1,113 +0,0 @@
-// @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);
-  });
-});

tests/unit/ui/compatible-node-card-delete-refresh-12298.test.tsx

@@ -0,0 +1,135 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import CompatibleNodeCard from "../../../src/app/(dashboard)/dashboard/providers/[id]/components/CompatibleNodeCard";
+
+const router = vi.hoisted(() => ({
+  push: vi.fn(),
+  refresh: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => router,
+}));
+
+vi.mock("@/shared/components", () => ({
+  Card: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  Button: ({
+    children,
+    onClick,
+  }: {
+    children: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  }) => <button onClick={onClick}>{children}</button>,
+}));
+
+vi.mock("@/shared/components/ProviderIcon", () => ({
+  default: () => null,
+}));
+
+function renderCard(container: HTMLDivElement) {
+  const root = createRoot(container);
+  return root;
+}
+
+describe("CompatibleNodeCard provider deletion (#12298)", () => {
+  let container: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+
+  beforeEach(() => {
+    (
+      globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+    ).IS_REACT_ACT_ENVIRONMENT = true;
+    router.push.mockClear();
+    router.refresh.mockClear();
+    vi.stubGlobal("confirm", vi.fn(() => true));
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = renderCard(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  async function clickDelete() {
+    await act(async () => {
+      root.render(
+        <CompatibleNodeCard
+          providerId="custom-node"
+          providerNode={{ baseUrl: "https://example.test/v1", apiType: "openai" }}
+          isCcCompatible={false}
+          isAnthropicCompatible={false}
+          isAnthropicProtocolCompatible={false}
+          gateConnectionFlow={(callback) => callback()}
+          openApiKeyAddFlow={vi.fn()}
+          onOpenEditNodeModal={vi.fn()}
+          t={(key) => key}
+        />
+      );
+    });
+
+    const deleteButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent === "delete"
+    );
+    expect(deleteButton).toBeDefined();
+
+    await act(async () => {
+      deleteButton?.click();
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    return deleteButton;
+  }
+
+  it("invalidates the cached providers page after a successful delete and navigation", async () => {
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: true } as Response));
+
+    await clickDelete();
+
+    expect(fetch).toHaveBeenCalledWith("/api/provider-nodes/custom-node", {
+      method: "DELETE",
+    });
+    expect(router.push).toHaveBeenCalledWith("/dashboard/providers");
+    expect(router.refresh).toHaveBeenCalledTimes(1);
+    expect(router.push.mock.invocationCallOrder[0]).toBeLessThan(
+      router.refresh.mock.invocationCallOrder[0]
+    );
+  });
+
+  it("does not navigate or refresh when the user cancels the confirm dialog", async () => {
+    vi.stubGlobal("confirm", vi.fn(() => false));
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: true } as Response));
+
+    await clickDelete();
+
+    expect(fetch).not.toHaveBeenCalled();
+    expect(router.push).not.toHaveBeenCalled();
+    expect(router.refresh).not.toHaveBeenCalled();
+  });
+
+  it("does not navigate or refresh when the DELETE response is not ok", async () => {
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue({ ok: false } as Response));
+
+    await clickDelete();
+
+    expect(router.push).not.toHaveBeenCalled();
+    expect(router.refresh).not.toHaveBeenCalled();
+  });
+
+  it("does not navigate or refresh when the DELETE request throws", async () => {
+    vi.stubGlobal("fetch", vi.fn().mockRejectedValue(new Error("network down")));
+    vi.spyOn(console, "error").mockImplementation(() => {});
+
+    await clickDelete();
+
+    expect(router.push).not.toHaveBeenCalled();
+    expect(router.refresh).not.toHaveBeenCalled();
+  });
+});