@rebasepro/admin 0.13.0 → 0.13.1-canary.g1822133

package/src/components/UserSelector.tsx

@@ -14,7 +14,7 @@ import {
     PopoverPrimitive,
     SearchIcon,
     Separator,
-    useInjectStyles,
+    usePortalContainer,
     XIcon
 } from "@rebasepro/ui";
 import * as React from "react";
@@ -23,6 +23,7 @@ import { Command as CommandPrimitive } from "cmdk";
 import { User } from "@rebasepro/types";
 import { apiBaseOf, useRebaseClient, useAuthController, UserDisplay } from "@rebasepro/app";
 import { EmptyValue } from "../preview";
+import { useResolvedUser } from "../hooks/useResolvedUsers";
 
 interface UserSelectorItem {
     uid: string;
@@ -46,10 +47,19 @@ function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE }: { pageSize?: number }
     const [currentSearch, setCurrentSearch] = useState("");
     const offsetRef = useRef(0);
     const userCacheRef = useRef<Map<string, User>>(new Map());
+    // Stamped by every request; only the newest one is allowed to write state.
+    // Typing "alice" issues one request per keystroke and nothing cancels them,
+    // so the response for "al" landing after the response for "alice" replaced
+    // the list — and `offsetRef` — with results for a string the user had
+    // already moved past. Same shape as `useRelationSelector`.
+    const requestIdRef = useRef(0);
+    const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
     const fetchUsers = useCallback(async (searchStr: string, offset: number, append: boolean) => {
         const apiBase = apiBaseOf(client);
         if (!apiBase) return;
+        const requestId = ++requestIdRef.current;
+        const superseded = () => requestId !== requestIdRef.current;
         setIsLoading(true);
         try {
             const token = await getAuthToken?.();
@@ -68,6 +78,7 @@ function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE }: { pageSize?: number }
             });
             if (!response.ok) throw new Error("Failed to fetch users");
             const data = await response.json();
+            if (superseded()) return;
             const rows: Record<string, unknown>[] = data.data ?? data.users ?? [];
             const newItems: UserSelectorItem[] = rows.map((r: Record<string, unknown>) => {
                 const user: User = {
@@ -88,9 +99,10 @@ user };
             setHasMore(newItems.length >= pageSize);
             offsetRef.current = offset + newItems.length;
         } catch {
+            if (superseded()) return;
             setHasMore(false);
         } finally {
-            setIsLoading(false);
+            if (!superseded()) setIsLoading(false);
         }
     }, [client?.baseUrl, client?.apiPath, getAuthToken, pageSize]);
 
@@ -100,11 +112,23 @@ user };
     }, [fetchUsers]);
 
     const search = useCallback((searchStr: string) => {
-        setCurrentSearch(searchStr);
-        offsetRef.current = 0;
-        fetchUsers(searchStr, 0, false);
+        // Debounced like the relation picker's type-ahead: a request per
+        // keystroke is both wasteful and the thing that makes an out-of-order
+        // response likely in the first place.
+        if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
+        searchTimeoutRef.current = setTimeout(() => {
+            setCurrentSearch(searchStr);
+            offsetRef.current = 0;
+            fetchUsers(searchStr, 0, false);
+        }, searchStr.trim() ? 300 : 0);
     }, [fetchUsers]);
 
+    useEffect(() => {
+        return () => {
+            if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
+        };
+    }, []);
+
     const loadMore = useCallback(() => {
         fetchUsers(currentSearch, offsetRef.current, true);
     }, [fetchUsers, currentSearch]);
