diff --git a/frontend/__tests__/components/modals/microagents/microagent-modal.test.tsx b/frontend/__tests__/components/modals/microagents/microagent-modal.test.tsx new file mode 100644 index 0000000000..3b9e90fa52 --- /dev/null +++ b/frontend/__tests__/components/modals/microagents/microagent-modal.test.tsx @@ -0,0 +1,70 @@ +import { screen } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; +import { renderWithProviders } from "test-utils"; +import { MicroagentsModal } from "#/components/features/conversation-panel/microagents-modal"; +import OpenHands from "#/api/open-hands"; + +describe("MicroagentsModal - Refresh Button", () => { + const mockOnClose = vi.fn(); + const conversationId = "test-conversation-id"; + + const defaultProps = { + onClose: mockOnClose, + conversationId, + }; + + const mockMicroagents = [ + { + name: "Test Agent 1", + type: "repo" as const, + triggers: ["test", "example"], + content: "This is test content for agent 1", + }, + { + name: "Test Agent 2", + type: "knowledge" as const, + triggers: ["help", "support"], + content: "This is test content for agent 2", + }, + ]; + + beforeEach(() => { + // Reset all mocks before each test + vi.clearAllMocks(); + + // Setup default mock for getUserConversations + vi.spyOn(OpenHands, "getMicroagents").mockResolvedValue({ + microagents: mockMicroagents, + }); + }); + + afterEach(() => { + vi.clearAllMocks(); + }); + + describe("Refresh Button Rendering", () => { + it("should render the refresh button with correct text and test ID", () => { + renderWithProviders(); + + const refreshButton = screen.getByTestId("refresh-microagents"); + expect(refreshButton).toBeInTheDocument(); + expect(refreshButton).toHaveTextContent("BUTTON$REFRESH"); + }); + }); + + describe("Refresh Button Functionality", () => { + it("should call refetch when refresh button is clicked", async () => { + const user = userEvent.setup(); + + renderWithProviders(); + + const refreshSpy = vi.spyOn(OpenHands, "getMicroagents"); + + const refreshButton = screen.getByTestId("refresh-microagents"); + await user.click(refreshButton); + + expect(refreshSpy).toHaveBeenCalledTimes(1); + }); + }); +}); diff --git a/frontend/src/components/features/conversation-panel/microagents-modal.tsx b/frontend/src/components/features/conversation-panel/microagents-modal.tsx index 88884b11a1..547e07cd98 100644 --- a/frontend/src/components/features/conversation-panel/microagents-modal.tsx +++ b/frontend/src/components/features/conversation-panel/microagents-modal.tsx @@ -1,11 +1,12 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; -import { ChevronDown, ChevronRight } from "lucide-react"; +import { ChevronDown, ChevronRight, RefreshCw } from "lucide-react"; import { BaseModalTitle } from "#/components/shared/modals/confirmation-modals/base-modal"; import { ModalBackdrop } from "#/components/shared/modals/modal-backdrop"; import { ModalBody } from "#/components/shared/modals/modal-body"; import { I18nKey } from "#/i18n/declaration"; import { useConversationMicroagents } from "#/hooks/query/use-conversation-microagents"; +import { BrandButton } from "../settings/brand-button"; interface MicroagentsModalProps { onClose: () => void; @@ -20,11 +21,12 @@ export function MicroagentsModal({ const [expandedAgents, setExpandedAgents] = useState>( {}, ); - const { data: microagents, isLoading, isError, + refetch, + isRefetching, } = useConversationMicroagents({ conversationId, enabled: true, @@ -45,9 +47,29 @@ export function MicroagentsModal({ testID="microagents-modal" >
- +
+ + + + {t(I18nKey.BUTTON$REFRESH)} + +
+ + {t(I18nKey.MICROAGENTS_MODAL$WARNING)} + +
{isLoading && (
diff --git a/frontend/src/i18n/declaration.ts b/frontend/src/i18n/declaration.ts index 6e2d0ed54b..bc5b2d4d64 100644 --- a/frontend/src/i18n/declaration.ts +++ b/frontend/src/i18n/declaration.ts @@ -573,6 +573,7 @@ export enum I18nKey { CONVERSATION$NO_MICROAGENTS = "CONVERSATION$NO_MICROAGENTS", CONVERSATION$FAILED_TO_FETCH_MICROAGENTS = "CONVERSATION$FAILED_TO_FETCH_MICROAGENTS", MICROAGENTS_MODAL$TITLE = "MICROAGENTS_MODAL$TITLE", + MICROAGENTS_MODAL$WARNING = "MICROAGENTS_MODAL$WARNING", MICROAGENTS_MODAL$TRIGGERS = "MICROAGENTS_MODAL$TRIGGERS", MICROAGENTS_MODAL$INPUTS = "MICROAGENTS_MODAL$INPUTS", MICROAGENTS_MODAL$TOOLS = "MICROAGENTS_MODAL$TOOLS", diff --git a/frontend/src/i18n/translation.json b/frontend/src/i18n/translation.json index 1e446929e6..1feaa16177 100644 --- a/frontend/src/i18n/translation.json +++ b/frontend/src/i18n/translation.json @@ -9167,6 +9167,22 @@ "tr": "Kullanılabilir mikro ajanlar", "uk": "Доступні мікроагенти" }, + "MICROAGENTS_MODAL$WARNING": { + "en": "If you update the microagents, you will need to stop the conversation and then click on the refresh button to see the changes.", + "ja": "マイクロエージェントを更新する場合、会話を停止してから更新ボタンをクリックして変更を確認する必要があります。", + "zh-CN": "如果您更新微代理,您需要停止对话,然后点击刷新按钮以查看更改。", + "zh-TW": "如果您更新微代理,您需要停止對話,然後點擊重新整理按鈕以查看更改。", + "ko-KR": "마이크로에이전트를 업데이트하는 경우 대화를 중지한 후 새로고침 버튼을 클릭하여 변경사항을 확인해야 합니다.", + "no": "Hvis du oppdaterer mikroagentene, må du stoppe samtalen og deretter klikke på oppdater-knappen for å se endringene.", + "ar": "إذا قمت بتحديث الوكلاء المصغرين، فستحتاج إلى إيقاف المحادثة ثم النقر على زر التحديث لرؤية التغييرات.", + "de": "Wenn Sie die Mikroagenten aktualisieren, müssen Sie das Gespräch beenden und dann auf die Aktualisieren-Schaltfläche klicken, um die Änderungen zu sehen.", + "fr": "Si vous mettez à jour les micro-agents, vous devrez arrêter la conversation puis cliquer sur le bouton actualiser pour voir les changements.", + "it": "Se aggiorni i microagenti, dovrai fermare la conversazione e poi cliccare sul pulsante aggiorna per vedere le modifiche.", + "pt": "Se você atualizar os microagentes, precisará parar a conversa e depois clicar no botão atualizar para ver as alterações.", + "es": "Si actualiza los microagentes, necesitará detener la conversación y luego hacer clic en el botón actualizar para ver los cambios.", + "tr": "Mikro ajanları güncellerseniz, konuşmayı durdurmanız ve ardından değişiklikleri görmek için yenile düğmesine tıklamanız gerekecektir.", + "uk": "Якщо ви оновите мікроагенти, вам потрібно буде зупинити розмову, а потім натиснути кнопку оновлення, щоб побачити зміни." + }, "MICROAGENTS_MODAL$TRIGGERS": { "en": "Triggers", "ja": "トリガー",