@rebasepro/admin 0.13.0 → 0.13.1-canary.g1822133

package/src/components/RelationSelector.tsx

@@ -18,7 +18,7 @@ import {
     SearchIcon,
     Separator,
     Tooltip,
-    useInjectStyles,
+    usePortalContainer,
     XIcon
 } from "@rebasepro/ui";
 import * as React from "react";
@@ -29,7 +29,6 @@ import { EntityPreviewBindingData } from "./EntityPreviewBinding";
 import { useData, useRelationSelector } from "@rebasepro/app";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { normalizeToEntityRelation } from "@rebasepro/common";
-import { EmptyValue } from "../preview";
 
 /** Whether an authored relation yields many rows. Derived from its kind. */
 function relationCardinality(relation: { kind?: string; cardinality?: string } | undefined): "one" | "many" | undefined {
@@ -58,7 +57,14 @@ export interface RelationSelectorProps {
 
     onValueChange?: (updatedValue: EntityRelation | EntityRelation[] | undefined) => 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 relation 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";
     useChips?: boolean;
     disabled?: boolean;
     error?: boolean; // kept for backwards compatibility (could be used for styling later)
@@ -84,7 +90,20 @@ export interface RelationSelectorProps {
     pageSize?: number;
     emptyPlaceholder?: string;
     searchPlaceholder?: string;
+    /** Shown in the open list when a search matched nothing. */
     noResultsText?: string;
+    /**
+     * Shown on the closed trigger when nothing is selected. Says only that the
+     * field is empty — see the note by `resolvedPlaceholder` for why it cannot
+     * say whether there is anything to pick.
+     */
+    emptyText?: string;
+    /**
+     * Shown in the open list when the target collection turned out to hold no
+     * rows at all, as opposed to a search simply not matching. Defaults to a
+     * sentence naming the target collection.
+     */
+    emptyCollectionText?: string;
     loadingText?: string;
 }
 
@@ -108,7 +127,9 @@ export const RelationSelector = React.forwardRef<
             pageSize,
             emptyPlaceholder,
             searchPlaceholder = "Search...",
-            noResultsText = "No relations found.",
+            noResultsText = "No matches.",
+            emptyText = "Select…",
+            emptyCollectionText,
             loadingText = "Loading..."
         },
         ref
@@ -117,10 +138,16 @@ export const RelationSelector = React.forwardRef<
         const collection = relation.target();
         const dataClient = useData();
         const sidePanelController = useSidePanel();
+        const contextPortalContainer = usePortalContainer();
         const multiple = multipleOverride ?? relationCardinality(relation) === "many";
 
         const [isPopoverOpen, setIsPopoverOpen] = useState(false);
         const isPopoverOpenRef = useRef(false);
+        // The list is only worth fetching once the picker has been opened. A
+        // table cell mounts one of these per row, and the selected value is
+        // resolved by its own effect below, not from the list. Latches on the
+        // first open so a closed popover keeps its results.
+        const [listRequested, setListRequested] = useState(false);
         const [selectedItems, setSelectedItems] = useState<RelationItem[]>([]);
         const [isLoadingSelectedItems, setIsLoadingSelectedItems] = useState(false);
         const [searchString, setSearchString] = useState<string>("");
@@ -143,7 +170,8 @@ export const RelationSelector = React.forwardRef<
             path: getCollectionDataPath(collection),
             collection,
             fixedFilter,
-            pageSize
+            pageSize,
+            enabled: listRequested
         });
 
         const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -410,6 +438,7 @@ relation } as RelationItem;
             if (next) {
                 // Capture current selection so we can pin those items to the top of the list
                 pinnedIdsRef.current = new Set(selectedItems.map(i => String(i.id)));
+                setListRequested(true);
                 setIsPopoverOpen(true);
                 isPopoverOpenRef.current = true;
             }
@@ -448,18 +477,35 @@ relation } as RelationItem;
             };
         }, [isPopoverOpen]);
 
-        useInjectStyles("RelationSelector", " [cmdk-group] { max-height: 40vh; overflow-y: auto; } ");
-
         const closePopover = useCallback(() => {
             setIsPopoverOpen(false);
             isPopoverOpenRef.current = false;
             pinnedIdsRef.current = null;
         }, []);
 