@@ -128,7 +152,14 @@ export interface UserSelectorProps {
     value?: string | null;
     onValueChange?: (userId: string | null) => void;
     placeholder?: React.ReactNode;
-    size?: "small" | "medium";
+    /**
+     * `large` is the form's size and is on the shared 28/32/40/48 control
+     * scale, so a user picker lines up with the text field beside it.
+     *
+     * `small` and `medium` predate that scale (42 and 56) and are kept as they
+     * are because the table cells and the filter row are built around them.
+     */
+    size?: "small" | "medium" | "large";
     disabled?: boolean;
     invisible?: boolean;
     clearable?: boolean;
@@ -171,6 +202,7 @@ export const UserSelector = React.forwardRef<
 
         const [isPopoverOpen, setIsPopoverOpen] = useState(false);
         const [searchString, setSearchString] = useState<string>("");
+        const contextPortalContainer = usePortalContainer();
 
         const scrollContainerRef = useRef<HTMLDivElement>(null);
         const sentinelRef = useRef<HTMLDivElement>(null);
@@ -192,9 +224,19 @@ export const UserSelector = React.forwardRef<
         const selectedUser: User | null = value ? getUser(value) ?? null : null;
 
         // If the user isn't in the cache, try to find in available items
-        const resolvedUser: User | null = selectedUser
+        const listedUser: User | null = selectedUser
             ?? (value ? availableItems.find(i => i.uid === value)?.user ?? null : null);
 
+        // Neither the loaded page nor the cache holds it: ask for that uid
+        // specifically. The list is one page of ten, so any installation with
+        // more users than that rendered an assigned field as *empty* — and an
+        // editor who is shown "no value" sets one, overwriting an assignment
+        // the UI never admitted was there. Lookups are coalesced and cached
+        // per API base by `useResolvedUser`, so a table of these costs one
+        // request.
+        const fetchedUser = useResolvedUser(value && !listedUser ? value : undefined);
+        const resolvedUser: User | null = listedUser ?? fetchedUser;
+
         // IntersectionObserver for infinite scroll
         const sentinelCallbackRef = useCallback((node: HTMLDivElement | null) => {
             if (observerRef.current) {
@@ -294,10 +336,10 @@ export const UserSelector = React.forwardRef<
             };
         }, [isPopoverOpen]);
 
-        useInjectStyles("UserSelector", " [cmdk-group] { max-height: 40vh; overflow-y: auto; } ");
-
         const resolvedPlaceholder = placeholder || <EmptyValue className={"ml-2"}/>;
-        const portalContainer = (typeof document !== "undefined" ? document.body : undefined);
+        // See RelationSelector: a modal dialog cancels wheel events outside its
+        // own content, so a list portaled to the body opens unscrollable.
+        const portalContainer = (contextPortalContainer ?? (typeof document !== "undefined" ? document.body : undefined)) ?? undefined;
 
         return (
             <>
@@ -317,9 +359,13 @@ export const UserSelector = React.forwardRef<
                             className={cls(
                                 {
                                     "min-h-[42px] py-1 px-2": size === "small",
-                                    "min-h-[56px] py-2 px-4": size === "medium"
+                                    "min-h-[56px] py-2 px-4": size === "medium",
+                                    "min-h-[48px] py-1 px-4": size === "large"
                                 },
-                                "w-full select-none rounded-md text-sm relative flex items-center",
+                                // `rounded-lg` like every other field box —
+                                // `rounded-md` made this the one control in a
+                                // row with a different corner.
+                                "w-full select-none rounded-lg text-sm relative flex items-center",
                                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                                 className
@@ -330,6 +376,14 @@ export const UserSelector = React.forwardRef<
                                     <div className="flex flex-row items-center gap-1 truncate flex-1 min-w-0 mr-2">
                                         <UserDisplay user={resolvedUser}/>
                                     </div>
+                                ) : value ? (
+                                    // A uid we could not resolve — deleted, or
+                                    // hidden from this viewer. Show it raw: the
+                                    // placeholder here would claim the field is
+                                    // unset, which is the one thing it is not.
+                                    <span className="text-sm truncate text-text-primary dark:text-text-primary-dark">
+                                        {value}
+                                    </span>
                                 ) : (
                                     <span className="text-sm text-text-secondary dark:text-text-secondary-dark">
                                         {resolvedPlaceholder}
@@ -345,7 +399,7 @@ export const UserSelector = React.forwardRef<
                                         </IconButton>
                                     )}
                                     <ChevronDownIcon
-                                        size={size === "medium" ? iconSize.medium : iconSize.small}
+                                        size={size === "small" ? iconSize.small : iconSize.medium}
                                         className={cls("transition", isPopoverOpen ? "rotate-180" : "")}
                                     />
                                 </div>

package/src/components/app/Scaffold.tsx

@@ -4,17 +4,48 @@ import { ChevronLeftIcon, ErrorBoundary, MenuIcon } from "@rebasepro/ui";
 import { deepEqual as equal } from "fast-equals"
 
 import { useLargeLayout, useAdminModeController, useTranslation } from "@rebasepro/app";
+import { useUrlController } from "../../hooks/navigation/contexts/UrlContext";
 import { AppContext } from "./useApp";
 
 export const DRAWER_WIDTH = 280;
 
+/**
+ * Namespaced by base path: two admins served from one origin are two different
+ * navigations, and a single key would have them overwrite each other's drawer.
+ */
+export function drawerOpenStorageKey(basePath: string | undefined) {
+    return `rebase-drawer-open:${basePath || "/"}`;
+}
+
+/** `null` when the user has never toggled the drawer, or storage is unavailable. */
+function readStoredDrawerOpen(key: string): boolean | null {
+    if (typeof window === "undefined") return null;
+    try {
+        const stored = window.localStorage.getItem(key);
+        return stored === null ? null : stored === "true";
+    } catch (e) {
+        // Storage can be blocked: private mode, sandboxed iframe, cookie policy.
+        return null;
+    }
+}
+
+function writeStoredDrawerOpen(key: string, open: boolean) {
+    if (typeof window === "undefined") return;
+    try {
+        window.localStorage.setItem(key, String(open));
+    } catch (e) {
+        // Same as above: a drawer that forgets is better than a crash.
+    }
+}
+
 /**
  * @group Core
  */
 export interface ScaffoldProps {
 
     /**
-     * Open the drawer on hover
+     * Expand the collapsed drawer while the pointer is over it. On by default —
+     * pass `false` to keep the rail a rail until the user clicks the toggle.
      */
     autoOpenDrawer?: boolean;
 
@@ -22,8 +53,8 @@ export interface ScaffoldProps {
      * Start with the drawer expanded rather than collapsed to icons.
      *
      * Distinct from {@link autoOpenDrawer}, which is a hover behaviour: this one
-     * only seeds the initial state, so the user's own toggle still wins for the
-     * rest of the session.
+     * only seeds the very first visit. Once the user toggles the drawer, that
+     * choice is stored in `localStorage` and wins over this prop on every load.
      *
      * Ignored on small layouts, where an expanded drawer covers the content it is
      * meant to navigate.
@@ -62,7 +93,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
         const {
             children,
-            autoOpenDrawer,
+            autoOpenDrawer = true,
             defaultDrawerOpen = false,
             logo,
             className,
@@ -83,25 +114,96 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const includeDrawer = drawerChildren.length > 0;
         const largeLayout = useLargeLayout();
 
+        const storageKey = drawerOpenStorageKey(useUrlController().basePath);
+
         // Seeded once, deliberately: a `useEffect` syncing this to the prop would
         // re-expand the drawer under a user who had just collapsed it.
-        const [drawerOpen, setDrawerOpen] = React.useState(defaultDrawerOpen && largeLayout);
+        const [drawerOpen, setDrawerOpenState] = React.useState(defaultDrawerOpen && largeLayout);
         const [onHover, setOnHover] = React.useState(false);
 
-        const setOnHoverTrue = useCallback(() => setOnHover(true), []);
+        // The stored choice is a client-only fact, so it is applied after the first
+        // render rather than seeded into it: reading storage while rendering would
+        // make the client disagree with server-rendered HTML. A layout effect runs
+        // before paint, so the drawer still arrives in its remembered state.
+        // `defaultDrawerOpen` seeds the very first visit and is ignored after that.
+        React.useLayoutEffect(() => {
+            const stored = readStoredDrawerOpen(storageKey);
+            if (stored === null) return;
+            setDrawerOpenState(stored && largeLayout);
+            // Deliberately not re-run on `largeLayout`: crossing the breakpoint is
+            // the effect below, and re-running here would undo a user's toggle.
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [storageKey]);
+
+        // One piece of state drives two different things: the expanded rail on
+        // large layouts, and the modal sheet on small ones. Carrying an expanded
+        // rail across the breakpoint would drop that sheet, overlay and all, over
+        // the content — so the crossing resets it, and widening again restores
+        // whatever the user last chose.
+        const wasLargeLayout = React.useRef(largeLayout);
+        React.useEffect(() => {
+            if (wasLargeLayout.current === largeLayout) return;
+            wasLargeLayout.current = largeLayout;
+            setDrawerOpenState(largeLayout ? (readStoredDrawerOpen(storageKey) ?? defaultDrawerOpen) : false);
+        }, [largeLayout, defaultDrawerOpen, storageKey]);
+
+        const setDrawerOpen = useCallback((open: boolean) => {
+            setDrawerOpenState(open);
+            // Small layouts render the drawer as a modal sheet. Remembering that
+            // one would greet the next load with an overlay over the content.
+            if (!largeLayout) return;
+            writeStoredDrawerOpen(storageKey, open);
+        }, [largeLayout, storageKey]);
+
+        // The pointer has left, but a popover the drawer opened is still up, so the
+        // collapse is owed rather than cancelled. See `setOnHoverFalse`.
+        const collapseWhenPopoverCloses = React.useRef(false);
+
+        const setOnHoverTrue = useCallback(() => {
+            // Hover expansion is the default; `autoOpenDrawer={false}` opts out for
+            // admins that want the rail to stay a rail until the toggle is clicked.
+            if (!autoOpenDrawer) return;
+            collapseWhenPopoverCloses.current = false;
+            setOnHover(true);
+        }, [autoOpenDrawer]);
         const setOnHoverFalse = useCallback(() => {
-            // Don't collapse the drawer while a popover/dropdown is open
-            if (document.querySelector("[data-radix-popper-content-wrapper]")) return;
+            // Don't collapse the drawer out from under an open popover/dropdown —
+            // its content is portalled outside the drawer, so reaching for it reads
+            // as a mouseleave. The collapse is owed until that popover closes.
+            if (document.querySelector("[data-radix-popper-content-wrapper]")) {
+                collapseWhenPopoverCloses.current = true;
+                return;
+            }
+            collapseWhenPopoverCloses.current = false;
             setOnHover(false);
         }, []);
 
+        // Nothing fires a second mouseleave when the popover finally closes, so the
+        // owed collapse has to be noticed rather than waited for. Only mounted
+        // while the drawer is actually floating open.
+        React.useEffect(() => {
+            if (!onHover) return;
+            const collapseIfOwed = () => {
+                if (!collapseWhenPopoverCloses.current) return;
+                if (document.querySelector("[data-radix-popper-content-wrapper]")) return;
+                collapseWhenPopoverCloses.current = false;
+                setOnHover(false);
+            };
+            const observer = new MutationObserver(collapseIfOwed);
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+            return () => observer.disconnect();
+        }, [onHover]);
+
         const handleDrawerOpen = useCallback(() => {
             setDrawerOpen(true);
-        }, []);
+        }, [setDrawerOpen]);
 
         const handleDrawerClose = useCallback(() => {
             setDrawerOpen(false);
-        }, []);
+        }, [setDrawerOpen]);
 
         const computedDrawerOpen: boolean = drawerOpen;
         const computedDrawerHovered = Boolean(largeLayout && onHover);

package/src/components/history/LastEditedByIndicator.tsx

@@ -3,22 +3,17 @@ import React, { useEffect, useState, useCallback } from "react";
 ;
 import { useApiBase, useApiConfig } from "@rebasepro/app";
 import { useAuthController } from "@rebasepro/app";
+import { formatRelativeTime } from "@rebasepro/utils";
 import { HistoryEntryData } from "../../hooks";
 import type { AdminCollection } from "@rebasepro/admin-types";
 
-function getRelativeTimeString(date: Date): string {
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffSeconds = Math.floor(diffMs / 1000);
-    const diffMinutes = Math.floor(diffSeconds / 60);
-    const diffHours = Math.floor(diffMinutes / 60);
-    const diffDays = Math.floor(diffHours / 24);
+const THIRTY_DAYS_MS = 30 * 24 * 60 * 60 * 1000;
 
-    if (diffSeconds < 60) return "just now";
-    if (diffMinutes < 60) return `${diffMinutes}m ago`;
-    if (diffHours < 24) return `${diffHours}h ago`;
-    if (diffDays < 30) return `${diffDays}d ago`;
-    return date.toLocaleDateString();
+function getRelativeTimeString(date: Date): string {
+    // An edit is in the past, but the timestamp comes from the server and the
+    // phrase is rendered against the browser's clock — a few seconds of skew
+    // used to be enough to make a fresh edit read as the wrong thing entirely.
+    return formatRelativeTime(date, { maxMs: THIRTY_DAYS_MS }) ?? date.toLocaleDateString();
 }
 
 /**

package/src/components/index.ts

@@ -1,6 +1,9 @@
 export type { EntityViewBindingProps } from "./EntityViewBinding";
 export { EntityViewBinding } from "./EntityViewBinding";
 
+export type { EntityDisplayHeaderProps } from "./EntityDisplayHeader";
+export { EntityDisplayHeader, HEADER_DISPLAY_ROLES } from "./EntityDisplayHeader";
+
 export * from "./DetailViewBinding";
 
 export type { SelectionProps } from "./ReferenceTable/SelectionTableBinding";

package/src/data_export/export/ExportCollectionAction.tsx

@@ -29,9 +29,26 @@ import {
     Tooltip
 } from "@rebasepro/ui";
 import { downloadEntitiesExport } from "./export";
+import { fetchAllEntitiesForExport, MAX_EXPORT_ROWS } from "./fetch_export_data";
 
 const DOCS_LIMIT = 500;
 
+/**
+ * Additional-field builders run per row and may do I/O, so a `Promise.all` over
+ * the whole export is one request per row all at once. That was bounded only by
+ * the 50-row cap the export used to have; now that the read is paginated, it is
+ * bounded here instead.
+ */
+const ADDITIONAL_FIELDS_CONCURRENCY = 50;
+
+async function mapInChunks<T, R>(items: T[], fn: (item: T) => Promise<R>, chunkSize = ADDITIONAL_FIELDS_CONCURRENCY): Promise<R[]> {
+    const results: R[] = [];
+    for (let i = 0; i < items.length; i += chunkSize) {
+        results.push(...await Promise.all(items.slice(i, i + chunkSize).map(fn)));
+    }
+    return results;
+}
+
 export function ExportCollectionAction<M extends Record<string, unknown>, USER extends User>({
     collection,
     path,
@@ -59,6 +76,11 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
     const context = useAdminContext<USER>();
     const dataClient = useData();
 
+    // Said before the download starts, not discovered halfway through it: the
+    // walk refuses rather than writing a short file, so the dialog has to name
+    // the ceiling it is about to hit.
+    const tooManyToExport = collectionEntitiesCount !== undefined && collectionEntitiesCount > MAX_EXPORT_ROWS;
+
     const canExport = !exportAllowed || exportAllowed({
         collectionEntitiesCount: collectionEntitiesCount ?? 0,
         path,
@@ -67,6 +89,7 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
 
     const [dataLoading, setDataLoading] = React.useState<boolean>(false);
     const [dataLoadingError, setDataLoadingError] = React.useState<Error | undefined>();
+    const [progress, setProgress] = React.useState<{ loaded: number, total?: number }>({ loaded: 0 });
 
     const [open, setOpen] = React.useState(false);
 
@@ -84,7 +107,7 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
         const additionalFields = collection.additionalFields;
 
         const resolvedExportColumnsValues: Record<string, any>[] = additionalExportFields
-            ? await Promise.all(entities.map(async (entity) => {
+            ? await mapInChunks(entities, async (entity) => {
                 return (await Promise.all(additionalExportFields.map(async (column) => {
                     return {
                         [column.key]: await column.builder({
@@ -94,11 +117,11 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
                     };
                 }))).reduce((a, b) => ({ ...a,
 ...b }), {});
-            }))
+            })
             : [];
 
         const resolvedColumnsValues: Record<string, any>[] = additionalFields
-            ? await Promise.all(entities.map(async (entity) => {
+            ? await mapInChunks(entities, async (entity) => {
                 return (await Promise.all(additionalFields
                     .map(async (field) => {
                         if (!field.value)
@@ -111,64 +134,74 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
                         };
                     }))).reduce((a, b) => ({ ...a,
 ...b }), {});
-            }))
+            })
             : [];
         return [...resolvedExportColumnsValues, ...resolvedColumnsValues];
     }, [exportConfig?.additionalFields]);
 
     const doDownload = useCallback(async (collection: AdminCollection<M>,
-        exportConfig: ExportConfig<any> | undefined) => {
+        exportConfig: ExportConfig<any> | undefined): Promise<boolean> => {
 
         onAnalyticsEvent?.("export_collection", {
             collection: collection.slug
         });
         setDataLoading(true);
-        dataClient.collection(path).find({})
-            .then(async (res) => {
-                const data = res.data as Entity<M>[];
-                setDataLoadingError(undefined);
-                const additionalData = await fetchAdditionalFields(data);
-                const additionalHeaders = [
-                    ...exportConfig?.additionalFields?.map(column => column.key) ?? [],
-                    ...collection.additionalFields?.map(field => field.key) ?? []
-                ];
-
-                const dataWithDefaults = includeUndefinedValues
-                    ? data.map(entity => {
-                        const defaultValues = getDefaultValuesFor(collection.properties);
-                        return {
-                            ...entity,
-                            values: { ...defaultValues,
+        setDataLoadingError(undefined);
+        setProgress({ loaded: 0 });
+        try {
+            // Paginated, not `find({})`: an absent limit resolves to 50 rows
+            // server-side, so the export used to be the first page of the
+            // collection under a filename that read like all of it.
+            const data = await fetchAllEntitiesForExport<M>({
+                accessor: dataClient.collection(path) as { find: (params?: any) => Promise<any> },
+                onProgress: (loaded, total) => setProgress({ loaded,
+                    total })
+            });
+            const additionalData = await fetchAdditionalFields(data);
+            const additionalHeaders = [
+                ...exportConfig?.additionalFields?.map(column => column.key) ?? [],
+                ...collection.additionalFields?.map(field => field.key) ?? []
+            ];
+
+            const defaultValues = includeUndefinedValues ? getDefaultValuesFor(collection.properties) : undefined;
+            const dataWithDefaults = defaultValues
+                ? data.map(entity => ({
+                    ...entity,
+                    values: { ...defaultValues,
 ...entity.values }
-                        };
-                    })
-                    : data;
-                downloadEntitiesExport({
-                    data: dataWithDefaults,
-                    additionalData,
-                    properties: collection.properties,
-                    propertiesOrder: collection.propertiesOrder,
-                    name: collection.name,
-                    flattenArrays,
-                    additionalHeaders,
-                    exportType,
-                    dateExportType
-                });
-                onAnalyticsEvent?.("export_collection_success", {
-                    collection: collection.slug
-                });
-            })
-            .catch((e) => {
-                console.error("Error loading export data", e);
-                setDataLoadingError(e);
-            })
-            .finally(() => setDataLoading(false));
+                }))
+                : data;
+            downloadEntitiesExport({
+                data: dataWithDefaults,
+                additionalData,
+                properties: collection.properties,
+                propertiesOrder: collection.propertiesOrder,
+                name: collection.name,
+                flattenArrays,
+                additionalHeaders,
+                exportType,
+                dateExportType
+            });
+            onAnalyticsEvent?.("export_collection_success", {
+                collection: collection.slug
+            });
+            return true;
+        } catch (e) {
+            console.error("Error loading export data", e);
+            setDataLoadingError(e as Error);
+            return false;
+        } finally {
+            setDataLoading(false);
+        }
 
     }, [onAnalyticsEvent, dataClient, path, fetchAdditionalFields, includeUndefinedValues, flattenArrays, exportType, dateExportType]);
 
     const onOkClicked = useCallback(() => {
-        doDownload(collection, exportConfig);
-        handleClose();
+        // The dialog stays open until the walk finishes: it is the only place a
+        // multi-page export reports progress, or reports that it failed.
+        doDownload(collection, exportConfig).then((downloaded) => {
+            if (downloaded) handleClose();
+        });
     }, [doDownload, collection, exportConfig, handleClose]);
 
     return <>
@@ -194,13 +227,23 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
 
                 <div>{t("download_table_csv")}</div>
 
-                {collectionEntitiesCount !== undefined && collectionEntitiesCount > DOCS_LIMIT &&
+                {collectionEntitiesCount !== undefined && collectionEntitiesCount > DOCS_LIMIT && !tooManyToExport &&
                     <Alert color={"warning"}>
                         <div>
                             {t("large_number_of_documents", { count: collectionEntitiesCount.toString() })}
                         </div>
                     </Alert>}
 
+                {tooManyToExport &&
+                    <Alert color={"error"}>
+                        <div>
+                            {t("too_many_documents_to_export", {
+                                count: (collectionEntitiesCount ?? 0).toString(),
+                                limit: MAX_EXPORT_ROWS.toString()
+                            })}
+                        </div>
+                    </Alert>}
+
                 <div className={"flex flex-row gap-4"}>
                     <div className={"p-4 flex flex-col"}>
                         <RadioGroup value={exportType} onValueChange={(v) => setExportType(v as "csv" | "json")}>
@@ -242,6 +285,10 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
                     onValueChange={setIncludeUndefinedValues}
                     label={t("include_undefined_values")}/>
 
+                {dataLoadingError && <Alert color={"error"}>
+                    <div>{dataLoadingError.message}</div>
+                </Alert>}
+
                 {!canExport && notAllowedView}
 
             </DialogContent>
@@ -250,13 +297,19 @@ export function ExportCollectionAction<M extends Record<string, unknown>, USER e
 
                 {dataLoading && <CircularProgress size={"smallest"}/>}
 
+                {dataLoading && <Label>
+                    {progress.total !== undefined
+                        ? `${progress.loaded} / ${progress.total}`
+                        : `${progress.loaded}`}
+                </Label>}
+
                 <Button onClick={handleClose}
                     variant={"text"}>
                     {t("cancel")}
                 </Button>
 
                 <Button onClick={onOkClicked}
-                    disabled={dataLoading || !canExport}>
+                    disabled={dataLoading || !canExport || tooManyToExport}>
                     {t("download")}
                 </Button>