feat(frontend): disable the create a plan button when users are using the planning agent (#13234)

frontend/__tests__/routes/planner-tab.test.tsx

@@ -0,0 +1,55 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import PlannerTab from "#/routes/planner-tab";
+import { renderWithProviders } from "../../test-utils";
+import { useConversationStore } from "#/stores/conversation-store";
+
+// Mock the handle plan click hook
+vi.mock("#/hooks/use-handle-plan-click", () => ({
+  useHandlePlanClick: () => ({
+    handlePlanClick: vi.fn(),
+  }),
+}));
+
+describe("PlannerTab", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset store state to defaults
+    useConversationStore.setState({
+      planContent: null,
+      conversationMode: "code",
+    });
+  });
+
+  describe("Create a plan button", () => {
+    it("should be enabled when conversation mode is 'code'", () => {
+      // Arrange
+      useConversationStore.setState({
+        planContent: null,
+        conversationMode: "code",
+      });
+
+      // Act
+      renderWithProviders(<PlannerTab />);
+
+      // Assert
+      const button = screen.getByRole("button");
+      expect(button).not.toBeDisabled();
+    });
+
+    it("should be disabled when conversation mode is 'plan'", () => {
+      // Arrange
+      useConversationStore.setState({
+        planContent: null,
+        conversationMode: "plan",
+      });
+
+      // Act
+      renderWithProviders(<PlannerTab />);
+
+      // Assert
+      const button = screen.getByRole("button");
+      expect(button).toBeDisabled();
+    });
+  });
+});

frontend/src/routes/planner-tab.tsx

@@ -7,6 +7,7 @@ import { useScrollToBottom } from "#/hooks/use-scroll-to-bottom";
 import { MarkdownRenderer } from "#/components/features/markdown/markdown-renderer";
 import { planComponents } from "#/components/features/markdown/plan-components";
 import { useHandlePlanClick } from "#/hooks/use-handle-plan-click";
+import { cn } from "#/utils/utils";
 
 function PlannerTab() {
   const { t } = useTranslation();
@@ -14,7 +15,8 @@ function PlannerTab() {
     React.useRef<HTMLDivElement>(null),
   );
 
-  const { planContent } = useConversationStore();
+  const { planContent, conversationMode } = useConversationStore();
+  const isPlanMode = conversationMode === "plan";
   const { handlePlanClick } = useHandlePlanClick();
 
   if (planContent !== null && planContent !== undefined) {
@@ -40,7 +42,13 @@ function PlannerTab() {
       <button
         type="button"
         onClick={handlePlanClick}
-        className="flex w-[164px] h-[40px] p-2 justify-center items-center shrink-0 rounded-lg bg-white overflow-hidden text-black text-ellipsis font-sans text-[16px] not-italic font-normal leading-[20px] hover:cursor-pointer hover:opacity-80"
+        disabled={isPlanMode}
+        className={cn(
+          "flex w-[164px] h-[40px] p-2 justify-center items-center shrink-0 rounded-lg bg-white overflow-hidden text-black text-ellipsis font-sans text-[16px] not-italic font-normal leading-[20px]",
+          isPlanMode
+            ? "opacity-50 cursor-not-allowed"
+            : "hover:cursor-pointer hover:opacity-80",
+        )}
       >
         {t(I18nKey.COMMON$CREATE_A_PLAN)}
       </button>