muffin-admin 13.3.0 → 13.4.0

package/dist/MuffinDashboard.js

@@ -22,6 +22,8 @@ setupAdmin(["dashboard"], MuffinDashboard);
 setupAdmin(["dashboard-actions"], () => null);
 setupAdmin(["dashboard-content"], () => null);
 function AdminCards({ src }) {
+    if (!src)
+        return null;
     if (Array.isArray(src))
         return (_jsx(Grid, { container: true, spacing: 2, children: src.map((card, idx) => (_jsx(AdminCards, { src: card }, idx))) }));
     return _jsx(DashboardCard, Object.assign({}, src));

package/dist/MuffinDashboard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/MuffinDashboard.test.js

@@ -0,0 +1,23 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderToStaticMarkup } from "react-dom/server";
+import { expect, it, vi } from "vitest";
+vi.mock("react-admin", (importOriginal) => __awaiter(void 0, void 0, void 0, function* () {
+    const actual = yield importOriginal();
+    return Object.assign(Object.assign({}, actual), { useTranslate: () => (key, options) => { var _a; return (_a = options === null || options === void 0 ? void 0 : options._) !== null && _a !== void 0 ? _a : key; } });
+}));
+import { MuffinAdminContext } from "./context";
+import { MuffinDashboard } from "./MuffinDashboard";
+it("renders no card without dashboard data", () => {
+    const html = renderToStaticMarkup(_jsx(MuffinAdminContext.Provider, { value: { dashboard: undefined, help: undefined }, children: _jsx(MuffinDashboard, {}) }));
+    expect(html).not.toContain("undefined");
+    expect(html).not.toContain("MuiCard");
+});

package/dist/MuffinResource.js

@@ -23,6 +23,6 @@ export function MuffinResource(_a) {
     const Edit = findBuilder(["edit", name]);
     const List = findBuilder(["list", name]);
     const Show = findBuilder(["show", name]);
-    return (_jsx(Resource, Object.assign({ name: name, icon: findIcon(opts.icon), create: Create, edit: Edit, list: List, show: Show }, props), name));
+    return (_jsx(Resource, Object.assign({ name: name, icon: findIcon(opts.icon), create: Create, edit: Edit, list: List, show: opts.list.show ? Show : undefined }, props), name));
 }
 setupAdmin(["resource"], MuffinResource);

package/dist/MuffinResourceEdit.js

