feat(files): New → Clone repository clones into the open folder

The File Explorer's New menu (and its right-click menu) gains Clone repository: it clones a URL into the folder it has open — of the user's own home or of a workspace's own folder — through POST /api/lanes/clone with that folder as `parent`, so the URL allowlist, the own-folder check and the folder account's own git identity all apply, and opens a workspace on the clone. ECREDENTIALS asks for a login, ESSHAUTH points to Settings → Git. GET /api/homes now gives `me` its absolute `dir`. Keys typed in the dialog never reach the explorer's shortcuts (Backspace / Delete).
2026-10-19 17:13:26 +07:00
parent f8d07dab61
commit 1a6b550e89
9 changed files with 384 additions and 6 deletions
@@ -0,0 +1,224 @@
+/**
+ * @file CloneHereDialog.tsx
+ * @description The Files page's **New → Clone repository**: clones a URL into
+ * the folder the File Explorer has open, through the same
+ * `POST /api/lanes/clone` as Add workspace → Clone — the server holds the URL
+ * to its allowlist and the folder to the user's own, and clones as the
+ * folder's account with that account's own SSH key / HTTPS login — and opens
+ * a workspace on the new folder. A 409 `ECREDENTIALS` opens a login row (sent
+ * once, optionally remembered), `ESSHAUTH` points to Settings → Git.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { FolderGit2 } from "lucide-react";
+import { api } from "../../lib/api";
+import type { Lane } from "../../lib/types";
+import { useDialog } from "../../hooks/useDialog";
+import { cloneDirName } from "./AddLaneModal";
+
+type Login = { host: string; username: string; token: string; remember: boolean };
+
+export function CloneHereDialog({
+  open,
+  parent,
+  onClose,
+  onCloned,
+}: {
+  open: boolean;
+  /** The absolute folder the clone goes into. */
+  parent: string;
+  onClose: () => void;
+  onCloned: (lane: Lane, path: string) => void;
+}) {
+  const { t } = useTranslation(["lanes"]);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+  const [url, setUrl] = useState("");
+  const [name, setName] = useState("");
+  const [login, setLogin] = useState<Login | null>(null);
+  const [sshRefused, setSshRefused] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  useDialog(open, panelRef, busy ? () => {} : onClose);
+
+  useEffect(() => {
+    if (!open) return;
+    setUrl("");
+    setName("");
+    setLogin(null);
+    setSshRefused(false);
+    setBusy(false);
+    setError(null);
+  }, [open, parent]);
+
+  if (!open) return null;
+  const folder = name.trim() || cloneDirName(url);
+  const into = `${parent.replace(/\/+$/, "")}/${folder || "…"}`;
+
+  const submit = async () => {
+    const u = url.trim();
+    if (!u || busy) return;
+    setBusy(true);
+    setError(null);
+    setSshRefused(false);
+    try {
+      const result = await api.lanes.clone({
+        url: u,
+        parent,
+        name: name.trim() || undefined,
+        ...(login?.username.trim() && login.token
+          ? {
+              credentials: {
+                username: login.username.trim(),
+                password: login.token,
+                remember: login.remember,
+              },
+            }
+          : {}),
+      });
+      onCloned(result.lane, result.path);
+    } catch (err) {
+      const e = err as { code?: string; auth?: { host?: string }; message?: string };
+      const host = e.auth?.host || u;
+      if (e.code === "ECREDENTIALS") {
+        setError(t(login?.token ? "clone.loginRejected" : "clone.loginNeeded", { host }));
+        setLogin((l) => ({
+          host,
+          username: l?.username ?? "",
+          token: "",
+          remember: l?.remember ?? true,
+        }));
+      } else if (e.code === "ESSHAUTH") {
+        setSshRefused(true);
+        setError(t("clone.sshRefused", { host }));
+      } else {
+        setError(err instanceof Error ? err.message : String(err));
+      }
+      setBusy(false);
+    }
+  };
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 p-3"
+      onClick={busy ? undefined : onClose}
+      // A portal still bubbles through React: keep keys away from the File
+      // Explorer's shortcuts (Backspace = up a folder, Delete = delete).
+      onKeyDown={(e) => e.stopPropagation()}
+      role="presentation"
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        data-testid="fx-clone-dialog"
+        className="w-full max-w-lg rounded-xl border border-border bg-surface-1 p-4 shadow-2xl shadow-black/50"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2 id={titleId} className="mb-3 flex items-center gap-2 text-sm font-semibold text-fg-primary">
+          <FolderGit2 className="h-4 w-4" />
+          {t("fx.cloneRepo")}
+        </h2>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            void submit();
+          }}
+          className="space-y-3"
+        >
+          <div>
+            <label className="mb-1 block text-xs text-fg-secondary" htmlFor={`${titleId}-url`}>
+              {t("clone.urlLabel")}
+            </label>
+            <input
+              id={`${titleId}-url`}
+              autoFocus
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder="https://host/owner/repo.git"
+              disabled={busy}
+              className="input w-full font-mono text-xs"
+            />
+            <p className="mt-1 text-[11px] text-fg-muted">{t("clone.urlHint")}</p>
+          </div>
+          <div>
+            <label className="mb-1 block text-xs text-fg-secondary" htmlFor={`${titleId}-name`}>
+              {t("clone.nameLabel")}
+            </label>
+            <input
+              id={`${titleId}-name`}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={cloneDirName(url)}
+              disabled={busy}
+              className="input w-full font-mono text-xs"
+            />
+            <p className="mt-1 break-all text-[11px] text-fg-muted">
+              {t("clone.parentHint", { path: into })}
+            </p>
+          </div>
+          {login && (
+            <div data-testid="fx-clone-login" className="space-y-2 rounded-md border border-border p-2">
+              <input
+                aria-label={t("clone.username")}
+                placeholder={t("clone.username")}
+                autoComplete="username"
+                value={login.username}
+                onChange={(e) => setLogin({ ...login, username: e.target.value })}
+                disabled={busy}
+                className="input w-full text-xs"
+              />
+              <input
+                aria-label={t("clone.token")}
+                placeholder={t("clone.token")}
+                type="password"
+                autoComplete="current-password"
+                value={login.token}
+                onChange={(e) => setLogin({ ...login, token: e.target.value })}
+                disabled={busy}
+                className="input w-full text-xs"
+              />
+              <label className="flex items-center gap-2 text-xs text-fg-secondary">
+                <input
+                  type="checkbox"
+                  checked={login.remember}
+                  onChange={(e) => setLogin({ ...login, remember: e.target.checked })}
+                  disabled={busy}
+                />
+                {t("clone.remember")}
+              </label>
+            </div>
+          )}
+          {error && (
+            <p role="alert" className="text-xs text-status-danger">
+              {error}{" "}
+              {sshRefused && (
+                <a href="/settings/git#git-identity" className="underline">
+                  {t("clone.sshSettings")}
+                </a>
+              )}
+            </p>
+          )}
+          <div className="flex justify-end gap-2">
+            <button type="button" onClick={onClose} disabled={busy} className="btn-ghost text-xs">
+              {t("fx.cancel")}
+            </button>
+            <button
+              type="submit"
+              disabled={busy || !url.trim()}
+              className="btn-primary text-xs"
+              data-testid="fx-clone-submit"
+            >
+              {busy ? t("clone.cloning") : t("fx.cloneSubmit")}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>,
+    document.body
+  );
+}
@@ -91,6 +91,7 @@ import { confirmDialog } from "../../lib/confirm";
 import { formatBytes } from "../../lib/format";
 import { copyText } from "../../lib/clipboard";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../ContextMenu";
