@rebasepro/admin 0.6.1 → 0.7.0

package/src/form/EntityFormActions.tsx

@@ -1,9 +1,9 @@
 
 import type { EntityCollection } from "@rebasepro/types";
 import type { FormContext } from "../types/fields";
-import type { EntityAction, SideEntityController } from "@rebasepro/types";
+import type { EntityAction } from "@rebasepro/types";
 import React from "react";
-import { Entity, RebaseContext } from "@rebasepro/types";
+import { Entity } from "@rebasepro/types";
 import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
 import {
     AlertCircleIcon,
@@ -13,11 +13,10 @@ import {
     DialogActions,
     IconButton,
     LoadingButton,
+    Tooltip,
     Typography
 } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/core";
 import { FormexController } from "@rebasepro/formex";
-import { useCMSContext } from "../index";
 
 export function EntityFormActions({
     path,
@@ -34,17 +33,11 @@ export function EntityFormActions({
     formContext
 }: EntityFormActionsProps) {
 
-    const context = useCMSContext();
-    const sideEntityController = context.sideEntityController;
-    const { t } = useTranslation();
-
     const bottomActionsProps = {
         path,
         savingError,
         entity,
         collection,
-        context,
-        sideEntityController,
         disabled,
         status,
         pluginActions,
@@ -52,7 +45,6 @@ export function EntityFormActions({
         navigateBack,
         formContext,
         formex,
-        t,
         className: layout === "responsive" ? "@6xl:hidden" : undefined
     };
 
@@ -61,8 +53,6 @@ export function EntityFormActions({
         savingError,
         entity,
         collection,
-        context,
-        sideEntityController,
         disabled,
         status,
         pluginActions,
@@ -70,7 +60,6 @@ export function EntityFormActions({
         navigateBack,
         formContext,
         formex,
-        t,
         className: layout === "responsive" ? "hidden @6xl:flex" : undefined
     };
 
@@ -93,16 +82,13 @@ type ActionsViewProps<M extends Record<string, unknown>> = {
     entity: Entity<M> | undefined,
     formActions?: EntityAction[],
     collection: EntityCollection,
-    context: RebaseContext,
-    sideEntityController: SideEntityController,
     disabled: boolean,
     status: "new" | "existing" | "copy",
     pluginActions?: React.ReactNode[],
-    openEntityMode: "side_panel" | "full_screen" | "split" | "dialog";
+    openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
     navigateBack: () => void;
     formContext: FormContext,
     formex: FormexController<Record<string, unknown>>;
-    t: (key: string) => string;
     className?: string;
 };
 
@@ -112,8 +98,6 @@ function buildBottomActions<M extends Record<string, unknown>>({
     path,
     formActions,
     collection,
-    context,
-    sideEntityController,
     disabled,
     status,
     pluginActions,
@@ -121,7 +105,6 @@ function buildBottomActions<M extends Record<string, unknown>>({
     navigateBack,
     formContext,
     formex,
-    t,
     className
 }: ActionsViewProps<M>) {
 
@@ -146,8 +129,8 @@ function buildBottomActions<M extends Record<string, unknown>>({
                                 entity,
                                 path: path ?? collection.slug,
                                 collection: collection,
-                                context,
-                                sideEntityController,
+                                context: undefined,
+                                sideEntityController: undefined,
                                 openEntityMode: openEntityMode,
                                 navigateBack,
                                 formContext
@@ -161,17 +144,20 @@ function buildBottomActions<M extends Record<string, unknown>>({
         <Button variant="text" disabled={disabled || formex.isSubmitting}
             color={"primary"}
             type="reset">
-            {status === "existing" ? t("discard") : t("clear")}
-        </Button>
-        <Button variant={"filled"}
-            color="primary"
-            type="submit"
-            disabled={disabled || formex.isSubmitting}
-            startIcon={hasErrors ? <AlertCircleIcon/> : undefined}>
-            {status === "existing" && t("save")}
-            {status === "copy" && t("create_copy")}
-            {status === "new" && t("create")}
+            {status === "existing" ? "Discard" : "Clear"}
         </Button>
+        <Tooltip title={hasErrors ? "Fix highlighted errors before saving" : undefined}>
+            <LoadingButton variant={"filled"}
+                color="primary"
+                type="submit"
+                loading={formex.isSubmitting}
+                disabled={disabled || formex.isSubmitting}
+                startIcon={hasErrors ? <AlertCircleIcon/> : undefined}>
+                {status === "existing" && "Save"}
+                {status === "copy" && "Create copy"}
+                {status === "new" && "Create"}
+            </LoadingButton>
+        </Tooltip>
 
     </DialogActions>;
 }
@@ -183,13 +169,10 @@ function buildSideActions<M extends Record<string, unknown>>({
     path,
     openEntityMode,
     collection,
-    context,
-    sideEntityController,
     disabled,
     status,
     pluginActions,
     formex,
-    t,
     className
 }: ActionsViewProps<M>) {
 
@@ -197,18 +180,21 @@ function buildSideActions<M extends Record<string, unknown>>({
 
     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)}>
-        <LoadingButton fullWidth={true}
-            variant="filled"
-            color="primary"
-            type="submit"
-            startIcon={hasErrors ? <AlertCircleIcon/> : undefined}
-            disabled={disabled || formex.isSubmitting}>
-            {status === "existing" && t("save")}
-            {status === "copy" && t("create_copy")}
-            {status === "new" && t("create")}
-        </LoadingButton>
+        <Tooltip title={hasErrors ? "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}>
+                {status === "existing" && "Save"}
+                {status === "copy" && "Create copy"}
+                {status === "new" && "Create"}
+            </LoadingButton>
+        </Tooltip>
         <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
-            {status === "existing" ? t("discard") : t("clear")}
+            {status === "existing" ? "Discard" : "Clear"}
         </Button>
 
         {pluginActions}

package/src/form/EntityFormBinding.tsx

@@ -0,0 +1,323 @@
+import type { EntityCollection, PluginFormActionProps } from "@rebasepro/types";
+import type { FormContext } from "../types/fields";
+import React, { useCallback, useMemo, useState } from "react";
+import { AnalyticsEvent, Entity, EntityStatus, EntityValues } from "@rebasepro/types";
+import type { EntityFormProps, OnUpdateParams } from "../types/components/EntityFormProps";
+import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
+
+import { getLocalChangesBackup } from "@rebasepro/common";
+
+import {
+    saveEntityWithCallbacks,
+    useAuthController,
+    useCustomizationController,
+    useData,
+    useSnackbarController,
+    useTranslation,
+    useSlot
+} from "@rebasepro/core";
+import { FormexController } from "@rebasepro/formex";
+import { useAnalyticsController } from "@rebasepro/core";
+
+import {
+    getEntityFromCache,
+    removeEntityFromCache,
+    removeEntityFromMemoryCache,
+    saveEntityToCache
+} from "@rebasepro/core";
+
+import { useCollectionRegistryController, useSideEntityController, useCMSContext } from "../index";
+import { EntityForm } from "./EntityForm";
+import {
+    extractTouchedValues,
+    removeEmptyContainers,
+    getChanges,
+    getInitialEntityValues,
+} from "./form_utils";
+import { mergeDeep } from "@rebasepro/utils";
+
+/**
+ * Props for the CMS-connected EntityFormBinding wrapper.
+ * Extends EntityFormProps — you can pass all the same props as EntityForm,
+ * but the binding provides CMS context (save, caching, analytics, plugin slots)
+ * automatically.
+ */
+export type EntityFormBindingProps<M extends Record<string, unknown>> = Omit<EntityFormProps<M>,
+    | "onSubmit"
+    | "onValuesChangeDeferred"
+    | "onReset"
+    | "uniqueFieldValidator"
+    | "beforeFields"
+    | "afterFields"
+    | "pluginActions"
+    | "computedInitialValues"
+    | "hasLocalChanges"
+    | "localChangesData"
+    | "manualApplyLocalChanges"
+    | "localChangesCacheKey"
+    | "onClearLocalChanges"
+>;
+
+/**
+ * CMS-connected wrapper around EntityForm.
+ *
+ * Provides all backend concerns that the headless EntityForm delegates via callbacks:
+ * - Save via the data layer (`saveEntityWithCallbacks`)
+ * - Unique field validation via the data layer
+ * - Entity caching (local changes backup/restore)
+ * - Plugin slots (form.before, form.after, form.actions)
+ * - Snackbar notifications on save success/error
+ * - Analytics events
+ * - Navigation via side entity controller
+ *
+ * Use this component inside the CMS (`<RebaseShell>`).
+ * For headless usage outside the CMS, use `EntityForm` directly.
+ *
+ * @group Components
+ */
+export function EntityFormBinding<M extends Record<string, unknown>>({
+    path,
+    entityId: entityIdProp,
+    collection,
+    entity,
+    initialStatus,
+    onSaved,
+    onValuesModified,
+    onEntityChange,
+    onStatusChange,
+    openEntityMode = "full_screen",
+    navigateBack: navigateBackProp,
+    initialDirtyValues,
+    ...restProps
+}: EntityFormBindingProps<M>) {
+
+    const { t } = useTranslation();
+    const sideEntityController = useSideEntityController();
+    const collectionRegistryController = useCollectionRegistryController();
+    const authController = useAuthController();
+    const dataClient = useData();
+    const snackbarController = useSnackbarController();
+    const customizationController = useCustomizationController();
+    const context = useCMSContext();
+    const analyticsController = useAnalyticsController();
+
+    const [status, setStatus] = useState<EntityStatus>(initialStatus);
+    const [entityId, setEntityId] = useState<string | number | undefined>(() => {
+        if (status === "new" || status === "copy") return undefined;
+        return entityIdProp;
+    });
+
+    // --- Compute initial values with local changes ---
+    const baseInitialValues = useMemo(
+        () => getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs),
+        [authController, collection, path, status, entity, customizationController.propertyConfigs]
+    );
+
+    const localChangesBackup = getLocalChangesBackup(collection);
+    const autoApplyLocalChanges = localChangesBackup === "auto_apply";
+    const manualApplyLocalChanges = localChangesBackup === "manual_apply";
+
+    const localChangesDataRaw = useMemo(() => entityId
+        ? getEntityFromCache(path + "/" + entityId)
+        : getEntityFromCache(path + "#new"), [entityId, path]);
+
+    const [localChangesCleared, setLocalChangesCleared] = useState<boolean>(false);
+
+    const computedInitialValues = useMemo(() => {
+        const withLocalChanges = autoApplyLocalChanges && localChangesDataRaw
+            ? mergeDeep(baseInitialValues, localChangesDataRaw as Partial<M>)
+            : baseInitialValues;
+        return initialDirtyValues ? mergeDeep(withLocalChanges, initialDirtyValues) : withLocalChanges;
+    }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues, initialDirtyValues]);
+
+    const localChangesData = useMemo(() => {
+        if (!localChangesDataRaw) return undefined;
+        const changes = getChanges(localChangesDataRaw, computedInitialValues);
+        const cleaned = removeEmptyContainers(changes);
+        if (cleaned && typeof cleaned === "object" && Object.keys(cleaned).length === 0) {
+            return undefined;
+        }
+        return cleaned;
+    }, [localChangesDataRaw, computedInitialValues]);
+
+    const hasLocalChanges = !localChangesCleared && !!localChangesData && Object.keys(localChangesData as object).length > 0;
+
+    const localChangesCacheKey = useMemo(() => {
+        return (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+    }, [status, path, entityId]);
+
+    // --- Navigate back ---
+    const navigateBack = useCallback(() => {
+        if (navigateBackProp) {
+            navigateBackProp();
+            return;
+        }
+        if (openEntityMode === "side_panel" || openEntityMode === "dialog") {
+            sideEntityController.close();
+        } else {
+            window.history.back();
+        }
+    }, [navigateBackProp, openEntityMode, sideEntityController]);
+
+    // --- Cache operations ---
+    const clearDirtyCache = useCallback(() => {
+        if (status === "new" || status === "copy") {
+            removeEntityFromMemoryCache(path + "#new");
+            removeEntityFromCache(path + "#new");
+        } else {
+            removeEntityFromMemoryCache(path + "/" + entityId);
+            removeEntityFromCache(path + "/" + entityId);
+        }
+    }, [status, path, entityId]);
+
+    const onReset = useCallback(() => {
+        clearDirtyCache();
+    }, [clearDirtyCache]);
+
+    const onValuesChangeDeferred = useCallback((values: M, controller: FormexController<M>) => {
+        const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+        if (controller.dirty) {
+            const touchedValues = removeEmptyContainers(extractTouchedValues(values, controller.touched));
+            if (touchedValues && Object.keys(touchedValues).length > 0) {
+                saveEntityToCache(key, touchedValues);
+            } else {
+                removeEntityFromCache(key);
+            }
+        }
+    }, [status, path, entityId]);
+
+    // --- Save via data layer ---
+    const onSubmit = useCallback(async (values: M, formex: FormexController<M>): Promise<Entity<M> | void> => {
+        try {
+            const savedEntity = await saveEntityWithCallbacks<M>({
+                path,
+                entityId,
+                values,
+                previousValues: entity?.values,
+                collection,
+                status,
+                data: dataClient,
+                context,
+                afterSave: (updatedEntity: Entity<M>) => {
+                    clearDirtyCache();
+                    onValuesModified?.(false, updatedEntity.values);
+                    onEntityChange?.(updatedEntity);
+                    setStatus("existing");
+                    setEntityId(updatedEntity.id);
+                    onStatusChange?.("existing");
+
+                    if (onSaved) {
+                        onSaved({
+                            entity: updatedEntity,
+                            status,
+                            path,
+                            entityId: updatedEntity.id,
+                            collection
+                        });
+                    }
+                },
+                afterSaveError: (e: Error) => {
+                    snackbarController.open({
+                        type: "error",
+                        title: t("error_saving_entity"),
+                        message: e?.message
+                    });
+                    console.error("Error saving entity", path, entityId, e);
+                }
+            });
+
+            const autoSave = collection.formAutoSave;
+            if (!autoSave) {
+                snackbarController.open({
+                    type: "success",
+                    message: `${collection.singularName ?? collection.name}: ${t("saved_correctly")}`
+                });
+            }
+
+            const eventName: AnalyticsEvent = status === "new"
+                ? "new_entity_saved"
+                : (status === "copy" ? "entity_copied" : (status === "existing" ? "entity_edited" : "unmapped_event"));
+            analyticsController.onAnalyticsEvent?.(eventName, { path });
+
+            return savedEntity;
+        } catch (e: unknown) {
+            console.error(e);
+            throw e;
+        }
+    }, [path, entityId, entity, collection, status, dataClient, context, clearDirtyCache, onValuesModified, onEntityChange, onSaved, onStatusChange, snackbarController, analyticsController, t]);
+
+    // --- Unique field validation via data layer ---
+    const uniqueFieldValidator = useCallback(async ({
+        name,
+        value
+    }: { name: string; value: unknown }) => {
+        try {
+            const accessor = dataClient.collection(path);
+            const { data } = await accessor.find({
+                where: { [name]: `eq.${value}` },
+                limit: 2
+            });
+            const otherEntities = entityId ? data.filter(e => e.id !== entityId) : data;
+            return otherEntities.length === 0;
+        } catch (e: unknown) {
+            console.error("Error checking unique field", e);
+            return true;
+        }
+    }, [dataClient, path, entityId]);
+
+    // --- Plugin slots ---
+    const parentCollectionSlugs = collectionRegistryController.getParentCollectionSlugs(path);
+    const parentEntityIds = collectionRegistryController.getParentEntityIds(path);
+
+    // Build a minimal formContext for plugin slot props — the full one is built inside EntityForm
+    const formActionProps: PluginFormActionProps = useMemo(() => ({
+        entityId,
+        parentCollectionSlugs,
+        parentEntityIds,
+        path,
+        status,
+        collection: collection as EntityCollection,
+        context,
+        formContext: undefined as unknown as FormContext<Record<string, unknown>>,
+        openEntityMode,
+        disabled: false
+    }), [entityId, parentCollectionSlugs, parentEntityIds, path, status, collection, context, openEntityMode]);
+
+    const pluginFormActions = useSlot("form.actions", formActionProps);
+    const pluginFormBefore = useSlot("form.before", formActionProps);
+    const pluginFormAfter = useSlot("form.after", formActionProps);
+
+    return (
+        <EntityForm<M>
+            {...restProps}
+            path={path}
+            entityId={entityIdProp}
+            collection={collection}
+            entity={entity}
+            initialStatus={initialStatus}
+            initialDirtyValues={initialDirtyValues}
+            onSaved={onSaved}
+            onValuesModified={onValuesModified}
+            onEntityChange={onEntityChange}
+            onStatusChange={onStatusChange}
+            openEntityMode={openEntityMode}
+            navigateBack={navigateBack}
+            // Headless callbacks
+            onSubmit={onSubmit}
+            onValuesChangeDeferred={onValuesChangeDeferred}
+            onReset={onReset}
+            uniqueFieldValidator={uniqueFieldValidator}
+            // Slots
+            beforeFields={pluginFormBefore}
+            afterFields={pluginFormAfter}
+            pluginActions={pluginFormActions ?? []}
+            // Local changes
+            computedInitialValues={computedInitialValues as Partial<M>}
+            hasLocalChanges={hasLocalChanges}
+            localChangesData={localChangesData as Partial<M>}
+            manualApplyLocalChanges={manualApplyLocalChanges}
+            localChangesCacheKey={localChangesCacheKey}
+            onClearLocalChanges={() => setLocalChangesCleared(true)}
+        />
+    );
+}

package/src/form/components/FormLayout.tsx

@@ -9,7 +9,7 @@ export function FormLayout({
     className?: string;
 }) {
     return (
-        <div className={cls("flex flex-wrap gap-x-4 w-full space-y-8", className)}>
+        <div className={cls("flex flex-wrap gap-x-4 w-full space-y-6", className)}>
             {children}
         </div>
     );

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -8,7 +8,7 @@ import { PropertyPreview } from "../../preview";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ErrorBoundary } from "@rebasepro/ui";
 import { getIconForProperty } from "../../util/property_utils";
-import { cls, paperMixin } from "@rebasepro/ui";
+import { cls } from "@rebasepro/ui";
 
 /**
  *
@@ -47,7 +47,12 @@ export function ReadOnlyFieldBinding({
             }
 
             <div
-                className={cls(!skipCardWrapper && paperMixin, "w-full min-h-14 overflow-x-scroll no-scrollbar", !skipCardWrapper && "p-4 md:p-6")}>
+                className={cls(
+                    "w-full overflow-x-scroll no-scrollbar flex items-center",
+                    skipCardWrapper
+                        ? ""
+                        : "rounded-lg border border-surface-200 dark:border-surface-700 px-4 md:px-6 min-h-10 opacity-80"
+                )}>
 
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={propertyKey}