-        const resolvedPlaceholder = placeholder || emptyPlaceholder || <EmptyValue className={"ml-2"}/>;
-
-        // Use Sheet portal container if available, otherwise document.body
-        const portalContainer = (typeof document !== "undefined" ? document.body : undefined);
+        // Text, not `EmptyValue`. That component draws a small grey rounded bar
+        // with no text in it, which is the same shape the `Skeleton` component
+        // uses while data is in flight — so a relation you simply had not filled
+        // in was indistinguishable from one that was still loading, and an empty
+        // Author or Tags field read as permanently stuck. It also left the trigger
+        // button with no accessible name, since the bar contains no text at all.
+        //
+        // This says "not filled in" rather than "nothing to choose from": which of
+        // those it is cannot be known here. The list is deliberately not fetched
+        // until the picker is first opened (`enabled: listRequested`, guarded by
+        // relation_cell_picker_gating.test.tsx, because a table renders one of
+        // these per row), so before that `availableItems` is empty because nobody
+        // asked, not because the target collection is. The genuine "nothing to
+        // pick yet" state is reported inside the popover below, where the fetch
+        // has actually happened.
+        const resolvedPlaceholder = placeholder || emptyPlaceholder || emptyText;
+
+        // Whatever dialog, side dialog or sheet we are inside offers as its
+        // portal host, falling back to `document.body`. This is not cosmetic:
+        // those are modal, and a modal locks scrolling everywhere outside its
+        // own content — a list portaled to the body opens and then refuses to
+        // scroll, because every wheel event over it is cancelled.
+        const portalContainer = (contextPortalContainer ?? (typeof document !== "undefined" ? document.body : undefined)) ?? undefined;
 
         return (
             <>
@@ -474,6 +520,10 @@ relation } as RelationItem;
                             disabled={disabled}
                             onClick={() => {
                                 if (disabled) return;
+                                // Unconditional: the toggle can only close a
+                                // popover that was opened, which requested the
+                                // list already.
+                                setListRequested(true);
                                 setIsPopoverOpen(o => {
                                     const next = !o;
                                     isPopoverOpenRef.current = next;
@@ -488,9 +538,13 @@ relation } as RelationItem;
                             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
@@ -580,7 +634,7 @@ relation } as RelationItem;
                                         </Tooltip>
                                     )}
                                     <ChevronDownIcon
-                                        size={size === "medium" ? iconSize.medium : iconSize.small}
+                                        size={size === "small" ? iconSize.small : iconSize.medium}
                                         className={cls("transition", isPopoverOpen ? "rotate-180" : "")}
                                     />
                                 </div>
@@ -652,10 +706,17 @@ relation } as RelationItem;
                                                 className="ml-2 text-sm text-text-secondary dark:text-text-secondary-dark">{loadingText}</span>
                                         </div>
                                     )}
+                                    {/* Two different nothings, which used to share one
+                                        message ("No relations found.") even though the
+                                        fix for each is the opposite: clear the search, or
+                                        go and create the first row. With the fetch done,
+                                        the search string is what tells them apart. */}
                                     {!isLoading && availableItems.length === 0 && (
                                         <CommandPrimitive.Empty
                                             className="px-4 py-6 text-center text-text-secondary dark:text-text-secondary-dark">
-                                            {noResultsText}
+                                            {searchString
+                                                ? noResultsText
+                                                : (emptyCollectionText ?? `No ${collection.name ?? "entries"} yet.`)}
                                         </CommandPrimitive.Empty>
                                     )}
                                     <CommandPrimitive.Group>

package/src/components/SearchIconsView.tsx

@@ -4,9 +4,8 @@ import {
     coolIconKeys,
     debounce,
     IconButton,
-    iconKeys,
     iconSize,
-    lucideIcons,
+    LucideIconByName,
     SearchBar,
     Tooltip
 } from "@rebasepro/ui";
