@rebasepro/admin 0.13.0 → 0.13.1-canary.g394d868

package/src/components/DetailViewBinding.tsx

@@ -10,11 +10,11 @@ import { CollectionViewBinding } from "./CollectionViewBinding/CollectionViewBin
 import { EntityViewBinding } from "./EntityViewBinding";
 import { EntityIdentityBar } from "./EntityIdentityBar";
 import { SplitListCloseButton } from "./CollectionViewBinding/SplitListCloseButton";
+import { SplitListShowButton } from "./CollectionViewBinding/SplitListShowButton";
 import { EntityInspector, InspectorTab } from "./EntityInspector";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
 import {
     Alert,
-    ArrowLeftIcon,
     Button,
     CenteredView,
     cls,
@@ -34,6 +34,7 @@ import { ErrorBoundary } from "@rebasepro/ui";
 import { ErrorView, createFormexStub, usePermissions, useTranslation, getIcon } from "@rebasepro/app";
 
 import { removeInitialAndTrailingSlashes, resolveDefaultSelectedView } from "@rebasepro/app";
+import { withViewMode } from "../util/view_mode";
 import { resolvedSelectedEntityView } from "../util/resolutions";
 import {
     useCustomizationController,
@@ -45,9 +46,7 @@ import {
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useNavigate } from "react-router";
-import { getValueInPath } from "@rebasepro/utils";
-import { getEntityTitlePropertyKeyForEntity, isUserSelectProperty, resolveTitleToString } from "../util/previews";
-import { getUserLabel, useResolvedUser } from "../hooks/useResolvedUsers";
+import { useEntityDisplayTitle } from "../hooks/useEntityDisplayTitle";
 
 
 import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/view_constants";
@@ -57,6 +56,8 @@ export type BarActionsParams = {
     status: EntityStatus,
     path: string,
     entityId?: string | number;
+    /** Always false here — this view reads a record, it does not edit one. */
+    dirty: boolean;
 };
 
 export type OnTabChangeParams<M extends Record<string, unknown>> = {
@@ -75,6 +76,13 @@ export interface DetailViewBindingProps<M extends Record<string, unknown> = Reco
     parentEntityIds: string[];
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     onEditClick?: () => void;
+    /**
+     * Dismiss this record — the ✕ at the identity bar's trailing edge.
+     *
+     * Set by the layouts that own the record's place on screen but are not side
+     * dialogs: the split, where dismissing is navigating back to the collection.
+     */
+    onCloseRequest?: () => void;
     layout?: "side_panel" | "full_screen" | "split" | "dialog";
     barActions?: (params: BarActionsParams) => React.ReactNode;
     /**
@@ -82,6 +90,12 @@ export interface DetailViewBindingProps<M extends Record<string, unknown> = Reco
      * of the breadcrumb — the side panel's close button.
      */
     barActionsStart?: React.ReactNode;
+    /**
+     * Full screen only: bring the list back beside this record. Set when the
+     * record was opened out of a split collection, so folding the list away is
+     * reversible; it takes the place of the back arrow when present.
+     */
+    onShowList?: () => void;
 }
 
 export function DetailViewBinding<M extends Record<string, unknown>>({
@@ -137,11 +151,13 @@ function DetailViewBindingInner<M extends Record<string, unknown>>({
     parentEntityIds,
     onTabChange,
     onEditClick,
+    onCloseRequest,
     entity,
     dataLoading,
     layout = "full_screen",
     barActions,
-    barActionsStart
+    barActionsStart,
+    onShowList
 }: DetailViewBindingProps<M> & {
     entity?: Entity<M>,
     dataLoading: boolean,
@@ -283,18 +299,13 @@ entityId }
     const formViewConfig = (collection as AdminCollection<M> & { formView?: FormViewConfig<M> }).formView;
     const FormViewBuilder = formViewConfig?.Builder ? resolveComponentRef<EntityCustomViewParams>(formViewConfig.Builder as ComponentRef<EntityCustomViewParams>) : null;
 
-    // Title resolution
-    const titlePropertyKey = getEntityTitlePropertyKeyForEntity(collection, usedEntity?.values, usedEntity?.id);
-    const rawTitle = usedEntity?.values && titlePropertyKey ? getValueInPath(usedEntity.values, titlePropertyKey) : undefined;
-    // A user picker stores an id: resolve it to the person, like a relation.
-    const titleUser = useResolvedUser(isUserSelectProperty(collection, titlePropertyKey) && typeof rawTitle === "string"
-        ? rawTitle
-        : undefined);
-    const title = titleUser
-        ? getUserLabel(titleUser)
-        : (rawTitle !== undefined && rawTitle !== null
-            ? resolveTitleToString(rawTitle)
-            : (collection.singularName ?? collection.name));
+    // The heading, resolved the one way — this used to be a copy of
+    // `useEntityDisplayTitle`'s body, and the two had already drifted.
+    const title = useEntityDisplayTitle({
+        collection,
+        entity: usedEntity,
+        status: "existing"
+    });
 
     // Non-action custom views
     const nonActionCustomViews = useMemo(() =>
@@ -380,20 +391,31 @@ entityId }
     }, [onTabChange, path, entityId, collection]);
 
     const propertyDetailView = () => {
-        // formView.Builder replaces the default property display
+        // formView.Builder replaces the default property display. It gets the
+        // centred column the record used to be given here; the default display
+        // now lays itself out, rail included.
         if (FormViewBuilder && usedEntity) {
-            return <ErrorBoundary>
-                <Suspense fallback={<CircularProgressCenter />}>
-                    <FormViewBuilder
-                        collection={collection}
-                        parentCollectionSlugs={parentCollectionSlugs}
-                        parentEntityIds={parentEntityIds}
-                        entity={usedEntity}
-                        modifiedValues={usedEntity?.values}
-                        formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
-                    />
-                </Suspense>
-            </ErrorBoundary>;
+            return <div className={"flex-1 min-w-0 overflow-y-auto flex justify-center items-start"}>
+                <div className={cls(
+                    "w-full max-w-3xl 2xl:max-w-4xl flex flex-col",
+                    layout === "dialog"
+                        ? "pt-5 pb-12 px-6 sm:px-8"
+                        : "pt-6 pb-16 px-5 sm:px-8"
+                )}>
+                    <ErrorBoundary>
+                        <Suspense fallback={<CircularProgressCenter />}>
+                            <FormViewBuilder
+                                collection={collection}
+                                parentCollectionSlugs={parentCollectionSlugs}
+                                parentEntityIds={parentEntityIds}
+                                entity={usedEntity}
+                                modifiedValues={usedEntity?.values}
+                                formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
+                            />
+                        </Suspense>
+                    </ErrorBoundary>
+                </div>
+            </div>;
         }
 
         return (
@@ -402,6 +424,9 @@ entityId }
                     entity={usedEntity}
                     collection={collection}
                     path={path}
+                    asPage
+                    openEntityMode={layout}
+                    formContext={readOnlyFormContext}
                 />}
             </>
         );
@@ -458,24 +483,27 @@ entityId }
             );
         });
 
