@rebasepro/admin 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/components/EditViewBinding.tsx

@@ -18,6 +18,7 @@ import {
     HistoryIcon,
     IconButton,
     Maximize2Icon,
+    MenuItem,
     Skeleton,
     Tab,
     Tabs,
@@ -42,13 +43,18 @@ import { EntityFormBinding } from "../form";
 import type { EntityFormBindingProps } from "../form";
 import type { OnUpdateParams } from "../types/components/EntityFormProps";
 import { EditFormActions } from "./EditFormActions";
-import { JsonPreviewBinding } from "../components/JsonPreviewBinding";
-// Lazy-load history view — only loaded when user clicks the HistoryIcon tab
-const EntityHistoryView = lazy(() => import("../components/history").then(m => ({ default: m.EntityHistoryView })));
+import { EntityIdentityBar } from "./EntityIdentityBar";
+import { SplitListCloseButton } from "./CollectionViewBinding/SplitListCloseButton";
+import { useRecordActions } from "../hooks/useRecordActions";
+import { useSideDialogContext } from "./SideDialogs";
+import { useAdminContext } from "../hooks/useAdminContext";
+import { EntityInspector, InspectorTab } from "./EntityInspector";
+import { useEntityDisplayTitle } from "../hooks/useEntityDisplayTitle";
 import { createFormexStub, getEntityFromCache } from "@rebasepro/app";
 import { usePermissions } from "@rebasepro/app";
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
-import { useNavigate } from "react-router-dom";
+import { withViewMode } from "../util/view_mode";
+import { useNavigate } from "react-router";
 
 import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/view_constants";
 export { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE };
@@ -85,6 +91,11 @@ export interface EditViewBindingProps<M extends Record<string, unknown> = Record
     navigateBack?: () => 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;
     formProps?: Partial<EntityFormBindingProps<M>>,
     /**
      * Pre-populate the form with these values when creating a new entity.
@@ -180,6 +191,7 @@ export function EditViewBindingInner<M extends Record<string, unknown>>({
     dataLoading,
     layout = "side_panel",
     barActions,
+    barActionsStart,
     status,
     setStatus,
     formProps,
@@ -198,6 +210,7 @@ export function EditViewBindingInner<M extends Record<string, unknown>>({
     const ResolvedCollectionView = useComponentOverride("Collection.View", CollectionViewBinding);
 
     const context = useRebaseContext();
+    const adminContext = useAdminContext();
     const urlController = useUrlController();
     const navigate = useNavigate();
 
@@ -265,22 +278,30 @@ parentEntityIds,
     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;
+    // The inspector holds the developer tools; the tab strip holds destinations.
+    // A strip with only the record in it has nothing to choose between, so it
+    // does not render at all.
+    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
 
     const {
         resolvedEntityViews
     } = resolvedSelectedEntityView(customViews, customizationController, undefined, canEdit);
 
+    // JSON and history are no longer tab values, but a bookmarked or in-flight
+    // URL may still name one. They resolve to the record, and open the
+    // inspector on that pane, so an old link keeps working.
+    const legacyInspectorTab = selectedTab === JSON_TAB_VALUE
+        ? "json"
+        : selectedTab === HISTORY_TAB_VALUE ? "history" : undefined;
+
     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;
 
@@ -289,7 +310,6 @@ parentEntityIds,
         selectedSecondaryForm
     } = resolvedSelectedEntityView(customViews, customizationController, activeTab, canEdit);
 
-    const actionsAtTheBottom = layout === "side_panel" || layout === "dialog" || selectedEntityView?.includeActions === "bottom";
 
     const mainViewVisible = activeTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
 
@@ -381,35 +401,76 @@ parentEntityIds,
 
     const globalLoading = (dataLoading && !usedEntity) || (canEdit === undefined && (status === "existing" || status === "copy"));
 
-    // Only mount JSON view when its tab is selected (or was previously selected)
-    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={formContext?.values ?? entity?.values ?? {}} />
-        </ErrorBoundary>
-    </div> : null;
+    /* ---- identity bar ---------------------------------------------------- */
 
-    // Only mount history view when its tab is actually selected
-    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={formContext as FormContext<Record<string, unknown>>}
-                    modifiedValues={formContext?.values ?? usedEntity?.values}
-                />
-            </Suspense>
-        </ErrorBoundary>
-    </div> : null;
+    const displayTitle = useEntityDisplayTitle({
+        collection,
+        values: (formContext?.values ?? usedEntity?.values) as Record<string, unknown> | undefined,
+        entityId,
+        status
+    });
+
+    const formex = formContext?.formex;
+    const hasFormErrors = Boolean(formex && Object.keys(formex.errors).length > 0 && formex.submitCount > 0);
+    // Same rule the footer used: an untouched existing record has nothing to save.
+    const saveDisabled = Boolean(
+        !formContext
+        || formContext.disabled
+        || formex?.isSubmitting
+        || (status === "existing" && !formex?.dirty)
+    );
+
+    const [inspectorTab, setInspectorTab] = useState<InspectorTab | null>(null);
+    // A save adds a revision, and the inspector can be open while it happens:
+    // Save lives in the identity bar, above the panel. Counting saves gives the
+    // history list something to react to.
+    const [savedCount, setSavedCount] = useState(0);
+
+    /* ---- record actions, in the bar's overflow menu ---------------------- */
+
+    const sideDialogContext = useSideDialogContext();
+    const canCloseAfterSave = layout === "side_panel" || layout === "dialog";
+
+    const recordActions = useRecordActions({
+        collection,
+        path,
+        entity: usedEntity
+    });
+
+    const recordActionItems = usedEntity && recordActions.length
+        ? recordActions.map((action, index) => {
+            const clickProps = {
+                view: "form" as const,
+                entity: usedEntity,
+                path,
+                collection,
+                context,
+                sidePanelController: adminContext.sidePanelController,
+                openEntityMode: layout,
+                navigateBack: navigateBack ?? (() => undefined),
+                formContext
+            };
+            const enabled = !action.isEnabled || action.isEnabled(clickProps as never);
+            return (
+                <MenuItem key={action.key ?? action.name ?? index}
+                    disabled={!enabled}
+                    onClick={() => action.onClick(clickProps as never)}>
+                    {getIcon(action.icon, undefined, undefined, "smallest")}
+                    {action.name}
+                </MenuItem>
+            );
+        })
+        : null;
+
+    // Plugin form actions (Autofill and friends) render inline in the bar; the
+    // form no longer has a footer to put them in.
+    const formPluginActions = useSlot("form.actions", formActionTopProps);
+
+    // A URL still naming the old `json`/`history` tab opens the inspector on
+    // that pane instead of 404-ing into the record with nothing shown.
+    useEffect(() => {
+        if (legacyInspectorTab) setInspectorTab(legacyInspectorTab);
+    }, [legacyInspectorTab]);
 
     const subCollectionsViews = childViews && childViews.map(({ collection: subcollection }) => {
         const subcollectionId = subcollection.slug;
@@ -520,7 +581,10 @@ parentEntityIds,
             entity={entity}
             initialDirtyValues={initialDirtyValues}
             openEntityMode={layout}
-            forceActionsAtTheBottom={actionsAtTheBottom}
+            // Save and Discard live in the identity bar now, where they stay
+            // visible while the form scrolls. The form's own footer would be a
+            // second copy of them.
+            showDefaultActions={false}
             initialStatus={status}
             className={cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className)}
             EntityFormActionsComponent={ResolvedFormActions as React.FC<typeof ResolvedFormActions extends React.ComponentType<infer P> ? P : never>}
@@ -540,6 +604,7 @@ parentEntityIds,
                 formProps?.onFormContextReady?.(formContext);
             }}
             onSaved={(params) => {
+                setSavedCount(count => count + 1);
                 const res = {
                     ...params,
                     selectedTab: MAIN_TAB_VALUE === activeTab ? undefined : activeTab
@@ -601,9 +666,9 @@ parentEntityIds,
             );
         });
 
