@firecms/core 3.0.0-canary.2 → 3.0.0-canary.200

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { canCreateEntity, canDeleteEntity, fullPathToCollectionSegments } from "../../util";
+import { canCreateEntity, canDeleteEntity } from "../../util";
 import { useAuthController, useCustomizationController, useFireCMSContext, useLargeLayout } from "../../hooks";
 import { CollectionActionsProps, EntityCollection, EntityTableController, SelectionController } from "../../types";
 import { AddIcon, Button, DeleteIcon, IconButton, Tooltip } from "@firecms/ui";
@@ -44,7 +44,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
 
     const selectedEntities = selectionController.selectedEntities;
 
-    const addButton = canCreateEntity(collection, authController, fullPathToCollectionSegments(path), null) &&
+    const addButton = canCreateEntity(collection, authController, path, null) &&
         onNewClick && (largeLayout
             ? <Button
                 id={`add_entity_${path}`}
@@ -57,14 +57,13 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
             : <Button
                 id={`add_entity_${path}`}
                 onClick={onNewClick}
-                size="medium"
                 variant="filled"
                 color="primary"
             >
                 <AddIcon/>
             </Button>);
 
-    const multipleDeleteEnabled = canDeleteEntity(collection, authController, fullPathToCollectionSegments(path), null);
+    const multipleDeleteEnabled = canDeleteEntity(collection, authController, path, null);
 
     let multipleDeleteButton: React.ReactNode | undefined;
     if (selectionEnabled) {
@@ -112,11 +111,11 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
 
     if (plugins) {
         plugins.forEach((plugin, i) => {
-            if (plugin.collections?.CollectionActions) {
-                actions.push(...toArray(plugin.collections?.CollectionActions)
+            if (plugin.collectionView?.CollectionActions) {
+                actions.push(...toArray(plugin.collectionView?.CollectionActions)
                     .map((Action, j) => (
                         <ErrorBoundary key={`plugin_actions_${i}_${j}`}>
-                            <Action {...actionProps} {...plugin.collections?.collectionActionsProps}/>
+                            <Action {...actionProps} {...plugin.collectionView?.collectionActionsProps}/>
                         </ErrorBoundary>
                     )));
             }
@@ -125,7 +124,9 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
 
     return (
         <>
-            {actions}
+            <ErrorBoundary>
+                {actions}
+            </ErrorBoundary>
             {multipleDeleteButton}
             {addButton}
         </>

package/src/components/EntityCollectionView/EntityCollectionViewStartActions.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { useCustomizationController, useFireCMSContext } from "../../hooks";
+import { CollectionActionsProps, EntityCollection, EntityTableController, SelectionController } from "../../types";
+import { toArray } from "../../util/arrays";
+import { ErrorBoundary } from "../ErrorBoundary";
+import { ClearFilterSortButton } from "../ClearFilterSortButton";
+
+export type EntityCollectionViewStartActionsProps<M extends Record<string, any>> = {
+    collection: EntityCollection<M>;
+    path: string;
+    relativePath: string;
+    parentCollectionIds: string[];
+    selectionController: SelectionController<M>;
+    tableController: EntityTableController<M>;
+    collectionEntitiesCount: number;
+}
+
+export function EntityCollectionViewStartActions<M extends Record<string, any>>({
+                                                                                    collection,
+                                                                                    relativePath,
+                                                                                    parentCollectionIds,
+                                                                                    path,
+                                                                                    selectionController,
+                                                                                    tableController,
+                                                                                    collectionEntitiesCount
+                                                                                }: EntityCollectionViewStartActionsProps<M>) {
+
+    const context = useFireCMSContext();
+
+    const customizationController = useCustomizationController();
+    const plugins = customizationController.plugins ?? [];
+
+    const actionProps: CollectionActionsProps = {
+        path,
+        relativePath,
+        parentCollectionIds,
+        collection,
+        selectionController,
+        context,
+        tableController,
+        collectionEntitiesCount
+    };
+    const actions: React.ReactNode[] = [
+        <ClearFilterSortButton
+            key={"clear_filter"}
+            tableController={tableController}
+            enabled={!collection.forceFilter}/>
+    ];
+
+    if (plugins) {
+        plugins.forEach((plugin, i) => {
+            if (plugin.collectionView?.CollectionActionsStart) {
+                actions.push(...toArray(plugin.collectionView?.CollectionActionsStart)
+                    .map((Action, j) => (
+                        <ErrorBoundary key={`plugin_actions_${i}_${j}`}>
+                            <Action {...actionProps} {...plugin.collectionView?.collectionActionsStartProps}/>
+                        </ErrorBoundary>
+                    )));
+            }
+        });
+    }
+
+    return (
+        <>
+            {actions}
+        </>
+    );
+}

package/src/components/EntityCollectionView/useSelectionController.tsx

@@ -0,0 +1,43 @@
+import { useCallback, useState } from "react";
+import { Entity, SelectionController } from "../../types";
+
+export function useSelectionController<M extends Record<string, any> = any>(
+    onSelectionChange?: (entity: Entity<M>, selected: boolean) => void
+): SelectionController<M> {
+
+    const [selectedEntities, setSelectedEntities] = useState<Entity<M>[]>([]);
+
+    const toggleEntitySelection = useCallback((entity: Entity<M>, newSelectedState?: boolean) => {
+        let newValue;
+        if (newSelectedState === undefined) {
+            const isSelected = Boolean(selectedEntities.find(e => e.id === entity.id && e.path === entity.path));
+            if (isSelected) {
+                onSelectionChange?.(entity, false);
+                newValue = selectedEntities.filter((item: Entity<M>) => !(item.id === entity.id && item.path === entity.path));
+            } else {
+                onSelectionChange?.(entity, true);
+                newValue = [...selectedEntities, entity];
+            }
+        } else {
+            if (newSelectedState) {
+                onSelectionChange?.(entity, true);
+                newValue = [...selectedEntities, entity];
+            } else {
+                onSelectionChange?.(entity, false);
+                newValue = selectedEntities.filter((item: Entity<M>) => !(item.id === entity.id && item.path === entity.path));
+            }
+        }
+        setSelectedEntities(newValue);
+    }, [selectedEntities]);
+
+    const isEntitySelected = useCallback((entity: Entity<M>) => {
+        return Boolean(selectedEntities.find(e => e.id === entity.id && e.path === entity.path));
+    }, [selectedEntities]);
+
+    return {
+        selectedEntities,
+        setSelectedEntities,
+        isEntitySelected,
+        toggleEntitySelection
+    };
+}

package/src/components/EntityCollectionView/utils.ts

@@ -0,0 +1,19 @@
+export function addRecentId(collectionId: string, id: string) {
+    const recentIds = getRecentIds(collectionId);
+    const newRecentIds = [id, ...recentIds.filter(i => i !== id)];
+    if (newRecentIds.length > 5) {
+        newRecentIds.pop();
+    }
+    saveSearchedIdsLocally(collectionId, newRecentIds);
+    return newRecentIds;
+}
+
+export function saveSearchedIdsLocally(collectionId: string, ids: string[]) {
+    localStorage.setItem("recent_id_searches::" + collectionId, JSON.stringify(ids));
+}
+
+export function getRecentIds(collectionId: string): string[] {
+    const stored = localStorage.getItem("recent_id_searches::" + collectionId);
+    if (!stored) return [];
+    return JSON.parse(stored);
+}

package/src/components/EntityPreview.tsx

@@ -1,84 +1,231 @@
-import React, { useMemo } from "react";
-import { PropertyPreview } from "../preview";
-import { Entity, EntityCollection, ResolvedEntityCollection, ResolvedProperties } from "../types";
-import { resolveCollection } from "../util";
-import { cn, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
-import { CustomizationController } from "../types/customization_controller";
-import { useCustomizationController } from "../hooks/useCustomizationController";
+import * as React from "react";
+import { useMemo } from "react";
+
+import { Entity, EntityCollection, ResolvedProperty } from "../types";
+
+import {
+    getEntityImagePreviewPropertyKey,
+    getEntityPreviewKeys,
+    getEntityTitlePropertyKey,
+    getValueInPath,
+    IconForView,
+    resolveCollection
+} from "../util";
+import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { PreviewSize, PropertyPreview, SkeletonPropertyComponent } from "../preview";
+import { useCustomizationController, useNavigationController, useSideEntityController } from "../hooks";
+import { useAnalyticsController } from "../hooks/useAnalyticsController";
+
+export type EntityPreviewProps = {
+    size: PreviewSize,
+    actions?: React.ReactNode,
+    collection?: EntityCollection,
+    hover?: boolean;
+    previewProperties?: string[],
+    disabled?: boolean,
+    entity: Entity<any>,
+    includeId?: boolean,
+    includeEntityLink?: boolean,
+    onClick?: (e: React.SyntheticEvent) => void;
+};
 
 /**
- * @group Components
+ * This view is used to display a preview of an entity.
+ * It is used by default in reference fields and whenever a reference is displayed.
  */
-export interface EntityPreviewProps<M extends Record<string, any>> {
-    entity: Entity<M>;
-    collection: EntityCollection<M>;
-    path: string;
-    className?: string;
-}
+export function EntityPreview({
+                                  actions,
+                                  disabled,
+                                  hover,
+                                  collection: collectionProp,
+                                  previewProperties,
+                                  onClick,
+                                  size,
+                                  includeId = true,
+                                  includeEntityLink = true,
+                                  entity
+                              }: EntityPreviewProps) {
 
-export function EntityPreview<M extends Record<string, any>>(
-    {
-        entity,
-        collection,
-        path,
-        className
-    }: EntityPreviewProps<M>) {
+    const analyticsController = useAnalyticsController();
+    const sideEntityController = useSideEntityController();
+    const customizationController = useCustomizationController();
+
+    const navigationController = useNavigationController();
 
-    const customizationController: CustomizationController = useCustomizationController();
-    const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
+    const collection = collectionProp ?? navigationController.getCollection(entity.path);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection view for the path: ${entity.path}`);
+    }
+
+    const resolvedCollection = React.useMemo(() => resolveCollection({
         collection,
-        path,
-        entityId: entity.id,
+        path: entity.path,
         values: entity.values,
-        fields: customizationController.propertyConfigs
-    }), [collection, path, entity]);
+        propertyConfigs: customizationController.propertyConfigs
+    }), [collection]);
 
-    const properties: ResolvedProperties = resolvedCollection.properties;
+    const listProperties = useMemo(() => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "medium" || size === "large" ? 3 : 1),
+        [previewProperties, resolvedCollection, size]);
 
-    return (
-        <div className={"w-full " + className}>
-            <div className={"w-full mb-4"}>
-                <div className={cn(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
-                    <div className="flex items-center w-1/4">
-                        <span className="pl-2 text-sm text-gray-600">Id</span>
-                    </div>
-                    <div
-                        className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
-                        <span className="flex-grow mr-2">{entity.id}</span>
-                        {customizationController?.entityLinkBuilder &&
-                            <a href={customizationController.entityLinkBuilder({ entity })}
-                               rel="noopener noreferrer"
-                               target="_blank">
-                                <IconButton>
-                                    <OpenInNewIcon
-                                        size={"small"}/>
-                                </IconButton>
-                            </a>}
+    const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
+    const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
+    const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : undefined;
+    const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
+    const restProperties = listProperties.filter(p => p !== titleProperty && p !== imagePropertyKey);
+
+    const imageValue = imagePropertyKey ? getValueInPath(entity.values, imagePropertyKey) : undefined;
+    const usedImageValue = imageProperty !== undefined ? ("of" in imageProperty
+            ? ((imageValue ?? []).length > 0
+                ? imageValue[0] : undefined)
+            : imageValue)
+        : undefined;
+
+    return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                                   hover={disabled ? undefined : hover}
+                                   size={size}>
+        <div className={cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "small" ? "my-0.5" : "m-2 self-start")}>
+            {usedImageProperty && usedImageValue && <PropertyPreview property={usedImageProperty}
+                                                                     propertyKey={imagePropertyKey as string}
+                                                                     size={"small"}
+                                                                     value={usedImageValue}/>}
+            {(!usedImageProperty || !usedImageValue) && <IconForView collectionOrView={collection}
+                                                                     color={"primary"}
+                                                                     size={size}
+                                                                     className={"m-auto p-1"}/>}
+        </div>
+
+
+        <div className={"flex flex-col grow-1 w-full m-1 shrink-1"} style={{
+            "maxWidth": "calc(100% - 96px)"
+        }}>
+
+            {size !== "small" && includeId && (
+                entity
+                    ? <div className={"block whitespace-nowrap overflow-hidden truncate"}>
+                        <Typography variant={"caption"}
+                                    color={"disabled"}
+                                    className={"font-mono"}>
+                            {entity.id}
+                        </Typography>
                     </div>
+                    : <Skeleton/>)}
+
+            {titleProperty && (
+                <div className={"truncate my-0.5 text-sm font-medium"}>
+                    {
+                        entity
+                            ? <PropertyPreview
+                                propertyKey={titleProperty as string}
+                                value={getValueInPath(entity.values, titleProperty)}
+                                property={resolvedCollection.properties[titleProperty as string] as ResolvedProperty}
+                                size={"large"}/>
+                            : <SkeletonPropertyComponent
+                                property={resolvedCollection.properties[titleProperty as string] as ResolvedProperty}
+                                size={"large"}/>
+                    }
                 </div>
-                {Object.entries(properties)
-                    .map(([key, property]) => {
-                        const value = (entity.values)[key];
-                        return (
-                            <div
-                                key={`reference_previews_${key}`}
-                                className={cn(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
-                                <div className="flex items-center w-1/4">
-                                    <span className="pl-2 text-sm text-gray-600">{property.name}</span>
-                                </div>
-                                <div
-                                    className="flex-grow p-2 ml-2 w-3/4 text-gray-900 dark:text-white min-h-[56px] flex items-center">
-                                    <PropertyPreview
-                                        propertyKey={key}
-                                        value={value}
-                                        // entity={entity}
-                                        property={property}
-                                        size={"medium"}/>
-                                </div>
-                            </div>
-                        )
-                    })}
-            </div>
+            )}
+
+            {restProperties && restProperties.map((key) => {
+                const childProperty = resolvedCollection.properties[key as string];
+                if (!childProperty) return null;
+
+                return (
+                    <div key={"ref_prev_" + key}
+                         className={cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0")}>
+                        {
+                            entity
+                                ? <PropertyPreview
+                                    propertyKey={key as string}
+                                    value={getValueInPath(entity.values, key)}
+                                    property={childProperty as ResolvedProperty}
+                                    size={"small"}/>
+                                : <SkeletonPropertyComponent
+                                    property={childProperty as ResolvedProperty}
+                                    size={"small"}/>
+                        }
+                    </div>
+                );
+            })}
+
         </div>
-    );
+
+        {entity && includeEntityLink &&
+            <Tooltip title={`See details for ${entity.id}`} className={"shrink-0"}>
+                <IconButton
+                    color={"inherit"}
+                    size={"medium"}
+                    className={size !== "small" ? "self-start" : ""}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
+                            path: entity.path,
+                            entityId: entity.id
+                        });
+                        sideEntityController.open({
+                            entityId: entity.id,
+                            path: entity.path,
+                            collection,
+                            updateUrl: true
+                        });
+                    }}>
+                    <KeyboardTabIcon size={"medium"}/>
+                </IconButton>
+            </Tooltip>}
+
+        {actions}
+
+    </EntityPreviewContainer>;
 }
+
+export type EntityPreviewContainerProps = {
+    children: React.ReactNode;
+    hover?: boolean;
+    fullwidth?: boolean;
+    size: PreviewSize;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.SyntheticEvent) => void;
+};
+
+export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
+                                                                                                         children,
+                                                                                                         hover,
+                                                                                                         onClick,
+                                                                                                         size,
+                                                                                                         style,
+                                                                                                         className,
+                                                                                                         fullwidth = true,
+                                                                                                         ...props
+                                                                                                     }, ref) => {
+    return <div
+        ref={ref}
+        style={{
+            ...style,
+            // @ts-ignore
+            tabindex: 0
+        }}
+        className={cls(
+            "bg-white dark:bg-surface-900",
+            "min-h-[42px]",
+            fullwidth ? "w-full" : "",
+            "items-center",
+            hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "",
+            size === "small" ? "p-1" : "px-2 py-1",
+            "flex border rounded-lg",
+            onClick ? "cursor-pointer" : "",
+            defaultBorderMixin,
+            className)}
+        onClick={(event) => {
+            if (onClick) {
+                event.preventDefault();
+                onClick(event);
+            }
+        }}
+        {...props}>
+        {children}
+    </div>;
+});
+
+EntityPreviewContainer.displayName = "EntityPreviewContainer";

package/src/components/EntityView.tsx

@@ -0,0 +1,84 @@
+import React, { useMemo } from "react";
+import { PropertyPreview } from "../preview";
+import { Entity, EntityCollection, ResolvedEntityCollection, ResolvedProperties } from "../types";
+import { resolveCollection } from "../util";
+import { cls, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
+import { CustomizationController } from "../types/customization_controller";
+import { useCustomizationController } from "../hooks/useCustomizationController";
+
+/**
+ * @group Components
+ */
+export interface EntityViewProps<M extends Record<string, any>> {
+    entity: Entity<M>;
+    collection: EntityCollection<M>;
+    path: string;
+    className?: string;
+}
+
+export function EntityView<M extends Record<string, any>>(
+    {
+        entity,
+        collection,
+        path,
+        className
+    }: EntityViewProps<M>) {
+
+    const customizationController: CustomizationController = useCustomizationController();
+    const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
+        collection,
+        path,
+        entityId: entity.id,
+        values: entity.values,
+        propertyConfigs: customizationController.propertyConfigs
+    }), [collection, path, entity, customizationController.propertyConfigs]);
+
+    const properties: ResolvedProperties = resolvedCollection.properties;
+
+    return (
+        <div className={"w-full " + className}>
+            <div className={"w-full mb-4"}>
+                <div className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
+                    <div className="flex items-center w-1/4">
+                        <span className="pl-2 text-sm text-surface-600">Id</span>
+                    </div>
+                    <div
+                        className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
+                        <span className="flex-grow mr-2">{entity.id}</span>
+                        {customizationController?.entityLinkBuilder &&
+                            <a href={customizationController.entityLinkBuilder({ entity })}
+                               rel="noopener noreferrer"
+                               target="_blank">
+                                <IconButton>
+                                    <OpenInNewIcon
+                                        size={"small"}/>
+                                </IconButton>
+                            </a>}
+                    </div>
+                </div>
+                {Object.entries(properties)
+                    .map(([key, property]) => {
+                        const value = entity.values?.[key];
+                        return (
+                            <div
+                                key={`reference_previews_${key}`}
+                                className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
+                                <div className="flex items-center w-1/4">
+                                    <span className="pl-2 text-sm text-surface-600">{property.name}</span>
+                                </div>
+                                <div
+                                    className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
+                                    <PropertyPreview
+                                        propertyKey={key}
+                                        value={value}
+                                        // entity={entity}
+                                        property={property}
+                                        size={"medium"}/>
+                                </div>
+                            </div>
+                        )
+                    })}
+            </div>
+        </div>
+    );
+}

package/src/components/ErrorView.tsx

@@ -17,7 +17,7 @@ export interface ErrorViewProps {
  * @param title
  * @param error
  * @param tooltip
- * @constructor
+
  * @group Components
  */
 export function ErrorView({
@@ -26,13 +26,13 @@ export function ErrorView({
                               tooltip
                           }: ErrorViewProps): React.ReactElement {
     const component = error instanceof Error ? error.message : error;
-    console.error("ErrorView", error)
+    console.warn("ErrorView", error)
 
     const body = (
         <div
             className="flex items-center m-2">
-            <ErrorIcon size={"small"} color={"error"}/>
-            <div className="pl-2">
+            <ErrorIcon className={"mx-2"} size={"small"} color={"error"}/>
+            <div className="pl-4">
                 {title && <Typography
                     variant={"body2"}
                     className="font-medium">{title}</Typography>}

package/src/components/FieldCaption.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Typography } from "@firecms/ui";
+
+export function FieldCaption({
+                                    error,
+                                    children
+                                }: { error?: boolean, children?: React.ReactNode }) {
+    if (!children) return null;
+    return (
+        <Typography variant={"caption"} color={error ? "error" : "secondary"} className={"ml-3.5 mt-0.5"}>
+            {children}
+        </Typography>
+    );
+}