+    // The breadcrumb's destination, and the back arrow's when it renders. Both
+    // keep the view mode: a collection reached from one of its own records must
+    // come back as the user left it.
+    const collectionUrl = withViewMode(urlController.buildUrlCollectionPath(path));
+
     // Full screen is the one layout with no way out of its own: a side panel and a
     // dialog can be dismissed, and a split keeps the list beside it, but opening an
     // entity full screen replaces the collection entirely and left browser Back as
     // the only route back to it — which is not an affordance the page shows, and is
     // wrong anyway once the user has moved between tabs inside the entity.
-    const backToCollectionButton = layout === "full_screen" ? (
-        <Tooltip title={t("back")}>
-            <IconButton
-                size="small"
-                aria-label={t("back")}
-                onClick={() => navigate(urlController.buildUrlCollectionPath(path))}
-            >
-                <ArrowLeftIcon size={iconSize.smallest} />
-            </IconButton>
-        </Tooltip>
-    ) : null;
-
-    const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog" || Boolean(backToCollectionButton);
+    //
+    // Unless the list can be unfolded back beside the record: that chevron
+    // leads to the same collection while keeping the record open, so it stands
+    // alone rather than beside an arrow going almost the same place.
+    //
+    // It goes to the bar's leading edge — where a back control reads as back,
+    // and where the edit view has always put the same arrow — rather than to
+    // the trailing edge among the record's own actions.
+    const backToCollection = layout === "full_screen" && !onShowList
+        ? () => navigate(collectionUrl)
+        : undefined;
 
     const fullScreenButton = !barActions && // Not in split: the list panel beside it carries the close control,
     // and an expand button there competes with it.
