fix(ui): keep create guardrail modal open on outside click (#29871)

The create guardrail modal used antd's default maskClosable, so clicking
outside it dismissed the modal and reset every field the user had entered.
Setting maskClosable={false} keeps the modal open; it now closes only via
the explicit close button or Cancel, matching the other form modals in the
dashboard
This commit is contained in:
yuneng-jiang 2026-06-08 12:25:42 -07:00 committed by GitHub
parent 26fe26a5c0
commit 47b383dbbf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 44 additions and 0 deletions

View File

@ -0,0 +1,43 @@
import React from "react";
import { fireEvent, screen } from "@testing-library/react";
import { renderWithProviders } from "../../../tests/test-utils";
import { beforeEach, describe, expect, it, vi } from "vitest";
import AddGuardrailForm from "./add_guardrail_form";
vi.mock("@/components/networking", () => ({
createGuardrailCall: vi.fn(),
getGuardrailProviderSpecificParams: vi.fn().mockResolvedValue({}),
getGuardrailUISettings: vi.fn().mockResolvedValue({}),
modelAvailableCall: vi.fn().mockResolvedValue({ data: [] }),
}));
const renderForm = () => {
const onClose = vi.fn();
renderWithProviders(<AddGuardrailForm visible={true} onClose={onClose} accessToken={null} onSuccess={vi.fn()} />);
return { onClose };
};
describe("AddGuardrailForm close behavior", () => {
beforeEach(() => {
vi.clearAllMocks();
});
it("does not close when the user clicks outside the modal on the mask", () => {
const { onClose } = renderForm();
expect(screen.getByText("Create guardrail")).toBeInTheDocument();
const wrap = document.querySelector(".ant-modal-wrap") as HTMLElement;
expect(wrap).toBeTruthy();
fireEvent.mouseDown(wrap);
fireEvent.mouseUp(wrap);
fireEvent.click(wrap);
expect(onClose).not.toHaveBeenCalled();
});
it("closes when the user clicks the explicit close button", () => {
const { onClose } = renderForm();
fireEvent.click(screen.getByRole("button", { name: "✕" }));
expect(onClose).toHaveBeenCalledTimes(1);
});
});

View File

@ -1144,6 +1144,7 @@ const AddGuardrailForm: React.FC<AddGuardrailFormProps> = ({ visible, onClose, a
title={null}
open={visible}
onCancel={handleClose}
maskClosable={false}
footer={null}
width={1000}
closable={false}