@marimo-team/frontend 0.24.1-dev116 → 0.24.1-dev119

package/src/components/editor/file-tree/__tests__/file-viewer.test.tsx

@@ -64,6 +64,33 @@ describe("FileViewer bounded previews", () => {
     store.set(requestClientAtom, null);
   });
 
+  it("uses fetched metadata to offer opening a notebook from a search result", async () => {
+    const notebook = {
+      ...file,
+      id: "/workspace/app.py",
+      path: "/workspace/app.py",
+      name: "app.py",
+    };
+    const onOpenNotebook = vi.fn();
+    const client = MockRequestClient.create({
+      sendFileDetails: vi.fn().mockResolvedValue({
+        file: { ...notebook, isMarimoFile: true },
+        contents: "import marimo",
+        mimeType: "text/plain",
+        isBase64: false,
+        isTooLarge: false,
+      }),
+    });
+    store.set(requestClientAtom, client);
+    render(<FileViewer file={notebook} onOpenNotebook={onOpenNotebook} />, {
+      wrapper,
+    });
+    fireEvent.click(
+      await screen.findByRole("button", { name: "Open notebook" }),
+    );
+    expect(onOpenNotebook).toHaveBeenCalledOnce();
+  });
+
   it("requests a bounded preview and shows oversized metadata", async () => {
     const client = renderViewer({
       file,

package/src/components/editor/file-tree/__tests__/requesting-tree.test.ts

@@ -307,6 +307,109 @@ describe("RequestingTree", () => {
     expect(sendListFiles).toHaveBeenCalledWith({ path: "/external" });
   });
 
+  test("caches empty directories and shares concurrent expansion requests", async () => {
+    let finish!: (value: { files: never[] }) => void;
+    sendListFiles.mockImplementationOnce(
+      () =>
+        new Promise((resolve) => {
+          finish = resolve;
+        }),
+    );
+    const first = tree.expand(EXTERNAL_ROOT_ID);
+    const second = tree.expand(EXTERNAL_ROOT_ID);
+    expect(sendListFiles).toHaveBeenCalledOnce();
+    finish({ files: [] });
+    expect(await Promise.all([first, second])).toEqual([true, true]);
+    await tree.expand(EXTERNAL_ROOT_ID);
+    expect(sendListFiles).toHaveBeenCalledOnce();
+  });
+
+  test("refreshes a cached ancestor when revealing a newly created folder", async () => {
+    await tree.expand(PRIMARY_ROOT_ID);
+    const newFolder = {
+      ...PRIMARY_FILES[1],
+      id: "/root/new",
+      path: "/root/new",
+      name: "new",
+    };
+    const nested = {
+      ...newFolder,
+      id: "/root/new/nested",
+      path: "/root/new/nested",
+      name: "nested",
+    };
+    sendListFiles.mockImplementation(async ({ path }: { path: string }) => {
+      if (path === "/root") {
+        return { files: [...PRIMARY_FILES, newFolder] };
+      }
+      if (path === "/root/new") {
+        return { files: [nested] };
+      }
+      return { files: [] };
+    });
+    sendListFiles.mockClear();
+    expect(
+      await tree.reveal({
+        ...nested,
+        id: fileTreeNodeId("/root", nested.path),
+        rootPath: "/root",
+        isRoot: false,
+        isPrimaryRoot: true,
+      }),
+    ).toBe(true);
+    expect(sendListFiles.mock.calls).toEqual([
+      [{ path: "/root" }],
+      [{ path: "/root/new" }],
+      [{ path: "/root/new/nested" }],
+    ]);
+  });
+
+  test("reports a search folder that no longer exists after refreshing its parent", async () => {
+    await tree.expand(PRIMARY_ROOT_ID);
+    expect(
+      await tree.reveal({
+        ...PRIMARY_FILES[1],
+        id: fileTreeNodeId("/root", "/root/missing"),
+        path: "/root/missing",
+        rootPath: "/root",
+        isRoot: false,
+        isPrimaryRoot: true,
+      }),
+    ).toBe(false);
+    expect(toast).toHaveBeenCalledWith(
+      expect.objectContaining({ title: "Could not reveal folder" }),
+    );
+  });
+
+  test("retries a failed expansion", async () => {
+    sendListFiles.mockRejectedValueOnce(new Error("Offline"));
+    expect(await tree.expand(EXTERNAL_ROOT_ID)).toBe(false);
+    expect(await tree.expand(EXTERNAL_ROOT_ID)).toBe(true);
+    expect(sendListFiles).toHaveBeenCalledTimes(2);
+  });
+
+  test("preserves loaded descendants when refreshing their parent", async () => {
+    await tree.expand(PRIMARY_ROOT_ID);
+    const folderId = fileTreeNodeId("/root", "/root/folder1");
+    await tree.expand(folderId);
+    await tree.refreshPath("/root" as FilePath);
+    sendListFiles.mockClear();
+    await tree.expand(folderId);
+    expect(sendListFiles).not.toHaveBeenCalled();
+  });
+
+  test("reloads a collapsed cached folder after refreshing", async () => {
+    await tree.expand(PRIMARY_ROOT_ID);
+    const folderId = fileTreeNodeId("/root", "/root/folder1");
+    await tree.expand(folderId);
+    await tree.refreshAll([]);
+    sendListFiles.mockClear();
+    await tree.expand(folderId);
+    expect(sendListFiles).toHaveBeenCalledExactlyOnceWith({
+      path: "/root/folder1",
+    });
+  });
+
   test("refreshes supplied open folders in addition to configured roots", async () => {
     await tree.expand(PRIMARY_ROOT_ID);
     sendListFiles.mockClear();
@@ -318,6 +421,33 @@ describe("RequestingTree", () => {
     expect(sendListFiles).toHaveBeenCalledWith({ path: "/root/folder1" });
   });
 
+  test("invalidates collapsed copies independently for overlapping roots", async () => {
+    getRoots.mockResolvedValue({
+      roots: [
+        { path: "/root", name: "workspace", isPrimary: true },
+        { path: "/root/folder1", name: "nested root", isPrimary: false },
+      ],
+    });
+    const overlapping = new RequestingTree({
+      getRoots,
+      listFiles: sendListFiles,
+      createFileOrFolder: sendCreateFileOrFolder,
+      deleteFileOrFolder: sendDeleteFileOrFolder,
+      copyFileOrFolder: sendCopyFileOrFolder,
+      renameFileOrFolder: sendRenameFileOrFolder,
+    });
+    await overlapping.initialize(onChange);
+    await overlapping.expand(PRIMARY_ROOT_ID);
+    const collapsedCopy = fileTreeNodeId("/root", "/root/folder1");
+    await overlapping.expand(collapsedCopy);
+    await overlapping.refreshAll([]);
+    sendListFiles.mockClear();
+    await overlapping.expand(collapsedCopy);
+    expect(sendListFiles).toHaveBeenCalledExactlyOnceWith({
+      path: "/root/folder1",
+    });
+  });
+
   test("keeps existing children when a refresh fails", async () => {
     await tree.expand(PRIMARY_ROOT_ID);
     const beforeRefresh = onChange.mock.calls.at(-1)?.[0];

package/src/components/editor/file-tree/file-browser-row.tsx

@@ -0,0 +1,82 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useEffect, useRef } from "react";
+import type { RowRendererProps } from "react-arborist";
+import { useDrop } from "react-dnd";
+import { FileTreeRow } from "./file-tree-row";
+import { useHoverExpand } from "./use-hover-expand";
+import type { FileTreeNode } from "./requesting-tree";
+
+export function FileBrowserRow(props: RowRendererProps<FileTreeNode>) {
+  return props.node.data.isDirectory ? (
+    <FolderDropRow {...props} />
+  ) : (
+    <FileTreeRow {...props} />
+  );
+}
+
+function FolderDropRow(props: RowRendererProps<FileTreeNode>) {
+  const { node } = props;
+  const tree = node.tree;
+  const rowRef = useRef<HTMLDivElement | null>(null);
+  const [{ isHovering }, dropRef] = useDrop(
+    () => ({
+      // Arborist's drag source uses NODE. Keep its validation and move handler,
+      // but treat the entire folder row as a destination, without reorder zones.
+      accept: "NODE",
+      canDrop: () => tree.canDrop(),
+      collect: (monitor) => ({
+        isHovering: monitor.isOver({ shallow: true }) && monitor.canDrop(),
+      }),
+      hover: () => {
+        if (
+          tree.state.dnd.parentId !== node.id ||
+          tree.state.dnd.index !== null
+        ) {
+          tree.dispatch({
+            type: "DND_HOVERING",
+            parentId: node.id,
+            index: null,
+          });
+        }
+        if (!tree.canDrop()) {
+          tree.hideCursor();
+        }
+      },
+      drop: () => {
+        if (!tree.canDrop()) {
+          return;
+        }
+        void tree.props.onMove?.({
+          dragIds: tree.state.dnd.dragIds,
+          dragNodes: tree.dragNodes,
+          parentId: node.id,
+          parentNode: node,
+          index: 0,
+        });
+        tree.open(node.id);
+      },
+    }),
+    [tree, node.id],
+  );
+
+  useHoverExpand(node, isHovering);
+
+  // Replacing innerRef avoids attaching Arborist's positional drop target.
+  // Retain its focus behavior for keyboard navigation and rename completion.
+  useEffect(() => {
+    if (node.isFocused && !node.isEditing) {
+      rowRef.current?.focus({ preventScroll: true });
+    }
+  }, [node.isFocused, node.isEditing]);
+
+  return (
+    <FileTreeRow
+      {...props}
+      innerRef={(element) => {
+        rowRef.current = element;
+        dropRef(element);
+      }}
+    />
+  );
+}