npm - @marimo-team/frontend - Versions diffs - 0.24.1-dev44 → 0.24.1-dev46 - Mend

@marimo-team/frontend 0.24.1-dev44 → 0.24.1-dev46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/index.html CHANGED Viewed

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-BBPHmHdW.js"></script>
+    <script type="module" crossorigin src="./assets/index-DUJeB0WY.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-B0Z9INg1.js">
     <link rel="modulepreload" crossorigin href="./assets/react-CBDbhulC.js">
     <link rel="modulepreload" crossorigin href="./assets/compiler-runtime-CYIjoINj.js">
@@ -234,7 +234,7 @@
     <link rel="stylesheet" crossorigin href="./assets/cells-D-c15Ks-.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-CU2Wa_Bt.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-BQtz7-np.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-0VrRpta0.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-Bn9RxQAN.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.24.1-dev44",
+  "version": "0.24.1-dev46",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/editor/chrome/panels/file-explorer-panel.tsx CHANGED Viewed

@@ -2,16 +2,25 @@
 import { useAtom, useAtomValue } from "jotai";
 import { FileIcon, HardDrive } from "lucide-react";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo, useState } from "react";
+import type { DropEvent } from "react-dropzone";
 import useResizeObserver from "use-resize-observer";
 import { StorageInspector } from "@/components/storage/storage-inspector";
 import { Accordion } from "@/components/ui/accordion";
 import { storageNamespacesAtom } from "@/core/storage/state";
 import { useDetectedDataSources } from "@/hooks/useDataSourceDiscovery";
 import { cn } from "@/utils/cn";
+import type { FilePath } from "@/utils/paths";
 import { TreeDndProvider } from "../../file-tree/dnd-wrapper";