@@ -508,49 +536,53 @@ entityId }
     // Main content view. The title, the `path/id` chip and the empty band under
     // them have moved into the identity bar, and the `w-80 2xl:w-96` rail that
     // held a single Edit button is gone — the bar holds it now.
+    //
+    // The scroll now lives on the record's own column rather than on this row,
+    // so the metadata rail beside it stays put while the record scrolls — the
+    // same arrangement the form uses.
     const mainView = <div
         className={cls(
-            "flex-1 flex flex-row w-full overflow-y-auto justify-center",
+            "flex-1 flex flex-row w-full min-h-0",
             !mainViewVisible ? "hidden" : ""
         )}>
-        <div className={cls(
-            "w-full max-w-3xl 2xl:max-w-4xl flex flex-col",
-            layout === "dialog"
-                ? "pt-5 pb-12 px-6 sm:px-8"
-                : "pt-6 pb-16 px-5 sm:px-8"
-        )}>
-            {propertyDetailView()}
-        </div>
+        {propertyDetailView()}
     </div>;
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-800">
 
         <EntityIdentityBar
             collection={collection as AdminCollection}
+            collectionUrl={layout === "full_screen" || layout === "split" ? collectionUrl : undefined}
             title={title}
             entityId={entityId}
             status={"existing"}
             dirty={false}
             saving={false}
+            onBack={backToCollection}
+            onClose={onCloseRequest}
             onInspect={includeJsonView ? () => setInspectorTab("json") : undefined}
             onViewHistory={includeHistoryView ? () => setInspectorTab("history") : undefined}
+            externalLink={usedEntity
+                ? customizationController?.entityLinkBuilder?.({ entity: usedEntity })
+                : undefined}
             leading={<>
                 {barActionsStart}
                 {/* Split view: closing the list is opening this record
                     full screen, and the control for it belongs at this
-                    bar's leading edge. */}
+                    bar's leading edge. Full screen carries its mirror. */}
                 {layout === "split" && <SplitListCloseButton/>}
+                {layout === "full_screen" && onShowList && <SplitListShowButton onClick={onShowList}/>}
             </>}
             trailing={<>
                 {editButton}
                 {pluginActionsTop}
-                {backToCollectionButton}
                 {fullScreenButton}
                 {barActions?.({
                     path,
                     entityId,
                     values: usedEntity?.values ?? {},
-                    status: "existing"
+                    status: "existing",
+                    dirty: false
                 })}
             </>}
         />

package/src/components/DrawerNavigationGroup.tsx

@@ -28,11 +28,12 @@ export interface DrawerNavigationGroupProps {
      */
     drawerOpen: boolean;
     /**
-     * Whether tooltips should be shown (drawer closed + hovered)
+     * @deprecated No longer read. Entry tooltips are uncontrolled — they follow the
+     * pointer and focus, and are suppressed wherever the label is already visible.
      */
-    tooltipsOpen: boolean;
+    tooltipsOpen?: boolean;
     /**
-     * Whether admin menu is open (used to control tooltip visibility)
+     * @deprecated No longer read. See {@link tooltipsOpen}.
      */
     adminMenuOpen?: boolean;
     /**
@@ -50,8 +51,10 @@ export interface DrawerNavigationGroupProps {
     /**
      * Lucide icon name for the group header, from `NavigationGroupMapping.icon`.
      *
-     * Supplying one moves the visual anchor from the rows to the group: the header
-     * gets the icon, and the entries below trade theirs for an indent.
+     * It decorates the header and nothing else: the entries below are untouched and
+     * keep their own icons. An app that wants the categorised look — rows giving up
+     * their icons to indent under the group — builds it in its own drawer, by
+     * overriding `Shell.DrawerNavigationItem` and passing `indented`.
      */
     icon?: string;
 }
