@rebasepro/admin 0.0.1-canary.4f204c2

package/src/routes/RebaseRoute.tsx

@@ -0,0 +1,344 @@
+import type { EntityCollection } from "@rebasepro/types";
+import { Blocker, useBlocker, useLocation } from "react-router";
+import { EntityEditView } from "../components/EntityEditView";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { EntityCollectionView } from "../components";
+import { NotFoundPage } from "@rebasepro/core";
+import { UnsavedChangesDialog } from "@rebasepro/core";
+import { CircularProgressCenter } from "@rebasepro/ui";
+import { getNavigationEntriesFromPath, NavigationViewCollectionInternal, NavigationViewEntityCustomInternal, NavigationViewInternal } from "@rebasepro/common";
+import { toArray } from "@rebasepro/utils";
+import { useCollectionRegistryController, useUrlController } from "../index";
+import { useBreadcrumbsController } from "../index";
+
+export function RebaseRoute() {
+
+    const location = useLocation();
+    const collectionRegistry = useCollectionRegistryController();
+    const urlController = useUrlController();
+    const breadcrumbs = useBreadcrumbsController();
+
+    const hash = location.hash;
+    const isSidePanel = hash.includes("#side");
+    const isNew = hash.includes("#new") || hash.includes("#new_side");
+    const isCopy = hash.includes("#copy");
+    const isFullScreen = hash.includes("#full");
+
+    const pathname = location.pathname;
+    const navigationPath = urlController.urlPathToDataPath(pathname);
+
+    const navigationEntries = getNavigationEntriesFromPath({
+        path: navigationPath,
+        collections: collectionRegistry.collections ?? []
+    });
+
+    useEffect(() => {
+        const lastEntry = navigationEntries[navigationEntries.length - 1];
+        const isViewingCollection = lastEntry?.type === "collection";
+
+        breadcrumbs.set({
+            breadcrumbs: navigationEntries.map((entry, index) => {
+                const isLastEntry = index === navigationEntries.length - 1;
+
+                if (entry.type === "entity") {
+                    return ({
+                        title: String(entry.entityId),
+                        url: urlController.buildUrlCollectionPath(entry.path)
+                        // count: undefined (not applicable for entities)
+                    });
+                } else if (entry.type === "custom_view") {
+                    return ({
+                        title: String(entry.view.name ?? entry.view.key),
+                        url: urlController.buildUrlCollectionPath(entry.path)
+                        // count: undefined (not applicable for custom views)
+                    });
+                } else if (entry.type === "collection") {
+                    const showCount = isLastEntry && isViewingCollection;
+                    return ({
+                        title: entry.collection.name,
+                        url: urlController.buildUrlCollectionPath(entry.path),
+                        id: entry.path,
+                        ...(showCount ? { count: null } : {})
+                    });
+                } else {
+                    throw new Error("Unexpected navigation entry type");
+                }
+            })
+        });
+    }, [navigationEntries.map(entry => entry.path).join(",")]);
+
+    if (isNew) {
+        // New entities always use full-screen mode, even for split-layout collections
+        return <EntityFullScreenRoute
+            pathname={pathname}
+            navigationEntries={navigationEntries}
+            isNew={true}
+            isCopy={false}
+        />;
+    }
+
+    if (navigationEntries.length === 1 && navigationEntries[0].type === "collection") {
+        let collection: EntityCollection<any> | undefined;
+        collection = collectionRegistry.getCollection(navigationEntries[0].id);
+        if (!collection)
+            collection = collectionRegistry.getCollection(navigationEntries[0].slug);
+        if (!collection) {
+            if (!collectionRegistry.initialised) {
+                return <CircularProgressCenter/>;
+            }
+            return null;
+        }
+        return <EntityCollectionView
+            key={`collection_view_${collection.slug}`}
+            {...collection}
+            parentCollectionIds={[]}
+            path={collection.slug}
+            updateUrl={true}
+            Actions={toArray(collection.Actions)}/>
+    }
+
+    if (isSidePanel) {
+        const lastCollectionEntry = [...navigationEntries].reverse().find((entry) => entry.type === "collection");
+        if (lastCollectionEntry) {
+            let collection: EntityCollection<any> | undefined;
+            const firstEntry = navigationEntries[0] as NavigationViewCollectionInternal<any>;
+            collection = collectionRegistry.getCollection(firstEntry.id);
+            if (!collection)
+                collection = collectionRegistry.getCollection(firstEntry.slug);
+            if (!collection) {
+                if (!collectionRegistry.initialised) {
+                    return <CircularProgressCenter/>;
+                }
+                return null;
+            }
+            return <EntityCollectionView
+                key={`collection_view_${collection.slug}`}
+                {...collection}
+                parentCollectionIds={[]}
+                path={collection.slug}
+                updateUrl={true}
+                Actions={toArray(collection.Actions)}/>;
+        }
+    }
+
+    // Check if this is a simple entity route (collection + entity) for a split-layout collection.
+    // If so, render the collection view with the entity shown in the split detail panel
+    // instead of the full-screen editor. This keeps the master-detail UX with clean URLs.
+    //
+    // Also handles subcollection tabs: /c/customers/39/orders produces 3 entries
+    // (collection→entity→subcollection). We extract the subcollection slug as selectedTab.
+    const lastEntityEntry = navigationEntries.find((entry) => entry.type === "entity");
+    const firstCollectionEntry = navigationEntries[0];
+    if (
+        !isFullScreen &&
+        !isCopy &&
+        firstCollectionEntry?.type === "collection" &&
+        lastEntityEntry?.type === "entity" &&
+        (navigationEntries.length === 2 || navigationEntries.length === 3)
+    ) {
+        let collection: EntityCollection<any> | undefined;
+        collection = collectionRegistry.getCollection(firstCollectionEntry.id);
+        if (!collection)
+            collection = collectionRegistry.getCollection(firstCollectionEntry.slug);
+        if (collection && (collection.openEntityMode ?? "split") === "split") {
+            // Extract subcollection tab from the 3rd entry if present
+            let selectedTab: string | undefined;
+            if (navigationEntries.length === 3) {
+                const thirdEntry = navigationEntries[2];
+                if (thirdEntry.type === "collection") {
+                    selectedTab = thirdEntry.collection.slug;
+                } else if (thirdEntry.type === "custom_view") {
+                    selectedTab = thirdEntry.view.key;
+                }
+            }
+            // Fallback: check for unregistered tabs (e.g. __json, __rebase_history)
+            // that aren't parsed as navigation entries
+            if (!selectedTab && (navigationEntries.length === 2) && lastEntityEntry) {
+                const entityIdStr = String(lastEntityEntry.entityId);
+                const entityIdIdx = pathname.lastIndexOf(`/${entityIdStr}`);
+                if (entityIdIdx >= 0) {
+                    const afterEntity = pathname.substring(entityIdIdx + 1 + entityIdStr.length);
+                    const trailingSegment = afterEntity.startsWith("/") ? afterEntity.substring(1) : afterEntity;
+                    if (trailingSegment.length > 0) {
+                        selectedTab = trailingSegment;
+                    }
+                }
+            }
+            return <EntityCollectionView
+                key={`collection_view_${collection.slug}`}
+                {...collection}
+                parentCollectionIds={[]}
+                path={collection.slug}
+                updateUrl={true}
+                selectedEntityId={lastEntityEntry.entityId}
+                selectedTab={selectedTab}
+                Actions={toArray(collection.Actions)}/>;
+        }
+    }
+
+    return <EntityFullScreenRoute
+        pathname={pathname}
+        navigationEntries={navigationEntries}
+        isNew={isNew}
+        isCopy={isCopy}
+    />;
+
+}
+
+function getSelectedTabFromUrl(isNew: boolean, lastCustomView: NavigationViewCollectionInternal<any> | NavigationViewEntityCustomInternal<any> | undefined) {
+    if (isNew) {
+        return undefined;
+    } else if (lastCustomView) {
+        if (lastCustomView.type === "custom_view") {
+            return lastCustomView.view.key;
+        } else if (lastCustomView.type === "collection") {
+            return lastCustomView.id ?? lastCustomView.slug;
+        }
+    }
+    return undefined;
+}
+
+function EntityFullScreenRoute({
+    pathname,
+    navigationEntries,
+    isNew,
+    isCopy
+}: {
+    pathname: string;
+    navigationEntries: NavigationViewInternal[],
+    isNew: boolean,
+    isCopy: boolean
+}) {
+
+    const collectionRegistry = useCollectionRegistryController();
+    const urlController = useUrlController();
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    // Preserve the current hash (e.g. #full) across tab/save navigations
+    const hash = location.hash;
+
+    const navigationPath = urlController.urlPathToDataPath(pathname);
+
+    // is navigating away blocked
+    const blocked = useRef(false);
+
+    const lastEntityEntry = [...navigationEntries].reverse().find((entry) => entry.type === "entity");
+    const navigationEntriesAfterEntity = lastEntityEntry ? navigationEntries.slice(navigationEntries.indexOf(lastEntityEntry) + 1) : [];
+
+    const lastCustomView = [...navigationEntriesAfterEntity].reverse().find(
+        (entry) => entry.type === "custom_view" || entry.type === "collection"
+    ) as NavigationViewCollectionInternal<any> | NavigationViewEntityCustomInternal<any> | undefined;
+
+    const entityId = lastEntityEntry && "entityId" in lastEntityEntry ? lastEntityEntry.entityId : undefined;
+
+    // Derive tab from navigation entries (works for registered custom views)
+    let urlTab = getSelectedTabFromUrl(isNew, lastCustomView);
+
+    // Fallback: internal tabs like __json or __rebase_history aren't registered as
+    // entity views, so the navigation parser ignores them. Check the raw pathname
+    // for a trailing segment after the entity ID to catch those cases.
+    if (!urlTab && entityId && !isNew) {
+        const entityIdStr = String(entityId);
+        const entityIdIdx = pathname.lastIndexOf(`/${entityIdStr}`);
+        if (entityIdIdx >= 0) {
+            const afterEntity = pathname.substring(entityIdIdx + 1 + entityIdStr.length);
+            const trailingSegment = afterEntity.startsWith("/") ? afterEntity.substring(1) : afterEntity;
+            if (trailingSegment.length > 0) {
+                urlTab = trailingSegment;
+            }
+        }
+    }
+
+    const [selectedTab, setSelectedTab] = useState<string | undefined>(urlTab);
+
+    const parentCollectionIds = collectionRegistry.getParentCollectionIds(navigationPath);
+    useEffect(() => {
+        if (urlTab !== selectedTab) {
+            setSelectedTab(urlTab);
+        }
+    }, [urlTab]);
+
+    const basePath = !entityId || isNew
+        ? pathname
+        : pathname.substring(0, pathname.lastIndexOf(`/${entityId}`));
+
+    const entityPath = basePath + `/${entityId}`;
+
+    let blocker: Blocker | undefined = undefined;
+    try {
+        blocker = useBlocker(({
+            nextLocation
+        }) => {
+            if (nextLocation.pathname.startsWith(entityPath))
+                return false;
+            return blocked.current;
+        });
+    } catch (e) {
+        // console.warn("Blocker not available, navigation will not be blocked");
+    }
+
+    const lastCollectionEntry = [...navigationEntries].reverse().find((entry) => entry.type === "collection");
+
+    if (isNew && !lastCollectionEntry) {
+        if (!collectionRegistry.initialised) {
+            return <CircularProgressCenter/>;
+        }
+        throw new Error("INTERNAL: No collection found in the navigation");
+    }
+
+    if (!isNew && !lastEntityEntry) {
+        if (!collectionRegistry.initialised) {
+            return <CircularProgressCenter/>;
+        }
+        return <NotFoundPage/>;
+    }
+
+    const collection = isNew
+        ? (lastCollectionEntry && "collection" in lastCollectionEntry ? lastCollectionEntry.collection : undefined)!
+        : (lastEntityEntry && "parentCollection" in lastEntityEntry ? lastEntityEntry.parentCollection : undefined)!;
+    const fullIdPath = isNew ? lastCollectionEntry!.slug : lastEntityEntry!.slug;
+    const collectionPath = urlController.resolveDatabasePathsFrom(fullIdPath);
+    return <>
+        <EntityEditView
+            key={collection.slug + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
+            entityId={isNew ? undefined : entityId}
+            collection={collection}
+            layout={"full_screen"}
+            path={collectionPath}
+            copy={isCopy}
+            selectedTab={selectedTab ?? undefined}
+            onValuesModified={(modified) => blocked.current = modified}
+            onSaved={(params) => {
+                const newSelectedTab = params.selectedTab;
+                const newEntityId = params.entityId;
+                if (newSelectedTab) {
+                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}${hash}`, { replace: true });
+                } else {
+                    navigate(`${basePath}/${newEntityId}${hash}`, { replace: true });
+                }
+            }}
+            onTabChange={(params) => {
+                setSelectedTab(params.selectedTab);
+                if (isNew) {
+                    return;
+                }
+                const newSelectedTab = params.selectedTab;
+                if (newSelectedTab) {
+                    navigate(`${basePath}/${entityId}/${newSelectedTab}${hash}`, { replace: true });
+                } else {
+                    navigate(`${basePath}/${entityId}${hash}`, { replace: true });
+                }
+            }}
+            parentCollectionIds={parentCollectionIds}
+        />
+
+        <UnsavedChangesDialog
+            open={blocker?.state === "blocked"}
+            handleOk={() => blocker?.proceed?.()}
+            handleCancel={() => blocker?.reset?.()}
+            body={"You have unsaved changes in this entity."}/>
+
+    </>;
+}

package/src/routes/index.ts

@@ -0,0 +1,2 @@
+export * from "./CustomViewRoute";
+export * from "./RebaseRoute";

package/src/types/components/EntityFormActionsProps.tsx

@@ -0,0 +1,20 @@
+import { Entity } from "@rebasepro/types";
+import { EntityCollection } from "@rebasepro/types";
+import { FormContext } from "../fields";
+import { FormexController } from "./formex";
+
+export interface EntityFormActionsProps {
+    path: string;
+    collection: EntityCollection;
+    entity?: Entity;
+    layout: "bottom" | "side" | "responsive";
+    savingError?: Error;
+    formex: FormexController<any>;
+    disabled: boolean;
+    status: "new" | "existing" | "copy";
+    pluginActions: React.ReactNode[];
+    openEntityMode: "side_panel" | "full_screen" | "split";
+    showDefaultActions?: boolean;
+    navigateBack: () => void;
+    formContext: FormContext
+}

package/src/types/components/EntityFormProps.tsx

@@ -0,0 +1,54 @@
+import { Entity, EntityStatus } from "@rebasepro/types";
+import { EntityCollection, EntityCustomViewParams } from "@rebasepro/types";
+import { FormContext } from "../fields";
+import { FormexController } from "./formex";
+import { EntityFormActionsProps } from "./EntityFormActionsProps";
+
+export type EntityFormProps<M extends Record<string, unknown>> = {
+    path: string;
+    fullIdPath?: string;
+    collection: EntityCollection<M>;
+    entityId?: string | number;
+    entity?: Entity<M>;
+    databaseId?: string;
+    onIdChange?: (id: string | number) => void;
+    onValuesModified?: (modified: boolean, values: M) => void;
+    onSaved?: (params: OnUpdateParams) => void;
+    initialDirtyValues?: Partial<M>; // dirty cached entity in memory
+    onFormContextReady?: (formContext: FormContext<M>) => void;
+    forceActionsAtTheBottom?: boolean;
+    className?: string;
+    initialStatus: EntityStatus;
+    onStatusChange?: (status: EntityStatus) => void;
+    onEntityChange?: (entity: Entity<M>) => void;
+    formex?: FormexController<M>;
+    openEntityMode?: "side_panel" | "full_screen" | "split";
+    /**
+     * If true, the form will be disabled and no actions will be available
+     */
+    disabled?: boolean;
+    /**
+     * Include the copy and delete actions in the form
+     */
+    showDefaultActions?: boolean;
+
+    /**
+     * Display the entity path in the form
+     */
+    showEntityPath?: boolean;
+
+    EntityFormActionsComponent?: React.FC<EntityFormActionsProps>;
+
+    Builder?: React.ComponentType<EntityCustomViewParams<M>>;
+
+    children?: React.ReactNode;
+};
+
+export type OnUpdateParams = {
+    entity: Entity<any>,
+    status: EntityStatus,
+    path: string,
+    entityId?: string | number;
+    selectedTab?: string;
+    collection: EntityCollection<any>
+};

package/src/types/components/PropertyPreviewProps.tsx

@@ -0,0 +1,59 @@
+import { InferPropertyType } from "@rebasepro/types";
+import { Property } from "@rebasepro/types";
+
+/**
+ * @group Preview components
+ */
+export type PreviewSize = "small" | "medium" | "large";
+
+/**
+ * @group Preview components
+ */
+export interface PropertyPreviewProps<P extends Property | Property, CustomProps = unknown> {
+    /**
+     * Name of the property
+     */
+    propertyKey?: string;
+
+    value: any;
+
+    /**
+     * Property this display is related to, now strongly typed to P
+     */
+    property: P;
+
+    /**
+     * Desired size of the preview, depending on the context.
+     */
+    size: PreviewSize;
+
+    /**
+     * Max height assigned to the preview, depending on the context.
+     * It may be undefined if unlimited.
+     */
+    height?: number;
+
+    /**
+     * Max height width to the preview, depending on the context.
+     * It may be undefined if unlimited.
+     */
+    width?: number;
+
+    /**
+     * Additional properties set by the developer
+     */
+    customProps?: CustomProps;
+
+    /**
+     * If the preview should be interactive or not.
+     * This applies only to videos.
+     */
+    interactive?: boolean;
+
+    /**
+     * If true, image previews will fill their container completely.
+     * Only applies to image type properties.
+     */
+    fill?: boolean;
+
+}

package/src/types/components/formex.tsx

@@ -0,0 +1,46 @@
+import React, { FormEvent } from "react";
+
+// this is duplicated from the formex package
+export type FormexController<T extends object> = {
+    values: T;
+    initialValues: T;
+    setValues: (values: T) => void;
+    setFieldValue: (key: string, value: unknown, shouldValidate?: boolean) => void;
+    touched: Record<string, boolean>;
+    setFieldTouched: (key: string, touched: boolean, shouldValidate?: boolean) => void;
+    setTouched: (touched: Record<string, boolean>) => void;
+    dirty: boolean;
+    setDirty: (dirty: boolean) => void;
+    setSubmitCount: (submitCount: number) => void;
+    errors: Record<string, string>;
+    setFieldError: (key: string, error?: string) => void;
+    handleChange: (event: React.SyntheticEvent) => void,
+    handleBlur: (event: React.FocusEvent) => void,
+    handleSubmit: (event?: FormEvent<HTMLFormElement>) => void;
+    validate: () => void;
+    resetForm: (props?: FormexResetProps<T>) => void;
+    submitCount: number;
+    isSubmitting: boolean;
+    setSubmitting: (isSubmitting: boolean) => void;
+    isValidating: boolean;
+    /**
+     * The version of the form. This is incremented every time the form is reset
+     * or the form is submitted.
+     */
+    version: number;
+
+    debugId?: string;
+
+    undo: () => void;
+    redo: () => void;
+
+    canUndo: boolean;
+    canRedo: boolean;
+}
+
+export type FormexResetProps<T extends object> = {
+    values?: T;
+    submitCount?: number;
+    errors?: Record<string, string>;
+    touched?: Record<string, boolean>;
+};

package/src/types/components/index.ts

@@ -0,0 +1,3 @@
+export * from "./PropertyPreviewProps";
+export * from "./EntityFormProps";
+export * from "./EntityFormActionsProps";