-    const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog";
-
-    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"
@@ -620,75 +685,113 @@ parentEntityIds,
 
     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)}>
+        <EntityIdentityBar
+            collection={collection as AdminCollection}
+            title={displayTitle}
+            entityId={status === "existing" ? entityId : undefined}
+            status={status}
+            dirty={Boolean(formContext?.formex?.dirty)}
+            saving={Boolean(formContext?.isSaving)}
+            hasErrors={hasFormErrors}
+            saveDisabled={!canEdit || saveDisabled}
+            // Full screen replaces the collection entirely, leaving browser Back
+            // as the only route to it. The detail view has carried this arrow
+            // for that reason; the edit view is reached the same way.
+            onBack={layout === "full_screen"
+                ? () => navigate(withViewMode(urlController.buildUrlCollectionPath(path)))
+                : undefined}
+            onSave={canEdit && formContext ? () => {
+                sideDialogContext.setPendingClose?.(false);
+                formContext.submit();
+            } : undefined}
+            onSaveAndClose={canEdit && formContext && canCloseAfterSave ? () => {
+                sideDialogContext.setPendingClose?.(true);
+                formContext.submit();
+            } : undefined}
+            onDiscard={canEdit && formContext ? () => formContext.formex.resetForm() : undefined}
+            onInspect={includeJsonView ? () => setInspectorTab("json") : undefined}
+            onViewHistory={includeHistoryView ? () => setInspectorTab("history") : undefined}
+            recordActions={recordActionItems}
+            pluginActions={formPluginActions}
+            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={<>
+                {pluginActionsTop}
+                {fullScreenButton}
+                {barActions?.({
+                    path,
+                    entityId,
+                    values: formContext?.values ?? usedEntity?.values ?? {},
+                    status
+                })}
+            </>}
+        />
 
