Fix bug in file switching

frontend/__tests__/components/file-explorer/FileExplorer.test.tsx

@@ -24,7 +24,7 @@ const renderFileExplorerWithRunningAgentState = () =>
     },
   });
 
-describe.skip("FileExplorer", () => {
+describe("FileExplorer", () => {
   afterEach(() => {
     vi.clearAllMocks();
   });
@@ -37,7 +37,12 @@ describe.skip("FileExplorer", () => {
     expect(getFilesSpy).toHaveBeenCalledTimes(1); // once for root
   });
 
-  it.todo("should render an empty workspace");
+  it("should render an empty workspace", async () => {
+    getFilesSpy.mockResolvedValueOnce([]);
+    renderFileExplorerWithRunningAgentState();
+
+    expect(await screen.findByText("No files found")).toBeInTheDocument();
+  });
 
   it("should refetch the workspace when clicking the refresh button", async () => {
     const user = userEvent.setup();
@@ -87,13 +92,31 @@ describe.skip("FileExplorer", () => {
     expect(getFilesSpy).toHaveBeenCalled();
   });
 
-  it.todo("should upload files when dragging them to the explorer", () => {
-    // It will require too much work to mock drag logic, especially for our case
-    // https://github.com/testing-library/user-event/issues/440#issuecomment-685010755
-    // TODO: should be tested in an e2e environment such as Cypress/Playwright
+  it("should upload files when dragging them to the explorer", async () => {
+    const user = userEvent.setup();
+    renderFileExplorerWithRunningAgentState();
+
+    const file = new File([""], "file-name");
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(file);
+
+    const dropzone = await screen.findByTestId("dropzone");
+    await user.dragEnter(dropzone);
+    await user.drop(dropzone, { dataTransfer });
+
+    expect(uploadFilesSpy).toHaveBeenCalledOnce();
+    expect(getFilesSpy).toHaveBeenCalled();
   });
 
-  it.todo("should download a file");
+  it("should download a file", async () => {
+    const user = userEvent.setup();
+    renderFileExplorerWithRunningAgentState();
+
+    const file = await screen.findByText("file1.ts");
+    await user.click(file);
+
+    expect(getFilesSpy).toHaveBeenCalledWith("file1.ts");
+  });
 
   it("should display an error toast if file upload fails", async () => {
     (uploadFilesSpy as Mock).mockRejectedValue(new Error());
@@ -111,4 +134,21 @@ describe.skip("FileExplorer", () => {
       expect.any(String),
     );
   });
+
+  it("should display correct file content when switching files quickly", async () => {
+    const user = userEvent.setup();
+    renderFileExplorerWithRunningAgentState();
+
+    const file1 = await screen.findByText("file1.ts");
+    const file2 = await screen.findByText("file2.ts");
+
+    await user.click(file1);
+    expect(getFilesSpy).toHaveBeenCalledWith("file1.ts");
+
+    await user.click(file2);
+    expect(getFilesSpy).toHaveBeenCalledWith("file2.ts");
+
+    expect(await screen.findByText("file1.ts content")).toBeInTheDocument();
+    expect(await screen.findByText("file2.ts content")).toBeInTheDocument();
+  });
 });

frontend/src/components/file-explorer/FileExplorer.tsx

@@ -20,6 +20,7 @@
 import OpenHands from "#/api/open-hands";
 import { useFiles } from "#/context/files";
 import { isOpenHandsErrorResponse } from "#/api/open-hands.utils";
+import { debounce } from "lodash";
 
 interface ExplorerActionsProps {
   onRefresh: () => void;
@@ -95,9 +96,9 @@
 }
 
 function FileExplorer({ error }: FileExplorerProps) {
   const { revalidate } = useRevalidator();
 
-  const { paths, setPaths } = useFiles();
+  const { paths, setPaths, setSelectedPath } = useFiles();
   const [isHidden, setIsHidden] = React.useState(false);
   const [isDragging, setIsDragging] = React.useState(false);
 
@@ -176,6 +177,11 @@
     refreshWorkspace();
   }, [curAgentState]);
 
+  const debouncedSetSelectedPath = React.useMemo(
+    () => debounce(setSelectedPath, 300),
+    [setSelectedPath]
+  );
+
   return (
     <div
       data-testid="file-explorer"

frontend/src/context/files.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { debounce } from "lodash";
 
 interface FilesContextType {
   /**
@@ -84,14 +85,19 @@
     [files, modifiedFiles, selectedPath, discardChanges],
   );
 
+  const debouncedSetSelectedPath = React.useMemo(
+    () => debounce(setSelectedPath, 300),
+    [setSelectedPath]
+  );
+
   const value = React.useMemo(
     () => ({
       paths,
       setPaths,
       files,
       setFileContent,
       selectedPath,
-      setSelectedPath,
+      setSelectedPath: debouncedSetSelectedPath,
       modifiedFiles,
       modifyFileContent,
       saveFileContent,
@@ -103,7 +109,7 @@
       files,
       setFileContent,
       selectedPath,
-      setSelectedPath,
+      debouncedSetSelectedPath,
       modifiedFiles,
       modifyFileContent,
       saveFileContent,

frontend/src/routes/_oh.app._index/route.tsx

@@ -10,6 +10,7 @@
 import CodeEditorCompoonent from "./code-editor-component";
 import { useFiles } from "#/context/files";
 import { EditorActions } from "#/components/editor-actions";
+import { debounce } from "lodash";
 
 export const clientLoader = async () => {
   const token = localStorage.getItem("token");
@@ -36,6 +37,7 @@
     modifiedFiles,
     saveFileContent: saveNewFileContent,
     discardChanges,
+    setSelectedPath,
   } = useFiles();
 
   const [errors, setErrors] = React.useState<{ getFiles: string | null }>({
@@ -84,6 +86,11 @@
     if (selectedPath) discardChanges(selectedPath);
   };
 
+  const debouncedSetSelectedPath = React.useMemo(
+    () => debounce(setSelectedPath, 300),
+    [setSelectedPath]
+  );
+
   return (
     <div className="flex h-full w-full bg-neutral-900 relative">
       <FileExplorer error={errors.getFiles} />