-import { FileExplorer } from "../../file-tree/file-explorer";
-import { useFileExplorerUpload } from "../../file-tree/upload";
+import {
+  FileExplorer,
+  getUploadDestinationLabel,
+} from "../../file-tree/file-explorer";
+import { treeAtom } from "../../file-tree/state";
+import {
+  getUploadDestinationFromTarget,
+  useFileExplorerUpload,
+} from "../../file-tree/upload";
 import {
   DiscoveredSourcesBadge,
   PanelAccordionContent,
@@ -25,10 +34,37 @@ import {
 } from "./panel-accordion-state";
 const FileExplorerComponent: React.FC<{ height: number }> = ({ height }) => {
+  const tree = useAtomValue(treeAtom);
+  const [dropDestinationPath, setDropDestinationPath] =
+    useState<FilePath | null>(null);
+  const getDropDestinationPath = useCallback(
+    (event: DropEvent) =>
+      getUploadDestinationForEvent(event, tree.getRootPath()),
+    [tree],
+  );
+  const refreshUploadDestination = useCallback(
+    (destinationPath: FilePath) => tree.refreshPath(destinationPath),
+    [tree],
+  );
   const { getRootProps, getInputProps, isDragActive } = useFileExplorerUpload({
     noClick: true,
     noKeyboard: true,
+    destinationPath: getDropDestinationPath,
+    getDestinationLabel: (path) => getUploadDestinationLabel(tree, path),
+    refreshDestination: refreshUploadDestination,
+    onDragEnter: (event) =>
+      setDropDestinationPath(getDropDestinationPath(event)),
+    onDragOver: (event) =>
+      setDropDestinationPath(getDropDestinationPath(event)),
+    onDragLeave: () => setDropDestinationPath(null),
+    onUploadStart: () => setDropDestinationPath(null),
   });
+  const displayedDestinationPath = dropDestinationPath ?? tree.getRootPath();
+  const displayedDestinationLabel = getUploadDestinationLabel(
+    tree,
+    displayedDestinationPath,
+  );
   return (
     <TreeDndProvider>
@@ -39,17 +75,34 @@ const FileExplorerComponent: React.FC<{ height: number }> = ({ height }) => {
       >
         <input {...getInputProps()} />
         {isDragActive && (
-          <div className="absolute inset-0 flex items-center uppercase justify-center text-xl font-bold text-primary/90 bg-accent/85 z-10 border-2 border-dashed border-primary/90 rounded-lg pointer-events-none">
-            Drop files here
+          <div className="absolute inset-0 flex items-start justify-center pt-3 bg-accent/20 z-10 border-2 border-dashed border-primary/90 rounded-lg pointer-events-none">
+            <span className="px-3 py-1.5 rounded-md bg-background/95 border shadow-sm text-sm font-semibold text-primary">
+              Drop files into {displayedDestinationLabel}
+            </span>
           </div>
         )}
-        <FileExplorer height={height} />
+        <FileExplorer
+          height={height}
+          externalDropDestinationPath={
+            isDragActive ? displayedDestinationPath : null
+          }
+        />
       </div>
     </TreeDndProvider>
   );
 };
+export function getUploadDestinationForEvent(
+  event: DropEvent,
+  rootPath: FilePath,
+): FilePath {
+  if (Array.isArray(event)) {
+    return rootPath;
+  }
+  return getUploadDestinationFromTarget(event.target, rootPath);
+}
 // Height of each accordion trigger (px-3 py-2 text-xs = ~33px)
 const TRIGGER_HEIGHT = 33;

package/src/components/editor/file-tree/__tests__/file-explorer-interactions.test.tsx ADDED Viewed

@@ -0,0 +1,128 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Provider, createStore } from "jotai";
+import type React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { requestClientAtom } from "@/core/network/requests";
+import type { FileInfo } from "@/core/network/types";
+import { FileExplorer } from "../file-explorer";
+vi.mock("react-arborist", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-arborist")>();
+  return {
+    ...actual,
+    Tree: ({
+      data,
+      onSelect,
+    }: {
+      data: FileInfo[];
+      onSelect: (nodes: Array<{ data: FileInfo }>) => void;
+    }) => (
+      <div>
+        {data.map((item) => (
+          <button
+            type="button"
+            key={item.id}
+            onClick={() => onSelect([{ data: item }])}
+          >
+            {item.name}
+          </button>
+        ))}
+      </div>
+    ),
+  };
+});
+let testStore = createStore();
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <Provider store={testStore}>
+    <TooltipProvider>{children}</TooltipProvider>
+  </Provider>
+);
+describe("FileExplorer upload destination", () => {
+  let client: ReturnType<typeof MockRequestClient.create>;
+  beforeEach(() => {
+    localStorage.removeItem("marimo:showHiddenFiles");
+    testStore = createStore();
+    client = MockRequestClient.create({
+      sendListFiles: vi.fn().mockImplementation(async ({ path }) => {
+        if (path) {
+          return { files: [] };
+        }
+        return {
+          root: "/workspace",
+          files: [
+            {
+              id: "data-directory",
+              name: "data",
+              path: "/workspace/data",
+              isDirectory: true,
+            },
+            {
+              id: "hidden-directory",
+              name: ".hidden",
+              path: "/workspace/.hidden",
+              isDirectory: true,
+            },
+          ],
+        };
+      }),
+      sendCreateFileOrFolder: vi.fn().mockResolvedValue({ success: true }),
+    });
+    testStore.set(requestClientAtom, client);
+  });
+  it("uses the selected folder for toolbar uploads", async () => {
+    render(<FileExplorer height={300} />, { wrapper });
+    const rootUpload = await screen.findByRole("button", {
+      name: "Upload files to workspace root",
+    });
+    expect(rootUpload).toBeVisible();
+    fireEvent.click(await screen.findByText("data"));
+    const folderUpload = await screen.findByRole("button", {
+      name: "Upload files to data",
+    });
+    fireEvent.click(folderUpload);
+    const file = new File(["contents"], "report.csv");
+    fireEvent.change(screen.getByTestId("file-explorer-upload-input"), {
+      target: { files: [file] },
+    });
+    await waitFor(() => {
+      expect(client.sendCreateFileOrFolder).toHaveBeenCalledWith({
+        path: "/workspace/data",
+        type: "file",
+        name: "report.csv",
+        file,
+      });
+    });
+  });
+  it("clears a selected hidden folder when hidden files are hidden", async () => {
+    render(<FileExplorer height={300} />, { wrapper });
+    fireEvent.click(await screen.findByText(".hidden"));
+    expect(
+      await screen.findByRole("button", { name: "Upload files to .hidden" }),
+    ).toBeVisible();
+    fireEvent.click(screen.getByTestId("file-explorer-hidden-files-button"));
+    expect(
+      await screen.findByRole("button", {
+        name: "Upload files to workspace root",
+      }),
+    ).toBeVisible();
+    expect(screen.queryByText(".hidden")).not.toBeInTheDocument();
+  });
+});

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

