Turn the Files tab into a real file manager
Rename, an in-app viewer for text and images, host-to-container drag and drop, New folder, keyboard operation — plus the pre-existing bugs the new surface would otherwise have been built on top of. New Tauri commands (file_commands.rs, registered in lib.rs): * rename_container_path — `mv -n -- <from> <parent>/<name>` through exec_oneshot_as, so the *exit code* is checked. exec_oneshot discards the status and interleaves stderr into stdout, which would have made a permission failure look like a success. `mv -n` on its own is not enough either: GNU coreutils makes its refusal to clobber silent and exits 0, so an explicit `test -e` on the destination is what turns a name clash into an error the user sees. `mv`'s own words are surfaced, since renames outside /workspace legitimately fail on permissions. The new name is validated in Rust (no `/`, no NUL, not "." / ".." / empty, ≤255 bytes) — it is user text going into argv, and a name with a separator would be a move rather than a rename. * read_container_file — exact bytes via Docker's archive endpoint, returned as base64. Deliberately not exec_oneshot, which runs every chunk through String::from_utf8_lossy and merges stderr, so it would corrupt any non-UTF-8 file and could splice diagnostics into content. Base64 rather than Vec<u8> because Tauri serialises a byte vec as a JSON number array. Capped and truncation-reporting; the caller picks the cap (images get 5 MiB against text's 1 MiB, being the kind that blows a text-sized budget) and Rust clamps it to 8 MiB regardless. * create_container_directory — `mkdir` without -p, so a clash is an error rather than a silent success. Named for its siblings rather than the bare `create_directory` in the brief. The tar-extraction half of download_container_file is now the shared fetch_container_file() both commands use, and it abandons the transfer once a capped read has what it needs. Frontend: * Single click selects, double click opens. Directory navigation moved onto double click too — a single click used to navigate, which made it impossible to select a directory in order to rename it. Rows are now focusable and the table is a real `grid`: Enter opens, F2 renames, arrows walk the rows. No outline suppression; the global :focus-visible ring is what shows focus. * FileViewerModal (built on ui/Modal, the only correct dialog) renders text in a <pre> and images from a revocable blob: URL. tauri.conf.json's img-src had neither `data:` nor `blob:`, so an in-app image was blocked by CSP; `blob:` is added — revocable, and no megabytes of base64 in the DOM. The asset protocol stays disabled. Anything else gets a "Save to host" state instead of a broken preview, decided by extension and then by sniffing the bytes for NUL. * Host drag-and-drop uses Tauri's native onDragDropEvent, mirroring TerminalView: HTML5 ondrop carries no paths and is blocked in the webview on Windows by dragDropEnabled, which the terminal needs. The listener is window-wide, so it routes by hit-testing the payload position (physical pixels, hence the devicePixelRatio divide) against the pane's rect — a hidden pane has a zero-size rect and never matches, which is what keeps this and the terminal's listener apart. enter/over/leave drive a drop highlight. * Per-row Download is now "Save to host…"; directories no longer offer it. Pre-existing bugs fixed: * Uploaded files landed root:root with a 1970 mtime. tar::Header::new_gnu() zeroes uid/gid/mtime and Docker honours the header verbatim, so uploads were not writable by `claude`. All four single-file tar builds now go through build_single_file_tar() with the container user's ids, read from the container because entrypoint.sh remaps them to the host user on Unix and deliberately does not on Windows. * Symlinked directories could not be opened: `find -printf '%y'` reports `l`. The listing now prints `%Y` as well, so is_directory dereferences and a new is_symlink carries what `%y` used to say. The row labels the link. * upload_file_to_container had no size cap and did a synchronous fs::read on an async worker. Now 256 MiB (matching the terminal drop path) with the read and tar build in spawn_blocking, and the host mtime preserved. * A directory passed to upload reached fs::read and produced an opaque "Is a directory". Rejected with an explanation instead — recursive upload is a larger feature than this panel needs. * download_container_file wrote the *first tar entry*, so downloading a directory silently produced a garbage file. Non-regular entries are now an explicit error. Tests: 46 new (33 frontend across FilesTab, useFileManager and filePreview; 12 Rust covering the find-output parser and the rename validator, neither of which had any). 405 frontend / 297 Rust, both green. No drag-out dependency was added — tauri-plugin-drag is not introduced and OS drag-out is not attempted; that stays deferred, with "Save to host…" as the way files leave the container. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GBq2rGum6GX7xXgsas1fDc
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,211 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { act, renderHook, waitFor } from "@testing-library/react";
|
||||
import { useFileManager } from "./useFileManager";
|
||||
import type { FileEntry } from "../lib/types";
|
||||
|
||||
const listContainerFiles = vi.fn();
|
||||
const downloadContainerFile = vi.fn();
|
||||
const uploadFileToContainer = vi.fn();
|
||||
const renameContainerPath = vi.fn();
|
||||
const createContainerDirectory = vi.fn();
|
||||
|
||||
vi.mock("../lib/tauri-commands", () => ({
|
||||
listContainerFiles: (p: string, path: string) => listContainerFiles(p, path),
|
||||
downloadContainerFile: (p: string, c: string, h: string) => downloadContainerFile(p, c, h),
|
||||
uploadFileToContainer: (p: string, h: string, d: string) => uploadFileToContainer(p, h, d),
|
||||
renameContainerPath: (p: string, f: string, t: string) => renameContainerPath(p, f, t),
|
||||
createContainerDirectory: (p: string, parent: string, n: string) =>
|
||||
createContainerDirectory(p, parent, n),
|
||||
readContainerFile: vi.fn(),
|
||||
}));
|
||||
|
||||
const save = vi.fn();
|
||||
const openDialog = vi.fn();
|
||||
vi.mock("@tauri-apps/plugin-dialog", () => ({
|
||||
save: (opts: unknown) => save(opts),
|
||||
open: (opts: unknown) => openDialog(opts),
|
||||
}));
|
||||
|
||||
const file = (name: string, extra: Partial<FileEntry> = {}): FileEntry => ({
|
||||
name,
|
||||
path: `/workspace/${name}`,
|
||||
is_directory: false,
|
||||
is_symlink: false,
|
||||
size: 10,
|
||||
modified: "2024-01-01 00:00:00",
|
||||
permissions: "644",
|
||||
...extra,
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
listContainerFiles.mockResolvedValue([file("a.txt")]);
|
||||
});
|
||||
|
||||
describe("useFileManager navigation", () => {
|
||||
it("lists a directory and remembers where it is", async () => {
|
||||
const { result } = renderHook(() => useFileManager("p1"));
|
||||
await act(async () => {
|
||||
await result.current.navigate("/workspace/app");
|
||||
});
|
||||
expect(listContainerFiles).toHaveBeenCalledWith("p1", "/workspace/app");
|
||||
expect(result.current.currentPath).toBe("/workspace/app");
|
||||
expect(result.current.entries).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("surfaces a listing failure rather than showing a stale directory", async () => {
|
||||
listContainerFiles.mockRejectedValueOnce("Permission denied");
|
||||
const { result } = renderHook(() => useFileManager("p1"));
|
||||
await act(async () => {
|
||||
await result.current.navigate("/root");
|
||||
});
|
||||
expect(result.current.error).toContain("Permission denied");
|
||||
expect(result.current.currentPath).toBe("/workspace");
|
||||
});
|
||||
|
||||
it("goes up one level, and stops at the root", async () => {
|
||||
const { result } = renderHook(() => useFileManager("p1"));
|
||||
await act(async () => {
|
||||
await result.current.navigate("/workspace/app/src");
|
||||
});
|
||||
await act(async () => {
|
||||
result.current.goUp();
|
||||
});
|
||||
await waitFor(() => expect(result.current.currentPath).toBe("/workspace/app"));
|
||||
|
||||
await act(async () => {
|
||||
await result.current.navigate("/");
|
||||
});
|
||||
listContainerFiles.mockClear();
|
||||
await act(async () => {
|
||||
result.current.goUp();
|
||||
});
|
||||
expect(listContainerFiles).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("useFileManager uploads", () => {
|
||||
it("uploads every dropped path into the current directory, then re-lists once", async () => {
|
||||
const { result } = renderHook(() => useFileManager("p1"));
|
||||
await act(async () => {
|
||||
await result.current.navigate("/workspace/app");
|
||||
});
|
||||
listContainerFiles.mockClear();
|
||||
|
||||
await act(async () => {
|
||||
await result.current.uploadPaths(["/host/a.png", "/host/b.png"]);
|
||||
});
|
||||
|
||||
expect(uploadFileToContainer).toHaveBeenNthCalledWith(1, "p1", "/host/a.png", "/workspace/app");
|
||||
expect(uploadFileToContainer).toHaveBeenNthCalledWith(2, "p1", "/host/b.png", "/workspace/app");
|
||||
// One refresh for the batch, not one per file.
|
||||
expect(listContainerFiles).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("reports a failed upload but still lists whatever did land", async () => {
|
||||
uploadFileToContainer.mockResolvedValueOnce(undefined);
|
||||
uploadFileToContainer.mockRejectedValueOnce("File too large to upload (900 MB; limit 256 MB)");
|
||||
const { result } = renderHook(() => useFileManager("p1"));
|
||||
await act(async () => {
|
||||
await result.current.uploadPaths(["/host/ok.txt", "/host/huge.bin"]);
|
||||
});
|
||||
expect(result.current.error).toContain("too large");
|
||||
expect(listContainerFiles).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("does nothing when the file picker is cancelled", async () => {
|
||||
openDialog.mockResolvedValue(null);
|
||||
const { result } = renderHook(() => useFileManager("p1"));
|
||||
await act(async () => {
|
||||
await result.current.uploadFile();
|
||||
});
|
||||
expect(uploadFileToContainer).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("useFileManager rename and mkdir", () => {
|
||||
it("sends the bare new name, never a path, and re-lists on success", async () => {
|
||||
renameContainerPath.mockResolvedValue("/workspace/renamed.txt");
|
||||
const { result } = renderHook(() => useFileManager("p1"));
|
||||
await act(async () => {
|
||||
await result.current.navigate("/workspace");
|
||||
});
|
||||
listContainerFiles.mockClear();
|
||||
|
||||
let ok: boolean | undefined;
|
||||
await act(async () => {
|
||||
ok = await result.current.renameEntry(file("a.txt"), " renamed.txt ");
|
||||
});
|
||||
expect(ok).toBe(true);
|
||||
expect(renameContainerPath).toHaveBeenCalledWith("p1", "/workspace/a.txt", "renamed.txt");
|
||||
expect(listContainerFiles).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("keeps the editor open and shows what the container said when a rename fails", async () => {
|
||||
// Renames outside /workspace legitimately fail; the user needs mv's words.
|
||||
renameContainerPath.mockRejectedValue("mv: cannot move '/etc/hosts': Permission denied");
|
||||
const { result } = renderHook(() => useFileManager("p1"));
|
||||
let ok: boolean | undefined;
|
||||
await act(async () => {
|
||||
ok = await result.current.renameEntry(file("hosts"), "hosts.bak");
|
||||
});
|
||||
expect(ok).toBe(false);
|
||||
expect(result.current.error).toContain("Permission denied");
|
||||
});
|
||||
|
||||
it("treats an unchanged name as a no-op rather than a round trip", async () => {
|
||||
const { result } = renderHook(() => useFileManager("p1"));
|
||||
await act(async () => {
|
||||
await result.current.renameEntry(file("a.txt"), "a.txt");
|
||||
});
|
||||
expect(renameContainerPath).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("creates a folder under the current directory", async () => {
|
||||
createContainerDirectory.mockResolvedValue("/workspace/app/new");
|
||||
const { result } = renderHook(() => useFileManager("p1"));
|
||||
await act(async () => {
|
||||
await result.current.navigate("/workspace/app");
|
||||
});
|
||||
await act(async () => {
|
||||
await result.current.createFolder(" new ");
|
||||
});
|
||||
expect(createContainerDirectory).toHaveBeenCalledWith("p1", "/workspace/app", "new");
|
||||
});
|
||||
|
||||
it("surfaces a clash instead of silently doing nothing", async () => {
|
||||
createContainerDirectory.mockRejectedValue("mkdir: cannot create directory 'src': File exists");
|
||||
const { result } = renderHook(() => useFileManager("p1"));
|
||||
let ok: boolean | undefined;
|
||||
await act(async () => {
|
||||
ok = await result.current.createFolder("src");
|
||||
});
|
||||
expect(ok).toBe(false);
|
||||
expect(result.current.error).toContain("File exists");
|
||||
});
|
||||
});
|
||||
|
||||
describe("useFileManager save to host", () => {
|
||||
it("writes to the path the user picked", async () => {
|
||||
save.mockResolvedValue("/host/Downloads/a.txt");
|
||||
const { result } = renderHook(() => useFileManager("p1"));
|
||||
await act(async () => {
|
||||
await result.current.downloadFile(file("a.txt"));
|
||||
});
|
||||
expect(downloadContainerFile).toHaveBeenCalledWith(
|
||||
"p1",
|
||||
"/workspace/a.txt",
|
||||
"/host/Downloads/a.txt",
|
||||
);
|
||||
});
|
||||
|
||||
it("reports a refused download — a directory is no longer written as garbage", async () => {
|
||||
save.mockResolvedValue("/host/Downloads/src");
|
||||
downloadContainerFile.mockRejectedValue("/workspace/src is a folder — download its files individually");
|
||||
const { result } = renderHook(() => useFileManager("p1"));
|
||||
await act(async () => {
|
||||
await result.current.downloadFile(file("src", { is_directory: true }));
|
||||
});
|
||||
expect(result.current.error).toContain("is a folder");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user