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,157 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import type { FileEntry } from "../../../lib/types";
|
||||
import { readContainerFile } from "../../../lib/tauri-commands";
|
||||
import Button from "../../ui/Button";
|
||||
import Modal from "../../ui/Modal";
|
||||
import { formatBytes } from "./format";
|
||||
import {
|
||||
decodeBase64,
|
||||
imageMimeFor,
|
||||
looksBinary,
|
||||
previewKind,
|
||||
previewLimit,
|
||||
} from "./filePreview";
|
||||
|
||||
interface Props {
|
||||
projectId: string;
|
||||
entry: FileEntry;
|
||||
onClose: () => void;
|
||||
/** "Save to host…" — the way out for anything the viewer can't render. */
|
||||
onSaveToHost: (entry: FileEntry) => void;
|
||||
}
|
||||
|
||||
type Preview =
|
||||
| { kind: "loading" }
|
||||
| { kind: "error"; message: string }
|
||||
/** Too big to render whole — offered as a download rather than a half-file. */
|
||||
| { kind: "too-large" }
|
||||
| { kind: "text"; text: string; truncated: boolean; shownBytes: number; trueSize: number }
|
||||
| { kind: "image"; url: string }
|
||||
| { kind: "unsupported" };
|
||||
|
||||
/**
|
||||
* Read-only preview of one container file.
|
||||
*
|
||||
* Images are rendered from a `blob:` URL rather than a `data:` one — the object
|
||||
* URL is revocable (so the bytes are released the moment the modal closes) and
|
||||
* keeps a multi-megabyte base64 string out of the DOM. `blob:` is in the app's
|
||||
* `img-src` for exactly this; the asset protocol deliberately is not enabled.
|
||||
*/
|
||||
export default function FileViewerModal({ projectId, entry, onClose, onSaveToHost }: Props) {
|
||||
const [preview, setPreview] = useState<Preview>({ kind: "loading" });
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
// Tracked separately from `preview` so cleanup can revoke it without
|
||||
// depending on which state the component ended up in.
|
||||
let objectUrl: string | null = null;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const wantImage = previewKind(entry.name) === "image";
|
||||
const result = await readContainerFile(projectId, entry.path, previewLimit(entry.name));
|
||||
if (cancelled) return;
|
||||
|
||||
const bytes = decodeBase64(result.contents_base64);
|
||||
|
||||
if (wantImage) {
|
||||
// A truncated image is not a smaller image, it is a broken one.
|
||||
if (result.truncated) {
|
||||
setPreview({ kind: "too-large" });
|
||||
return;
|
||||
}
|
||||
const blob = new Blob([bytes], { type: imageMimeFor(entry.name) ?? "image/png" });
|
||||
objectUrl = URL.createObjectURL(blob);
|
||||
setPreview({ kind: "image", url: objectUrl });
|
||||
return;
|
||||
}
|
||||
|
||||
if (looksBinary(bytes)) {
|
||||
setPreview({ kind: "unsupported" });
|
||||
return;
|
||||
}
|
||||
|
||||
setPreview({
|
||||
kind: "text",
|
||||
text: new TextDecoder().decode(bytes),
|
||||
truncated: result.truncated,
|
||||
shownBytes: bytes.length,
|
||||
trueSize: result.size,
|
||||
});
|
||||
} catch (e) {
|
||||
if (!cancelled) setPreview({ kind: "error", message: String(e) });
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
if (objectUrl) URL.revokeObjectURL(objectUrl);
|
||||
};
|
||||
}, [projectId, entry.name, entry.path]);
|
||||
|
||||
const footer = (
|
||||
<>
|
||||
<Button
|
||||
size="md"
|
||||
onClick={() => {
|
||||
onSaveToHost(entry);
|
||||
}}
|
||||
>
|
||||
Save to host…
|
||||
</Button>
|
||||
<Button size="md" variant="primary" onClick={onClose}>
|
||||
Close
|
||||
</Button>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={entry.name}
|
||||
description={`${entry.path} · ${formatBytes(entry.size)}`}
|
||||
onClose={onClose}
|
||||
footer={footer}
|
||||
widthClassName="w-[52rem]"
|
||||
>
|
||||
{preview.kind === "loading" && (
|
||||
<p className="text-[13px] text-[var(--text-secondary)]">Loading…</p>
|
||||
)}
|
||||
|
||||
{preview.kind === "error" && (
|
||||
<p role="alert" className="text-[13px] text-[var(--error)]">
|
||||
{preview.message}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{preview.kind === "too-large" && (
|
||||
<p className="text-[13px] text-[var(--text-secondary)]">
|
||||
This file is {formatBytes(entry.size)} — too large to preview in the app. Save it
|
||||
to the host to open it there.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{preview.kind === "unsupported" && (
|
||||
<p className="text-[13px] text-[var(--text-secondary)]">
|
||||
There is no preview for this file type. Save it to the host to open it there.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{preview.kind === "text" && (
|
||||
<>
|
||||
{preview.truncated && (
|
||||
<p className="mb-2 text-xs text-[var(--warning)]">
|
||||
Showing the first {formatBytes(preview.shownBytes)} of {formatBytes(preview.trueSize)}.
|
||||
</p>
|
||||
)}
|
||||
<pre className="whitespace-pre-wrap break-words font-mono text-xs text-[var(--text-primary)]">
|
||||
{preview.text}
|
||||
</pre>
|
||||
</>
|
||||
)}
|
||||
|
||||
{preview.kind === "image" && (
|
||||
<img src={preview.url} alt={entry.name} className="max-w-full mx-auto" />
|
||||
)}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,350 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen, fireEvent, act, waitFor } from "@testing-library/react";
|
||||
import FilesTab from "./FilesTab";
|
||||
import type { FileContents, FileEntry, Project } from "../../../lib/types";
|
||||
|
||||
const listContainerFiles = vi.fn();
|
||||
const downloadContainerFile = vi.fn(async () => {});
|
||||
const uploadFileToContainer = vi.fn(async () => {});
|
||||
const renameContainerPath = vi.fn(async () => "");
|
||||
const createContainerDirectory = vi.fn(async () => "");
|
||||
const readContainerFile = 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: (p: string, path: string, max?: number) => readContainerFile(p, path, max),
|
||||
}));
|
||||
|
||||
const save = vi.fn(async () => "/host/out");
|
||||
vi.mock("@tauri-apps/plugin-dialog", () => ({
|
||||
save: (o: unknown) => save(o),
|
||||
open: vi.fn(async () => null),
|
||||
}));
|
||||
|
||||
/** The webview's window-wide native drag-drop listener, captured for driving. */
|
||||
type DragPayload =
|
||||
| { type: "enter" | "over"; position: { x: number; y: number }; paths: string[] }
|
||||
| { type: "leave" }
|
||||
| { type: "drop"; position: { x: number; y: number }; paths: string[] };
|
||||
let dragHandler: ((e: { payload: DragPayload }) => void | Promise<void>) | null = null;
|
||||
const unlistenDrag = vi.fn();
|
||||
|
||||
vi.mock("@tauri-apps/api/webview", () => ({
|
||||
getCurrentWebview: () => ({
|
||||
onDragDropEvent: async (cb: (e: { payload: DragPayload }) => void) => {
|
||||
dragHandler = cb;
|
||||
return unlistenDrag;
|
||||
},
|
||||
}),
|
||||
}));
|
||||
|
||||
const project = { id: "p1", name: "api", status: "running" } as unknown as Project;
|
||||
|
||||
const entry = (name: string, extra: Partial<FileEntry> = {}): FileEntry => ({
|
||||
name,
|
||||
path: `/workspace/${name}`,
|
||||
is_directory: false,
|
||||
is_symlink: false,
|
||||
size: 12,
|
||||
modified: "2024-05-01 10:00:00",
|
||||
permissions: "644",
|
||||
...extra,
|
||||
});
|
||||
|
||||
const contents = (text: string, extra: Partial<FileContents> = {}): FileContents => ({
|
||||
contents_base64: btoa(text),
|
||||
truncated: false,
|
||||
size: text.length,
|
||||
...extra,
|
||||
});
|
||||
|
||||
async function renderTab() {
|
||||
const view = render(<FilesTab project={project} />);
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
});
|
||||
return view;
|
||||
}
|
||||
|
||||
/** Fire the native drop payload at a point inside the pane's stubbed rect. */
|
||||
async function drop(paths: string[], position = { x: 100, y: 100 }) {
|
||||
await act(async () => {
|
||||
await dragHandler?.({ payload: { type: "drop", position, paths } });
|
||||
});
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
dragHandler = null;
|
||||
listContainerFiles.mockResolvedValue([
|
||||
entry("src", { is_directory: true, path: "/workspace/src" }),
|
||||
entry("notes.txt"),
|
||||
]);
|
||||
// jsdom lays nothing out, so the pane's hit-test rect has to be supplied.
|
||||
vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({
|
||||
x: 0, y: 0, left: 0, top: 0, right: 800, bottom: 600, width: 800, height: 600,
|
||||
toJSON: () => ({}),
|
||||
} as DOMRect);
|
||||
// Not implemented in jsdom; the image preview needs both halves.
|
||||
URL.createObjectURL = vi.fn(() => "blob:mock-url");
|
||||
URL.revokeObjectURL = vi.fn();
|
||||
});
|
||||
|
||||
describe("FilesTab listing", () => {
|
||||
it("lists /workspace once the container is running", async () => {
|
||||
await renderTab();
|
||||
expect(listContainerFiles).toHaveBeenCalledWith("p1", "/workspace");
|
||||
expect(screen.getByText("notes.txt")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("says nothing about files while the container is stopped", async () => {
|
||||
render(<FilesTab project={{ ...project, status: "stopped" } as Project} />);
|
||||
expect(screen.getByText(/Start the container/)).toBeTruthy();
|
||||
expect(listContainerFiles).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("labels a symlink, which no longer masquerades as a plain file", async () => {
|
||||
listContainerFiles.mockResolvedValue([
|
||||
entry("app", { is_directory: true, is_symlink: true }),
|
||||
]);
|
||||
await renderTab();
|
||||
expect(screen.getByTitle("Symbolic link")).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("FilesTab open semantics", () => {
|
||||
it("selects on a single click without navigating", async () => {
|
||||
await renderTab();
|
||||
listContainerFiles.mockClear();
|
||||
fireEvent.click(screen.getByText("src"));
|
||||
expect(listContainerFiles).not.toHaveBeenCalled();
|
||||
expect(screen.getByText("src").closest("tr")?.getAttribute("aria-selected")).toBe("true");
|
||||
});
|
||||
|
||||
it("navigates a directory on double click", async () => {
|
||||
await renderTab();
|
||||
listContainerFiles.mockClear();
|
||||
await act(async () => {
|
||||
fireEvent.doubleClick(screen.getByText("src"));
|
||||
});
|
||||
expect(listContainerFiles).toHaveBeenCalledWith("p1", "/workspace/src");
|
||||
});
|
||||
|
||||
it("walks the rows with the arrow keys, which is what makes the grid role honest", async () => {
|
||||
await renderTab();
|
||||
const first = screen.getByText("src").closest("tr")!;
|
||||
first.focus();
|
||||
fireEvent.keyDown(first, { key: "ArrowDown" });
|
||||
expect(document.activeElement).toBe(screen.getByText("notes.txt").closest("tr"));
|
||||
fireEvent.keyDown(document.activeElement!, { key: "ArrowUp" });
|
||||
expect(document.activeElement).toBe(first);
|
||||
});
|
||||
|
||||
it("opens a directory from the keyboard with Enter", async () => {
|
||||
await renderTab();
|
||||
listContainerFiles.mockClear();
|
||||
const row = screen.getByText("src").closest("tr")!;
|
||||
expect(row.getAttribute("tabindex")).toBe("0");
|
||||
await act(async () => {
|
||||
fireEvent.keyDown(row, { key: "Enter" });
|
||||
});
|
||||
expect(listContainerFiles).toHaveBeenCalledWith("p1", "/workspace/src");
|
||||
});
|
||||
});
|
||||
|
||||
describe("FilesTab viewer", () => {
|
||||
it("shows a text file's contents in a dialog", async () => {
|
||||
readContainerFile.mockResolvedValue(contents("hello from the container"));
|
||||
await renderTab();
|
||||
await act(async () => {
|
||||
fireEvent.doubleClick(screen.getByText("notes.txt"));
|
||||
});
|
||||
const dialog = await screen.findByRole("dialog");
|
||||
expect(dialog).toBeTruthy();
|
||||
expect(await screen.findByText("hello from the container")).toBeTruthy();
|
||||
// A text file gets the text-sized budget, not the image one.
|
||||
expect(readContainerFile).toHaveBeenCalledWith("p1", "/workspace/notes.txt", 1024 * 1024);
|
||||
});
|
||||
|
||||
it("renders an image through a revocable blob URL, not a data URI", async () => {
|
||||
// `data:` is absent from the app's img-src on purpose; `blob:` is what was
|
||||
// added, and the object URL has to be released when the dialog closes.
|
||||
listContainerFiles.mockResolvedValue([entry("logo.png", { size: 4 })]);
|
||||
readContainerFile.mockResolvedValue(contents("\x89PNG"));
|
||||
await renderTab();
|
||||
await act(async () => {
|
||||
fireEvent.doubleClick(screen.getByText("logo.png"));
|
||||
});
|
||||
const img = (await screen.findByAltText("logo.png")) as HTMLImageElement;
|
||||
expect(img.getAttribute("src")).toBe("blob:mock-url");
|
||||
expect(readContainerFile).toHaveBeenCalledWith("p1", "/workspace/logo.png", 5 * 1024 * 1024);
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Close" }));
|
||||
await waitFor(() => expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:mock-url"));
|
||||
});
|
||||
|
||||
it("refuses an oversized image rather than drawing a half-decoded one", async () => {
|
||||
listContainerFiles.mockResolvedValue([entry("huge.png", { size: 40 * 1024 * 1024 })]);
|
||||
readContainerFile.mockResolvedValue(contents("\x89PNG", { truncated: true, size: 40 * 1024 * 1024 }));
|
||||
await renderTab();
|
||||
await act(async () => {
|
||||
fireEvent.doubleClick(screen.getByText("huge.png"));
|
||||
});
|
||||
expect(await screen.findByText(/too large to preview/)).toBeTruthy();
|
||||
expect(screen.queryByAltText("huge.png")).toBeNull();
|
||||
expect(screen.getByRole("button", { name: "Save to host…" })).toBeTruthy();
|
||||
});
|
||||
|
||||
it("says so in words when only a prefix of a big text file came back", async () => {
|
||||
readContainerFile.mockResolvedValue(
|
||||
contents("first megabyte", { truncated: true, size: 5 * 1024 * 1024 }),
|
||||
);
|
||||
await renderTab();
|
||||
await act(async () => {
|
||||
fireEvent.doubleClick(screen.getByText("notes.txt"));
|
||||
});
|
||||
expect(await screen.findByText(/Showing the first/)).toBeTruthy();
|
||||
expect(screen.getByText("first megabyte")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("offers Save to host for a file it cannot render", async () => {
|
||||
listContainerFiles.mockResolvedValue([entry("blob.bin")]);
|
||||
readContainerFile.mockResolvedValue(contents("a\x00b"));
|
||||
await renderTab();
|
||||
await act(async () => {
|
||||
fireEvent.doubleClick(screen.getByText("blob.bin"));
|
||||
});
|
||||
expect(await screen.findByText(/no preview for this file type/)).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("FilesTab rename", () => {
|
||||
it("commits an inline rename on Enter and re-lists", async () => {
|
||||
await renderTab();
|
||||
fireEvent.click(screen.getByRole("button", { name: "Rename notes.txt" }));
|
||||
const input = screen.getByLabelText("New name for notes.txt") as HTMLInputElement;
|
||||
fireEvent.change(input, { target: { value: "renamed.txt" } });
|
||||
await act(async () => {
|
||||
fireEvent.keyDown(input, { key: "Enter" });
|
||||
fireEvent.blur(input);
|
||||
});
|
||||
expect(renameContainerPath).toHaveBeenCalledWith("p1", "/workspace/notes.txt", "renamed.txt");
|
||||
});
|
||||
|
||||
it("abandons the rename on Escape", async () => {
|
||||
await renderTab();
|
||||
fireEvent.click(screen.getByRole("button", { name: "Rename notes.txt" }));
|
||||
const input = screen.getByLabelText("New name for notes.txt");
|
||||
fireEvent.change(input, { target: { value: "nope.txt" } });
|
||||
await act(async () => {
|
||||
fireEvent.keyDown(input, { key: "Escape" });
|
||||
});
|
||||
expect(renameContainerPath).not.toHaveBeenCalled();
|
||||
expect(screen.queryByLabelText("New name for notes.txt")).toBeNull();
|
||||
});
|
||||
|
||||
it("starts a rename from the keyboard with F2", async () => {
|
||||
await renderTab();
|
||||
const row = screen.getByText("notes.txt").closest("tr")!;
|
||||
fireEvent.keyDown(row, { key: "F2" });
|
||||
expect(screen.getByLabelText("New name for notes.txt")).toBeTruthy();
|
||||
});
|
||||
|
||||
it("shows what the container said when a rename is refused", async () => {
|
||||
renameContainerPath.mockRejectedValue("mv: cannot move '/etc/hosts': Permission denied");
|
||||
await renderTab();
|
||||
fireEvent.click(screen.getByRole("button", { name: "Rename notes.txt" }));
|
||||
const input = screen.getByLabelText("New name for notes.txt");
|
||||
fireEvent.change(input, { target: { value: "x" } });
|
||||
await act(async () => {
|
||||
fireEvent.blur(input);
|
||||
});
|
||||
expect(screen.getByRole("alert").textContent).toContain("Permission denied");
|
||||
});
|
||||
});
|
||||
|
||||
describe("FilesTab new folder", () => {
|
||||
it("creates a folder under the current directory", async () => {
|
||||
await renderTab();
|
||||
fireEvent.click(screen.getByRole("button", { name: "New folder" }));
|
||||
const input = screen.getByLabelText("New folder name");
|
||||
fireEvent.change(input, { target: { value: "assets" } });
|
||||
await act(async () => {
|
||||
fireEvent.blur(input);
|
||||
});
|
||||
expect(createContainerDirectory).toHaveBeenCalledWith("p1", "/workspace", "assets");
|
||||
});
|
||||
});
|
||||
|
||||
describe("FilesTab host drag-and-drop", () => {
|
||||
it("uploads dropped paths into the directory on screen, then re-lists", async () => {
|
||||
await renderTab();
|
||||
listContainerFiles.mockClear();
|
||||
await drop(["/host/a.png", "/host/b.png"]);
|
||||
expect(uploadFileToContainer).toHaveBeenNthCalledWith(1, "p1", "/host/a.png", "/workspace");
|
||||
expect(uploadFileToContainer).toHaveBeenNthCalledWith(2, "p1", "/host/b.png", "/workspace");
|
||||
expect(listContainerFiles).toHaveBeenCalledWith("p1", "/workspace");
|
||||
});
|
||||
|
||||
it("drops into the directory the user has navigated to", async () => {
|
||||
await renderTab();
|
||||
await act(async () => {
|
||||
fireEvent.doubleClick(screen.getByText("src"));
|
||||
});
|
||||
await drop(["/host/a.png"]);
|
||||
expect(uploadFileToContainer).toHaveBeenCalledWith("p1", "/host/a.png", "/workspace/src");
|
||||
});
|
||||
|
||||
it("ignores a drop outside the pane — the listener is window-wide", async () => {
|
||||
// This is the whole routing discipline: the terminal's listener is live at
|
||||
// the same time, and only the hit-test keeps them apart.
|
||||
await renderTab();
|
||||
await drop(["/host/a.png"], { x: 5000, y: 5000 });
|
||||
expect(uploadFileToContainer).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("divides the payload position by devicePixelRatio", async () => {
|
||||
// The native payload is in physical pixels; the rect is in CSS pixels.
|
||||
// At dpr 2 a physical (900, 900) is a CSS (450, 450) — inside an 800x600 pane.
|
||||
const original = window.devicePixelRatio;
|
||||
Object.defineProperty(window, "devicePixelRatio", { value: 2, configurable: true });
|
||||
await renderTab();
|
||||
await drop(["/host/a.png"], { x: 900, y: 900 });
|
||||
expect(uploadFileToContainer).toHaveBeenCalled();
|
||||
Object.defineProperty(window, "devicePixelRatio", { value: original, configurable: true });
|
||||
});
|
||||
|
||||
it("highlights the pane while a drag hovers it, and drops the highlight on leave", async () => {
|
||||
await renderTab();
|
||||
await act(async () => {
|
||||
await dragHandler?.({
|
||||
payload: { type: "over", position: { x: 100, y: 100 }, paths: [] },
|
||||
});
|
||||
});
|
||||
expect(screen.getByText(/Drop files into \/workspace/)).toBeTruthy();
|
||||
await act(async () => {
|
||||
await dragHandler?.({ payload: { type: "leave" } });
|
||||
});
|
||||
expect(screen.queryByText(/Drop files into/)).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe("FilesTab save to host", () => {
|
||||
it("copies a file out to the path the user picks", async () => {
|
||||
await renderTab();
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByRole("button", { name: "Save notes.txt to host" }));
|
||||
});
|
||||
expect(downloadContainerFile).toHaveBeenCalledWith("p1", "/workspace/notes.txt", "/host/out");
|
||||
});
|
||||
|
||||
it("does not offer a directory download, which cannot work", async () => {
|
||||
await renderTab();
|
||||
expect(screen.queryByRole("button", { name: "Save src to host" })).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -1,34 +1,175 @@
|
||||
import { useEffect } from "react";
|
||||
import type { Project } from "../../../lib/types";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { getCurrentWebview } from "@tauri-apps/api/webview";
|
||||
import type { FileEntry, Project } from "../../../lib/types";
|
||||
import { useFileManager } from "../../../hooks/useFileManager";
|
||||
import Button from "../../ui/Button";
|
||||
import FileViewerModal from "./FileViewerModal";
|
||||
import { formatBytes } from "./format";
|
||||
|
||||
interface Props {
|
||||
project: Project;
|
||||
}
|
||||
|
||||
/** The old 42rem FileManager popup, now a main-area section. */
|
||||
/**
|
||||
* The project's file manager.
|
||||
*
|
||||
* Interaction model, chosen to match every desktop file manager rather than
|
||||
* the old half-and-half: **single click selects, double click opens**. That
|
||||
* moved directory navigation onto double click too — a single click used to
|
||||
* navigate, which made it impossible to select a directory in order to rename
|
||||
* it. Keyboard mirrors it exactly: Enter opens, F2 renames.
|
||||
*/
|
||||
export default function FilesTab({ project }: Props) {
|
||||
const {
|
||||
currentPath,
|
||||
entries,
|
||||
loading,
|
||||
error,
|
||||
busy,
|
||||
navigate,
|
||||
goUp,
|
||||
refresh,
|
||||
downloadFile,
|
||||
uploadFile,
|
||||
uploadPaths,
|
||||
renameEntry,
|
||||
createFolder,
|
||||
} = useFileManager(project.id);
|
||||
|
||||
const running = project.status === "running";
|
||||
|
||||
/** The row the user has selected, by name — names are unique in a directory. */
|
||||
const [selected, setSelected] = useState<string | null>(null);
|
||||
const [renaming, setRenaming] = useState<string | null>(null);
|
||||
const [renameDraft, setRenameDraft] = useState("");
|
||||
const [creatingFolder, setCreatingFolder] = useState(false);
|
||||
const [folderDraft, setFolderDraft] = useState("");
|
||||
const [viewing, setViewing] = useState<FileEntry | null>(null);
|
||||
/** A host drag is currently over this pane. */
|
||||
const [dragOver, setDragOver] = useState(false);
|
||||
|
||||
const paneRef = useRef<HTMLDivElement>(null);
|
||||
const renameInputRef = useRef<HTMLInputElement>(null);
|
||||
const folderInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (running) navigate("/workspace");
|
||||
// Re-list when the container comes up.
|
||||
}, [navigate, running]);
|
||||
|
||||
// Leaving a directory invalidates every in-flight row interaction.
|
||||
useEffect(() => {
|
||||
setSelected(null);
|
||||
setRenaming(null);
|
||||
}, [currentPath]);
|
||||
|
||||
useEffect(() => {
|
||||
if (renaming) {
|
||||
renameInputRef.current?.focus();
|
||||
renameInputRef.current?.select();
|
||||
}
|
||||
}, [renaming]);
|
||||
|
||||
useEffect(() => {
|
||||
if (creatingFolder) folderInputRef.current?.focus();
|
||||
}, [creatingFolder]);
|
||||
|
||||
const startRename = useCallback((entry: FileEntry) => {
|
||||
setSelected(entry.name);
|
||||
setRenameDraft(entry.name);
|
||||
setRenaming(entry.name);
|
||||
}, []);
|
||||
|
||||
const commitRename = useCallback(
|
||||
async (entry: FileEntry) => {
|
||||
const done = await renameEntry(entry, renameDraft);
|
||||
if (done) setRenaming(null);
|
||||
},
|
||||
[renameEntry, renameDraft],
|
||||
);
|
||||
|
||||
const commitFolder = useCallback(async () => {
|
||||
const done = await createFolder(folderDraft);
|
||||
if (done) {
|
||||
setCreatingFolder(false);
|
||||
setFolderDraft("");
|
||||
}
|
||||
}, [createFolder, folderDraft]);
|
||||
|
||||
/**
|
||||
* Arrow keys walk the rows. `aria-selected` is only meaningful on a row
|
||||
* inside a `grid`, and a grid is expected to be arrow-navigable — so the
|
||||
* roles below and this handler come as a pair.
|
||||
*/
|
||||
const moveFocus = useCallback((from: HTMLElement, delta: 1 | -1) => {
|
||||
const rows = Array.from(
|
||||
paneRef.current?.querySelectorAll<HTMLElement>('tr[tabindex="0"]') ?? [],
|
||||
);
|
||||
const i = rows.indexOf(from);
|
||||
const next = rows[i + delta];
|
||||
next?.focus();
|
||||
}, []);
|
||||
|
||||
/** Double click / Enter: directories navigate, files open the viewer. */
|
||||
const openEntry = useCallback(
|
||||
(entry: FileEntry) => {
|
||||
if (entry.is_directory) navigate(entry.path);
|
||||
else setViewing(entry);
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
|
||||
// Host → container drag and drop.
|
||||
//
|
||||
// This is Tauri's *native* drag-drop event, not HTML5 `ondrop`, for the same
|
||||
// reason `TerminalView` uses it: `dragDropEnabled` is on (the terminal needs
|
||||
// it), which blocks HTML5 drag inside the webview on Windows, and only the
|
||||
// native payload carries real file *paths*. The listener is window-wide, so
|
||||
// routing is a hit-test of the physical-pixel payload position against this
|
||||
// pane's rect — a hidden pane has a zero-size rect and never matches, which
|
||||
// is what keeps this and the terminal's listener from both firing.
|
||||
useEffect(() => {
|
||||
if (!running) return;
|
||||
let unlisten: (() => void) | undefined;
|
||||
let cancelled = false;
|
||||
|
||||
const insideThisPane = (pos: { x: number; y: number }): boolean => {
|
||||
const rect = paneRef.current?.getBoundingClientRect();
|
||||
if (!rect || rect.width === 0 || rect.height === 0) return false;
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const x = pos.x / dpr;
|
||||
const y = pos.y / dpr;
|
||||
return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
|
||||
};
|
||||
|
||||
(async () => {
|
||||
const un = await getCurrentWebview().onDragDropEvent(async (event) => {
|
||||
const payload = event.payload;
|
||||
if (payload.type === "leave") {
|
||||
setDragOver(false);
|
||||
return;
|
||||
}
|
||||
if (payload.type === "enter" || payload.type === "over") {
|
||||
setDragOver(insideThisPane(payload.position));
|
||||
return;
|
||||
}
|
||||
if (payload.type !== "drop") return;
|
||||
setDragOver(false);
|
||||
if (!insideThisPane(payload.position)) return;
|
||||
const paths = payload.paths ?? [];
|
||||
if (paths.length === 0) return;
|
||||
await uploadPaths(paths);
|
||||
});
|
||||
if (cancelled) un();
|
||||
else unlisten = un;
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
unlisten?.();
|
||||
};
|
||||
}, [running, uploadPaths]);
|
||||
|
||||
const breadcrumbs =
|
||||
currentPath === "/"
|
||||
? [{ label: "/", path: "/" }]
|
||||
@@ -55,8 +196,15 @@ export default function FilesTab({ project }: Props) {
|
||||
);
|
||||
}
|
||||
|
||||
const rowClass = (isSelected: boolean) =>
|
||||
`cursor-pointer transition-colors ${
|
||||
isSelected
|
||||
? "bg-[var(--bg-tertiary)]"
|
||||
: "hover:bg-[var(--bg-tertiary)]"
|
||||
}`;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full min-h-0">
|
||||
<div ref={paneRef} className="relative flex flex-col h-full min-h-0">
|
||||
<div className="flex items-center gap-1 px-4 py-2 border-b border-[var(--border-color)] text-xs overflow-x-auto flex-shrink-0">
|
||||
<nav aria-label="Path" className="flex items-center gap-1">
|
||||
{breadcrumbs.map((crumb, i) => (
|
||||
@@ -73,7 +221,22 @@ export default function FilesTab({ project }: Props) {
|
||||
))}
|
||||
</nav>
|
||||
<div className="flex-1" />
|
||||
<Button onClick={uploadFile}>Upload file</Button>
|
||||
{busy && (
|
||||
<span role="status" className="mr-2 text-[var(--text-secondary)] whitespace-nowrap">
|
||||
{busy}
|
||||
</span>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => {
|
||||
setFolderDraft("");
|
||||
setCreatingFolder(true);
|
||||
}}
|
||||
>
|
||||
New folder
|
||||
</Button>
|
||||
<Button onClick={uploadFile} className="ml-1">
|
||||
Upload file
|
||||
</Button>
|
||||
<Button onClick={refresh} disabled={loading} className="ml-1">
|
||||
Refresh
|
||||
</Button>
|
||||
@@ -91,61 +254,156 @@ export default function FilesTab({ project }: Props) {
|
||||
Loading…
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full text-xs">
|
||||
<table role="grid" aria-label="Files" className="w-full text-xs">
|
||||
<tbody>
|
||||
{currentPath !== "/" && (
|
||||
<tr
|
||||
onClick={goUp}
|
||||
className="cursor-pointer hover:bg-[var(--bg-tertiary)] transition-colors"
|
||||
>
|
||||
<td className="px-4 py-1.5 text-[var(--text-primary)] font-mono">..</td>
|
||||
<td colSpan={3} />
|
||||
{creatingFolder && (
|
||||
<tr>
|
||||
<td role="gridcell" className="px-4 py-1.5" colSpan={4}>
|
||||
<input
|
||||
ref={folderInputRef}
|
||||
value={folderDraft}
|
||||
aria-label="New folder name"
|
||||
placeholder="Folder name"
|
||||
onChange={(e) => setFolderDraft(e.target.value)}
|
||||
onBlur={commitFolder}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") (e.target as HTMLInputElement).blur();
|
||||
if (e.key === "Escape") {
|
||||
setCreatingFolder(false);
|
||||
setFolderDraft("");
|
||||
}
|
||||
}}
|
||||
className="w-64 px-1 py-0 select-text bg-[var(--bg-primary)] border border-[var(--accent)] rounded-[var(--radius-control)] text-xs font-mono text-[var(--text-primary)]"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{entries.map((entry) => (
|
||||
{currentPath !== "/" && (
|
||||
<tr
|
||||
key={entry.name}
|
||||
onClick={() => entry.is_directory && navigate(entry.path)}
|
||||
className={`${
|
||||
entry.is_directory ? "cursor-pointer" : ""
|
||||
} hover:bg-[var(--bg-tertiary)] transition-colors`}
|
||||
tabIndex={0}
|
||||
aria-label="Parent directory"
|
||||
onDoubleClick={goUp}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
goUp();
|
||||
} else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
moveFocus(e.currentTarget, e.key === "ArrowDown" ? 1 : -1);
|
||||
}
|
||||
}}
|
||||
className="cursor-pointer hover:bg-[var(--bg-tertiary)] transition-colors"
|
||||
>
|
||||
<td className="px-4 py-1.5">
|
||||
<span
|
||||
className={`font-mono ${
|
||||
entry.is_directory
|
||||
? "text-[var(--accent)]"
|
||||
: "text-[var(--text-primary)]"
|
||||
}`}
|
||||
>
|
||||
{entry.is_directory ? "📁 " : ""}
|
||||
{entry.name}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-[var(--text-secondary)] text-right whitespace-nowrap tabular-nums">
|
||||
{!entry.is_directory && formatBytes(entry.size)}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-[var(--text-secondary)] whitespace-nowrap">
|
||||
{entry.modified}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-right">
|
||||
{!entry.is_directory && (
|
||||
<Button
|
||||
aria-label={`Download ${entry.name}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
downloadFile(entry);
|
||||
}}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
)}
|
||||
<td role="gridcell" className="px-4 py-1.5 text-[var(--text-primary)] font-mono">
|
||||
..
|
||||
</td>
|
||||
<td role="gridcell" colSpan={3} />
|
||||
</tr>
|
||||
))}
|
||||
)}
|
||||
{entries.map((entry) => {
|
||||
const isSelected = selected === entry.name;
|
||||
const isRenaming = renaming === entry.name;
|
||||
return (
|
||||
<tr
|
||||
key={entry.name}
|
||||
tabIndex={0}
|
||||
aria-selected={isSelected}
|
||||
onClick={() => setSelected(entry.name)}
|
||||
onDoubleClick={() => openEntry(entry)}
|
||||
onKeyDown={(e) => {
|
||||
if (isRenaming) return;
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
setSelected(entry.name);
|
||||
openEntry(entry);
|
||||
} else if (e.key === "F2") {
|
||||
e.preventDefault();
|
||||
startRename(entry);
|
||||
} else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
moveFocus(e.currentTarget, e.key === "ArrowDown" ? 1 : -1);
|
||||
}
|
||||
}}
|
||||
className={rowClass(isSelected)}
|
||||
>
|
||||
<td role="gridcell" className="px-4 py-1.5">
|
||||
{isRenaming ? (
|
||||
<input
|
||||
ref={renameInputRef}
|
||||
value={renameDraft}
|
||||
aria-label={`New name for ${entry.name}`}
|
||||
onChange={(e) => setRenameDraft(e.target.value)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onDoubleClick={(e) => e.stopPropagation()}
|
||||
onBlur={() => commitRename(entry)}
|
||||
onKeyDown={(e) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === "Enter") (e.target as HTMLInputElement).blur();
|
||||
if (e.key === "Escape") setRenaming(null);
|
||||
}}
|
||||
className="w-64 px-1 py-0 select-text bg-[var(--bg-primary)] border border-[var(--accent)] rounded-[var(--radius-control)] text-xs font-mono text-[var(--text-primary)]"
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className={`font-mono ${
|
||||
entry.is_directory
|
||||
? "text-[var(--accent)]"
|
||||
: "text-[var(--text-primary)]"
|
||||
}`}
|
||||
>
|
||||
{entry.is_directory && <span aria-hidden="true">📁 </span>}
|
||||
<span>{entry.name}</span>
|
||||
{entry.is_symlink && (
|
||||
<span
|
||||
className="ml-1 text-[var(--text-secondary)]"
|
||||
title="Symbolic link"
|
||||
>
|
||||
↗ link
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td role="gridcell" className="px-2 py-1.5 text-[var(--text-secondary)] text-right whitespace-nowrap tabular-nums">
|
||||
{!entry.is_directory && formatBytes(entry.size)}
|
||||
</td>
|
||||
<td role="gridcell" className="px-2 py-1.5 text-[var(--text-secondary)] whitespace-nowrap">
|
||||
{entry.modified}
|
||||
</td>
|
||||
<td role="gridcell" className="px-2 py-1.5 text-right whitespace-nowrap">
|
||||
{!isRenaming && (
|
||||
<>
|
||||
<Button
|
||||
aria-label={`Rename ${entry.name}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
startRename(entry);
|
||||
}}
|
||||
>
|
||||
Rename
|
||||
</Button>
|
||||
{!entry.is_directory && (
|
||||
<Button
|
||||
aria-label={`Save ${entry.name} to host`}
|
||||
className="ml-1"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
downloadFile(entry);
|
||||
}}
|
||||
>
|
||||
Save to host…
|
||||
</Button>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{entries.length === 0 && !loading && (
|
||||
<tr>
|
||||
<td
|
||||
role="gridcell"
|
||||
colSpan={4}
|
||||
className="px-4 py-8 text-center text-[var(--text-secondary)]"
|
||||
>
|
||||
@@ -157,6 +415,28 @@ export default function FilesTab({ project }: Props) {
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Drop hint. Purely decorative — the native listener is what accepts the
|
||||
drop, so this must never intercept pointer events. */}
|
||||
{dragOver && (
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute inset-0 flex items-center justify-center border-2 border-dashed border-[var(--accent)] bg-[var(--bg-primary)]/70"
|
||||
>
|
||||
<span className="text-[13px] font-medium text-[var(--text-primary)]">
|
||||
Drop files into {currentPath}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{viewing && (
|
||||
<FileViewerModal
|
||||
projectId={project.id}
|
||||
entry={viewing}
|
||||
onClose={() => setViewing(null)}
|
||||
onSaveToHost={downloadFile}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import {
|
||||
IMAGE_PREVIEW_LIMIT,
|
||||
TEXT_PREVIEW_LIMIT,
|
||||
decodeBase64,
|
||||
extensionOf,
|
||||
imageMimeFor,
|
||||
looksBinary,
|
||||
previewKind,
|
||||
previewLimit,
|
||||
} from "./filePreview";
|
||||
|
||||
describe("extensionOf", () => {
|
||||
it("lowercases, and takes only the last segment", () => {
|
||||
expect(extensionOf("Photo.PNG")).toBe("png");
|
||||
expect(extensionOf("archive.tar.gz")).toBe("gz");
|
||||
expect(extensionOf("/workspace/app/main.rs")).toBe("rs");
|
||||
});
|
||||
|
||||
it("treats a leading dot as hidden, not as an extension", () => {
|
||||
// `.gitignore` is a text file called `.gitignore`, not one of type "gitignore".
|
||||
expect(extensionOf(".gitignore")).toBe("");
|
||||
expect(extensionOf("Makefile")).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
describe("previewKind", () => {
|
||||
it("recognises images by extension, with a MIME the Blob can use", () => {
|
||||
expect(previewKind("logo.png")).toBe("image");
|
||||
expect(imageMimeFor("logo.PNG")).toBe("image/png");
|
||||
expect(imageMimeFor("photo.jpeg")).toBe("image/jpeg");
|
||||
expect(imageMimeFor("icon.svg")).toBe("image/svg+xml");
|
||||
expect(imageMimeFor("notes.txt")).toBeNull();
|
||||
});
|
||||
|
||||
it("recognises known text extensions and conventional extensionless names", () => {
|
||||
expect(previewKind("main.rs")).toBe("text");
|
||||
expect(previewKind("config.yaml")).toBe("text");
|
||||
expect(previewKind("Dockerfile")).toBe("text");
|
||||
expect(previewKind("README")).toBe("text");
|
||||
expect(previewKind(".gitignore")).toBe("text");
|
||||
});
|
||||
|
||||
it("leaves anything else undecided rather than refusing it outright", () => {
|
||||
// `unknown` means "read it and sniff the bytes" — a .bak of a config file
|
||||
// should still preview.
|
||||
expect(previewKind("dump.bak")).toBe("unknown");
|
||||
expect(previewKind("app.wasm")).toBe("unknown");
|
||||
});
|
||||
});
|
||||
|
||||
describe("previewLimit", () => {
|
||||
it("gives images the bigger budget, since they are what blows a text cap", () => {
|
||||
expect(previewLimit("photo.jpg")).toBe(IMAGE_PREVIEW_LIMIT);
|
||||
expect(previewLimit("notes.md")).toBe(TEXT_PREVIEW_LIMIT);
|
||||
expect(previewLimit("mystery.bin")).toBe(TEXT_PREVIEW_LIMIT);
|
||||
expect(IMAGE_PREVIEW_LIMIT).toBeGreaterThan(TEXT_PREVIEW_LIMIT);
|
||||
});
|
||||
});
|
||||
|
||||
describe("decodeBase64 / looksBinary", () => {
|
||||
it("round-trips bytes that are not valid UTF-8", () => {
|
||||
// The reason the backend returns base64 at all: these bytes must survive.
|
||||
const bytes = decodeBase64(btoa("\xff\xd8\xff\xe0"));
|
||||
expect(Array.from(bytes)).toEqual([0xff, 0xd8, 0xff, 0xe0]);
|
||||
});
|
||||
|
||||
it("calls a NUL-bearing prefix binary and plain text text", () => {
|
||||
expect(looksBinary(new Uint8Array([0x68, 0x69, 0x0a]))).toBe(false);
|
||||
expect(looksBinary(new Uint8Array([0x68, 0x00, 0x69]))).toBe(true);
|
||||
});
|
||||
|
||||
it("only sniffs the first 8 KB, so a NUL deep in a big file is ignored", () => {
|
||||
const bytes = new Uint8Array(20000).fill(0x61);
|
||||
bytes[9000] = 0;
|
||||
expect(looksBinary(bytes)).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,107 @@
|
||||
/**
|
||||
* What the Files viewer can show, and how much of it to ask for.
|
||||
*
|
||||
* Pure helpers, deliberately separate from the modal: the type sniffing is
|
||||
* where a preview quietly turns into a screenful of mojibake, and it is worth
|
||||
* testing without a container.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Extension → MIME, for the raster/vector types an `<img>` actually renders.
|
||||
* The MIME matters because the bytes are handed to the DOM as a `Blob`, and a
|
||||
* blob with the wrong (or empty) type will not decode.
|
||||
*/
|
||||
const IMAGE_MIME: Record<string, string> = {
|
||||
png: "image/png",
|
||||
jpg: "image/jpeg",
|
||||
jpeg: "image/jpeg",
|
||||
gif: "image/gif",
|
||||
webp: "image/webp",
|
||||
bmp: "image/bmp",
|
||||
ico: "image/x-icon",
|
||||
avif: "image/avif",
|
||||
// Safe in an `<img>`: that context cannot run the script an SVG may carry.
|
||||
svg: "image/svg+xml",
|
||||
};
|
||||
|
||||
/** Extensions we are confident are text, so no byte sniffing is needed. */
|
||||
const TEXT_EXTENSIONS = new Set([
|
||||
"txt", "md", "markdown", "rst", "log", "csv", "tsv",
|
||||
"json", "jsonc", "yaml", "yml", "toml", "ini", "cfg", "conf", "env", "properties",
|
||||
"js", "jsx", "mjs", "cjs", "ts", "tsx", "rs", "py", "rb", "go", "java", "kt",
|
||||
"c", "h", "cc", "cpp", "hpp", "cs", "php", "swift", "scala", "lua", "pl", "r",
|
||||
"sh", "bash", "zsh", "fish", "ps1", "bat",
|
||||
"html", "htm", "xml", "svelte", "vue", "css", "scss", "sass", "less",
|
||||
"sql", "graphql", "gql", "proto", "diff", "patch", "lock", "gitignore",
|
||||
"dockerfile", "makefile", "cmake", "gradle", "tf", "tfvars",
|
||||
]);
|
||||
|
||||
/** Extensionless files that are text by convention. */
|
||||
const TEXT_BASENAMES = new Set([
|
||||
"dockerfile", "makefile", "readme", "license", "licence", "changelog",
|
||||
"authors", "notice", "copying", "procfile", "rakefile", "gemfile", "vagrantfile",
|
||||
// Dotfiles: the leading dot is stripped before the lookup.
|
||||
"gitignore", "gitattributes", "gitmodules", "dockerignore", "npmrc", "nvmrc",
|
||||
"editorconfig", "bashrc", "zshrc", "profile", "env",
|
||||
]);
|
||||
|
||||
/** 1 MiB of text is already far more than anyone reads in a modal. */
|
||||
export const TEXT_PREVIEW_LIMIT = 1024 * 1024;
|
||||
/**
|
||||
* Images get five times the budget: they are the file kind that routinely
|
||||
* blows past a text-sized cap, and a half-read image is not a preview at all —
|
||||
* it either decodes whole or it does not.
|
||||
*/
|
||||
export const IMAGE_PREVIEW_LIMIT = 5 * 1024 * 1024;
|
||||
|
||||
/** Lowercased extension, or "" for an extensionless name. */
|
||||
export function extensionOf(name: string): string {
|
||||
const base = name.slice(name.lastIndexOf("/") + 1);
|
||||
const dot = base.lastIndexOf(".");
|
||||
// A leading dot is "hidden file", not "extension" (`.gitignore`).
|
||||
if (dot <= 0) return "";
|
||||
return base.slice(dot + 1).toLowerCase();
|
||||
}
|
||||
|
||||
/** The MIME to build the Blob with, or null if this is not a previewable image. */
|
||||
export function imageMimeFor(name: string): string | null {
|
||||
return IMAGE_MIME[extensionOf(name)] ?? null;
|
||||
}
|
||||
|
||||
export type PreviewKind = "image" | "text" | "unknown";
|
||||
|
||||
/**
|
||||
* A first guess from the name alone. `unknown` is not a refusal — the viewer
|
||||
* reads the bytes and falls back to sniffing them, so a `.bak` of a config
|
||||
* file still previews.
|
||||
*/
|
||||
export function previewKind(name: string): PreviewKind {
|
||||
if (imageMimeFor(name)) return "image";
|
||||
const ext = extensionOf(name);
|
||||
if (ext) return TEXT_EXTENSIONS.has(ext) ? "text" : "unknown";
|
||||
const base = name.slice(name.lastIndexOf("/") + 1).replace(/^\./, "").toLowerCase();
|
||||
return TEXT_BASENAMES.has(base) ? "text" : "unknown";
|
||||
}
|
||||
|
||||
/** How many bytes to ask the backend for, given what we expect to render. */
|
||||
export function previewLimit(name: string): number {
|
||||
return previewKind(name) === "image" ? IMAGE_PREVIEW_LIMIT : TEXT_PREVIEW_LIMIT;
|
||||
}
|
||||
|
||||
/** Base64 → bytes. `atob` yields a binary string; widen it one char at a time. */
|
||||
export function decodeBase64(base64: string): Uint8Array<ArrayBuffer> {
|
||||
const binary = atob(base64);
|
||||
const bytes = new Uint8Array(new ArrayBuffer(binary.length));
|
||||
for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
|
||||
return bytes;
|
||||
}
|
||||
|
||||
/**
|
||||
* The classic heuristic: a NUL byte early on means this is not text. Cheap,
|
||||
* and it is what `git` and `grep` use to decide the same question.
|
||||
*/
|
||||
export function looksBinary(bytes: Uint8Array): boolean {
|
||||
const limit = Math.min(bytes.length, 8000);
|
||||
for (let i = 0; i < limit; i++) if (bytes[i] === 0) return true;
|
||||
return false;
|
||||
}
|
||||
Reference in New Issue
Block a user