@@ -65,8 +65,9 @@ export function MuffinEditToolbar({ children }) {
     const resource = useResourceContext();
     const record = useRecordContext();
     const translate = useTranslate();
+    const { list } = useMuffinResourceOpts();
     const Actions = findBuilder(["edit-actions", resource]);
-    return (_jsx(Box, { sx: { display: "flex", flexDirection: "column", width: "100%" }, children: _jsxs(TopToolbar, { sx: { pl: 0, pr: 0, width: "100%", justifyContent: "space-between" }, children: [_jsxs(Typography, { variant: "h6", sx: { mr: 2 }, children: [translate(`resources.${resource}.name`, { smart_count: 1, _: resource }), (record === null || record === void 0 ? void 0 : record.id) ? ` #${record.id}` : ""] }), _jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [_jsx(Actions, {}), children, _jsx(ShowButton, {}), _jsx(ListButton, {})] })] }) }));
+    return (_jsx(Box, { sx: { display: "flex", flexDirection: "column", width: "100%" }, children: _jsxs(TopToolbar, { sx: { pl: 0, pr: 0, width: "100%", justifyContent: "space-between" }, children: [_jsxs(Typography, { variant: "h6", sx: { mr: 2 }, children: [translate(`resources.${resource}.name`, { smart_count: 1, _: resource }), (record === null || record === void 0 ? void 0 : record.id) ? ` #${record.id}` : ""] }), _jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [_jsx(Actions, {}), children, list.show && _jsx(ShowButton, {}), _jsx(ListButton, {})] })] }) }));
 }
 setupAdmin(["edit-toolbar"], MuffinEditToolbar);
 export function MuffinEditActions({ children }) {

package/dist/MuffinResourceShow.js

@@ -9,11 +9,13 @@ import { AdminModal } from "./common";
 import { useMuffinResourceOpts } from "./hooks";
 import { buildAdmin, findBuilder, setupAdmin } from "./utils";
 export function MuffinShow({ children }) {
-    const { show, name, key } = useMuffinResourceOpts();
+    const { show, list, name, key } = useMuffinResourceOpts();
     const location = useLocation();
     const navigate = useNavigate();
     const ShowToolbar = findBuilder(["show-toolbar", name]);
     const returnTo = new URLSearchParams(location.search).get("returnTo");
+    if (!list.show)
+        return null;
     const handleClose = () => {
         if (returnTo) {
             navigate(returnTo);

package/dist/buttons/ActionButton.d.ts

@@ -8,3 +8,4 @@ export declare function ActionButton({ paths, confirm, file, ...props }: AdminAc
 export declare function ListActionButton({ paths, confirm, file, ...props }: AdminAction): import("react").JSX.Element;
 export declare function BulkActionButton({ paths, confirm, ...props }: AdminAction): import("react").JSX.Element;
 export declare function CommonPayload({ active, onClose, onHandle, schema, title, help, }: AdminPayloadProps): import("react").JSX.Element;
+export declare function buildFileUrl(apiUrl: string, path: string, id?: any, filterValues?: any): string;

package/dist/buttons/ActionButton.js

@@ -19,9 +19,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import { useState } from "react";
-import { Button, FormGroupsProvider, useAugmentedForm, useListContext, useRecordContext, useResourceContext, useTranslate, } from "react-admin";
+import { Button, FormGroupsProvider, useAugmentedForm, useListContext, useNotify, useRecordContext, useResourceContext, useTranslate, } from "react-admin";
 import { FormProvider } from "react-hook-form";
 import { buildRA } from "../buildRA";
 import { AdminModal, PayloadButtons, useConfirmation } from "../common";
@@ -81,14 +81,15 @@ export function BulkActionButton(_a) {
 function ActionButtonBase({ label, title, onHandle, isPending, icon, schema, id, help, }) {
     const resource = useResourceContext();
     const [payloadActive, setPayloadActive] = useState(false);
-    const PayloadForm = findBuilder(["action-form", id, resource]) || (schema && CommonPayload);
+    const PayloadForm = findBuilder(["action-form", id, resource]) || ((schema === null || schema === void 0 ? void 0 : schema.length) ? CommonPayload : null);
     if (!PayloadForm)
         return (_jsx(Button, { label: label, title: title, onClick: () => onHandle(), disabled: isPending, children: buildIcon(icon) }));
     return (_jsxs(_Fragment, { children: [_jsx(Button, { label: label, title: title, onClick: () => setPayloadActive(true), disabled: isPending, children: buildIcon(icon) }), _jsx(PayloadForm, { active: payloadActive, onHandle: onHandle, onClose: () => setPayloadActive(false), title: title || label, schema: schema, help: help })] }));
 }
 export function CommonPayload({ active, onClose, onHandle, schema, title, help, }) {
-    schema[0][1] = Object.assign(Object.assign({}, schema[0][1]), { autoFocus: true });
-    const inputs = buildRA(schema);
+    if (schema === null || schema === void 0 ? void 0 : schema.length)
+        schema[0][1] = Object.assign(Object.assign({}, schema[0][1]), { autoFocus: true });
+    const inputs = buildRA(schema || []);
     const translate = useTranslate();
     const { form, formHandleSubmit } = useAugmentedForm({
         onSubmit: (data) => {
@@ -102,15 +103,32 @@ export function CommonPayload({ active, onClose, onHandle, schema, title, help,
                     ? (_jsxs(Stack, { sx: { alignItems: "flex-start" }, children: [_jsx("span", { children: translate(title, { _: title }) }), _jsx(HelpLink, { href: help, style: { alignSelf: "flex-end" } })] }))
                     : translate(title, { _: title }), actions: _jsx(PayloadButtons, { onClose: onClose, onSubmit: formHandleSubmit, isValid: form.formState.isValid }), children: inputs }) }) })));
 }
+export function buildFileUrl(apiUrl, path, id, filterValues) {
+    let url = `${apiUrl}${path.replace("{id}", encodeURIComponent(String(id !== null && id !== void 0 ? id : "")))}?f`;
+    if (filterValues && Object.keys(filterValues).length) {
+        url += `&where=${encodeURIComponent(prepareFilters(filterValues))}`;
+    }
+    return url;
+}
 function FileButton({ path, record, label, icon, filterValues, }) {
     const { apiUrl } = useMuffinAdminOpts();
-    let url = `${apiUrl}${path}?f`;
-    if (record)
-        url = url.replace("{id}", record.id);
-    const authorization = requestHeaders.Authorization;
-    if (authorization)
-        url += `&t=${authorization}`;
-    if (Object.keys(filterValues).length)
-        url += `&where=${prepareFilters(filterValues)}`;
-    return (_jsx(Button, { href: url, label: label, component: Link, children: buildIcon(icon) }));
+    const notify = useNotify();
+    const onClick = () => __awaiter(this, void 0, void 0, function* () {
+        const url = buildFileUrl(apiUrl, path, record === null || record === void 0 ? void 0 : record.id, filterValues);
+        try {
+            const response = yield fetch(url, { headers: new Headers(requestHeaders) });
+            if (!response.ok)
+                throw new Error(`Download failed (${response.status})`);
+            const blob = yield response.blob();
+            const link = document.createElement("a");
+            link.href = URL.createObjectURL(blob);
+            link.download = path.split("/").pop() || "download";
+            link.click();
+            URL.revokeObjectURL(link.href);
+        }
+        catch (err) {
+            notify((err === null || err === void 0 ? void 0 : err.message) || "Download failed", { type: "error" });
+        }
+    });
+    return (_jsx(Button, { onClick: onClick, label: label, children: buildIcon(icon) }));
 }

package/dist/buttons/ActionButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/buttons/ActionButton.test.js

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { buildFileUrl } from "./ActionButton";
+describe("buildFileUrl", () => {
+    it("encodes ids and filters without adding the token", () => {
+        const url = buildFileUrl("/admin/api", "/message/{id}/data.csv", "a/b", { name: "A & B" });
+        expect(url).toBe(`/admin/api/message/a%2Fb/data.csv?f&where=${encodeURIComponent('{"name":"A & B"}')}`);
+        expect(url).not.toContain("t=");
+    });
+    it("works for list downloads without filters", () => {
+        expect(buildFileUrl("/admin/api", "/user/export")).toBe("/admin/api/user/export?f");
+    });
+});

package/dist/dataprovider.js

@@ -19,6 +19,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { makeRequest, prepareFilters, setupAdmin } from "./utils";
+const encodeId = (id) => encodeURIComponent(String(id));
 export function MuffinDataprovider(apiUrl) {
     function request(url, options) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -66,7 +67,7 @@ export function MuffinDataprovider(apiUrl) {
         }),
         getOne: (resource_1, _a) => __awaiter(this, [resource_1, _a], void 0, function* (resource, { id, meta }) {
             var _b;
-            const response = yield request(`${resource}/${id}`);
+            const response = yield request(`${resource}/${encodeId(id)}`);
             const { data } = response;
             if (meta === null || meta === void 0 ? void 0 : meta.key) {
                 data.id = (_b = data.id) !== null && _b !== void 0 ? _b : data[meta.key];
@@ -77,14 +78,14 @@ export function MuffinDataprovider(apiUrl) {
             return yield request(resource, Object.assign({ method: "POST" }, prepareDataParams(data)));
         }),
         update: (resource_1, _a) => __awaiter(this, [resource_1, _a], void 0, function* (resource, { id, data }) {
-            return yield makeRequest(`${apiUrl}/${resource}/${id}`, Object.assign({ method: "PUT" }, prepareDataParams(data))).then(({ json }) => ({ data: json }));
+            return yield makeRequest(`${apiUrl}/${resource}/${encodeId(id)}`, Object.assign({ method: "PUT" }, prepareDataParams(data))).then(({ json }) => ({ data: json }));
         }),
         updateMany: (resource_1, _a) => __awaiter(this, [resource_1, _a], void 0, function* (resource, { ids, data }) {
             yield Promise.all(ids.map((id) => methods.update(resource, { id, data })));
             return { data: ids };
         }),
         delete: (resource_1, _a) => __awaiter(this, [resource_1, _a], void 0, function* (resource, { id }) {
-            yield request(`${resource}/${id}`, { method: "DELETE" });
+            yield request(`${resource}/${encodeId(id)}`, { method: "DELETE" });
             return { data: { id } };
         }),
         deleteMany: (resource_1, _a) => __awaiter(this, [resource_1, _a], void 0, function* (resource, { ids }) {

package/dist/dataprovider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dataprovider.test.js

@@ -0,0 +1,40 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { MuffinDataprovider } from "./dataprovider";
+const jsonResponse = (body, headers = {}) => new Response(JSON.stringify(body), {
+    headers: Object.assign({ "content-type": "application/json" }, headers),
+    status: 200,
+});
+afterEach(() => {
+    vi.unstubAllGlobals();
+});
+describe("MuffinDataprovider", () => {
+    it("encodes resource ids in the URL", () => __awaiter(void 0, void 0, void 0, function* () {
+        const fetchMock = vi.fn().mockResolvedValue(jsonResponse({ id: "a/b" }));
+        vi.stubGlobal("fetch", fetchMock);
+        const dataProvider = MuffinDataprovider("/admin/api");
+        yield dataProvider.getOne("user", { id: "a/b" });
+        expect(fetchMock.mock.calls[0][0]).toBe("/admin/api/user/a%2Fb");
+    }));
+    it("uses the resource meta key as the react-admin id", () => __awaiter(void 0, void 0, void 0, function* () {
+        const fetchMock = vi
+            .fn()
+            .mockResolvedValue(jsonResponse([{ key: "web::42" }], { "x-total": "1" }));
+        vi.stubGlobal("fetch", fetchMock);
+        const dataProvider = MuffinDataprovider("/admin/api");
+        const result = yield dataProvider.getList("order", {
+            meta: { key: "key" },
+            pagination: { page: 1, perPage: 25 },
+        });
+        expect(result.data).toEqual([{ id: "web::42", key: "web::42" }]);
+        expect(result.total).toBe(1);
+    }));
+});

package/dist/fields/AvatarField.js

@@ -21,7 +21,7 @@ export function AvatarField(_a) {
     // Check value is a valid URL
     if (value) {
         try {
-            new URL(value);
+            new URL(value, window.location.origin);
         }
         catch (_b) {
             // Not a valid URL, return loader

package/dist/fields/JsonField.js

@@ -6,7 +6,9 @@ export function JsonField({ label, source }) {
     const [expand, setExpand] = useState(false);
     const record = useRecordContext();
     const value = get(record, source);
-    if (!value || Object.keys(value).length == 0)
+    if (value === undefined || value === null)
+        return null;
+    if (typeof value === "object" && Object.keys(value).length === 0)
         return null;
     const src = JSON.stringify(value, null, 2);
     const retval = (_jsxs("div", { children: [_jsx("p", {}), label, _jsx(Button, { size: "small", color: "primary", variant: "contained", label: expand ? "colapse" : "expand", onClick: (e) => {

package/dist/filters/Filter.js

@@ -27,17 +27,24 @@ const OPERATORS = {
 };
 export function Filter(_a) {
     var { type = "text" } = _a, props = __rest(_a, ["type"]);
-    const { field } = useInput(Object.assign({ format: (value) => (value ? value[Object.keys(value)[0]] : "") }, props));
-    const [op, setOp] = useState((field.value && Object.keys(field.value)[0]) || "$eq");
+    const { field } = useInput(Object.assign({ format: (value) => {
+            var _a;
+            if (value && typeof value === "object") {
+                const op = Object.keys(value)[0] || "$eq";
+                return { op, text: (_a = value[op]) !== null && _a !== void 0 ? _a : "" };
+            }
+            return { op: "$eq", text: value !== null && value !== void 0 ? value : "" };
+        } }, props));
+    const [op, setOp] = useState(field.value.op);
     const onChange = (e) => {
         field.onChange({ [op]: e.target.value });
     };
     const [menuEl, setMenuEl] = useState(null);
     const open = Boolean(menuEl);
     const { label, source, resource, isRequired } = props;
-    return (_jsxs(_Fragment, { children: [_jsxs(FormGroup, { row: true, sx: { flexWrap: "nowrap" }, children: [_jsx(Button, { size: "small", disableElevation: true, sx: { minWidth: 30 }, onClick: (e) => setMenuEl(e.currentTarget), children: _jsx("span", { style: { fontSize: "1.5em" }, children: OPERATORS[op] }) }), _jsx(TextField, Object.assign({}, field, { onChange: onChange, value: field.value, variant: "outlined", type: type, label: _jsx(FieldTitle, { label: label, source: source, resource: resource, isRequired: isRequired }) }))] }), _jsx(Menu, { open: open, onClose: () => setMenuEl(null), anchorEl: menuEl, children: Object.entries(OPERATORS).map(([key, value]) => (_jsx(MenuItem, { selected: op === value, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(FormGroup, { row: true, sx: { flexWrap: "nowrap" }, children: [_jsx(Button, { size: "small", disableElevation: true, sx: { minWidth: 30 }, onClick: (e) => setMenuEl(e.currentTarget), children: _jsx("span", { style: { fontSize: "1.5em" }, children: OPERATORS[op] }) }), _jsx(TextField, Object.assign({}, field, { onChange: onChange, value: field.value.text, variant: "outlined", type: type, label: _jsx(FieldTitle, { label: label, source: source, resource: resource, isRequired: isRequired }) }))] }), _jsx(Menu, { open: open, onClose: () => setMenuEl(null), anchorEl: menuEl, children: Object.entries(OPERATORS).map(([key, value]) => (_jsx(MenuItem, { selected: op === value, onClick: () => {
                         setOp(key);
                         setMenuEl(null);
-                        field.onChange({ [key]: field.value });
+                        field.onChange({ [key]: field.value.text });
                     }, children: value }, key))) })] }));
 }

package/dist/inputs/JsonInput.js

@@ -51,8 +51,10 @@ export function JsonInput(props) {
             return undefined;
         return isJSON(value) ? undefined : errortext;
     };
-    validate.push(validateJSON);
-    rest.validate = validate;
+    rest.validate = [
+        ...(Array.isArray(validate) ? validate : validate ? [validate] : []),
+        validateJSON,
+    ];
     const formatJSON = (json) => {
         let retval = json;
         if (retval && typeof retval === "object")

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "13.3.0";
+export declare const VERSION = "13.4.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "13.3.0";
+export const VERSION = "13.4.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "13.3.0",
+  "version": "13.4.0",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",
@@ -10,7 +10,7 @@
   "types": "dist/index.d.js",
   "scripts": {
     "build": "tsc",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "vitest run"
   },
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "@biomejs/biome": "^2.5.5",
     "@types/lodash": "^4.17.20",
     "@types/node": "26.1.1",
-    "@types/react": "19.2.17",
+    "@types/react": "19.3.0",
     "@types/react-dom": "19.2.3",
     "@types/react-window": "^2.0.0",
     "css-loader": "^7.1.2",
@@ -48,6 +48,8 @@
     "husky": "^9.0.11",
     "style-loader": "^4.0.0",
     "typescript": "^7.0.2",
+    "vite": "^8.3.5",
+    "vitest": "^5.0.5",
     "webpack": "^5.91.0",
     "webpack-cli": "^7.2.1",
     "webpack-dev-server": "^6.0.0"

package/src/MuffinDashboard.test.tsx

@@ -0,0 +1,24 @@
+import { renderToStaticMarkup } from "react-dom/server"
+import { expect, it, vi } from "vitest"
+
+vi.mock("react-admin", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-admin")>()
+  return {
+    ...actual,
+    useTranslate: () => (key: string, options?: { _?: string }) => options?._ ?? key,
+  }
+})
+
+import { MuffinAdminContext } from "./context"
+import { MuffinDashboard } from "./MuffinDashboard"
+
+it("renders no card without dashboard data", () => {
+  const html = renderToStaticMarkup(
+    <MuffinAdminContext.Provider value={{ dashboard: undefined, help: undefined } as any}>
+      <MuffinDashboard />
+    </MuffinAdminContext.Provider>
+  )
+
+  expect(html).not.toContain("undefined")
+  expect(html).not.toContain("MuiCard")
+})

package/src/MuffinDashboard.tsx

@@ -41,6 +41,8 @@ setupAdmin(["dashboard-actions"], () => null)
 setupAdmin(["dashboard-content"], () => null)
 
 function AdminCards({ src }: { src: AdminDashboardBlock | AdminDashboardBlock[] }) {
+  if (!src) return null
+
   if (Array.isArray(src))
     return (
       <Grid container spacing={2}>

package/src/MuffinResource.tsx

@@ -20,7 +20,7 @@ export function MuffinResource({ name, ...props }: ResourceProps) {
       create={Create}
       edit={Edit}
       list={List}
-      show={Show}
+      show={opts.list.show ? Show : undefined}
       {...props}
     />
   )

package/src/MuffinResourceEdit.tsx

@@ -119,6 +119,7 @@ export function MuffinEditToolbar({ children }: PropsWithChildren) {
   const resource = useResourceContext()
   const record = useRecordContext()
   const translate = useTranslate()
+  const { list } = useMuffinResourceOpts()
   const Actions = findBuilder(["edit-actions", resource])
   return (
     <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
@@ -130,7 +131,7 @@ export function MuffinEditToolbar({ children }: PropsWithChildren) {
         <Box sx={{ display: "flex", alignItems: "center" }}>
           <Actions />
           {children}
-          <ShowButton />
+          {list.show && <ShowButton />}
           <ListButton />
         </Box>
       </TopToolbar>

package/src/MuffinResourceShow.tsx

@@ -18,12 +18,14 @@ import { useMuffinResourceOpts } from "./hooks"
 import { buildAdmin, findBuilder, setupAdmin } from "./utils"
 
 export function MuffinShow({ children }: PropsWithChildren) {
-  const { show, name, key } = useMuffinResourceOpts()
+  const { show, list, name, key } = useMuffinResourceOpts()
   const location = useLocation()
   const navigate = useNavigate()
   const ShowToolbar = findBuilder(["show-toolbar", name])
   const returnTo = new URLSearchParams(location.search).get("returnTo")
 
+  if (!list.show) return null
+
   const handleClose = () => {
     if (returnTo) {
       navigate(returnTo)

package/src/buttons/ActionButton.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest"
+import { buildFileUrl } from "./ActionButton"
+
+describe("buildFileUrl", () => {
+  it("encodes ids and filters without adding the token", () => {
+    const url = buildFileUrl("/admin/api", "/message/{id}/data.csv", "a/b", { name: "A & B" })
+
+    expect(url).toBe(
+      `/admin/api/message/a%2Fb/data.csv?f&where=${encodeURIComponent('{"name":"A & B"}')}`
+    )
+    expect(url).not.toContain("t=")
+  })
+
+  it("works for list downloads without filters", () => {
+    expect(buildFileUrl("/admin/api", "/user/export")).toBe("/admin/api/user/export?f")
+  })
+})

package/src/buttons/ActionButton.tsx

@@ -1,10 +1,11 @@
-import { Link, Stack } from "@mui/material"
+import { Stack } from "@mui/material"
 import { useState } from "react"
 import {
   Button,
   FormGroupsProvider,
   useAugmentedForm,
   useListContext,
+  useNotify,
   useRecordContext,
   useResourceContext,
   useTranslate,
@@ -99,7 +100,8 @@ function ActionButtonBase({
   const resource = useResourceContext()
   const [payloadActive, setPayloadActive] = useState(false)
 
-  const PayloadForm = findBuilder(["action-form", id, resource]) || (schema && CommonPayload)
+  const PayloadForm =
+    findBuilder(["action-form", id, resource]) || (schema?.length ? CommonPayload : null)
   if (!PayloadForm)
     return (
       <Button label={label} title={title} onClick={() => onHandle()} disabled={isPending}>
@@ -137,8 +139,8 @@ export function CommonPayload({
   title,
   help,
 }: AdminPayloadProps) {
-  schema[0][1] = { ...schema[0][1], autoFocus: true }
-  const inputs = buildRA(schema)
+  if (schema?.length) schema[0][1] = { ...schema[0][1], autoFocus: true }
+  const inputs = buildRA(schema || [])
   const translate = useTranslate()
   const { form, formHandleSubmit } = useAugmentedForm({
     onSubmit: (data) => {
@@ -181,6 +183,14 @@ export function CommonPayload({
   )
 }
 
+export function buildFileUrl(apiUrl: string, path: string, id?: any, filterValues?: any) {
+  let url = `${apiUrl}${path.replace("{id}", encodeURIComponent(String(id ?? "")))}?f`
+  if (filterValues && Object.keys(filterValues).length) {
+    url += `&where=${encodeURIComponent(prepareFilters(filterValues))}`
+  }
+  return url
+}
+
 function FileButton({
   path,
   record,
@@ -195,14 +205,28 @@ function FileButton({
   filterValues?: any
 }) {
   const { apiUrl } = useMuffinAdminOpts()
-  let url = `${apiUrl}${path}?f`
-  if (record) url = url.replace("{id}", record.id as string)
-  const authorization = requestHeaders.Authorization
-  if (authorization) url += `&t=${authorization}`
-  if (Object.keys(filterValues).length) url += `&where=${prepareFilters(filterValues)}`
+  const notify = useNotify()
+
+  const onClick = async () => {
+    const url = buildFileUrl(apiUrl, path, record?.id, filterValues)
+
+    try {
+      const response = await fetch(url, { headers: new Headers(requestHeaders) })
+      if (!response.ok) throw new Error(`Download failed (${response.status})`)
+
+      const blob = await response.blob()
+      const link = document.createElement("a")
+      link.href = URL.createObjectURL(blob)
+      link.download = path.split("/").pop() || "download"
+      link.click()
+      URL.revokeObjectURL(link.href)
+    } catch (err: any) {
+      notify(err?.message || "Download failed", { type: "error" })
+    }
+  }
 
   return (
-    <Button href={url} label={label} component={Link}>
+    <Button onClick={onClick} label={label}>
       {buildIcon(icon)}
     </Button>
   )

package/src/dataprovider.test.ts

@@ -0,0 +1,40 @@
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { MuffinDataprovider } from "./dataprovider"
+
+const jsonResponse = (body: any, headers: Record<string, string> = {}) =>
+  new Response(JSON.stringify(body), {
+    headers: { "content-type": "application/json", ...headers },
+    status: 200,
+  })
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe("MuffinDataprovider", () => {
+  it("encodes resource ids in the URL", async () => {
+    const fetchMock = vi.fn().mockResolvedValue(jsonResponse({ id: "a/b" }))
+    vi.stubGlobal("fetch", fetchMock)
+
+    const dataProvider = MuffinDataprovider("/admin/api")
+    await dataProvider.getOne("user", { id: "a/b" })
+
+    expect(fetchMock.mock.calls[0][0]).toBe("/admin/api/user/a%2Fb")
+  })
+
+  it("uses the resource meta key as the react-admin id", async () => {
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValue(jsonResponse([{ key: "web::42" }], { "x-total": "1" }))
+    vi.stubGlobal("fetch", fetchMock)
+
+    const dataProvider = MuffinDataprovider("/admin/api")
+    const result = await dataProvider.getList("order", {
+      meta: { key: "key" },
+      pagination: { page: 1, perPage: 25 },
+    })
+
+    expect(result.data).toEqual([{ id: "web::42", key: "web::42" }])
+    expect(result.total).toBe(1)
+  })
+})

package/src/dataprovider.ts

@@ -5,6 +5,8 @@ type TQueryMeta = {
   key?: string
 }
 
+const encodeId = (id: TID) => encodeURIComponent(String(id))
+
 export function MuffinDataprovider(apiUrl: string) {
   async function request(url: string, options?: APIParams) {
     if (!url.startsWith("/")) url = `${apiUrl}/${url}`
@@ -50,7 +52,7 @@ export function MuffinDataprovider(apiUrl: string) {
     },
 
     getOne: async (resource: string, { id, meta }: { id: TID; meta?: TQueryMeta }) => {
-      const response = await request(`${resource}/${id}`)
+      const response = await request(`${resource}/${encodeId(id)}`)
       const { data } = response
       if (meta?.key) {
         data.id = data.id ?? data[meta.key]
@@ -66,7 +68,7 @@ export function MuffinDataprovider(apiUrl: string) {
     },
 
     update: async (resource: string, { id, data }: { id: TID; data: any }) => {
-      return await makeRequest(`${apiUrl}/${resource}/${id}`, {
+      return await makeRequest(`${apiUrl}/${resource}/${encodeId(id)}`, {
         method: "PUT",
         ...prepareDataParams(data),
       }).then(({ json }) => ({ data: json }))
@@ -78,7 +80,7 @@ export function MuffinDataprovider(apiUrl: string) {
     },
 
     delete: async (resource: string, { id }: { id: TID }) => {
-      await request(`${resource}/${id}`, { method: "DELETE" })
+      await request(`${resource}/${encodeId(id)}`, { method: "DELETE" })
       return { data: { id } }
     },
 

package/src/fields/AvatarField.tsx

@@ -11,7 +11,7 @@ export function AvatarField({ source, alt, style, nameProp, ...props }) {
   // Check value is a valid URL
   if (value) {
     try {
-      new URL(value)
+      new URL(value, window.location.origin)
     } catch {
       // Not a valid URL, return loader
       return <CircularProgress size={24} />

package/src/fields/JsonField.tsx

@@ -6,7 +6,8 @@ export function JsonField({ label, source }) {
   const [expand, setExpand] = useState(false)
   const record = useRecordContext()
   const value = get(record, source)
-  if (!value || Object.keys(value).length == 0) return null
+  if (value === undefined || value === null) return null
+  if (typeof value === "object" && Object.keys(value).length === 0) return null
 
   const src = JSON.stringify(value, null, 2)
   const retval = (

package/src/filters/Filter.tsx

@@ -17,10 +17,16 @@ const OPERATORS = {
 
 export function Filter({ type = "text", ...props }: InputProps) {
   const { field } = useInput({
-    format: (value: any) => (value ? value[Object.keys(value)[0]] : ""),
+    format: (value: any) => {
+      if (value && typeof value === "object") {
+        const op = Object.keys(value)[0] || "$eq"
+        return { op, text: value[op] ?? "" }
+      }
+      return { op: "$eq", text: value ?? "" }
+    },
     ...props,
   })
-  const [op, setOp] = useState((field.value && Object.keys(field.value)[0]) || "$eq")
+  const [op, setOp] = useState(field.value.op)
 
   const onChange = (e: any) => {
     field.onChange({ [op]: e.target.value })
@@ -44,7 +50,7 @@ export function Filter({ type = "text", ...props }: InputProps) {
         <TextField
           {...field}
           onChange={onChange}
-          value={field.value}
+          value={field.value.text}
           variant="outlined"
           type={type}
           label={
@@ -60,7 +66,7 @@ export function Filter({ type = "text", ...props }: InputProps) {
             onClick={() => {
               setOp(key)
               setMenuEl(null)
-              field.onChange({ [key]: field.value })
+              field.onChange({ [key]: field.value.text })
             }}
           >
             {value}

package/src/inputs/JsonInput.tsx

@@ -45,8 +45,10 @@ export function JsonInput(props) {
     if (!value || typeof value === "object") return undefined
     return isJSON(value) ? undefined : errortext
   }
-  validate.push(validateJSON)
-  rest.validate = validate
+  rest.validate = [
+    ...(Array.isArray(validate) ? validate : validate ? [validate] : []),
+    validateJSON,
+  ]
 
   const formatJSON = (json) => {
     let retval = json

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "13.3.0"
+export const VERSION = "13.4.0"