@firecms/core 3.0.0-alpha.21 → 3.0.0-alpha.25

package/src/core/components/EntityCollectionView/EntityCollectionView.tsx

@@ -10,6 +10,7 @@ import {
     FilterValues,
     PartialEntityCollection,
     PropertyOrBuilder,
+    ResolvedProperty,
     SaveEntityProps,
     SelectionController
 } from "../../../types";
@@ -45,12 +46,12 @@ import {
 import { useUserConfigurationPersistence } from "../../../hooks/useUserConfigurationPersistence";
 import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import { useEntityCollectionTableController } from "../EntityCollectionTable/useEntityCollectionTableController";
-import { Button, cn, Typography } from "../../../components";
+import { Button, cn, IconButton, TextField, Tooltip, Typography } from "../../../components";
 import { Popover } from "../../../components/Popover";
 import { Skeleton } from "../../../components/Skeleton";
 import { setIn } from "formik";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
-import { KeyboardTabIcon } from "../../../icons";
+import { KeyboardTabIcon, SearchIcon } from "../../../icons";
 import { useColumnIds } from "./useColumnsIds";
 import { PopupFormField } from "../EntityCollectionTable/internal/popup_field/PopupFormField";
 import { GetPropertyForProps } from "../EntityCollectionTable/EntityCollectionTableProps";
@@ -228,6 +229,17 @@ export const EntityCollectionView = React.memo(
             setLastDeleteTimestamp(Date.now());
         }, [setSelectedEntities]);
 
