@marimo-team/frontend 0.23.2-dev48 → 0.23.2-dev50

package/src/components/data-table/export-actions.tsx

@@ -20,6 +20,7 @@ import {
   jsonToMarkdown,
   jsonToTSV,
 } from "@/utils/json/json-parser";
+import { MissingPackagePrompt } from "../datasources/missing-package-prompt";
 import { Button } from "../ui/button";
 import {
   DropdownMenu,
@@ -38,6 +39,8 @@ export interface ExportActionProps {
   downloadAs: (req: { format: DownloadFormat }) => Promise<{
     url: string;
     filename: string;
+    error?: string | null;
+    missing_packages?: string[] | null;
   }>;
 }
 
@@ -81,6 +84,8 @@ const copyOptions = [
   FILE_TYPES.CSV,
   FILE_TYPES.MARKDOWN,
 ];
+const labelForDownloadFormat = (format: DownloadFormat): string =>
+  downloadOptions.find((opt) => opt.format === format)?.label ?? format;
 
 export const ExportMenu: React.FC<ExportActionProps> = (props) => {
   const { locale } = useLocale();
@@ -101,43 +106,82 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
     </Button>
   );
 
-  const getDownloadResult = (format: DownloadFormat) => {
-    return props.downloadAs({ format }).catch((error) => {
+  const resolveDownloadUrl = async (
+    format: DownloadFormat,
+    onRetry: () => void,
+  ): Promise<{ url: string; filename: string } | null> => {
+    let response: Awaited<ReturnType<typeof props.downloadAs>>;
+    try {
+      response = await props.downloadAs({ format });
+    } catch (error) {
       toast({
         title: "Failed to download",
-        description: "message" in error ? error.message : String(error),
+        description:
+          error != null && typeof error === "object" && "message" in error
+            ? String(error.message)
+            : String(error),
       });
-      throw error;
+      return null;
+    }
+
+    if (response.missing_packages && response.missing_packages.length > 0) {
+      toast({
+        title: "Export failed",
+        description: (
+          <MissingPackagePrompt
+            packages={response.missing_packages}
+            featureName={`${labelForDownloadFormat(format)} export`}
+            description={response.error}
+            onInstall={onRetry}
+          />
+        ),
+      });
+      return null;
+    }
+
+    return { url: response.url, filename: response.filename };
+  };
+
+  const handleDownload = async (format: DownloadFormat) => {
+    const result = await resolveDownloadUrl(format, () => {
+      void handleDownload(format);
     });
+    if (!result) {
+      return;
+    }
+    const rawName = (result.filename ?? "").trim();
+    const baseName = Filenames.withoutExtension(rawName) || "download";
+    downloadByURL(result.url, `${baseName}.${format}`);
   };
 
   const handleClipboardCopy = async (
     format: (typeof copyOptions)[number]["format"],
   ) => {
-    let text: string;
+    const sourceFormat: DownloadFormat = format === "csv" ? "csv" : "json";
+    const result = await resolveDownloadUrl(sourceFormat, () => {
+      void handleClipboardCopy(format);
+    });
+    if (!result) {
+      return;
+    }
 
+    let text: string;
     switch (format) {
       case "tsv": {
-        const { url } = await getDownloadResult("json");
-        const json = await fetchJson(url);
+        const json = await fetchJson(result.url);
         text = jsonToTSV(json, locale);
         break;
       }
       case "json": {
-        const { url } = await getDownloadResult("json");
-        const json = await fetchJson(url);
+        const json = await fetchJson(result.url);
         text = JSON.stringify(json, null, 2);
         break;
       }
-      case "csv": {
-        const { url } = await getDownloadResult("csv");
-        const csv = await fetchText(url);
-        text = csv;
+      case "csv":
+        text = await fetchText(result.url);
         break;
-      }
       case "markdown": {
-        const { url } = await getDownloadResult("json");
-        const json = await fetchJson(url);
+        const json = await fetchJson(result.url);
         text = jsonToMarkdown(json);
         break;
       }
@@ -164,13 +208,8 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
         {downloadOptions.map((option) => (
           <DropdownMenuItem
             key={option.label}
-            onSelect={async () => {
-              const { url, filename } = await getDownloadResult(option.format);
-              const ext = option.format;
-              const rawName = (filename ?? "").trim();
-              const baseName =
-                Filenames.withoutExtension(rawName) || "download";
-              downloadByURL(url, `${baseName}.${ext}`);
+            onSelect={() => {
+              void handleDownload(option.format);
             }}
           >
             <option.icon className="mo-dropdown-icon" />

package/src/components/data-table/schemas.ts

@@ -5,7 +5,12 @@ import { rpc } from "@/plugins/core/rpc";
 
 export type DownloadAsArgs = (req: {
   format: "csv" | "json" | "parquet";
-}) => Promise<{ url: string; filename: string }>;
+}) => Promise<{
+  url: string;
+  filename: string;
+  error?: string | null;
+  missing_packages?: string[] | null;
+}>;
 
 export const DownloadAsSchema = rpc
   .input(
@@ -17,5 +22,7 @@ export const DownloadAsSchema = rpc
     z.object({
       url: z.string(),
       filename: z.string(),
+      error: z.string().nullish(),
+      missing_packages: z.array(z.string()).nullish(),
     }),
   );

package/src/components/datasources/__tests__/missing-package-prompt.test.tsx

@@ -0,0 +1,103 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen } from "@testing-library/react";
+import { Provider } from "jotai";
+import React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { viewStateAtom } from "@/core/mode";
+import { requestClientAtom } from "@/core/network/requests";
+import { store } from "@/core/state/jotai";
+import { MissingPackagePrompt } from "../missing-package-prompt";
+
+const mockOpenApplication = vi.fn();
+vi.mock("@/components/editor/chrome/state", () => ({
+  useChromeActions: () => ({
+    openApplication: mockOpenApplication,
+  }),
+}));
+
+vi.mock("@/components/editor/chrome/panels/packages-state", () => ({
+  packagesToInstallAtom: {},
+}));
+
+const mockRequestAnimationFrame = vi.fn((callback) => {
+  callback();
+  return 1;
+});
+vi.stubGlobal("requestAnimationFrame", mockRequestAnimationFrame);
+
+const mockInput = {
+  focus: vi.fn(),
+  value: "",
+  dispatchEvent: vi.fn(),
+};
+vi.spyOn(document, "getElementById").mockReturnValue(
+  mockInput as unknown as HTMLInputElement,
+);
+
+function createTestWrapper() {
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+  return { wrapper };
+}
+
+describe("MissingPackagePrompt", () => {
+  const { wrapper } = createTestWrapper();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    store.set(requestClientAtom, MockRequestClient.create());
+    store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+  });
+
+  it("should render backend description and install button in edit mode", () => {
+    render(
+      <MissingPackagePrompt
+        packages={["polars"]}
+        featureName="Parquet export"
+        description="Parquet export requires a DataFrame library."
+      />,
+      { wrapper },
+    );
+    expect(
+      screen.getByText("Parquet export requires a DataFrame library."),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Install polars")).toBeInTheDocument();
+  });
+
+  it("should fall back to generic copy when description is absent", () => {
+    render(
+      <MissingPackagePrompt
+        packages={["polars"]}
+        featureName="Parquet export"
+      />,
+      { wrapper },
+    );
+    expect(
+      screen.getByText("Parquet export requires polars"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Install polars")).toBeInTheDocument();
+  });
+
+  it("should render generic line in read mode and not leak packages or description", () => {
+    store.set(viewStateAtom, { mode: "read", cellAnchor: null });
+    render(
+      <MissingPackagePrompt
+        packages={["polars"]}
+        featureName="Parquet export"
+        description="Install polars to enable Parquet."
+      />,
+      { wrapper },
+    );
+    expect(
+      screen.getByText("Parquet export isn't available in this notebook"),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByText("Install polars to enable Parquet."),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByText("Install polars")).not.toBeInTheDocument();
+    expect(screen.queryByText(/polars/)).not.toBeInTheDocument();
+  });
+});

package/src/components/datasources/missing-package-prompt.tsx

@@ -0,0 +1,49 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useInstallAllowed } from "@/core/mode";
+import { cn } from "@/utils/cn";
+import { InstallPackageButton } from "./install-package-button";
+
+interface MissingPackagePromptProps {
+  packages: string[];
+  featureName: string;
+  description?: string | null; // server message, suppressing this in read-only mode
+  onInstall?: () => void;
+  className?: string;
+}
+
+/**
+ * display missing-package requirement with mode-aware copy. In edit mode,
+ * shows the backend explanation (if any) plus an install button for missing-packages.
+ * read mode, shows a generic "isn't available"
+ */
+export const MissingPackagePrompt: React.FC<MissingPackagePromptProps> = ({
+  packages,
+  featureName,
+  description,
+  onInstall,
+  className,
+}) => {
+  const installAllowed = useInstallAllowed();
+
+  if (!installAllowed) {
+    return (
+      <span className={cn("text-xs", className)}>
+        {featureName} isn't available in this notebook
+      </span>
+    );
+  }
+
+  return (
+    <div className={cn("text-xs flex flex-col items-end gap-2", className)}>
+      <span className="self-start">
+        {description || `${featureName} requires ${packages.join(", ")}`}
+      </span>
+      <InstallPackageButton
+        packages={packages}
+        onInstall={onInstall}
+        className="ml-0"
+      />
+    </div>
+  );
+};

package/src/core/mode.ts

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { atom } from "jotai";
+import { atom, useAtomValue } from "jotai";
 import { isIslands } from "@/core/islands/utils";
 import { assertExists } from "@/utils/assertExists";
 import { invariant } from "@/utils/invariant";
@@ -79,3 +79,12 @@ export const viewStateAtom = atom<ViewState>({
 export const initialModeAtom = atom<AppMode | undefined>(undefined);
 
 export const kioskModeAtom = atom<boolean>(false);
+
+/**
+ * Whether installing packages is allowed in the current view. False in read
+ * mode, since end-users of a deployed notebook cannot mutate its environment.
+ */
+export function useInstallAllowed(): boolean {
+  const { mode } = useAtomValue(viewStateAtom);
+  return mode !== "read";
+}