-            {fullScreenButton}
+        {/* Destinations only: the record is the page, so its tab leads rather
+            than sitting third behind two unlabelled developer tools. The row
+            disappears entirely when there is nowhere else to go. */}
+        {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);
+                }}>
 
-            {barActions?.({
-                path,
-                entityId,
-                values: formContext?.values ?? usedEntity?.values ?? {},
-                status
-            })}
-
-            {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>
+                <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}
+                {customViewTabsStart}
 
-                    {customViewTabsEnd}
+                {customViewTabsEnd}
 
-                    {subcollectionTabs}
-                </Tabs>
-            </div>}
+                {subcollectionTabs}
+            </Tabs>
         </div>}
 
-        {globalLoading
-            ? <EntityFormSkeleton collection={collection} />
-            : <>
-                {entityReadOnlyView}
-                {entityView}
-            </>}
+        {/* The record and the inspector share the space below the bar rather
+            than stacking, so the form stays reachable while the panel is open.
+            `min-w-0` keeps a wide form from pushing the panel off the edge. */}
+        <div className={"flex-1 min-h-0 flex"}>
 
-        {jsonView}
+            <div className={"flex-1 min-w-0 flex flex-col"}>
+                {globalLoading
+                    ? <EntityFormSkeleton collection={collection} />
+                    : <>
+                        {entityReadOnlyView}
+                        {entityView}
+                    </>}
 
-        {historyView}
+                {customViewsView}
 
-        {customViewsView}
+                {subCollectionsViews}
+            </div>
 
-        {subCollectionsViews}
+            <EntityInspector
+                tab={inspectorTab}
+                onTabChange={setInspectorTab}
+                onClose={() => setInspectorTab(null)}
+                collection={collection as AdminCollection}
+                entity={usedEntity as Entity<Record<string, unknown>> | undefined}
+                formContext={formContext as FormContext<Record<string, unknown>> | undefined}
+                values={formContext?.values ?? usedEntity?.values}
+                refreshToken={savedCount}
+                includeHistory={includeHistoryView}/>
+        </div>
 
     </div>;