@rebasepro/admin 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/preview/components/RelationPreview.tsx

@@ -6,9 +6,13 @@ import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { useCustomizationController, useFetch, ErrorView, useComponentOverride, CollectionScopeProvider } from "@rebasepro/app";
 import { Skeleton } from "@rebasepro/ui";
 import { EntityPreviewBinding, EntityPreviewContainer } from "../../components/EntityPreviewBinding";
+import {
+    InlineEntityPreview,
+    InlineEntityPreviewMissing,
+    InlineEntityPreviewSkeleton
+} from "../../components/InlineEntityPreview";
+import { useIsNestedEntityPreview } from "../../components/EntityPreviewNesting";
 import { useCollectionRegistryController } from "../../hooks/navigation/contexts/CollectionRegistryContext";
-import { getEntityTitlePropertyKeyForEntity } from "../../util/previews";
-import { getValueInPath } from "@rebasepro/utils";
 import type { AdminCollection } from "@rebasepro/admin-types";
 
 export type RelationPreviewProps = {
@@ -64,9 +68,10 @@ function extractDisplayFromPlainObject(obj: unknown): string {
  */
 export const RelationPreview = function RelationPreview(props: RelationPreviewProps) {
     const relation = props.relation;
+    const nested = useIsNestedEntityPreview();
     if (!(typeof relation === "object" && "isEntityRelation" in relation && relation.isEntityRelation())) {
         console.warn("Relation preview received value of type", typeof relation);
-        if (props.textOnly) {
+        if (props.textOnly || nested) {
             const display = extractDisplayFromPlainObject(relation);
             return <span className="truncate">{display}</span>;
         }
@@ -95,6 +100,7 @@ function RelationPreviewInternalInner({
     collection
 }: RelationPreviewProps & { collection?: AdminCollection }) {
     const ResolvedMissingReference = useComponentOverride("Entity.MissingReference", DefaultMissingReference);
+    const nested = useIsNestedEntityPreview();
 
     if (!collection) {
         if (ResolvedMissingReference !== DefaultMissingReference) {
@@ -103,6 +109,10 @@ function RelationPreviewInternalInner({
             if (textOnly) {
                 return <span>{relation.path}</span>;
             }
+            if (nested) {
+                return <InlineEntityPreviewMissing label={String(relation.id)}
+                    tooltip={`Collection not found: ${relation.path}`}/>;
+            }
             return <EntityPreviewContainer size={size}>
                 <ErrorView error={`Collection not found: ${relation.path}`}/>
             </EntityPreviewContainer>;
@@ -162,6 +172,11 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
     const passedEntity = relation.data as Entity<M> | undefined;
     const ResolvedEntityPreview = useComponentOverride("EntityPreview", EntityPreviewBinding);
     const customizationController = useCustomizationController();
+    const nested = useIsNestedEntityPreview();
+
+    // Nested inside another preview, or filling a title slot: one line of text,
+    // not a second card. See {@link InlineEntityPreview}.
+    const inline = nested || Boolean(textOnly);
 
     const {
         entity,
@@ -190,8 +205,9 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
     }
 
     if (body) {
-        if (textOnly) {
-            return <span>{relation.id}</span>;
+        if (inline) {
+            return <InlineEntityPreviewMissing label={String(relation.id)}
+                tooltip={relation.pathWithId}/>;
         }
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
@@ -203,8 +219,8 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
     }
 
     if (dataLoading && !usedEntity) {
-        if (textOnly) {
-            return <Skeleton className="inline-block w-20 h-4" />;
+        if (inline) {
+            return <InlineEntityPreviewSkeleton/>;
         }
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
@@ -216,8 +232,9 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
     }
 
     if (!usedEntity) {
-        if (textOnly) {
-            return <span>{relation.id}</span>;
+        if (inline) {
+            return <InlineEntityPreviewMissing label={String(relation.id)}
+                tooltip={"Entity not found"}/>;
         }
         return (
             <EntityPreviewContainer onClick={disabled ? undefined : onClick}
@@ -228,11 +245,14 @@ function RelationPreviewExisting<M extends Record<string, unknown> = Record<stri
         );
     }
 
-    if (textOnly) {
-        const titleProperty = getEntityTitlePropertyKeyForEntity(collection, usedEntity.values, usedEntity.id);
-        const titleValue = titleProperty ? getValueInPath(usedEntity.values, titleProperty) : undefined;
-        const displayValue = titleValue !== undefined && titleValue !== null ? String(titleValue) : String(relation.id);
-        return <span className="truncate">{displayValue}</span>;
+    if (inline) {
+        return <InlineEntityPreview entity={usedEntity}
+            collection={collection}
+            disabled={disabled}
+            onClick={onClick}
+            // In a title slot the row itself is the click target; only a
+            // preview nested inside a card opens its own side panel.
+            includeEntityLink={!textOnly && includeEntityLink !== false}/>;
     }
 
     return <ResolvedEntityPreview size={size}

package/src/preview/index.ts

@@ -22,4 +22,5 @@ export * from "./components/EmptyValue";
 export * from "./components/ImagePreview";
 export * from "./components/ReferencePreview";
 export * from "./components/RelationPreview";
+export * from "./components/InlineEntityListPreview";
 export * from "./components/UserPreview";

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -1,6 +1,8 @@
 import type { ArrayProperty, ReferenceProperty, EntityReference } from "@rebasepro/types";
 import type { PropertyPreviewProps, PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { ReferencePreview } from "../components/ReferencePreview";
+import { useIsNestedEntityPreview } from "../../components/EntityPreviewNesting";
+import { InlineEntityListPreview } from "../components/InlineEntityListPreview";
 
 /**
  * @group Preview components
@@ -9,9 +11,12 @@ export function ArrayOfReferencesPreview({
     propertyKey,
     value,
     property: property,
-    size
+    size,
+    textOnly
 }: PropertyPreviewProps<ArrayProperty>) {
 
+    const nested = useIsNestedEntityPreview();
+
     if (Array.isArray(property?.of)) {
         throw Error("Using array properties instead of single one in `of` in ArrayProperty");
     }
@@ -20,6 +25,24 @@ export function ArrayOfReferencesPreview({
         throw Error("Picked wrong preview component ArrayOfReferencesPreview");
 
     const childSize: PreviewSize = size === "medium" ? "medium" : "small";
+    const ofProperty = property.of as ReferenceProperty;
+
+    // Stacked cards inside another preview (or a title slot) turn a list into a
+    // wall of boxes: keep it to one wrapping line of links.
+    if (nested || textOnly) {
+        return <InlineEntityListPreview
+            items={(value ?? []) as EntityReference[]}
+            renderItem={(reference, index) => <ReferencePreview
+                key={`preview_array_ref_${propertyKey}_${index}`}
+                disabled={!ofProperty.path}
+                previewProperties={ofProperty.admin?.previewProperties}
+                size={childSize}
+                reference={reference}
+                textOnly={textOnly}
+                includeId={ofProperty.admin?.includeId}
+                includeEntityLink={ofProperty.admin?.includeEntityLink}
+            />}/>;
+    }
 
     return (
         <div className="flex flex-col w-full">

package/src/preview/property_previews/ArrayOfRelationsPreview.tsx

@@ -3,6 +3,8 @@ import { EntityRelation } from "@rebasepro/types";
 import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
 import { normalizeToEntityRelation } from "@rebasepro/common";
 import { RelationPreview } from "../components/RelationPreview";
+import { useIsNestedEntityPreview } from "../../components/EntityPreviewNesting";
+import { InlineEntityListPreview } from "../components/InlineEntityListPreview";
 
 /**
  * @group Preview components
@@ -11,9 +13,12 @@ export function ArrayOfRelationsPreview({
     propertyKey,
     value,
     property,
-    size
+    size,
+    textOnly
 }: PropertyPreviewProps<ArrayProperty>) {
 
+    const nested = useIsNestedEntityPreview();
+
     if (Array.isArray(property?.of)) {
         throw Error("Using array properties instead of single one in `of` in ArrayProperty");
     }
@@ -23,6 +28,25 @@ export function ArrayOfRelationsPreview({
 
     const ofProperty = property.of as RelationProperty;
 
+    // See ArrayOfReferencesPreview: nested lists stay on one wrapping line.
+    if (nested || textOnly) {
+        const relations = ((value ?? []) as unknown[])
+            .map(relation => normalizeToEntityRelation(relation))
+            .filter((relation): relation is EntityRelation => Boolean(relation));
+        return <InlineEntityListPreview
+            items={relations}
+            renderItem={(relation, index) => <RelationPreview
+                key={`preview_array_rel_${propertyKey}_${index}`}
+                disabled={!ofProperty.relation}
+                previewProperties={ofProperty.admin?.previewProperties}
+                size={"small"}
+                relation={relation}
+                textOnly={textOnly}
+                includeId={ofProperty.admin?.includeId}
+                includeEntityLink={ofProperty.admin?.includeEntityLink}
+            />}/>;
+    }
+
     return (
         <div className="flex flex-col w-full gap-0.5">
             {value ?

package/src/routes/RebaseRoute.tsx

@@ -1,10 +1,10 @@
 
 import type { ViewMode, AdminCollection } from "@rebasepro/admin-types";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { EditViewBinding } from "../components/EditViewBinding";
 import { DetailViewBinding } from "../components/DetailViewBinding";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { CollectionViewBinding } from "../components/CollectionViewBinding/CollectionViewBinding";
 import { NotFoundPage, useUserConfigurationPersistence, useComponentOverride, useNavigationBlocker } from "@rebasepro/app";
 import { resolveOpenEntityMode, resolveViewMode } from "../util/view_mode";

package/src/types/components/EntityFormActionsProps.tsx

@@ -8,7 +8,6 @@ export interface EntityFormActionsProps {
     path: string;
     collection: AdminCollection;
     entity?: Entity;
-    layout: "bottom" | "side" | "responsive";
     savingError?: Error;
     formex: FormexController<Record<string, unknown>>;
     disabled: boolean;

package/src/types/components/EntityFormProps.tsx

@@ -22,7 +22,6 @@ export type EntityFormProps<M extends Record<string, unknown>> = {
     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;
@@ -38,11 +37,6 @@ export type EntityFormProps<M extends Record<string, unknown>> = {
      */
     showDefaultActions?: boolean;
 
-    /**
-     * Display the entity path in the form
-     */
-    showEntityPath?: boolean;
-
     EntityFormActionsComponent?: React.FC<EntityFormActionsProps>;
 
     navigateBack?: () => void;

package/src/types/fields.tsx

@@ -99,6 +99,21 @@ export interface FieldProps<
      */
     includeDescription?: boolean;
 
+    /**
+     * The container is rendering the label and the description itself, so this
+     * field should render only its control.
+     *
+     * This is what the generated form sets. Field types used to disagree about
+     * where a label goes — text and number put it inside the input, select,
+     * array, storage and read-only put it above — which read as two design
+     * systems in one column. The label now belongs to the form, and the binding
+     * to the control.
+     *
+     * A custom field that ignores this still renders its own label, so it
+     * degrades to the old look rather than losing its label.
+     */
+    hideLabel?: boolean;
+
     /**
      * Flag to indicate that the underlying value has been updated in the
      * driver
@@ -222,6 +237,12 @@ export interface FormContext<M extends Record<string, unknown> = Record<string,
 
     disabled: boolean;
 
+    /**
+     * A save is in flight, including the autosave debounce, which `formex`
+     * cannot report because it never goes through `handleSubmit`.
+     */
+    isSaving?: boolean;
+
     /**
      * Whether the form context is in read-only detail view mode.
      * Custom entity views can use this to adjust their rendering.
@@ -258,6 +279,12 @@ export interface PropertyFieldBindingProps<M extends Record<string, unknown> = R
      */
     includeDescription?: boolean;
 
+    /**
+     * The container renders the label and description; render only the control.
+     * See the note on {@link FieldProps.hideLabel}.
+     */
+    hideLabel?: boolean;
+
     /**
      * Has the value of this property been updated in the database while this
      * field is being edited

package/dist/form/components/FormEntry.d.ts

@@ -1,6 +0,0 @@
-import React from "react";
-export declare function FormEntry({ propertyKey, widthPercentage, children }: {
-    propertyKey: string;
-    widthPercentage?: number;
-    children: React.ReactNode;
-}): React.JSX.Element;

package/dist/form/components/FormLayout.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-export declare function FormLayout({ children, className }: {
-    children: React.ReactNode;
-    className?: string;
-}): React.JSX.Element;

package/dist/history-g9688IaK.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"history-g9688IaK.js","names":[],"sources":["../src/components/history/UserChip.tsx","../src/components/history/EntityHistoryEntry.tsx","../src/components/history/EntityHistoryView.tsx"],"sourcesContent":["import { User } from \"@rebasepro/types\";\nimport { Chip, Tooltip } from \"@rebasepro/ui\";\n\nexport function UserChip({ user }: { user: User }) {\n    return (\n        <Tooltip title={user.email ?? user.uid}>\n            <Chip size={\"small\"} className={\"flex items-center\"}>\n                {user.photoURL && <img\n                    className={\"rounded-full w-6 h-6 mr-2\"}\n                    src={user.photoURL} alt={user.displayName ?? \"User picture\"}/>}\n                <span>{user.displayName ?? user.email ?? user.uid}</span>\n            </Chip>\n        </Tooltip>\n    );\n}\n","\nimport type { Property } from \"@rebasepro/types\";\nimport * as React from \"react\";\n\nimport { ArrowLeftIcon, Chip, cls, defaultBorderMixin, iconSize, Tooltip, Typography } from \"@rebasepro/ui\";\nimport { PreviewSize } from \"../../types/components/PropertyPreviewProps\";\nimport { getPropertyInPath } from \"../../util/property_utils\";\nimport { PropertyPreview } from \"../../preview/PropertyPreview\";\nimport { SkeletonPropertyComponent } from \"../../preview/property_previews/SkeletonPropertyComponent\";\nimport { useAuthController } from \"@rebasepro/app\";\nimport { UserChip } from \"./UserChip\";\nimport { HistoryEntryData } from \"../../hooks\";\nimport { getValueInPath } from \"@rebasepro/utils\";\nimport type { AdminCollection } from \"@rebasepro/admin-types\";\n\n/**\n * Recursive deep equality for primitives, arrays and plain objects.\n */\nfunction deepEqual(a: unknown, b: unknown): boolean {\n    if (a === b) return true;\n    if (a == null || b == null) return a === b;\n    if (typeof a !== typeof b) return false;\n    if (typeof a !== \"object\") return false;\n\n    if (Array.isArray(a)) {\n        if (!Array.isArray(b) || a.length !== (b as unknown[]).length) return false;\n        return a.every((item, i) => deepEqual(item, (b as unknown[])[i]));\n    }\n\n    if (Array.isArray(b)) return false;\n\n    const aObj = a as Record<string, unknown>;\n    const bObj = b as Record<string, unknown>;\n    const aKeys = Object.keys(aObj);\n    const bKeys = Object.keys(bObj);\n    if (aKeys.length !== bKeys.length) return false;\n    return aKeys.every(key => key in bObj && deepEqual(aObj[key], bObj[key]));\n}\n\nexport type EntityHistoryEntryProps = {\n    size: PreviewSize;\n    actions?: React.ReactNode;\n    collection?: AdminCollection;\n    hover?: boolean;\n    entry: HistoryEntryData;\n    onClick?: (e: React.SyntheticEvent) => void;\n};\n\nfunction PreviousValueView({\n    previousValueInPath,\n    childProperty,\n    propertyKey\n}: {\n    previousValueInPath: unknown;\n    childProperty: Property;\n    propertyKey: string;\n}) {\n    if (typeof previousValueInPath === \"string\" || typeof previousValueInPath === \"number\") {\n        return <Typography variant={\"caption\"} color={\"secondary\"} className=\"line-through\">\n            {previousValueInPath}\n        </Typography>;\n    } else if (typeof previousValueInPath === \"boolean\") {\n        return <Typography variant={\"caption\"} color={\"secondary\"} className=\"line-through\">\n            {previousValueInPath ? \"true\" : \"false\"}\n        </Typography>;\n    } else {\n        return <Tooltip\n            side={\"left\"}\n            title={<div className={\"flex flex-col gap-2\"}>\n                <Typography variant={\"caption\"} color={\"secondary\"}>\n                    Previous value\n                </Typography>\n                <PropertyPreview\n                    propertyKey={propertyKey as string}\n                    value={previousValueInPath as never}\n                    property={childProperty as Property}\n                    size={\"small\"}/>\n            </div>}>\n            <ArrowLeftIcon size={iconSize.smallest} color={\"disabled\"} className={\"mb-1\"}/>\n        </Tooltip>\n    }\n}\n\n/**\n * Displays a single entity history revision entry.\n * Adapted from the entity_history plugin — now reads from backend API data.\n */\nexport function EntityHistoryEntry({\n    actions,\n    hover,\n    collection,\n    size,\n    entry\n}: EntityHistoryEntryProps) {\n\n    const authController = useAuthController();\n\n    const changedFields = entry.changed_fields;\n    const previousValues = entry.previous_values;\n    const updatedOn = new Date(entry.updated_at);\n    const updatedBy = entry.updated_by;\n\n    // Resolve user display\n    const currentUser = authController.user;\n    const userDisplay = updatedBy === currentUser?.uid\n        ? currentUser\n        : undefined;\n\n    return <div className={\"w-full flex flex-col gap-2 mt-4\"}>\n        <div className={\"ml-4 flex items-center gap-4\"}>\n            <Typography variant={\"body2\"} color={\"secondary\"}>\n                {updatedOn.toLocaleString()}\n            </Typography>\n            <Chip size={\"small\"}>\n                {entry.action}\n            </Chip>\n            {!userDisplay && updatedBy && <Chip size={\"small\"}>{updatedBy}</Chip>}\n            {userDisplay && <UserChip user={userDisplay}/>}\n        </div>\n        <div\n            className={cls(\n                \"bg-white dark:bg-surface-900\",\n                \"min-h-[44px]\",\n                \"w-full\",\n                \"items-center\",\n                hover ? \"hover:bg-surface-accent-50 dark:hover:bg-surface-800\" : \"\",\n                size === \"small\" ? \"p-1\" : \"px-2 py-1\",\n                \"flex border rounded-lg\",\n                defaultBorderMixin\n            )}>\n\n            {actions}\n\n            <div className={\"flex flex-col grow w-full m-1 shrink min-w-0\"}>\n\n                {changedFields && collection && changedFields.map((key: string) => {\n                    const childProperty = getPropertyInPath(collection.properties, key);\n                    const valueInPath = entry.values ? getValueInPath(entry.values, key) : undefined;\n                    const previousValueInPath = previousValues ? getValueInPath(previousValues, key) : undefined;\n\n                    const element = childProperty\n                        ? <PropertyPreview\n                            propertyKey={key}\n                            value={valueInPath as never}\n                            property={childProperty as Property}\n                            size={\"small\"}/>\n                        : <Typography variant={\"body2\"}>\n                            {typeof valueInPath === \"string\" ? valueInPath : JSON.stringify(valueInPath)}\n                        </Typography>;\n\n                    return (\n                        <div key={\"ref_prev_\" + key}\n                            className=\"flex w-full my-1 items-center\">\n                            <Typography variant={\"caption\"}\n                                color={\"secondary\"}\n                                className=\"min-w-[140px] md:min-w-[200px] w-1/5 pr-8 overflow-hidden text-ellipsis text-right\">\n                                {key}\n                            </Typography>\n                            <div className=\"w-4/5\">\n                                {previousValueInPath !== undefined && !deepEqual(previousValueInPath, valueInPath) &&\n                                    <PreviousValueView previousValueInPath={previousValueInPath}\n                                        childProperty={childProperty as Property}\n                                        propertyKey={key}/>\n                                }\n                                {element}\n                            </div>\n                        </div>\n                    );\n                })}\n\n                {(!changedFields || changedFields.length === 0) && (\n                    <Typography variant={\"caption\"} color={\"secondary\"} className=\"ml-4\">\n                        {entry.action === \"create\" ? \"Entity created\" :\n                            entry.action === \"delete\" ? \"Entity deleted\" : \"No field changes recorded\"}\n                    </Typography>\n                )}\n\n            </div>\n\n        </div>\n    </div>;\n}\n","\nimport type { EntityCustomViewParams } from \"@rebasepro/admin-types\";\nimport { useRef, useEffect } from \"react\";\nimport { cls, IconButton, Label, Tooltip, Typography } from \"@rebasepro/ui\";\nimport { ErrorBoundary, HistoryIcon } from \"@rebasepro/ui\";\nimport { EntityHistoryEntry } from \"./EntityHistoryEntry\";\nimport { useSnackbarController, useAuthController } from \"@rebasepro/app\";\nimport { ConfirmationDialog } from \"@rebasepro/app\";\nimport { useState } from \"react\";\nimport { useHistory } from \"../../hooks/useHistory\";\n\n/**\n * Entity history tab view. Shows a paginated list of entity revisions\n * fetched from the backend API. Supports infinite scroll and revert.\n */\nexport function EntityHistoryView<M extends Record<string, unknown>>({\n    entity,\n    collection,\n    formContext\n}: EntityCustomViewParams<M>) {\n\n    const snackbarController = useSnackbarController();\n    const authController = useAuthController();\n    const dirty = formContext?.formex.dirty;\n\n    const slug = collection.slug;\n    const entityId = entity?.id;\n\n    const {\n        entries,\n        isLoading,\n        hasMore,\n        loadMore,\n        revert\n    } = useHistory({\n        slug,\n        entityId,\n        enabled: !!entityId,\n        pageSize: 10\n    });\n\n    const [revertHistoryId, setRevertHistoryId] = useState<string | undefined>();\n    const [isReverting, setIsReverting] = useState(false);\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const loadMoreRef = useRef<HTMLDivElement>(null);\n\n    // Intersection observer for infinite scroll\n    useEffect(() => {\n        const currentContainer = containerRef.current;\n        const currentLoadMore = loadMoreRef.current;\n\n        if (!currentContainer || !currentLoadMore || !hasMore || isLoading) return;\n\n        const observer = new IntersectionObserver(\n            (observerEntries) => {\n                if (observerEntries[0].isIntersecting && hasMore && !isLoading) {\n                    loadMore();\n                }\n            },\n            {\n                root: currentContainer,\n                rootMargin: \"0px 0px 200px 0px\",\n                threshold: 0.01\n            }\n        );\n\n        observer.observe(currentLoadMore);\n\n        return () => observer.disconnect();\n    }, [hasMore, isLoading, entries.length, loadMore]);\n\n    if (!entity) {\n        return <div className=\"flex items-center justify-center h-full\">\n            <Label>History is only available for existing entities</Label>\n        </div>;\n    }\n\n    async function doRevert(historyId: string) {\n        setIsReverting(true);\n        try {\n            const revertedValues = await revert(historyId);\n            setRevertHistoryId(undefined);\n\n            // Reset the form with the reverted values so the UI updates\n            // immediately without requiring a page refresh.\n            if (formContext?.formex?.resetForm && revertedValues) {\n                formContext.formex.resetForm({\n                    values: revertedValues as M,\n                    submitCount: 0,\n                    touched: {}\n                });\n            }\n\n            snackbarController.open({\n                message: \"Reverted to selected version\",\n                type: \"info\"\n            });\n        } catch (error) {\n            console.error(\"Error reverting entity:\", error);\n            snackbarController.open({\n                message: \"Error reverting entity\",\n                type: \"error\"\n            });\n        } finally {\n            setIsReverting(false);\n        }\n    }\n\n    const revertEntry = revertHistoryId\n        ? entries.find(e => e.id === revertHistoryId)\n        : undefined;\n\n    return <div\n        ref={containerRef}\n        className={cls(\"relative flex-1 h-full overflow-auto w-full flex flex-col gap-4 p-8\")}>\n        <div className=\"flex flex-col gap-2 max-w-6xl mx-auto w-full\">\n\n            <Typography variant={\"h5\"} className={\"mt-24 ml-4\"}>\n                History\n            </Typography>\n\n            {isLoading && entries.length === 0 && (\n                <div className=\"flex flex-col gap-4 mt-8 ml-4\">\n                    {[1, 2, 3].map(i => (\n                        <div key={i} className=\"flex flex-col gap-2 animate-pulse\">\n                            <div className=\"h-4 w-48 bg-surface-200 dark:bg-surface-700 rounded\"/>\n                            <div className=\"h-12 w-full bg-surface-100 dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700\"/>\n                        </div>\n                    ))}\n                </div>\n            )}\n\n            {!isLoading && entries.length === 0 && <>\n                <Label className={\"ml-4 mt-8\"}>\n                    No history available\n                </Label>\n                <Typography variant={\"caption\"} className={\"ml-4\"}>\n                    When you save a entity, a new version is created and stored in the history.\n                </Typography>\n            </>}\n\n            {entries.map((entry) => (\n                <div key={entry.id} className=\"flex flex-cols gap-2 w-full\">\n                    <EntityHistoryEntry\n                        entry={entry}\n                        collection={collection}\n                        size={\"medium\"}\n                        actions={\n                            <Tooltip title={\"Revert to this version\"}\n                                className={\"m-2 grow-0 self-start\"}>\n                                <IconButton\n                                    onClick={() => {\n                                        if (dirty) {\n                                            snackbarController.open({\n                                                message: \"Please save or discard your changes before reverting\",\n                                                type: \"warning\"\n                                            });\n                                        } else {\n                                            setRevertHistoryId(entry.id);\n                                        }\n                                    }}>\n                                    <HistoryIcon/>\n                                </IconButton>\n                            </Tooltip>\n                        }\n                    />\n                </div>\n            ))}\n\n            {/* Load more sentinel */}\n            {entries.length > 0 && (\n                <div ref={loadMoreRef} className=\"py-4 text-center\">\n                    {isLoading && <Label>Loading more...</Label>}\n                    {!hasMore && entries.length > 10 && <Label>No more history available</Label>}\n                </div>\n            )}\n        </div>\n\n        <ErrorBoundary>\n            <ConfirmationDialog\n                open={Boolean(revertHistoryId)}\n                onAccept={() => {\n                    if (revertHistoryId) doRevert(revertHistoryId);\n                }}\n                onCancel={() => setRevertHistoryId(undefined)}\n                title={<Typography variant={\"subtitle2\"}>Revert data to this version?</Typography>}\n                body={revertEntry\n                    ? <div className=\"p-4\">\n                        <Typography variant={\"caption\"} color={\"secondary\"}>\n                            This will save the entity with the values from{\" \"}\n                            {new Date(revertEntry.updated_at).toLocaleString()}.\n                            A new history entry will be created for the revert.\n                        </Typography>\n                    </div>\n                    : null\n                }\n            />\n        </ErrorBoundary>\n    </div>;\n}\n"],"mappings":"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"}