Fix issue #5179: Rename GitHub button and show single button after PR…

… creation * Rename 'Push to GitHub' button to 'Push to Branch' * Add state to track PR creation * Show only 'Push changes to PR' button after PR is created * Update tests to reflect new behavior
All-Hands-AI · Nov 25, 2024 · 4a28111 · 4a28111
1 parent c3978b4
commit 4a28111
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 23 deletions.
diff --git a/frontend/__tests__/components/chat/chat-interface.test.tsx b/frontend/__tests__/components/chat/chat-interface.test.tsx
@@ -281,7 +281,7 @@ describe.skip("ChatInterface", () => {
     expect(within(error).getByText("Something went wrong")).toBeInTheDocument();
   });
 
-  it("should render both GitHub buttons when ghToken is available", () => {
+  it("should render both GitHub buttons initially when ghToken is available", () => {
     vi.mock("@remix-run/react", async (importActual) => ({
       ...(await importActual<typeof import("@remix-run/react")>()),
       useRouteLoaderData: vi.fn(() => ({ ghToken: "test-token" })),
@@ -297,15 +297,46 @@ describe.skip("ChatInterface", () => {
     ];
     renderChatInterface(messages);
 
-    const pushButton = screen.getByRole("button", { name: "Push to GitHub" });
+    const pushButton = screen.getByRole("button", { name: "Push to Branch" });
     const prButton = screen.getByRole("button", { name: "Push & Create PR" });
 
     expect(pushButton).toBeInTheDocument();
     expect(prButton).toBeInTheDocument();
-    expect(pushButton).toHaveTextContent("Push to GitHub");
+    expect(pushButton).toHaveTextContent("Push to Branch");
     expect(prButton).toHaveTextContent("Push & Create PR");
   });
 
+  it("should render only 'Push changes to PR' button after PR is created", async () => {
+    vi.mock("@remix-run/react", async (importActual) => ({
+      ...(await importActual<typeof import("@remix-run/react")>()),
+      useRouteLoaderData: vi.fn(() => ({ ghToken: "test-token" })),
+    }));
+
+    const messages: Message[] = [
+      {
+        sender: "assistant",
+        content: "Hello",
+        imageUrls: [],
+        timestamp: new Date().toISOString(),
+      },
+    ];
+    const { rerender } = renderChatInterface(messages);
+    const user = userEvent.setup();
+
+    // Click the "Push & Create PR" button
+    const prButton = screen.getByRole("button", { name: "Push & Create PR" });
+    await user.click(prButton);
+
+    // Re-render to trigger state update
+    rerender(<ChatInterface />);
+
+    // Verify only one button is shown
+    const pushToPrButton = screen.getByRole("button", { name: "Push changes to PR" });
+    expect(pushToPrButton).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Push to Branch" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "Push & Create PR" })).not.toBeInTheDocument();
+  });
+
   it("should render feedback actions if there are more than 3 messages", () => {
     const messages: Message[] = [
       {

diff --git a/frontend/src/components/chat-interface.tsx b/frontend/src/components/chat-interface.tsx
@@ -52,6 +52,7 @@ export function ChatInterface() {
   const [feedbackModalIsOpen, setFeedbackModalIsOpen] = React.useState(false);
   const [messageToSend, setMessageToSend] = React.useState<string | null>(null);
   const [isDownloading, setIsDownloading] = React.useState(false);
+  const [hasPullRequest, setHasPullRequest] = React.useState(false);
 
   React.useEffect(() => {
     if (status === WsClientProviderStatus.ACTIVE) {
@@ -176,26 +177,42 @@ export function ChatInterface() {
           <div className="flex flex-col gap-2 mb-2">
             {gitHubToken ? (
               <div className="flex flex-col gap-2">
-                <SuggestionItem
-                  suggestion={{
-                    label: "Push to GitHub Branch",
-                    value:
-                      "Please push the changes to a remote branch on GitHub, but do NOT create a pull request.",
-                  }}
-                  onClick={(value) => {
-                    handleSendMessage(value, []);
-                  }}
-                />
-                <SuggestionItem
-                  suggestion={{
-                    label: "Push & Create Pull Request",
-                    value:
-                      "Please push the changes to GitHub and open a pull request.",
-                  }}
-                  onClick={(value) => {
-                    handleSendMessage(value, []);
-                  }}
-                />
+                {!hasPullRequest ? (
+                  <>
+                    <SuggestionItem
+                      suggestion={{
+                        label: "Push to Branch",
+                        value:
+                          "Please push the changes to a remote branch on GitHub, but do NOT create a pull request.",
+                      }}
+                      onClick={(value) => {
+                        handleSendMessage(value, []);
+                      }}
+                    />
+                    <SuggestionItem
+                      suggestion={{
+                        label: "Push & Create PR",
+                        value:
+                          "Please push the changes to GitHub and open a pull request.",
+                      }}
+                      onClick={(value) => {
+                        handleSendMessage(value, []);
+                        setHasPullRequest(true);
+                      }}
+                    />
+                  </>
+                ) : (
+                  <SuggestionItem
+                    suggestion={{
+                      label: "Push changes to PR",
+                      value:
+                        "Please push the latest changes to the existing pull request.",
+                    }}
+                    onClick={(value) => {
+                      handleSendMessage(value, []);
+                    }}
+                  />
+                )}
               </div>
             ) : (
               <SuggestionItem