fix(frontend): add missing onClose prop to conversation panel modals (#12219)

Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>

frontend/__tests__/components/features/conversation-panel/conversation-panel.test.tsx

@@ -885,4 +885,83 @@ describe("ConversationPanel", () => {
       title: "Special @#$%^&*()_+ Characters",
     });
   });
+
+  it("should close delete modal when clicking backdrop", async () => {
+    const user = userEvent.setup();
+    renderConversationPanel();
+
+    const cards = await screen.findAllByTestId("conversation-card");
+
+    // Open context menu and click delete
+    const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+    const deleteButton = within(cards[0]).getByTestId("delete-button");
+    await user.click(deleteButton);
+
+    // Modal should be visible
+    expect(
+      screen.getByRole("button", { name: /confirm/i }),
+    ).toBeInTheDocument();
+
+    // Click the backdrop (the dark overlay behind the modal)
+    const backdrop = document.querySelector(".bg-black.opacity-60");
+    expect(backdrop).toBeInTheDocument();
+    await user.click(backdrop!);
+
+    // Modal should be closed
+    expect(
+      screen.queryByRole("button", { name: /confirm/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("should close stop modal when clicking backdrop", async () => {
+    const user = userEvent.setup();
+
+    // Create mock data with a RUNNING conversation
+    const mockRunningConversations: Conversation[] = [
+      {
+        conversation_id: "1",
+        title: "Running Conversation",
+        selected_repository: null,
+        git_provider: null,
+        selected_branch: null,
+        last_updated_at: "2021-10-01T12:00:00Z",
+        created_at: "2021-10-01T12:00:00Z",
+        status: "RUNNING" as const,
+        runtime_status: null,
+        url: null,
+        session_api_key: null,
+      },
+    ];
+
+    vi.spyOn(ConversationService, "getUserConversations").mockResolvedValue({
+      results: mockRunningConversations,
+      next_page_id: null,
+    });
+
+    renderConversationPanel();
+
+    const cards = await screen.findAllByTestId("conversation-card");
+
+    // Open context menu and click stop
+    const ellipsisButton = within(cards[0]).getByTestId("ellipsis-button");
+    await user.click(ellipsisButton);
+    const stopButton = within(cards[0]).getByTestId("stop-button");
+    await user.click(stopButton);
+
+    // Modal should be visible
+    expect(
+      screen.getByRole("button", { name: /confirm/i }),
+    ).toBeInTheDocument();
+
+    // Click the backdrop
+    const backdrop = document.querySelector(".bg-black.opacity-60");
+    expect(backdrop).toBeInTheDocument();
+    await user.click(backdrop!);
+
+    // Modal should be closed
+    expect(
+      screen.queryByRole("button", { name: /confirm/i }),
+    ).not.toBeInTheDocument();
+  });
 });

frontend/src/components/features/conversation-panel/confirm-delete-modal.tsx

@@ -32,7 +32,7 @@ export function ConfirmDeleteModal({
   );
 
   return (
-    <ModalBackdrop>
+    <ModalBackdrop onClose={onCancel}>
       <ModalBody className="items-start border border-tertiary">
         <div className="flex flex-col gap-2">
           <BaseModalTitle title={t(I18nKey.CONVERSATION$CONFIRM_DELETE)} />

frontend/src/components/features/conversation-panel/confirm-stop-modal.tsx

@@ -20,7 +20,7 @@ export function ConfirmStopModal({
   const { t } = useTranslation();
 
   return (
-    <ModalBackdrop>
+    <ModalBackdrop onClose={onCancel}>
       <ModalBody className="items-start border border-tertiary">
         <div className="flex flex-col gap-2">
           <BaseModalTitle

frontend/src/components/features/conversation-panel/conversation-panel.tsx

@@ -243,6 +243,7 @@ export function ConversationPanel({ onClose }: ConversationPanelProps) {
             onClose();
           }}
           onClose={() => setConfirmExitConversationModalVisible(false)}
+          onCancel={() => setConfirmExitConversationModalVisible(false)}
         />
       )}
     </div>

frontend/src/components/features/conversation-panel/exit-conversation-modal.tsx

@@ -8,16 +8,18 @@ import { I18nKey } from "#/i18n/declaration";
 interface ExitConversationModalProps {
   onConfirm: () => void;
   onClose: () => void;
+  onCancel: () => void;
 }
 
 export function ExitConversationModal({
   onConfirm,
   onClose,
+  onCancel,
 }: ExitConversationModalProps) {
   const { t } = useTranslation();
 
   return (
-    <ModalBackdrop>
+    <ModalBackdrop onClose={onCancel}>
       <ModalBody testID="confirm-new-conversation-modal">
         <BaseModalTitle title={t(I18nKey.CONVERSATION$EXIT_WARNING)} />
         <div className="flex w-full gap-2">