@@ -66,8 +69,6 @@ export function DrawerNavigationGroup({
     collapsed,
     onToggleCollapsed,
     drawerOpen,
-    tooltipsOpen,
-    adminMenuOpen,
     headerActions,
     onItemClick,
     hideHeader,
@@ -76,17 +77,13 @@ export function DrawerNavigationGroup({
     const { t } = useTranslation();
     const ResolvedDrawerNavigationItem = useComponentOverride("Shell.DrawerNavigationItem", DrawerNavigationItem);
 
-    // Opt-in, per group: declaring `icon` on a `NavigationGroupMapping` switches
-    // this group to the categorised treatment — icon on the header, entries
-    // indented beneath it without their own. A group that declares no icon renders
-    // exactly as it did before, so an existing project sees no change at all.
-    //
-    // Two cases stay on the flat rendering regardless: with no header there is
-    // nothing to indent under, and collapsed to a rail the entry icons are the only
-    // affordance left to click.
+    // The icon decorates the header, and stops there. It used to also strip the
+    // entries of theirs and indent them, which made a per-app styling choice into
+    // framework behaviour: every project that labelled a group with an icon lost the
+    // icons on its rows, with nothing to turn it off. An app that wants that look
+    // now opts into it in its own drawer — see `indented` on
+    // {@link DrawerNavigationItem}.
     const groupIcon = !hideHeader && drawerOpen ? getIcon(icon, undefined, undefined, "small") : undefined;
-    const categorised = Boolean(groupIcon);
-    const indentEntries = categorised;
     return (
         <div
             className={"my-2 mx-2 flex flex-col"}
@@ -103,10 +100,7 @@ export function DrawerNavigationGroup({
                     <ChevronDownIcon
                         size={iconSize.small}
                         className={cls(
-                            categorised
-                                ? "text-surface-500 dark:text-surface-400"
-                                : "text-surface-400 dark:text-surface-400",
-                            "transition-transform duration-200 mr-1",
+                            "text-surface-400 dark:text-surface-400 transition-transform duration-200 mr-1",
                             collapsed ? "-rotate-90" : "rotate-0"
                         )}
                     />
@@ -118,21 +112,7 @@ export function DrawerNavigationGroup({
                     <Typography
                         variant={"caption"}
                         color={"secondary"}
-                        // Two treatments, and which one applies is decided by the group
-                        // itself. Without an icon this is byte-for-byte the original: the
-                        // drawer is a flat list of same-weight rows, and a louder header
-                        // would just compete with them.
-                        //
-                        // With one, the group becomes the thing you scan — its rows have
-                        // given up their icons to indent beneath it — so the label steps up
-                        // to match. At 11px in surface-400 it sat *below* the contrast of
-                        // the rows it labels, which is backwards once it is the anchor.
-                        className={cls(
-                            "font-semibold uppercase flex-grow line-clamp-1",
-                            categorised
-                                ? "text-[12px] tracking-wide text-surface-600 dark:text-surface-300"
-                                : "text-[11px] tracking-wider text-surface-400 dark:text-surface-400"
-                        )}
+                        className="font-semibold text-[11px] uppercase tracking-wider flex-grow line-clamp-1 text-surface-400 dark:text-surface-400"
                     >
                         {(group || t("views_group"))}
                     </Typography>
@@ -158,13 +138,10 @@ export function DrawerNavigationGroup({
                     <ResolvedDrawerNavigationItem
                         key={entry.id}
                         icon={<IconForView collectionOrView={entry.collection ?? entry.view} size={"small"}/>}
-                        tooltipsOpen={!collapsed && tooltipsOpen}
-                        adminMenuOpen={adminMenuOpen}
                         drawerOpen={drawerOpen}
                         onClick={() => onItemClick?.(entry)}
                         url={entry.url}
                         name={entry.name}
-                        indented={indentEntries}
                     />
                 ))}
             </div>

package/src/components/DrawerNavigationItem.tsx

@@ -3,30 +3,39 @@ import React from "react";
 import { NavLink } from "react-router";
 import { cls, Tooltip } from "@rebasepro/ui";
 
-export function DrawerNavigationItem({
-    name,
-    icon,
-    drawerOpen,
-    adminMenuOpen,
-    tooltipsOpen,
-    url,
-    onClick,
-    indented = false
-}: {
+/**
+ * Props of a drawer navigation row, named so an app overriding
+ * `Shell.DrawerNavigationItem` can type its wrapper against them.
+ */
+export type DrawerNavigationItemProps = {
     icon: React.ReactElement,
     name: string,
-    tooltipsOpen: boolean,
+    /** @deprecated No longer read: the tooltip is uncontrolled. */
+    tooltipsOpen?: boolean,
     drawerOpen: boolean,
+    /** @deprecated No longer read: the tooltip is uncontrolled. */
     adminMenuOpen?: boolean,
     url: string,
     onClick?: () => void,
     /**
-     * Render as a child of an icon-bearing group: no icon of its own, indented to
-     * sit under the group's label. Set by {@link DrawerNavigationGroup} only when
-     * the group actually has an icon and the drawer is expanded.
+     * Drop the row's icon and indent the label into the space it occupied, so the
+     * row reads as a child of the group header above it.
+     *
+     * Nothing in the framework sets this: the stock drawer always passes `false`,
+     * and an app that wants the categorised look opts into it by overriding
+     * `Shell.DrawerNavigationItem` and deciding for itself which rows get it.
      */
     indented?: boolean,
-}) {
+};
+
+export function DrawerNavigationItem({
+    name,
+    icon,
+    drawerOpen,
+    url,
+    onClick,
+    indented = false
+}: DrawerNavigationItemProps) {
 
     // Indented rows give up the icon rather than keeping it *and* indenting: a
     // per-row icon repeated down a group is what flattens the hierarchy, since
@@ -40,6 +49,15 @@ export function DrawerNavigationItem({
             {icon}
         </div>;
 
+    const [wantsTooltip, setWantsTooltip] = React.useState(false);
+
+    // Radix will not report a close it never noticed: while the tooltip is masked
+    // the pointer can leave the row without `onOpenChange(false)` ever firing. So
+    // the stale `true` is dropped on the way *into* the masked state — otherwise
+    // it surfaces the moment the mask lifts, as a tooltip hanging over a rail the
+    // pointer left long ago.
+    if (drawerOpen && wantsTooltip) setWantsTooltip(false);
+
     const listItem = <div>
         <NavLink
             onClick={onClick}
@@ -70,8 +88,18 @@ export function DrawerNavigationItem({
         </NavLink>
     </div>;
 
+    // Per row, and always controlled. The old shared flag could only say "every
+    // tooltip" or "none", and the state it needed was unreachable, so no entry
+    // tooltip ever opened — leaving a bare rail of unlabelled icons. Radix decides
+    // when this one wants to be open, from the pointer and from focus; the drawer
+    // only masks it once the label says the same thing.
+    //
+    // Masked rather than withheld: dropping `open`, or the title, would move the
+    // tooltip between controlled and uncontrolled as the drawer opens, which
+    // strands the old state — a tooltip left up over a pointer nowhere near it.
     return <Tooltip
-        open={drawerOpen || adminMenuOpen ? false : tooltipsOpen}
+        open={!drawerOpen && wantsTooltip}
+        onOpenChange={setWantsTooltip}
         side="right"
         title={name}>
         {listItem}