@@ -52,6 +52,7 @@ describe("RequestingTree", () => {
   test("initialize should load files and set rootPath", async () => {
     expect(sendListFiles).toHaveBeenCalledWith({ path: "" });
+    expect(requestingTree.getRootPath()).toBe("/root");
     expect(mockOnChange).toHaveBeenCalledWith([
       { id: "1.1", name: "file1", path: "/root/file1" },
       { id: "1.2", name: "folder1", isDirectory: true, path: "/root/folder1" },
@@ -261,6 +262,65 @@ describe("RequestingTree", () => {
     `);
   });
+  test("refreshPath should refresh an uploaded file's destination", async () => {
+    sendListFiles.mockImplementation(async ({ path }: { path: string }) => {
+      if (path === "/root/folder1") {
+        return {
+          files: [
+            {
+              id: "uploaded",
+              name: "uploaded.csv",
+              path: "/root/folder1/uploaded.csv",
+            },
+          ],
+        };
+      }
+      return {
+        files: [
+          { id: "1.1", name: "file1", path: "/root/file1" },
+          {
+            id: "1.2",
+            name: "folder1",
+            isDirectory: true,
+            path: "/root/folder1",
+          },
+          {
+            id: "1.3",
+            name: "folder2",
+            isDirectory: true,
+            path: "/root/folder2",
+          },
+        ],
+      };
+    });
+    await requestingTree.refreshPath("/root/folder1" as FilePath);
+    expect(sendListFiles).toHaveBeenCalledWith({ path: "/root/folder1" });
+    expect(mockOnChange.mock.calls.at(-1)?.[0]).toEqual([
+      { id: "1.1", name: "file1", path: "/root/file1" },
+      {
+        id: "1.2",
+        name: "folder1",
+        isDirectory: true,
+        path: "/root/folder1",
+        children: [
+          {
+            id: "uploaded",
+            name: "uploaded.csv",
+            path: "/root/folder1/uploaded.csv",
+          },
+        ],
+      },
+      {
+        id: "1.3",
+        name: "folder2",
+        isDirectory: true,
+        path: "/root/folder2",
+      },
+    ]);
+  });
   describe("when API fails", () => {
     test("initialize should handle errors gracefully", async () => {
       requestingTree = new RequestingTree({

package/src/components/editor/file-tree/__tests__/upload.test.tsx ADDED Viewed

@@ -0,0 +1,230 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it, vi } from "vitest";
+import type { FileCreateInput, FileCreateResponse } from "@/core/network/types";
+import type { FilePath } from "@/utils/paths";
+import {
+  FILE_EXPLORER_DIRECTORY_PATH_ATTRIBUTE,
+  getUploadDestinationFromTarget,
+  resolveUploadDirectoryPath,
+  uploadFilesToDestination,
+} from "../upload";
+const filePath = (path: string) => path as FilePath;
+describe("resolveUploadDirectoryPath", () => {
+  it("uploads an individual file to the explicit destination", () => {
+    expect(
+      resolveUploadDirectoryPath({
+        destinationPath: filePath("/workspace/data"),
+        filePath: filePath("./sales.csv"),
+      }),
+    ).toBe("/workspace/data");
+  });
+  it("preserves a dropped folder's relative structure", () => {
+    expect(
+      resolveUploadDirectoryPath({
+        destinationPath: filePath("/workspace/data"),
+        filePath: filePath("raw/2026/sales.csv"),
+      }),
+    ).toBe("/workspace/data/raw/2026");
+  });
+  it("normalizes relative paths for a Windows destination", () => {
+    expect(
+      resolveUploadDirectoryPath({
+        destinationPath: filePath("C:\\workspace\\data"),
+        filePath: filePath("raw/2026/sales.csv"),
+      }),
+    ).toBe("C:\\workspace\\data\\raw\\2026");
+  });
+  it("normalizes mixed separators in relative paths", () => {
+    expect(
+      resolveUploadDirectoryPath({
+        destinationPath: filePath("/workspace/data"),
+        filePath: filePath("raw\\2026/sales.csv"),
+      }),
+    ).toBe("/workspace/data/raw/2026");
+  });
+  it("removes current-directory components", () => {
+    expect(
+      resolveUploadDirectoryPath({
+        destinationPath: filePath("/workspace/data"),
+        filePath: filePath("raw/./2026/sales.csv"),
+      }),
+    ).toBe("/workspace/data/raw/2026");
+  });
+  it.each(["../sales.csv", "raw/../../sales.csv", "raw\\..\\sales.csv"])(
+    "rejects parent traversal in %s",
+    (unsafePath) => {
+      expect(() =>
+        resolveUploadDirectoryPath({
+          destinationPath: filePath("/workspace/data"),
+          filePath: filePath(unsafePath),
+        }),
+      ).toThrow(/parent traversal/);
+    },
+  );
+  it.each([
+    "C:\\Users\\sales.csv",
+    "\\\\server\\share\\sales.csv",
+    "file://workspace/sales.csv",
+    "/Users/example/sales.csv",
+  ])("rejects absolute path %s", (absolutePath) => {
+    expect(() =>
+      resolveUploadDirectoryPath({
+        destinationPath: filePath("/workspace/data"),
+        filePath: filePath(absolutePath),
+      }),
+    ).toThrow(/must be relative/);
+  });
+});
+describe("getUploadDestinationFromTarget", () => {
+  it("uses the closest folder as the drop destination", () => {
+    const folder = document.createElement("div");
+    folder.setAttribute(
+      FILE_EXPLORER_DIRECTORY_PATH_ATTRIBUTE,
+      "/workspace/data",
+    );
+    const child = document.createElement("span");
+    folder.append(child);
+    expect(getUploadDestinationFromTarget(child, filePath("/workspace"))).toBe(
+      "/workspace/data",
+    );
+  });
+  it("uses the workspace root outside a folder", () => {
+    expect(
+      getUploadDestinationFromTarget(
+        document.createElement("div"),
+        filePath("/workspace"),
+      ),
+    ).toBe("/workspace");
+  });
+});
+describe("uploadFilesToDestination", () => {
+  it("sends files to the destination and separates server failures", async () => {
+    const successfulFile = new File(["success"], "success.txt");
+    const failedFile = new File(["failure"], "failure.txt");
+    Object.defineProperty(successfulFile, "path", {
+      value: "nested/success.txt",
+    });
+    const createFile = vi.fn(
+      async (request: FileCreateInput): Promise<FileCreateResponse> =>
+        request.name === "success.txt"
+          ? { success: true }
+          : { success: false, message: "Permission denied" },
+    );
+    const onFileProcessed = vi.fn();
+    const result = await uploadFilesToDestination({
+      files: [successfulFile, failedFile],
+      destinationPath: filePath("/workspace/data"),
+      createFile,
+      onFileProcessed,
+    });
+    expect(createFile.mock.calls.map(([request]) => request)).toEqual([
+      {
+        path: "/workspace/data/nested",
+        type: "file",
+        name: "success.txt",
+        file: successfulFile,
+      },
+      {
+        path: "/workspace/data",
+        type: "file",
+        name: "failure.txt",
+        file: failedFile,
+      },
+    ]);
+    expect(result).toEqual({
+      successful: [{ file: successfulFile, response: { success: true } }],
+      failed: [
+        {
+          file: failedFile,
+          response: { success: false, message: "Permission denied" },
+        },
+      ],
+    });
+    expect(onFileProcessed).toHaveBeenCalledTimes(2);
+  });
+  it("treats a browser-style leading slash as a relative drop path", async () => {
+    const browserFile = new File(["data"], "sales.csv");
+    Object.defineProperty(browserFile, "path", {
+      value: "/raw/2026/sales.csv",
+    });
+    const createFile = vi
+      .fn<(request: FileCreateInput) => Promise<FileCreateResponse>>()
+      .mockResolvedValue({ success: true });
+    await uploadFilesToDestination({
+      files: [browserFile],
+      destinationPath: filePath("/workspace/data"),
+      createFile,
+    });
+    expect(createFile).toHaveBeenCalledWith({
+      path: "/workspace/data/raw/2026",
+      type: "file",
+      name: "sales.csv",
+      file: browserFile,
+    });
+  });
+  it("waits for every file and normalizes thrown request errors", async () => {
+    const failedFile = new File(["failure"], "failure.txt");
+    const slowFile = new File(["success"], "slow.txt");
+    let finishSlowUpload: ((response: FileCreateResponse) => void) | undefined;
+    const createFile = vi.fn(
+      (request: FileCreateInput): Promise<FileCreateResponse> => {
+        if (request.name === "failure.txt") {
+          return Promise.reject(new Error("Connection lost"));
+        }
+        return new Promise((resolve) => {
+          finishSlowUpload = resolve;
+        });
+      },
+    );
+    const onFileProcessed = vi.fn();
+    const upload = uploadFilesToDestination({
+      files: [failedFile, slowFile],
+      destinationPath: filePath("/workspace/data"),
+      createFile,
+      onFileProcessed,
+    });
+    await vi.waitFor(() => {
+      expect(createFile).toHaveBeenCalledTimes(2);
+      expect(onFileProcessed).toHaveBeenCalledTimes(1);
+    });
+    let hasSettled = false;
+    void upload.finally(() => {
+      hasSettled = true;
+    });
+    await Promise.resolve();
+    expect(hasSettled).toBe(false);
+    finishSlowUpload?.({ success: true });
+    await expect(upload).resolves.toEqual({
+      successful: [{ file: slowFile, response: { success: true } }],
+      failed: [
+        {
+          file: failedFile,
+          response: { success: false, message: "Connection lost" },
+        },
+      ],
+    });
+    expect(onFileProcessed).toHaveBeenCalledTimes(2);
+  });
+});