+import { CloneHereDialog } from "./CloneHereDialog";

 /** One upload batch at most (the server caps one file the same). */
 export const FX_BATCH_MAX_BYTES = 500 * 1024 * 1024;
@@ -268,6 +269,7 @@ export function FileBrowser({
  const [busy, setBusy] = useState(false);
  const [renaming, setRenaming] = useState<{ path: string; value: string } | null>(null);
  const [creating, setCreating] = useState<{ kind: "dir" | "file"; value: string } | null>(null);
+  const [cloning, setCloning] = useState(false);
  const [ask, setAsk] = useState<Ask | null>(null);
  const [askAll, setAskAll] = useState(false);
  const [progress, setProgress] = useState<{
@@ -314,6 +316,18 @@ export function FileBrowser({
  }, []);
  // Another user's home (an admin's view) is read-only.
  const ro = isHomePlace(target) && !!homes.find((h) => h.id === target.home)?.readOnly;
+  // Clone into the open folder: the absolute path of a workspace's own folder
+  // or of the user's own home (never a session worktree, an extra folder or
+  // another user's home); the server checks the folder again.
+  const cloneRoot = isHomePlace(target)
+    ? target.home === "me"
+      ? (homes.find((h) => h.id === "me")?.dir ?? null)
+      : null
+    : typeof target === "number"
+      ? (lanes.find((l) => l.id === target)?.cwd ?? null)
+      : null;
+  const cloneParent =
+    cloneRoot && view === "files" ? (path ? `${cloneRoot.replace(/\/+$/, "")}/${path}` : cloneRoot) : null;

  /** Go to `p` in workspace `tgt`, remembering where we were for Back. */
  const go = (p: string, tgt: FsPlace = target) => {
@@ -633,7 +647,7 @@ export function FileBrowser({
    writePref(VIEW_KEY, l);
  };
  const onKey = (e: ReactKeyboardEvent) => {
-    if (renaming || creating || ask) return;
+    if (renaming || creating || ask || cloning) return;
    const mod = e.ctrlKey || e.metaKey;
    const k = e.key.toLowerCase();
    // Another user's home is read-only: no key that writes.
@@ -784,6 +798,19 @@ export function FileBrowser({
      onClick={() => setMenu(null)}
      data-testid="file-explorer"
    >
+      {cloneParent && (
+        <CloneHereDialog
+          open={cloning}
+          parent={cloneParent}
+          onClose={() => setCloning(false)}
+          onCloned={(lane, at) => {
+            setCloning(false);
+            toast.success(t("fx.cloned", { path: at, workspace: lane.title || lane.cwd }));
+            setLanes((ls) => (ls.some((l) => l.id === lane.id) ? ls : [...ls, lane]));
+            changed();
+          }}
+        />
+      )}
      {/* ── Places ── */}
      <aside className="hidden w-52 shrink-0 flex-col border-r border-border bg-surface-0 sm:flex">
        <nav className="min-h-0 flex-1 overflow-y-auto px-2 pb-2" aria-label={t("fx.places")}>
@@ -1018,6 +1045,17 @@ export function FileBrowser({
                    >
                      {t("fx.newFile")}
                    </DropItem>
+                    {cloneParent && (
+                      <DropItem
+                        icon={<FolderGit2 className="h-4 w-4" />}
+                        onClick={() => {
+                          setMenu(null);
+                          setCloning(true);
+                        }}
+                      >
+                        {t("fx.cloneRepo")}
+                      </DropItem>
+                    )}
                  </DropButton>
                  <DropButton
                    label={t("fx.upload")}
@@ -1449,6 +1487,9 @@ export function FileBrowser({
                    {t("fx.newFolder")}
                  </MenuItem>
                  <MenuItem onSelect={close(() => startCreate("file"))}>{t("fx.newFile")}</MenuItem>
+                  {cloneParent && (
+                    <MenuItem onSelect={close(() => setCloning(true))}>{t("fx.cloneRepo")}</MenuItem>
+                  )}
                  <MenuSeparator />
                  <MenuItem onSelect={close(() => fileInput.current?.click())}>
                    {t("fx.uploadFiles")}
@@ -21,11 +21,13 @@ import { confirmDialog } from "../../../lib/confirm";
 vi.mock("../../../lib/confirm", () => ({ confirmDialog: vi.fn(async () => false) }));

 vi.mock("../../../lib/api", () => ({
-  gitTarget: (lane: number, session?: string | null) => (session ? { lane, session } : lane),
+  gitTarget: (lane: number, session?: string | null, source?: number | null) =>
+    source ? { lane, source } : session ? { lane, session } : lane,
  isHomePlace: (p: unknown) => typeof p === "object" && p !== null && "home" in p,
  api: {
    lanes: {
      list: vi.fn(),
+      clone: vi.fn(),
      gitDownloadUrl: (t: number, p: string) => `/api/lanes/${t}/git/download?path=${p}`,
    },
    files: {
@@ -432,3 +434,87 @@ describe("FileExplorer", () => {
    expect(api.files.remove).not.toHaveBeenCalled();
  });
 });
+
+describe("FileExplorer — New → Clone repository", () => {
+  const openClone = async (user: ReturnType<typeof userEvent.setup>) => {
+    await user.click(screen.getByRole("button", { name: "New" }));
+    await user.click(screen.getByRole("menuitem", { name: "Clone repository" }));
+    return screen.getByTestId("fx-clone-dialog");
+  };
+
+  it("clones into the open folder of the workspace and says where", async () => {
+    vi.mocked(api.lanes.clone).mockResolvedValue({
+      lane: { id: 9, title: "repo", cwd: "/w/one/src/repo" },
+      created: true,
+      path: "/w/one/src/repo",
+    } as never);
+    const user = userEvent.setup();
+    open();
+    fireEvent.doubleClick(await screen.findByText("src"));
+    await screen.findByText("x.js");
+    const dialog = await openClone(user);
+    await user.type(within(dialog).getByLabelText("Repository URL"), "git@host:o/repo.git");
+    expect(within(dialog).getByText(/\/w\/one\/src\/repo/)).toBeInTheDocument();
+    await user.click(within(dialog).getByTestId("fx-clone-submit"));
+    await waitFor(() =>
+      expect(api.lanes.clone).toHaveBeenCalledWith({
+        url: "git@host:o/repo.git",
+        parent: "/w/one/src",
+        name: undefined,
+      })
+    );
+    expect(toast.success).toHaveBeenCalled();
+    expect(screen.queryByTestId("fx-clone-dialog")).toBeNull();
+  });
+
+  it("asks for a login on ECREDENTIALS and sends it once", async () => {
+    vi.mocked(api.lanes.clone)
+      .mockRejectedValueOnce(
+        Object.assign(new Error("login"), { code: "ECREDENTIALS", auth: { host: "git.example" } })
+      )
+      .mockResolvedValueOnce({
+        lane: { id: 9, title: "r", cwd: "/w/one/r" },
+        created: true,
+        path: "/w/one/r",
+      } as never);
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    const dialog = await openClone(user);
+    await user.type(within(dialog).getByLabelText("Repository URL"), "https://git.example/o/r.git");
+    await user.click(within(dialog).getByTestId("fx-clone-submit"));
+    const login = await within(dialog).findByTestId("fx-clone-login");
+    await user.type(within(login).getByLabelText("Username"), "ann");
+    await user.type(within(login).getByLabelText("Password or access token"), "tok");
+    await user.click(within(dialog).getByTestId("fx-clone-submit"));
+    await waitFor(() =>
+      expect(api.lanes.clone).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          parent: "/w/one",
+          credentials: { username: "ann", password: "tok", remember: true },
+        })
+      )
+    );
+  });
+
+  it("keeps typing in the dialog away from the explorer's shortcuts", async () => {
+    vi.mocked(api.files.remove).mockResolvedValue({ trashed: [] });
+    const user = userEvent.setup();
+    open();
+    await screen.findByText("a.txt");
+    fireEvent.click(row("a.txt"));
+    const dialog = await openClone(user);
+    const url = within(dialog).getByLabelText("Repository URL");
+    await user.type(url, "abc{Backspace}{Delete}");
+    expect(api.files.remove).not.toHaveBeenCalled();
+    expect(url).toHaveValue("ab");
+  });
+
+  it("is not offered in an extra folder", async () => {
+    const user = userEvent.setup();
+    render(<FileExplorer open laneId={1} source={3} onClose={vi.fn()} onChanged={vi.fn()} />);
+    await screen.findByText("a.txt");
+    await user.click(screen.getByRole("button", { name: "New" }));
+    expect(screen.queryByRole("menuitem", { name: "Clone repository" })).toBeNull();
+  });
+});
@@ -552,6 +552,9 @@
  "fx.refresh": "Refresh",
  "fx.newFolder": "New folder",
  "fx.newFile": "New file",
+  "fx.cloneRepo": "Clone repository",
+  "fx.cloneSubmit": "Clone",
+  "fx.cloned": "Cloned into {{path}} — opened as workspace “{{workspace}}”.",
  "fx.uploadFiles": "Upload files",
  "fx.uploadFolder": "Upload a folder",
  "fx.download": "Download",
@@ -552,6 +552,9 @@
  "fx.refresh": "Làm mới",
  "fx.newFolder": "Thư mục mới",
  "fx.newFile": "File mới",
+  "fx.cloneRepo": "Clone repository",
+  "fx.cloneSubmit": "Clone",
+  "fx.cloned": "Đã clone vào {{path}} — đã mở thành workspace “{{workspace}}”.",
  "fx.uploadFiles": "Tải file lên",
  "fx.uploadFolder": "Tải cả thư mục lên",
  "fx.download": "Tải về",
@@ -866,6 +866,9 @@ export interface FsHome {
  id: string;
  label: string;
  readOnly: boolean;
+  /** The caller's own home only (`me`): its absolute folder — where New →
+   *  Clone repository clones to. Absent from an older server. */
+  dir?: string;
 }

 /** One entry of a File Explorer folder listing (`GET /api/lanes/:id/fs/list`). */
@@ -298,7 +298,7 @@ re-run.
 #### File Explorer on a home

 ```
-GET  /api/homes                                   { homes: [{ id: "me" | <username>, label, readOnly }] }
+GET  /api/homes                                   { homes: [{ id: "me" | <username>, label, readOnly, dir? }] }
 GET  /api/homes/:who/fs/list|trash|zip|download   as the workspace routes above
 POST /api/homes/:who/fs/mkdir|newfile|rename|move|copy|delete|upload|trash/restore|trash/purge
 ```
@@ -341,6 +341,13 @@ A copy goes home ↔ workspace
 one Linux account; each side is checked under its own rule. A home is never a
 workspace. The **Files** page opens on `?home=me` by default.

+`me` alone carries `dir`, its absolute folder: the File Explorer's **New →
+Clone repository** (`client/src/components/lanes/CloneHereDialog.tsx`) clones
+into the folder it has open — of the user's own home or of a workspace's own
+folder, never a session worktree, an extra folder or another user's home —
+through `POST /api/lanes/clone` below with that folder as `parent`, so every
+check of that route applies, and opens a workspace on the clone.
+
 #### Clone a repository into a new workspace

 ```
@@ -79,6 +79,8 @@ describe("File Explorer on the home", () => {
      r.body.homes.map((h) => [h.id, h.readOnly]),
      [["me", false]]
    );
+    // Its absolute folder: where the Files page's Clone repository clones to.
+    assert.equal(r.body.homes[0].dir, path.resolve(HOME));
  });

  it("lists the home with every top-level dot entry hidden", async () => {
@@ -49,14 +49,23 @@ function homeOf(user) {
 }

 /**
- * The homes `req` may open: `{ id: "me" | <username>, label, readOnly }`.
+ * The homes `req` may open: `{ id: "me" | <username>, label, readOnly }`,
+ * `me` with its absolute `dir`.
 * Others' only for an admin, and only those that resolve to a folder.
 */
 function listHomes(req) {
  const out = [];
  const me = req.user || null;
-  if (homeOf(me))
-    out.push({ id: "me", label: me?.displayName || me?.username || "", readOnly: false });
+  const mine = homeOf(me);
+  // `dir` for the caller's own home only: the Files page clones into it.
+  if (mine) {
+    out.push({
+      id: "me",
+      label: me?.displayName || me?.username || "",
+      readOnly: false,
+      dir: path.resolve(mine),
+    });
+  }
  if (me?.role === "admin" && auth.isServerMode()) {
    for (const u of auth.listUsers()) {
      if (u.id === me.id || u.disabled) continue;