+        let AddColumnComponent: React.ComponentType<{
+            fullPath: string,
+            parentPathSegments: string[],
+            collection: EntityCollection;
+        }> | undefined
+
+        // we are only using the first plugin that implements this
+        if (context?.plugins) {
+            AddColumnComponent = context.plugins.find(plugin => plugin.collectionView?.AddColumnComponent)?.collectionView?.AddColumnComponent;
+        }
+
         const onCollectionModifiedForUser = useCallback((path: string, partialCollection: PartialEntityCollection<M>) => {
             if (userConfigPersistence) {
                 const currentStoredConfig = userConfigPersistence.getCollectionConfig(path);
@@ -305,7 +317,11 @@ export const EntityCollectionView = React.memo(
             fields: context.fields
         }), [collection, fullPath]);
 
-        const getPropertyFor = useCallback(({ propertyKey, propertyValue, entity }: GetPropertyForProps<M>) => {
+        const getPropertyFor = useCallback(({
+                                                propertyKey,
+                                                propertyValue,
+                                                entity
+                                            }: GetPropertyForProps<M>) => {
             let propertyOrBuilder: PropertyOrBuilder<any, M> | undefined = getPropertyInPath<M>(collection.properties, propertyKey);
 
             // we might not find the property in the collection if combining property builders and map spread
@@ -485,6 +501,42 @@ export const EntityCollectionView = React.memo(
 
         </Popover>;
 
+        function buildAdditionalHeaderWidget({
+                                                 property,
+                                                 propertyKey,
+                                                 onHover
+                                             }: {
+            property: ResolvedProperty,
+            propertyKey: string,
+            onHover: boolean
+        }) {
+            if (!context.plugins)
+                return null;
+            return <>
+                {context.plugins.filter(plugin => plugin.collectionView?.HeaderAction)
+                    .map((plugin, i) => {
+                        const HeaderAction = plugin.collectionView!.HeaderAction!;
+                        return <HeaderAction
+                            onHover={onHover}
+                            key={`plugin_header_action_${i}`}
+                            propertyKey={propertyKey}
+                            property={property}
+                            fullPath={fullPath}
+                            parentPathSegments={parentPathSegments ?? []}/>;
+                    })}
+            </>;
+        }
+
+        const addColumnComponentInternal = AddColumnComponent
+            ? function () {
+                if (typeof AddColumnComponent === "function")
+                    return <AddColumnComponent fullPath={fullPath}
+                                               parentPathSegments={parentPathSegments ?? []}
+                                               collection={collection}/>;
+                return null;
+            }
+            : undefined;
+
         return (
             <div className={cn("overflow-hidden h-full w-full", className)}
                  ref={containerRef}>
@@ -519,6 +571,11 @@ export const EntityCollectionView = React.memo(
                     />}
                     hoverRow={hoverRow}
                     inlineEditing={checkInlineEditing()}
+                    AdditionalHeaderWidget={buildAdditionalHeaderWidget}
+                    AddColumnComponent={addColumnComponentInternal}
+                    additionalIDHeaderWidget={<EntityIdHeaderWidget
+                        path={fullPath}
+                        collection={collection}/>}
                 />
 
                 <PopupFormField
@@ -633,4 +690,53 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityC
     return { properties: { [key]: { columnWidth: width } } } as PartialEntityCollection;
 }
 
-
+function EntityIdHeaderWidget({ collection, path }: {
+    collection: EntityCollection,
+    path: string
+}) {
+    const [openPopup, setOpenPopup] = React.useState(false);
+    const [searchString, setSearchString] = React.useState("");
+    const sideEntityController = useSideEntityController();
+    return (
+        <Tooltip title={!openPopup ? "Find by ID" : undefined}>
+            <Popover
+                open={openPopup}
+                onOpenChange={setOpenPopup}
+                trigger={
+                    <IconButton size={"small"}>
+                        <SearchIcon size={"small"}/>
+                    </IconButton>
+                }
+            >
+                <form noValidate={true}
+                      onSubmit={(e) => {
+                          e.preventDefault();
+                          if (!searchString) return;
+                          setOpenPopup(false);
+                          return sideEntityController.open({
+                              entityId: searchString,
+                              path,
+                              collection,
+                              updateUrl: true
+                          });
+                      }}
+                      className={"text-gray-900 dark:text-white w-96 max-w-full"}>
+
+                    <div className="flex p-4 w-full gap-4">
+                        <TextField
+                            placeholder={"Find entity by ID"}
+                            size={"small"}
+                            onChange={(e) => setSearchString(e.target.value)}
+                            value={searchString}
+                            className={"flex-grow"}/>
+                        <Button variant={"outlined"}
+                                disabled={!searchString}
+                                type={"submit"}
+                        >Go</Button>
+                    </div>
+                </form>
+            </Popover>
+
+        </Tooltip>
+    );
+}

package/src/core/components/VirtualTable/VirtualTable.tsx

@@ -26,7 +26,10 @@ import { AssignmentIcon } from "../../../icons";
 const VirtualListContext = createContext<VirtualTableContextProps<any>>({} as any);
 VirtualListContext.displayName = "VirtualListContext";
 
-type InnerElementProps = { children: React.ReactNode, style: any };
+type InnerElementProps = {
+    children: React.ReactNode,
+    style: any
+};
 
 // eslint-disable-next-line react/display-name
 const innerElementType = forwardRef<HTMLDivElement, InnerElementProps>(({
@@ -107,7 +110,8 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              createFilterField,
                                                              rowClassName,
                                                              className,
-                                                             endAdornment
+                                                             endAdornment,
+                                                             AddColumnComponent
                                                          }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
@@ -186,11 +190,11 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
 
         const maxScroll = Math.max((data?.length ?? 0) * getRowHeight(size) - bounds.height, 0);
         const onEndReachedInternal = useCallback((scrollOffset: number) => {
-            if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + 500) {
+            if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + 600) {
                 endReachCallbackThreshold.current = scrollOffset;
                 onEndReached();
             }
-        }, [data, onEndReached]);
+        }, [data?.length, onEndReached]);
 
         const onScroll = useCallback(({
                                           scrollOffset,
@@ -200,7 +204,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             scrollOffset: number,
             scrollUpdateWasRequested: boolean;
         }) => {
-            if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - 500))
+            if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - 600))
                 onEndReachedInternal(scrollOffset);
         }, [maxScroll, onEndReachedInternal]);
 
@@ -278,7 +282,8 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                         hoverRow: hoverRow ?? false,
                         createFilterField,
                         rowClassName,
-                        endAdornment
+                        endAdornment,
+                        AddColumnComponent
                     }}>
 
                     <MemoizedList
