@rebasepro/admin 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/components/DetailViewBinding.tsx

@@ -8,6 +8,9 @@ import { PluginProviderStack, resolveComponentRef, useComponentOverride, Collect
 
 import { CollectionViewBinding } from "./CollectionViewBinding/CollectionViewBinding";
 import { EntityViewBinding } from "./EntityViewBinding";
+import { EntityIdentityBar } from "./EntityIdentityBar";
+import { SplitListCloseButton } from "./CollectionViewBinding/SplitListCloseButton";
+import { EntityInspector, InspectorTab } from "./EntityInspector";
 import { CircularProgressCenter, iconSize } from "@rebasepro/ui";
 import {
     Alert,
@@ -41,13 +44,11 @@ import {
 } from "@rebasepro/app";
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { getValueInPath } from "@rebasepro/utils";
 import { getEntityTitlePropertyKeyForEntity, isUserSelectProperty, resolveTitleToString } from "../util/previews";
 import { getUserLabel, useResolvedUser } from "../hooks/useResolvedUsers";
-import { JsonPreviewBinding } from "../components/JsonPreviewBinding";
 
-const EntityHistoryView = lazy(() => import("../components/history").then(m => ({ default: m.EntityHistoryView })));
 
 import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/view_constants";
 
@@ -76,6 +77,11 @@ export interface DetailViewBindingProps<M extends Record<string, unknown> = Reco
     onEditClick?: () => void;
     layout?: "side_panel" | "full_screen" | "split" | "dialog";
     barActions?: (params: BarActionsParams) => React.ReactNode;
+    /**
+     * Controls the owning panel puts at the identity bar's leading edge, ahead
+     * of the breadcrumb — the side panel's close button.
+     */
+    barActionsStart?: React.ReactNode;
 }
 
 export function DetailViewBinding<M extends Record<string, unknown>>({
@@ -134,7 +140,8 @@ function DetailViewBindingInner<M extends Record<string, unknown>>({
     entity,
     dataLoading,
     layout = "full_screen",
-    barActions
+    barActions,
+    barActionsStart
 }: DetailViewBindingProps<M> & {
     entity?: Entity<M>,
     dataLoading: boolean,
@@ -189,7 +196,18 @@ entityId }
     const customViewsCount = customViews?.length ?? 0;
     const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
     const includeHistoryView = Boolean(collection.history);
-    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView || includeHistoryView;
+    // Same split as the edit view: the strip is for destinations, the inspector
+    // for the developer tools that used to sit in front of them.
+    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
+
+    const [inspectorTab, setInspectorTab] = useState<InspectorTab | null>(null);
+
+    const legacyInspectorTab: InspectorTab | undefined = selectedTab === JSON_TAB_VALUE
+        ? "json"
+        : selectedTab === HISTORY_TAB_VALUE ? "history" : undefined;
+    useEffect(() => {
+        if (legacyInspectorTab) setInspectorTab(legacyInspectorTab);
+    }, [legacyInspectorTab]);
 
     const {
         resolvedEntityViews
@@ -198,13 +216,11 @@ entityId }
     const validTabValues = useMemo(() => {
         const set = new Set<string>([
             MAIN_TAB_VALUE,
-            ...(includeJsonView ? [JSON_TAB_VALUE] : []),
-            ...(includeHistoryView ? [HISTORY_TAB_VALUE] : []),
             ...resolvedEntityViews.map(v => v.key),
             ...subcollections.map(s => s.slug)
         ]);
         return set;
-    }, [includeJsonView, includeHistoryView, resolvedEntityViews, subcollections]);
+    }, [resolvedEntityViews, subcollections]);
 
     const activeTab = validTabValues.has(selectedTab) ? selectedTab : MAIN_TAB_VALUE;
 
@@ -321,35 +337,6 @@ entityId }
 
     const globalLoading = dataLoading && !usedEntity;
 
-    // JSON view
-    const jsonTabMounted = mountedTabsRef.current.has(JSON_TAB_VALUE);
-    const jsonView = (activeTab === JSON_TAB_VALUE || jsonTabMounted) ? <div
-        className={cls("relative flex-1 h-full overflow-auto w-full",
-            { "hidden": activeTab !== JSON_TAB_VALUE })}
-        key={"json_view"}
-        role="tabpanel">
-        <ErrorBoundary>
-            <JsonPreviewBinding values={usedEntity?.values ?? {}} />
-        </ErrorBoundary>
-    </div> : null;
-
-    // History view
-    const historyView = includeHistoryView && activeTab === HISTORY_TAB_VALUE ? <div
-        className={"relative flex-1 h-full overflow-auto w-full"}
-        key={"history_view"}
-        role="tabpanel">
-        <ErrorBoundary>
-            <Suspense fallback={<CircularProgressCenter />}>
-                <EntityHistoryView
-                    collection={collection}
-                    entity={usedEntity}
-                    formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
-                    modifiedValues={usedEntity?.values}
-                />
-            </Suspense>
-        </ErrorBoundary>
-    </div> : null;
-
     // Subcollection views
     const subCollectionsViews = childViews && childViews.map(({ collection: subcollection }) => {
         const subcollectionId = subcollection.slug;
@@ -490,7 +477,9 @@ entityId }
 
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog" || Boolean(backToCollectionButton);
 
-    const fullScreenButton = !barActions && (layout === "side_panel" || layout === "split" || layout === "dialog") && entityId ? (
+    const fullScreenButton = !barActions && // Not in split: the list panel beside it carries the close control,
+    // and an expand button there competes with it.
+    (layout === "side_panel" || layout === "dialog") && entityId ? (
         <Tooltip title={"Open full screen"}>
             <IconButton
                 size="small"
@@ -516,130 +505,105 @@ entityId }
         </Button>
     ) : null;
 
-    // Main content view with title and properties
+    // 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.
     const mainView = <div
         className={cls(
             "flex-1 flex flex-row w-full overflow-y-auto justify-center",
             !mainViewVisible ? "hidden" : ""
         )}>
-        <div
-            className={cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
-            <div className={cls(
-                "flex flex-col w-full",
-                layout === "dialog"
-                    ? "pt-4 pb-12 px-6 sm:px-8"
-                    : "pt-12 pb-16 px-4 sm:px-8 md:px-10"
-            )}>
-                {/* Title and entity path */}
-                <div className={"w-full flex flex-col items-start my-4 lg:my-6"}>
-                    <div className="flex items-center justify-between w-full">
-                        <Typography
-                            className={cls("my-4 grow line-clamp-1", collection.hideIdFromForm ? "mb-6" : "")}
-                            variant={"h4"}>
-                            {title}
-                        </Typography>
-                        {editButton}
-                    </div>
-
-                    <Alert color={"base"} outerClassName={"w-full"} size={"small"}>
-                        <code
-                            className={"text-xs select-all text-text-secondary dark:text-text-secondary-dark"}>
-                            {usedEntity?.path ?? path}/{entityId}
-                        </code>
-                    </Alert>
-                </div>
-
-                {/* Property detail display */}
-                <div className="mt-12 flex flex-col gap-8">
-                    {propertyDetailView()}
-                </div>
-
-                <div className="h-16" />
-            </div>
-
-            {/* Side action bar for large screens */}
-            {canEdit && onEditClick && layout === "full_screen" && <div
-                className={cls(
-                    "overflow-auto h-full hidden @6xl:flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l",
-                    defaultBorderMixin
-                )}>
-                <Button
-                    fullWidth={true}
-                    variant="filled"
-                    color="primary"
-                    startIcon={<PencilIcon size={iconSize.small} />}
-                    onClick={onEditClick}>
-                    {t("edit_entity")}
-                </Button>
-            </div>}
+        <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>
     </div>;
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-800">
 
-        {shouldShowTopBar && <div
-            className={cls("h-[52px] items-center flex overflow-hidden w-full border-b pl-2 pr-2 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
-
-            {backToCollectionButton}
-
-            {fullScreenButton}
-
-            {barActions?.({
-                path,
-                entityId,
-                values: usedEntity?.values ?? {},
-                status: "existing"
-            })}
-
-            {pluginActionsTop}
-
-            {hasAdditionalViews && <div className={"flex-1 flex justify-end min-w-0 shrink-0"}>
-                <Tabs
-                    className={"!w-fit max-w-full"}
-                    value={activeTab}
-                    onValueChange={(value) => {
-                        onSideTabClick(value);
-                    }}>
-
-                    {includeJsonView && <Tab
-                        disabled={!hasAdditionalViews}
-                        value={JSON_TAB_VALUE}
-                        className={"text-sm"}>
-                        <CodeIcon size={iconSize.smallest} />
-                    </Tab>}
-
-                    {includeHistoryView && <Tab
-                        disabled={!hasAdditionalViews}
-                        value={HISTORY_TAB_VALUE}
-                        className={"text-sm"}>
-                        <HistoryIcon size={iconSize.smallest} />
-                    </Tab>}
-
-                    <Tab
-                        disabled={!hasAdditionalViews}
-                        value={MAIN_TAB_VALUE}
-                        className={"text-sm min-w-[90px]"}>
-                        <span className="flex items-center gap-1.5">
-                            {getIcon(collection.icon, undefined, undefined, "smallest")}
-                            {collection.singularName ?? collection.name}
-                        </span>
-                    </Tab>
+        <EntityIdentityBar
+            collection={collection as AdminCollection}
+            title={title}
+            entityId={entityId}
+            status={"existing"}
+            dirty={false}
+            saving={false}
+            onInspect={includeJsonView ? () => setInspectorTab("json") : undefined}
+            onViewHistory={includeHistoryView ? () => setInspectorTab("history") : 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. */}
+                {layout === "split" && <SplitListCloseButton/>}
+            </>}
+            trailing={<>
+                {editButton}
+                {pluginActionsTop}
+                {backToCollectionButton}
+                {fullScreenButton}
+                {barActions?.({
+                    path,
+                    entityId,
+                    values: usedEntity?.values ?? {},
+                    status: "existing"
+                })}
+            </>}
+        />
+
+        {hasAdditionalViews && <div className={cls(
+            "h-10 shrink-0 flex items-stretch border-b px-2 min-w-0",
+            defaultBorderMixin
+        )}>
+            <Tabs
+                className={"!w-full"}
+                innerClassName={"h-full"}
+                variant={"boxy"}
+                value={activeTab}
+                onValueChange={(value) => {
+                    onSideTabClick(value);
+                }}>
+
+                <Tab value={MAIN_TAB_VALUE}>
+                    <span className="flex items-center gap-1.5">
+                        {getIcon(collection.icon, undefined, undefined, "smallest")}
+                        {collection.singularName ?? collection.name}
+                    </span>
+                </Tab>
 
-                    {customViewTabsStart}
-                    {customViewTabsEnd}
-                    {subcollectionTabs}
-                </Tabs>
-            </div>}
+                {customViewTabsStart}
+                {customViewTabsEnd}
+                {subcollectionTabs}
+            </Tabs>
         </div>}
 
-        {globalLoading
-            ? <DetailViewSkeleton collection={collection} />
-            : mainView}
+        {/* See EditViewBinding: the inspector docks beside the record rather
+            than over it, so the record stays readable and scrollable. */}
+        <div className={"flex-1 min-h-0 flex"}>
+
+            <div className={"flex-1 min-w-0 flex flex-col"}>
+                {globalLoading
+                    ? <DetailViewSkeleton collection={collection} />
+                    : mainView}
 
-        {jsonView}
-        {historyView}
-        {customViewsView}
-        {subCollectionsViews}
+                {customViewsView}
+                {subCollectionsViews}
+            </div>
+
+            <EntityInspector
+                tab={inspectorTab}
+                onTabChange={setInspectorTab}
+                onClose={() => setInspectorTab(null)}
+                collection={collection as AdminCollection}
+                entity={usedEntity as Entity<Record<string, unknown>> | undefined}
+                formContext={readOnlyFormContext as FormContext<Record<string, unknown>> | undefined}
+                values={usedEntity?.values}
+                includeHistory={includeHistoryView}/>
+        </div>
 
     </div>;
 

package/src/components/DrawerNavigationItem.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";
 import { cls, Tooltip } from "@rebasepro/ui";
 
 export function DrawerNavigationItem({

package/src/components/EditFormActions.tsx

@@ -24,11 +24,21 @@ import { getIcon } from "@rebasepro/app";
 import { useAdminContext } from "../hooks/useAdminContext";
 import { useChildViewSource } from "../hooks/useChildViewSource";
 
+/**
+ * The entity form's footer.
+ *
+ * It used to render in two shapes: this footer, and a `w-80 2xl:w-96` sticky
+ * side rail carrying the same Save and Discard above several hundred pixels of
+ * nothing. The rail is gone, and Save/Discard have moved to the identity bar
+ * where they stay visible while the form scrolls — so with
+ * `showDefaultActions={false}` this renders only what the bar cannot host:
+ * record actions (copy, delete, custom), plugin actions, the saving error, and
+ * the side-panel-only "save and close".
+ */
 export function EditFormActions({
     collection,
     path,
     entity,
-    layout,
     savingError,
     formex,
     disabled,
@@ -69,10 +79,11 @@ export function EditFormActions({
         return actions;
     }, [canCreate, canDelete, collection, path, customizationController.entityActions?.length, entity, collection.disableDefaultActions, isLinkedChildView]);
 
-    const formActions = showDefaultActions ? entityActions.filter(a => a.includeInForm === undefined || a.includeInForm) : [];
+    // Record actions stay in the footer whether or not the bar carries Save;
+    // they are things you do *to* the record, not ways to leave the form.
+    const formActions = entityActions.filter(a => a.includeInForm === undefined || a.includeInForm);
 
-    // HMR reload trigger
-    const bottomActions = buildBottomActions({
+    return buildBottomActions({
         savingError,
         entity,
         formActions,
@@ -88,36 +99,8 @@ export function EditFormActions({
         formContext,
         formex,
         t,
-        className: layout === "responsive" ? "@6xl:hidden" : undefined
+        showDefaultActions
     });
-
-    const sideActions = buildSideActions({
-        savingError,
-        entity,
-        formActions,
-        collection,
-        context,
-        sidePanelController,
-        sideDialogContext,
-        disabled,
-        status,
-        pluginActions,
-        openEntityMode,
-        navigateBack,
-        formContext,
-        formex,
-        t,
-        className: layout === "responsive" ? "hidden @6xl:flex" : undefined
-    });
-
-    if (layout === "responsive") {
-        return <>
-            {bottomActions}
-            {sideActions}
-        </>;
-    }
-
-    return layout === "bottom" ? bottomActions : sideActions;
 }
 
 type ActionsViewProps<M extends Record<string, unknown>> = {
@@ -136,6 +119,7 @@ type ActionsViewProps<M extends Record<string, unknown>> = {
     formContext: FormContext,
     formex: FormexController<Record<string, unknown>>;
     t: (key: string, vars?: Record<string, string>) => string;
+    showDefaultActions: boolean;
     className?: string;
 };
 
@@ -155,14 +139,28 @@ function buildBottomActions<M extends Record<string, unknown>>({
     formContext,
     formex,
     t,
+    showDefaultActions,
     className
 }: ActionsViewProps<M>) {
 
     const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+    // "Save and close" only means something where there is something to close.
     const canClose = openEntityMode === "side_panel" || openEntityMode === "dialog";
+    const showBackToDetail = collection.defaultEntityAction === "view" && status === "existing";
+
+    // When the container carries the actions — the entity view's identity bar
+    // does — this renders nothing at all. A full-width bar holding a copy icon
+    // and a delete icon is the same waste as the side rail it replaced: the
+    // record actions moved into the bar's overflow menu, and Save, Discard and
+    // "save and close" are buttons up there too.
+    const hasContent = showDefaultActions || Boolean(savingError);
+
+    if (!hasContent) return null;
+
     return <DialogActions
         className={className}
-        position={"absolute"}>
+        // In normal flow at the foot of the form column, not overlaying it.
+        position={"sticky"}>
         {savingError &&
             <div className="text-right">
                 <Typography color={"error"}>{savingError.message}</Typography>
@@ -202,13 +200,8 @@ function buildBottomActions<M extends Record<string, unknown>>({
             <ErrorTooltip title={"This form has errors"}>
                 <AlertCircleIcon className="ml-4 text-red-500" size={iconSize.smallest}/>
             </ErrorTooltip> : null}
-        <Button variant="text"
-            color="primary"
-            disabled={disabled || formex.isSubmitting}
-            type="reset">
-            {status === "existing" ? t("discard") : t("clear")}
-        </Button>
-        {collection.defaultEntityAction === "view" && status === "existing" && (
+
+        {showBackToDetail && (
             <Button variant="text"
                 color="primary"
                 disabled={disabled}
@@ -216,19 +209,29 @@ function buildBottomActions<M extends Record<string, unknown>>({
                 {t("back_to_detail") ?? "Back to details"}
             </Button>
         )}
-        <Tooltip title={hasErrors ? (t("fix_errors_before_saving") ?? "Fix highlighted errors before saving") : undefined}>
-            <Button variant={canClose ? "text" : "filled"}
+
+        {showDefaultActions && <>
+            <Button variant="text"
                 color="primary"
-                type="submit"
                 disabled={disabled || formex.isSubmitting}
-                onClick={() => {
-                    sideDialogContext.setPendingClose(false);
-                }}>
-                {status === "existing" && t("save")}
-                {status === "copy" && t("create_copy")}
-                {status === "new" && t("create")}
+                type="reset">
+                {status === "existing" ? t("discard") : t("clear")}
             </Button>
-        </Tooltip>
+            <Tooltip title={hasErrors ? (t("fix_errors_before_saving") ?? "Fix highlighted errors before saving") : undefined}>
+                <Button variant={canClose ? "text" : "filled"}
+                    color="primary"
+                    type="submit"
+                    disabled={disabled || formex.isSubmitting}
+                    onClick={() => {
+                        sideDialogContext.setPendingClose(false);
+                    }}>
+                    {status === "existing" && t("save")}
+                    {status === "copy" && t("create_copy")}
+                    {status === "new" && t("create")}
+                </Button>
+            </Tooltip>
+        </>}
+
         {canClose && <LoadingButton variant="filled"
             color="primary"
             type="submit"
@@ -244,84 +247,6 @@ function buildBottomActions<M extends Record<string, unknown>>({
     </DialogActions>;
 }
 
-function buildSideActions<M extends Record<string, unknown>>({
-    savingError,
-    entity,
-    formActions,
-    collection,
-    context,
-    sidePanelController,
-    disabled,
-    status,
-    sideDialogContext,
-    pluginActions,
-    openEntityMode,
-    navigateBack,
-    formContext,
-    formex,
-    t,
-    className
-}: ActionsViewProps<M>) {
-
-    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
-    return <div
-        className={cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin, className)}>
-        <Tooltip title={hasErrors ? (t("fix_errors_before_saving") ?? "Fix highlighted errors before saving") : undefined}>
-            <LoadingButton fullWidth={true}
-                variant="filled"
-                color="primary"
-                type="submit"
-                loading={formex.isSubmitting}
-                startIcon={hasErrors ? <AlertCircleIcon/> : undefined}
-                disabled={disabled || formex.isSubmitting}
-                onClick={() => {
-                    sideDialogContext.setPendingClose?.(false);
-                }}>
-                {status === "existing" && t("save")}
-                {status === "copy" && t("create_copy")}
-                {status === "new" && t("create")}
-            </LoadingButton>
-        </Tooltip>
-
-        <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
-            {status === "existing" ? t("discard") : t("clear")}
-        </Button>
-        {collection.defaultEntityAction === "view" && status === "existing" && (
-            <Button fullWidth={true} variant="text" disabled={disabled} onClick={navigateBack}>
-                {t("back_to_detail") ?? "Back to details"}
-            </Button>
-        )}
-
-        {pluginActions}
-
-        {formActions.length > 0 && <div className="flex flex-row flex-wrap mt-2">
-            {formActions.map((action, index) => {
-                const props = {
-                    view: "form",
-                    entity,
-                    path: getCollectionDataPath(collection),
-                    collection: collection,
-                    context,
-                    sidePanelController,
-                    openEntityMode,
-                    navigateBack,
-                    formContext
-                } satisfies EntityActionClickProps<Record<string, unknown>>;
-                const isEnabled = !action.isEnabled || action.isEnabled(props);
-                return (
-                    <EntityActionButton key={action.key ?? action.name ?? index} action={action} enabled={isEnabled} props={props}/>
-                );
-            })}
-        </div>}
-
-        {savingError &&
-            <div className="text-right">
-                <Typography color={"error"}>{savingError.message}</Typography>
-            </div>
-        }
-    </div>;
-}
-
 function EntityActionButton({
     action,
     enabled,