@@ -15,20 +14,6 @@ import { useTranslation } from "@rebasepro/app";
 
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 
-
-function toPascalCase(str: string): string {
-    return str.split(/[-_]/).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join("");
-}
-
-function resolveIcon(iconKey: string): React.ComponentType<{ size: number }> | null {
-    const allIcons = lucideIcons as Record<string, React.ComponentType<{ size: number }>>;
-    let icon = allIcons[iconKey];
-    if (!icon) {
-        icon = allIcons[toPascalCase(iconKey)];
-    }
-    return icon ?? null;
-}
-
 export interface SearchIconsProps {
     selectedIcon?: string;
     onIconSelected?: (icon: string) => void;
@@ -74,23 +59,19 @@ export function SearchIconsView({
             />
 
             <div className={"flex max-w-full flex-wrap mt-4"}>
-                {icons.map((icon: string) => {
-                    const LucideIcon = resolveIcon(icon);
-                    if (!LucideIcon) return null;
-                    return (
-                        <Tooltip title={icon} key={icon}
-                            asChild={true}>
-                            <IconButton
-                                shape={"square"}
-                                toggled={selectedIcon === icon}
-                                onClick={onIconSelected ? () => onIconSelected(icon) : undefined}
-                                className="box-content m-1"
-                            >
-                                <LucideIcon size={iconSize.medium}/>
-                            </IconButton>
-                        </Tooltip>
-                    );
-                })}
+                {icons.map((icon: string) => (
+                    <Tooltip title={icon} key={icon}
+                        asChild={true}>
+                        <IconButton
+                            shape={"square"}
+                            toggled={selectedIcon === icon}
+                            onClick={onIconSelected ? () => onIconSelected(icon) : undefined}
+                            className="box-content m-1"
+                        >
+                            <LucideIconByName name={icon} size={iconSize.medium}/>
+                        </IconButton>
+                    </Tooltip>
+                ))}
             </div>
         </>
     );

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -190,6 +190,7 @@ export function StringNumberFilterField({
 
                 {!enumValues && <TextField
                     size={"medium"}
+                    aria-label={`${title ?? name} filter value`}
                     type={type === "number" ? "number" : undefined}
                     value={internalValue !== undefined && internalValue != null ? String(internalValue) : ""}
                     disabled={isNullOperation}

package/src/components/SideDialogs.tsx

@@ -91,7 +91,17 @@ function SideDialogView({
     const [blocked, setBlocked] = useState(false);
     const [blockedNavigationMessage, setBlockedNavigationMessage] = useState<React.ReactNode | undefined>();
 
-    const [pendingClose, setPendingClose] = useState(false);
+    // Held in a ref, read through a getter, because of *when* it is written and
+    // read. "Save and close" raises it and submits the form in one click
+    // handler, and the callback that acts on it — the form's `onSaved` — was
+    // captured before React could re-render with the new value. As state the
+    // flag was therefore always read one save late: the first "save and close"
+    // saved and left the panel open, and the *next* save closed it.
+    // Nothing renders from it, so a ref loses nothing.
+    const pendingCloseRef = React.useRef(false);
+    const setPendingClose = useCallback((value: boolean) => {
+        pendingCloseRef.current = value;
+    }, []);
 
     const widthRef = React.useRef<string | undefined>(panel?.width);
     const width = widthRef.current;
@@ -142,9 +152,11 @@ function SideDialogView({
         setBlockedNavigationMessage,
         width,
         close: onCloseRequest,
-        pendingClose,
+        get pendingClose() {
+            return pendingCloseRef.current;
+        },
         setPendingClose
-    }), [blocked, setBlockedNavigationMessage, width, onCloseRequest, pendingClose]);
+    }), [blocked, setBlockedNavigationMessage, width, onCloseRequest, setPendingClose]);
 
     const additionalProps = panel?.additional as SidePanelBindingProps | undefined;
     const isDialogMode = additionalProps?.collection?.openEntityMode === "dialog";

package/src/components/SidePanelBinding.tsx

@@ -9,7 +9,7 @@ import { EditViewBinding } from "./EditViewBinding";
 import { DetailViewBinding } from "./DetailViewBinding";
 import { useSideDialogContext } from "./SideDialogs";
 import { useNavigate } from "react-router";
-import { saveEntityToMemoryCache, useComponentOverride } from "@rebasepro/app";
+import { useComponentOverride } from "@rebasepro/app";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
@@ -49,21 +49,60 @@ export function SidePanelBinding(props: SidePanelBindingProps) {
     const sideDialogsController = useSideDialogContext();
     const urlController = useUrlController();
 
+    /**
+     * The X in the identity bar.
+     *
+     * Unforced, so it stops at the same unsaved-changes prompt that Escape and
+     * a click outside already do. It used to clear `blocked` and force the
+     * close, which made the one control actually labelled "close" the only way
+     * out of the panel that dropped an edit without asking.
+     *
+     * `props.onClose` is not called here: the panel carries the same callback
+     * (see `propsToSidePanel`) and {@link SideDialogs} fires it once the panel
+     * really closes — which is after the prompt, not before it.
+     */
     const onClose = () => {
-        if (props.onClose) {
-            props.onClose();
-        }
+        close();
+    }
 
+    /**
+     * Closing because the record was just saved, which is the one case that has
+     * to force. `blocked` is driven by an effect on the form's dirty flag and is
+     * still true for a tick after a save; prompting about unsaved changes here
+     * would be asking about values that are already on the server.
+     */
+    const closeAfterSave = () => {
         setBlocked(false);
         close(true);
     }
 
+    /**
+     * The panel's response to a save, and the one place it decides where the
+     * panel goes next.
+     *
+     * Exactly **one** panel navigation is raised here. These branches used to
+     * run independently — a `replace` onto the saved record's address *and* a
+     * close — and because the last navigation is the one that survives, which
+     * of them the user got was settled by statement order rather than by
+     * intent. Closing wins by construction now: moving a panel to a new address
+     * it is about to leave is work whose only effect is to fight the close.
+     *
+     * `props.onUpdate` runs last for the same reason. It belongs to whoever
+     * opened the panel and it is free to navigate — the reference picker's
+     * selects the record and closes the picker — so the opener's intent should
+     * be the final word, not something this panel overwrites on its way out.
+     */
     const onUpdate = (params: OnUpdateParams) => {
-        if (props.onUpdate) {
-            props.onUpdate(params);
-        }
         setEditInDialog(false);
-        if (params.status !== "existing") {
+
+        // Either "save and close" was clicked, or the opener asked for it when
+        // it opened the panel.
+        const closeRequested = sideDialogsController.pendingClose || props.closeOnSave;
+
+        if (closeRequested) {
+            sideDialogsController.setPendingClose(false);
+            closeAfterSave();
+        } else if (params.status !== "existing") {
             // A newly created entity replaces the panel with its own address,
             // which already leaves the edit view behind.
             sidePanelController.replace({
@@ -77,11 +116,7 @@ export function SidePanelBinding(props: SidePanelBindingProps) {
             closeEditView();
         }
 
-        if (sideDialogsController.pendingClose) {
-            sideDialogsController.setPendingClose(false);
-            onClose();
-        }
-
+        props.onUpdate?.(params);
     }
 
     const parentCollectionSlugs = useMemo(() => {
@@ -181,6 +216,43 @@ entityId }
         return <div className={"w-full"}/>;
     }
 
+    const closeButton = (
+        <IconButton
+            className="self-center"
+            size={"small"}
+            onClick={onClose}>
+            <XIcon/>
+        </IconButton>
+    );
+
+    /**
+     * Where the panel's own two controls sit, which is not the same question in
+     * the two layouts that have them.
+     *
+     * A **side panel** slides in over the list from the right, and its leading
+     * edge is the seam between the two. Close belongs on that seam — it points
+     * back at the thing still visible behind it — and it is where the eye
+     * already is, because the breadcrumb starts there.
+     *
+     * A **dialog** has no seam and nothing behind it to point at. It is a box
+     * centred on a dimmed screen, and every box like it on every platform is
+     * dismissed from its top-right corner. Close was sitting at the far left
+     * of the bar, a full dialog's width from the expand button it belongs
+     * beside, in the one corner that means "back" in a layout with no back.
+     *
+     * So in a dialog the two travel together at the trailing edge, expand then
+     * close: the window controls, after the record's actions and its overflow
+     * menu, in the corner a dialog is closed from.
+     */
+    const barActionsStart = isDialogMode ? undefined : closeButton;
+
+    const windowControls = (expandButton: React.ReactNode) => (
+        <div className="flex gap-1 items-center">
+            {expandButton}
+            {isDialogMode && closeButton}
+        </div>
+    );
+
     return (
         <>
             <ErrorBoundary>
@@ -193,31 +265,20 @@ entityId }
                         parentCollectionSlugs={parentCollectionSlugs}
                         parentEntityIds={parentEntityIds}
                         onEditClick={openEditView}
-                        barActionsStart={
-                            // At the bar's leading edge, where the breadcrumb
-                            // starts: the corner of the panel it closes.
-                            <IconButton
+                        barActionsStart={barActionsStart}
+                        barActions={() => windowControls(
+                            allowFullScreen && <IconButton
                                 className="self-center"
                                 size={"small"}
-                                onClick={onClose}>
-                                <XIcon/>
-                            </IconButton>}
-                        barActions={({
-                            status,
-                            values
-                        }) => <div className="flex gap-1">
-                                {allowFullScreen && <IconButton
-                                    className="self-center"
-                                    size={"small"}
-                                    onClick={() => {
-                                        if (entityId) {
-                                            const fullScreenUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}`);
-                                            navigate(fullScreenUrl, { state: null });
-                                        }
-                                    }}>
-                                    <Maximize2Icon/>
-                                </IconButton>}
-                            </div>}
+                                onClick={() => {
+                                    if (entityId) {
+                                        const fullScreenUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}`);
+                                        navigate(fullScreenUrl, { state: null });
+                                    }
+                                }}>
+                                <Maximize2Icon/>
+                            </IconButton>
+                        )}
                         onTabChange={({
                             entityId: tabEntityId,
                             selectedTab,
@@ -245,38 +306,33 @@ entityId }
                         onValuesModified={onValuesModified}
                         onSaved={onUpdate}
                         navigateBack={closeEditView}
-                        barActionsStart={
-                            // At the bar's leading edge, where the breadcrumb
-                            // starts: the corner of the panel it closes.
-                            <IconButton
+                        barActionsStart={barActionsStart}
+                        barActions={({ carryEdit }) => windowControls(
+                            allowFullScreen && <IconButton
                                 className="self-center"
                                 size={"small"}
-                                onClick={onClose}>
-                                <XIcon/>
-                            </IconButton>}
-                        barActions={({
-                            status,
-                            values
-                        }) => <div className="flex gap-1">
-                                {allowFullScreen && <IconButton
-                                    className="self-center"
-                                    size={"small"}
-                                    onClick={() => {
-                                        const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
-                                        saveEntityToMemoryCache(key, values);
-                                        setBlocked(false);
-                                        setBlockedNavigationMessage(undefined);
-                                        if (entityId) {
-                                            const fullScreenUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}`);
-                                            navigate(fullScreenUrl, { state: null });
-                                        } else {
-                                            const fullScreenUrl = urlController.buildUrlCollectionPath(path);
-                                            navigate(fullScreenUrl + "#new", { state: null });
-                                        }
-                                    }}>
-                                    <Maximize2Icon/>
-                                </IconButton>}
-                            </div>}
+                                onClick={() => {
+                                    // The form's own handoff, rather than a second
+                                    // copy of the rules for it here: only an edit in
+                                    // progress is worth carrying (a clean record
+                                    // stashed anyway arrived announcing unsaved
+                                    // changes to someone who had only looked at it),
+                                    // and only the fields that were edited (carrying
+                                    // the whole record marked every field touched).
+                                    carryEdit?.();
+                                    setBlocked(false);
+                                    setBlockedNavigationMessage(undefined);
+                                    if (entityId) {
+                                        const fullScreenUrl = urlController.buildUrlCollectionPath(`${path}/${entityId}`);
+                                        navigate(fullScreenUrl, { state: null });
+                                    } else {
+                                        const fullScreenUrl = urlController.buildUrlCollectionPath(path);
+                                        navigate(fullScreenUrl + "#new", { state: null });
+                                    }
+                                }}>
+                                <Maximize2Icon/>
+                            </IconButton>
+                        )}
                         onTabChange={({
                             entityId: tabEntityId,
                             selectedTab,