@@ -288,6 +293,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                         height={bounds.height}
                         itemCount={(data?.length ?? 0) + (endAdornment ? 1 : 0)}
                         onScroll={onScroll}
+                        includeAddColumn={Boolean(AddColumnComponent)}
                         itemSize={getRowHeight(size)}/>
 
                 </VirtualListContext.Provider>
@@ -303,7 +309,8 @@ function MemoizedList({
                           height,
                           itemCount,
                           onScroll,
-                          itemSize
+                          itemSize,
+                          includeAddColumn
                       }: {
     outerRef: RefObject<HTMLDivElement>;
     width: number;
@@ -315,6 +322,7 @@ function MemoizedList({
         scrollUpdateWasRequested: boolean;
     }) => void;
     itemSize: number;
+    includeAddColumn?: boolean;
 }) {
 
     const Row = useCallback(({
@@ -360,6 +368,7 @@ function MemoizedList({
                             top: `calc(${style.top}px + 48px)`
                         }}
                         size={size}>
+
                         {columns.map((column: VirtualTableColumn, columnIndex: number) => {
                             const cellData = rowData && rowData[column.key];
                             return <VirtualTableCell
@@ -373,6 +382,9 @@ function MemoizedList({
                                 rowIndex={index}
                                 columnIndex={columnIndex}/>;
                         })}
+
+                        {includeAddColumn && <div className={"w-20"}/>}
+
                     </VirtualTableRow>
                 );
             }}

package/src/core/components/VirtualTable/VirtualTableHeader.tsx

@@ -3,12 +3,9 @@ import equal from "react-fast-compare";
 
 import { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from "./VirtualTableProps";
 import { ErrorBoundary } from "../ErrorBoundary";
-import { Button, IconButton } from "../../../components";
+import { Badge, Button, cn, IconButton, Popover } from "../../../components";
 import { defaultBorderMixin } from "../../../styles";
-import { ArrowUpwardIcon, ExpandMoreIcon } from "../../../icons";
-import { Popover } from "../../../components/Popover";
-import { Badge } from "../../../components/Badge";
-import { cn } from "../../../components/util/cn";
+import { ArrowUpwardIcon, FilterListIcon } from "../../../icons";
 
 interface FilterFormProps<T> {
     column: VirtualTableColumn<T>;
@@ -40,6 +37,7 @@ type VirtualTableHeaderProps<M extends Record<string, any>> = {
     onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => void;
     onClickResizeColumn?: (columnIndex: number, column: VirtualTableColumn) => void;
     createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
+    AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
 };
 
 export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
@@ -53,7 +51,8 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                                                    filter,
                                                                    column,
                                                                    onClickResizeColumn,
-                                                                   createFilterField
+                                                                   createFilterField,
+                                                                   AdditionalHeaderWidget
                                                                }: VirtualTableHeaderProps<M>) {
 
         const [onHover, setOnHover] = useState(false);
@@ -113,26 +112,31 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
 
                         </div>
                     </div>
-
-                    {column.sortable && (sort || hovered || openFilter) &&
-                        <Badge color="secondary"
-                               invisible={!sort}>
-                            <IconButton
-                                size={"small"}
-                                className={onHover || openFilter ? "bg-white dark:bg-gray-950" : undefined}
-                                onClick={() => {
-                                    onColumnSort(column.key as Extract<keyof M, string>);
-                                }}
-                            >
-                                {!sort &&
-                                    <ArrowUpwardIcon/>}
-                                {sort === "asc" &&
-                                    <ArrowUpwardIcon/>}
-                                {sort === "desc" &&
-                                    <ArrowUpwardIcon className={"rotate-180"}/>}
-                            </IconButton>
-                        </Badge>
-                    }
+                    <>
+
+                        {AdditionalHeaderWidget &&
+                            <AdditionalHeaderWidget onHover={onHover || openFilter}/>}
+
+                        {column.sortable && (sort || hovered || openFilter) &&
+                            <Badge color="secondary"
+                                   invisible={!sort}>
+                                <IconButton
+                                    size={"small"}
+                                    className={onHover || openFilter ? "bg-white dark:bg-gray-950" : undefined}
+                                    onClick={() => {
+                                        onColumnSort(column.key as Extract<keyof M, string>);
+                                    }}
+                                >
+                                    {!sort &&
+                                        <ArrowUpwardIcon/>}
+                                    {sort === "asc" &&
+                                        <ArrowUpwardIcon/>}
+                                    {sort === "desc" &&
+                                        <ArrowUpwardIcon className={"rotate-180"}/>}
+                                </IconButton>
+                            </Badge>
+                        }
+                    </>
 
                     {column.filter && createFilterField && <div>
                         <Badge color="secondary"
@@ -146,7 +150,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                         className={onHover || openFilter ? "bg-white dark:bg-gray-950" : undefined}
                                         size={"small"}
                                         onClick={handleSettingsClick}>
-                                        <ExpandMoreIcon/>
+                                        <FilterListIcon size={"small"}/>
                                     </IconButton>}
                             >
                                 {column.filter &&
@@ -218,11 +222,7 @@ function FilterForm<M>({
 
     if (!filterField) return null;
     return (
-        <div className={
-            cn(
-                "text-gray-900 dark:text-white",
-            )
-        }>
+        <div className={"text-gray-900 dark:text-white"}>
             <div
                 className={cn(defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b")}>
                 {column.title ?? id}

package/src/core/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -16,7 +16,8 @@ export const VirtualTableHeaderRow = ({
                                           filter,
                                           onColumnResize,
                                           onColumnResizeEnd,
-                                          createFilterField
+                                          createFilterField,
+                                          AddColumnComponent
                                       }: VirtualTableContextProps<any>) => {
 
     const columnRefs = columns.map(() => createRef<HTMLDivElement>());
@@ -119,9 +120,13 @@ export const VirtualTableHeaderRow = ({
                         onColumnSort={onColumnSort}
                         onClickResizeColumn={onClickResizeColumn}
                         column={column}
-                        createFilterField={createFilterField}/>
+                        createFilterField={createFilterField}
+                        AdditionalHeaderWidget={column.AdditionalHeaderWidget}/>
                 </ErrorBoundary>;
             })}
+
+            {AddColumnComponent && <AddColumnComponent/>}
+
         </div>
     );
 };

package/src/core/components/VirtualTable/VirtualTableProps.tsx

@@ -136,6 +136,12 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     endAdornment?: React.ReactNode;
 
+    /**
+     * If adding this callback, a button to add a new column is displayed.
+     * @param column
+     */
+    AddColumnComponent?: React.ComponentType;
+
 }
 
 export type CellRendererParams<T extends any> = {
@@ -206,7 +212,15 @@ export interface VirtualTableColumn<CustomProps extends any = any> {
      */
     resizable?: boolean;
 
+    /**
+     * Custom props passed to the cell renderer
+     */
     custom?: CustomProps;
+
+    /**
+     * Additional children to be rendered in the header when hovering
+     */
+    AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
 }
 
 /**

package/src/core/components/VirtualTable/VirtualTableRow.tsx

@@ -15,7 +15,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
                                     size,
                                     style,
                                     hoverRow,
-                                    rowClassName
+                                    rowClassName,
                                 }: VirtualTableRowProps<T>) {
 
         const onClick = useCallback((event: React.SyntheticEvent) => onRowClick

package/src/core/components/VirtualTable/types.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import {
     CellRendererParams,
     OnRowClickParams,
@@ -39,4 +40,5 @@ export type VirtualTableContextProps<T extends any> = {
     createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
     rowClassName?: (rowData: T) => string | undefined;
     endAdornment?: React.ReactNode;
+    AddColumnComponent?: React.ComponentType;
 };

package/src/core/util/make_properties_editable.ts

@@ -1,4 +1,5 @@
-import { Properties } from "../../types";
+import { Properties, PropertiesOrBuilders } from "../../types";
+import { isPropertyBuilder } from "./entities";
 
 export function makePropertiesEditable(properties: Properties) {
     Object.keys(properties).forEach((key) => {
@@ -9,3 +10,19 @@ export function makePropertiesEditable(properties: Properties) {
         }
     });
 }
+
+export function makePropertiesNonEditable(properties: PropertiesOrBuilders): PropertiesOrBuilders {
+    return Object.entries(properties).reduce((acc, [key, property]) => {
+        if (!isPropertyBuilder(property) && property.dataType === "map" && property.properties) {
+            const updated = { ...property, properties: makePropertiesNonEditable(property.properties as PropertiesOrBuilders) };
+            acc[key] = updated;
+        }
+        if (isPropertyBuilder(property)) {
+            acc[key] = property;
+        } else {
+            acc[key] = { ...property, editable: false };
+        }
+        return acc;
+    }, {} as PropertiesOrBuilders);
+
+}

package/src/core/util/property_utils.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { FieldConfig, PropertiesOrBuilders, PropertyOrBuilder, ResolvedProperty } from "../../types";
+import { EntityCollection, FieldConfig, PropertiesOrBuilders, PropertyOrBuilder, ResolvedProperty } from "../../types";
 import { getFieldConfig } from "../form_field_configs";
 import { isPropertyBuilder } from "./entities";
 import { resolveProperty } from "./resolutions";
@@ -123,3 +123,8 @@ export function getPropertiesWithPropertiesOrder<M extends Record<string, any>>(
     });
     return result;
 }
+
+export function getDefaultPropertiesOrder(collection: EntityCollection<any>): string[] {
+    if (collection.propertiesOrder) return collection.propertiesOrder;
+    return [...Object.keys(collection.properties), ...(collection.additionalFields ?? []).map(field => field.id)];
+}

package/src/form/components/LabelWithIcon.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Typography } from "../../components/Typography";
 
 interface LabelWithIconProps {
     icon: React.ReactNode;
@@ -27,8 +26,8 @@ export function LabelWithIcon({
 
             {icon}
 
-            <Typography component={"span"}
-                        className={`font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`}>{(title ?? "") + (required ? " *" : "")}</Typography>
+            <span
+                className={`font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`}>{(title ?? "") + (required ? " *" : "")}</span>
 
         </span>
     );

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -4,9 +4,8 @@ import { FieldProps, PreviewType } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { useClearRestoreValue } from "../../hooks";
 import { getIconForProperty } from "../../core";
-import { IconButton, TextField } from "../../components";
+import { Collapse, IconButton, TextField } from "../../components";
 import { PropertyPreview } from "../../preview";
-import { Collapse } from "../../components/Collapse";
 import { ClearIcon } from "../../icons";
 
 interface TextFieldProps<T extends string | number> extends FieldProps<T> {

package/src/types/collections.ts

@@ -477,6 +477,8 @@ export type TableController<M extends Record<string, any> = any> = {
                               sortBy?: [string, "asc" | "desc"]) => boolean;
     popupCell?: SelectedCellProps<M>;
     setPopupCell?: (popupCell?: SelectedCellProps<M>) => void;
+
+    onAddColumn?: (column: string) => void;
 }
 
 export type SelectedCellProps<M extends Record<string, any>> = {

package/src/types/plugins.tsx

@@ -3,7 +3,6 @@ import React, { PropsWithChildren } from "react";
 import { FireCMSContext } from "./firecms_context";
 import { CollectionActionsProps, EntityCollection } from "./collections";
 import { User } from "./user";
-import { FieldConfigId } from "./field_config";
 import { FieldProps, FormContext } from "./fields";
 import { CMSType, Property } from "./properties";
 import { EntityStatus } from "./entities";
@@ -105,6 +104,30 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any> = {
 
     }
 
+    collectionView?: {
+        /**
+         * Use this method to inject widgets to the entity collections header
+         * @param props
+         */
+        HeaderAction?: React.ComponentType<{
+            property: ResolvedProperty,
+            propertyKey: string,
+            fullPath: string,
+            parentPathSegments: string[],
+            onHover: boolean,
+        }>;
+
+        /**
+         * If you add this callback to your plugin, an add button will be added to the collection table.
+         * TODO: Only the first plugin that defines this callback will be used, at the moment.
+         */
+        AddColumnComponent?: React.ComponentType<{
+            fullPath: string,
+            parentPathSegments: string[],
+            collection: EntityCollection;
+        }>;
+    }
+
 }
 
 /**