@firecms/core 3.0.0-canary.1 → 3.0.0-canary.100

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -2,9 +2,8 @@ import React, { useCallback } from "react";
 
 import equal from "react-fast-compare"
 
-import { getRowHeight } from "./common";
 import { VirtualTableRowProps } from "./types";
-import { cn } from "@firecms/ui";
+import { cls } from "@firecms/ui";
 
 export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
     function VirtualTableRow<T>({
@@ -12,7 +11,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
                                     rowIndex,
                                     children,
                                     onRowClick,
-                                    size,
+                                    rowHeight,
                                     style,
                                     hoverRow,
                                     rowClassName
@@ -29,7 +28,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
 
         return (
             <div
-                className={cn(
+                className={cls(
                     "flex min-w-full text-sm border-b border-gray-200 dark:border-gray-800 border-opacity-40 dark:border-opacity-40",
                     rowClassName ? rowClassName(rowData) : "",
                     {
@@ -40,7 +39,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
                 onClick={onClick}
                 style={{
                     ...(style),
-                    height: getRowHeight(size),
+                    height: rowHeight,
                     width: "fit-content"
                 }}
             >

package/src/components/VirtualTable/fields/VirtualTableDateField.tsx

@@ -25,7 +25,7 @@ export function VirtualTableDateField(props: {
     return (
         <DateTimeField
             value={internalValue ?? undefined}
-            onChange={(dateValue) => updateValue(dateValue)}
+            onChange={(dateValue) => updateValue(dateValue ?? null)}
             size={"medium"}
             invisible={true}
             className={"w-full h-full"}

package/src/components/VirtualTable/types.tsx

@@ -5,14 +5,13 @@ import {
     OnVirtualTableColumnResizeParams,
     VirtualTableColumn,
     VirtualTableFilterValues,
-    VirtualTableSize,
     VirtualTableWhereFilterOp
 } from "./VirtualTableProps";
 import { FilterFormFieldProps } from "./VirtualTableHeader";
 
 export type VirtualTableRowProps<T> = {
     style: any,
-    size: VirtualTableSize,
+    rowHeight: number,
     rowData: T;
     rowIndex: number;
     onRowClick?: (props: OnRowClickParams<any>) => void;
@@ -24,7 +23,7 @@ export type VirtualTableRowProps<T> = {
 
 export type VirtualTableContextProps<T extends any> = {
     data?: T[];
-    size?: VirtualTableSize,
+    rowHeight?: number,
     columns: VirtualTableColumn[];
     cellRenderer: React.ComponentType<CellRendererParams<T>>;
     currentSort: "asc" | "desc" | undefined;

package/src/components/{EntityCollectionTable/internal → common}/default_entity_actions.tsx

@@ -1,6 +1,6 @@
-import { EntityAction } from "../../../types";
 import { ArchiveIcon, DeleteIcon, FileCopyIcon, KeyboardTabIcon, OpenInNewIcon } from "@firecms/ui";
-import { DeleteEntityDialog } from "../../DeleteEntityDialog";
+import { EntityAction } from "../../types";
+import { DeleteEntityDialog } from "../DeleteEntityDialog";
 
 export const editEntityAction: EntityAction = {
     icon: <KeyboardTabIcon/>,
@@ -9,21 +9,23 @@ export const editEntityAction: EntityAction = {
     onClick({
                 entity,
                 collection,
+                fullPath,
                 context,
                 highlightEntity,
-                unhighlightEntity
+                unhighlightEntity,
             }): Promise<void> {
         highlightEntity?.(entity);
         context.analyticsController?.onAnalyticsEvent?.("entity_click", {
             path: entity.path,
             entityId: entity.id
         });
+        const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path);
         context.sideEntityController.open({
             entityId: entity.id,
-            path: entity.path,
+            path,
             collection,
             updateUrl: true,
-            onClose: () => unhighlightEntity?.(entity)
+            onClose: () => unhighlightEntity?.(entity),
         });
         return Promise.resolve(undefined);
     }
@@ -37,7 +39,7 @@ export const copyEntityAction: EntityAction = {
                 collection,
                 context,
                 highlightEntity,
-                unhighlightEntity
+                unhighlightEntity,
             }): Promise<void> {
         highlightEntity?.(entity);
         context.analyticsController?.onAnalyticsEvent?.("copy_entity_click", {
@@ -50,11 +52,12 @@ export const copyEntityAction: EntityAction = {
             copy: true,
             collection,
             updateUrl: true,
-            onClose: () => unhighlightEntity?.(entity)
+            onClose: () => unhighlightEntity?.(entity),
         });
         return Promise.resolve(undefined);
     }
 }
+
 export const archiveEntityAction: EntityAction = {
     icon: <ArchiveIcon/>,
     name: "Archive",
@@ -69,6 +72,7 @@ export const archiveEntityAction: EntityAction = {
         return Promise.resolve(undefined);
     }
 }
+
 export const openWebsiteAction: EntityAction = {
     icon: <OpenInNewIcon/>,
     name: "See in website",

package/src/components/common/index.ts

@@ -3,3 +3,4 @@ export * from "./useDebouncedData";
 export * from "./useColumnsIds";
 export * from "./useDataSourceEntityCollectionTableController";
 export * from "./useTableSearchHelper";
+export * from "./default_entity_actions";

package/src/components/{VirtualTable/common.tsx → common/table_height.tsx}

@@ -1,6 +1,9 @@
-import { VirtualTableSize } from "./VirtualTableProps";
+/**
+ * @group Components
+ */
+export type TableSize = "xs" | "s" | "m" | "l" | "xl";
 
-export function getRowHeight(size: VirtualTableSize): number {
+export function getRowHeight(size: TableSize): number {
     switch (size) {
         case "xl":
             return 400;

package/src/components/common/types.tsx

@@ -1,4 +1,4 @@
-import { CollectionSize, Entity, FireCMSContext, ResolvedProperty, SelectedCellProps } from "../../types";
+import { CollectionSize, ResolvedProperty, SelectedCellProps } from "../../types";
 
 export type EntityCollectionTableController<M extends Record<string, any>> = {
 
@@ -31,14 +31,12 @@ export type EntityCollectionTableController<M extends Record<string, any>> = {
  * Props passed in a callback when the content of a cell in a table has been edited
  * @group Collection components
  */
-export interface OnCellValueChangeParams<T = any, M extends Record<string, any> = any> {
+export interface OnCellValueChangeParams<T = any, D = any> {
     value: T,
     propertyKey: string,
-    entity: Entity<M>,
+    data?: D,
     onValueUpdated: () => void
-    setError: (e: Error) => void
-    fullPath: string
-    context: FireCMSContext
+    setError: (e: Error | undefined) => void
 }
 
 /**

package/src/components/common/useColumnsIds.tsx

@@ -7,8 +7,16 @@ const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
 
 export function useColumnIds<M extends Record<string, any>>(collection: ResolvedEntityCollection<M>, includeSubcollections: boolean): PropertyColumnConfig[] {
     return useMemo(() => {
-        if (collection.propertiesOrder)
-            return hideAndExpandKeys(collection, collection.propertiesOrder);
+        if (collection.propertiesOrder) {
+            const propertyColumnConfigs = hideAndExpandKeys(collection, collection.propertiesOrder);
+            if (collection.collectionGroup) {
+                propertyColumnConfigs.push({
+                    key: COLLECTION_GROUP_PARENT_ID,
+                    disabled: true
+                });
+            }
+            return propertyColumnConfigs;
+        }
         return getDefaultColumnKeys(collection, includeSubcollections);
     }, [collection, includeSubcollections]);
 }
@@ -98,3 +106,16 @@ export function getColumnKeysForProperty(property: ResolvedProperty, key: string
         disabled: disabled || Boolean(property.disabled) || Boolean(property.readOnly)
     }];
 }
+
+export function getFormFieldKeys(collection: EntityCollection): string[] {
+    const propertyKeys = Object.keys(collection.properties);
+    const additionalFields = collection.additionalFields ?? [];
+    const allKeys = [
+        ...propertyKeys,
+        ...additionalFields.map((field) => field.key)
+    ];
+    if (collection.propertiesOrder) {
+        return collection.propertiesOrder.filter(key => allKeys.includes(key));
+    }
+    return allKeys;
+}

package/src/components/common/useDataSourceEntityCollectionTableController.tsx

@@ -12,6 +12,7 @@ import {
     User
 } from "../../types";
 import { useDebouncedData } from "./useDebouncedData";
+import equal from "react-fast-compare"
 
 const DEFAULT_PAGE_SIZE = 50;
 
@@ -31,6 +32,10 @@ export type DataSourceEntityCollectionTableControllerProps<M extends Record<stri
     entitiesDisplayedFirst?: Entity<M>[];
 
     lastDeleteTimestamp?: number;
+
+    /**
+     * Force filter to be applied to the table.
+     */
     forceFilter?: FilterValues<string>;
 }
 
@@ -65,7 +70,7 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
 
     const [popupCell, setPopupCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
     const navigation = useNavigationController();
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
     const resolvedPath = useMemo(() => navigation.resolveAliasesFrom(fullPath), [fullPath, navigation.resolveAliasesFrom]);
 
     const forceFilter = forceFilterFromProps ?? forceFilterFromCollection;
@@ -83,6 +88,12 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
         return initialSort;
     }, [initialSort, forceFilter]);
 
+    useEffect(() => {
+        if (!equal(forceFilter, filterValues)) {
+            setFilterValues(forceFilter)
+        }
+    }, [forceFilter]);
+
     const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? initialFilter ?? undefined);
     const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>(initialSortInternal);
 

package/src/components/common/useTableSearchHelper.ts

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { EntityCollection } from "../../types";
-import { useCustomizationController, useFireCMSContext } from "../../hooks";
+import { useCustomizationController, useDataSource, useFireCMSContext } from "../../hooks";
 
 export interface UseTableSearchHelperParams<M extends Record<string, any>> {
     collection: EntityCollection<M>;
@@ -9,27 +9,57 @@ export interface UseTableSearchHelperParams<M extends Record<string, any>> {
     parentCollectionIds?: string[];
 }
 
-export function useTableSearchHelper<M extends Record<string, any>>({ collection, fullPath, parentCollectionIds }: UseTableSearchHelperParams<M>) {
+export function useTableSearchHelper<M extends Record<string, any>>({
+                                                                        collection,
+                                                                        fullPath,
+                                                                        parentCollectionIds
+                                                                    }: UseTableSearchHelperParams<M>) {
 
     const context = useFireCMSContext();
     const customizationController = useCustomizationController();
+    const dataSource = useDataSource();
 
     const [textSearchLoading, setTextSearchLoading] = useState<boolean>(false);
     const [textSearchInitialised, setTextSearchInitialised] = useState<boolean>(false);
+
     let onTextSearchClick: (() => void) | undefined;
     let textSearchEnabled = Boolean(collection.textSearchEnabled);
-    if (customizationController?.plugins) {
-        const addTextSearchClickListener = customizationController.plugins?.find(p => Boolean(p.collectionView?.onTextSearchClick));
+
+    const props = {
+        context,
+        path: fullPath,
+        collection,
+        parentCollectionIds
+    };
+
+    const searchBlocked = customizationController.plugins?.find(p => {
+        return p.collectionView?.blockSearch?.(props);
+    });
+
+    const addTextSearchClickListener = Boolean(dataSource?.initTextSearch) || customizationController.plugins?.find(p => Boolean(p.collectionView?.onTextSearchClick));
+
+    if (addTextSearchClickListener) {
 
         onTextSearchClick = addTextSearchClickListener
             ? () => {
                 setTextSearchLoading(true);
-                Promise.all(customizationController.plugins?.map(p => {
-                    if (p.collectionView?.onTextSearchClick)
-                        return p.collectionView.onTextSearchClick({ context, path: fullPath, collection, parentCollectionIds });
-                    return Promise.resolve(true);
-                }) as Promise<boolean>[])
-                    .then((res) => {
+                const promises: Promise<boolean>[] = [];
+                if (dataSource?.initTextSearch && !searchBlocked) {
+                    promises.push(dataSource.initTextSearch(props));
+                }
+                if (searchBlocked) {
+                    customizationController.plugins?.forEach(p => {
+                        if (p.collectionView?.onTextSearchClick)
+                            promises.push(p.collectionView.onTextSearchClick({
+                                context,
+                                path: fullPath,
+                                collection,
+                                parentCollectionIds
+                            }));
+                    })
+                }
+                return Promise.all(promises)
+                    .then((res: boolean[]) => {
                         if (res.every(Boolean)) setTextSearchInitialised(true);
                     })
                     .finally(() => setTextSearchLoading(false));
@@ -39,9 +69,19 @@ export function useTableSearchHelper<M extends Record<string, any>>({ collection
         customizationController.plugins?.forEach(p => {
             if (!textSearchEnabled)
                 if (p.collectionView?.showTextSearchBar) {
-                    textSearchEnabled = p.collectionView.showTextSearchBar({ context, path: fullPath, collection, parentCollectionIds });
+                    textSearchEnabled = p.collectionView.showTextSearchBar({
+                        context,
+                        path: fullPath,
+                        collection,
+                        parentCollectionIds
+                    });
                 }
         })
     }
-    return { textSearchLoading, textSearchInitialised, onTextSearchClick, textSearchEnabled };
+    return {
+        textSearchLoading,
+        textSearchInitialised,
+        onTextSearchClick,
+        textSearchEnabled
+    };
 }

package/src/components/index.tsx

@@ -1,8 +1,8 @@
 export type { ErrorViewProps } from "./ErrorView";
 export { ErrorView } from "./ErrorView";
 
-export type { EntityPreviewProps } from "./EntityPreview";
-export { EntityPreview } from "./EntityPreview";
+export type { EntityViewProps } from "./EntityView";
+export { EntityView } from "./EntityView";
 
 export type { ReferenceSelectionInnerProps } from "./ReferenceTable/ReferenceSelectionTable";
 export { ReferenceSelectionTable } from "./ReferenceTable/ReferenceSelectionTable";
@@ -13,8 +13,10 @@ export * from "./common";
 
 export * from "./HomePage";
 export * from "./SelectableTable/SelectableTable";
+export * from "./SelectableTable/SelectableTableContext";
 export * from "./EntityCollectionView/EntityCollectionView";
 export * from "./EntityCollectionView/EntityCollectionViewActions";
+export * from "./EntityCollectionView/useSelectionController";
 
 export * from "./PropertyConfigBadge";
 
@@ -27,9 +29,9 @@ export * from "./DeleteConfirmationDialog";
 
 export * from "./FireCMSLogo";
 
-export * from "./FireCMSAppBar";
+export * from "../core/DefaultAppBar";
 
 export * from "./ArrayContainer";
 export * from "./ReferenceWidget";
-export * from "./LabelWithIcon";
 export * from "./SearchIconsView";
+export * from "./FieldCaption";

package/src/contexts/AuthControllerContext.tsx

@@ -1,4 +1,4 @@
 import React from "react";
 import { AuthController } from "../types";
 
-export const AuthControllerContext = React.createContext<AuthController>({} as AuthController);
+export const AuthControllerContext = React.createContext<AuthController<any, any>>({} as AuthController<any, any>);

package/src/contexts/DialogsProvider.tsx

@@ -18,14 +18,14 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
         if (dialogEntries.length === 0)
             return;
 
-        const updatedPanels = [...dialogEntries.slice(0, -1)];
+        const updatedPanels = [...dialogEntriesRef.current.slice(0, -1)];
         updateDialogEntries(updatedPanels);
 
     }, [dialogEntries]);
 
     const open = useCallback((dialogEntry: DialogControllerEntryProps) => {
 
-        const updatedPanels = [...dialogEntries, dialogEntry];
+        const updatedPanels = [...dialogEntriesRef.current, dialogEntry];
         updateDialogEntries(updatedPanels);
 
         return {

package/src/{components/FireCMSAppBar.tsx → core/DefaultAppBar.tsx}

@@ -1,10 +1,10 @@
 import React from "react";
 
-import { Link as ReactLink } from "react-router-dom";
-import { ErrorBoundary } from "../components";
+import { Link as ReactLink, useNavigate } from "react-router-dom";
+import { ErrorBoundary, FireCMSLogo } from "../components";
 import {
     Avatar,
-    cn,
+    cls,
     DarkModeIcon,
     IconButton,
     LightModeIcon,
@@ -16,9 +16,11 @@ import {
 } from "@firecms/ui";
 import { useAuthController, useLargeLayout, useModeController, useNavigationController } from "../hooks";
 import { User } from "../types";
+import { useApp } from "../app/useApp";
 
-export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
-    title: string;
+export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
+
+    title?: React.ReactNode;
     /**
      * A component that gets rendered on the upper side of the main toolbar
      */
@@ -28,14 +30,14 @@ export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
 
     dropDownActions?: React.ReactNode;
 
-    includeDrawer?: boolean;
-
-    drawerOpen: boolean;
+    includeModeToggle?: boolean;
 
     className?: string;
 
     style?: React.CSSProperties;
 
+    logo?: string;
+
     user?: User;
 } & ADDITIONAL_PROPS;
 
@@ -43,22 +45,24 @@ export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
  * This component renders the main app bar of FireCMS.
  * You will likely not need to use this component directly.
  *
- * @param title
- * @param toolbarExtraWidget
- * @param drawerOpen
- * @constructor
+
  */
-export const FireCMSAppBar = function FireCMSAppBar({
+export const DefaultAppBar = function DefaultAppBar({
                                                         title,
                                                         endAdornment,
                                                         startAdornment,
-                                                        drawerOpen,
                                                         dropDownActions,
-                                                        includeDrawer,
+                                                        includeModeToggle = true,
                                                         className,
                                                         style,
                                                         user: userProp
-                                                    }: FireCMSAppBarProps) {
+                                                    }: DefaultAppBarProps) {
+
+    const {
+        hasDrawer,
+        drawerOpen,
+        logo
+    } = useApp();
     const navigation = useNavigationController();
 
     const authController = useAuthController();
@@ -67,6 +71,8 @@ export const FireCMSAppBar = function FireCMSAppBar({
         toggleMode
     } = useModeController();
 
+    const navigate = useNavigate();
+
     const largeLayout = useLargeLayout();
 
     const user = userProp ?? authController.user;
@@ -89,40 +95,45 @@ export const FireCMSAppBar = function FireCMSAppBar({
     return (
         <div
             style={style}
-            className={cn("pr-2",
+            className={cls("w-full h-16 transition-all ease-in duration-75 fixed",
                 {
-                    "ml-[17rem]": drawerOpen && largeLayout,
-                    "ml-16": includeDrawer && !(drawerOpen && largeLayout) && !startAdornment,
-                    "h-16": true,
+                    "pl-[17rem]": drawerOpen && largeLayout,
+                    "pl-20": hasDrawer && !(drawerOpen && largeLayout),
                     "z-10": largeLayout,
-                    "transition-all": true,
-                    "ease-in": true,
-                    "duration-75": true,
-                    "w-full": !includeDrawer,
-                    "w-[calc(100%-64px)]": includeDrawer && !(drawerOpen && largeLayout),
-                    "w-[calc(100%-17rem)]": includeDrawer && (drawerOpen && largeLayout),
+                    // "w-full": !hasDrawer,
+                    // "w-[calc(100%-64px)]": hasDrawer && !(drawerOpen && largeLayout),
+                    // "w-[calc(100%-17rem)]": hasDrawer && (drawerOpen && largeLayout),
                     "duration-150": drawerOpen && largeLayout,
-                    fixed: true,
                 },
                 className)}>
 
             <div className="flex flex-row gap-2 px-4 h-full items-center">
 
-                {startAdornment}
-
                 {navigation && <div className="mr-8 hidden lg:block">
                     <ReactLink
                         className="visited:text-inherit visited:dark:text-inherit"
                         to={navigation?.basePath ?? "/"}
                     >
-                        <Typography variant="subtitle1"
-                                    noWrap
-                                    className={"ml-2 !font-medium"}>
-                            {title}
-                        </Typography>
+                        <div className={"flex flex-row gap-4"}>
+                            {!hasDrawer && (logo
+                                ? <img src={logo}
+                                       alt="Logo"
+                                       className={cls("w-[32px] h-[32px] object-contain")}/>
+                                : <FireCMSLogo width={"32px"} height={"32px"}/>)}
+
+                            {typeof title === "string"
+                                ? <Typography variant="subtitle1"
+                                              noWrap
+                                              className={"ml-2 !font-medium"}>
+                                    {title}
+                                </Typography>
+                                : title}
+                        </div>
                     </ReactLink>
                 </div>}
 
+                {startAdornment}
+
                 <div className={"flex-grow"}/>
 
                 {endAdornment &&
@@ -130,7 +141,7 @@ export const FireCMSAppBar = function FireCMSAppBar({
                         {endAdornment}
                     </ErrorBoundary>}
 
-                <IconButton
+                {includeModeToggle && <IconButton
                     color="inherit"
                     aria-label="Open drawer"
                     onClick={toggleMode}
@@ -138,13 +149,25 @@ export const FireCMSAppBar = function FireCMSAppBar({
                     {mode === "dark"
                         ? <DarkModeIcon/>
                         : <LightModeIcon/>}
-                </IconButton>
+                </IconButton>}
 
                 <Menu trigger={avatarComponent}>
+                    {user && <div className={"px-4 py-2 mb-2"}>
+                        {user.displayName && <Typography variant={"body1"} color={"secondary"}>
+                            {user.displayName}
+                        </Typography>}
+                        {user.email && <Typography variant={"body2"} color={"secondary"}>
+                            {user.email}
+                        </Typography>}
+                    </div>}
 
                     {dropDownActions}
 
-                    {!dropDownActions && <MenuItem onClick={authController.signOut}>
+                    {!dropDownActions && <MenuItem onClick={async () => {
+                        await authController.signOut();
+                        // replace current route with home
+                        navigate("/");
+                    }}>
                         <LogoutIcon/>
                         Log Out
                     </MenuItem>}