@firecms/core 3.0.0-beta.7 → 3.0.0-beta.9

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useDebouncedCallback } from "../../../util";
+import { cls, focusedDisabled } from "@firecms/ui";
 
 export function VirtualTableNumberInput(props: {
     error: Error | undefined;
@@ -65,7 +66,7 @@ export function VirtualTableNumberInput(props: {
     return (
         <input
             ref={ref}
-            className="w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-none font-normal leading-normal text-unset"
+            className={cls("w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-none font-normal leading-normal text-unset", focusedDisabled)}
             style={{
                 textAlign: align
             }}

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

@@ -1,5 +1,5 @@
 import { EnumValueConfig } from "../../../types";
-import { ArrayEnumPreview, EnumValuesChip } from "../../../preview";
+import { EnumValuesChip } from "../../../preview";
 import React, { useCallback, useEffect } from "react";
 import { MultiSelect, MultiSelectItem, Select, SelectItem } from "@firecms/ui";
 
@@ -18,9 +18,7 @@ export function VirtualTableSelect(props: {
 }) {
 
     const {
-        name,
         enumValues,
-        error,
         internalValue,
         disabled,
         small,
@@ -41,6 +39,7 @@ export function VirtualTableSelect(props: {
     }, [focused, ref]);
 
     const onChange = useCallback((updatedValue: string | string[]) => {
+        console.trace("onChange");
         if (valueType === "number") {
             if (multiple) {
                 const newValue = (updatedValue as string[]).map((v) => parseFloat(v));
@@ -58,37 +57,27 @@ export function VirtualTableSelect(props: {
         }
     }, [multiple, updateValue, valueType]);
 
-    const renderValue = (enumKey: string | number, index: number) => {
-        if (multiple && Array.isArray(enumKey)) {
-            return <ArrayEnumPreview
-                key={`${enumKey}-${index}`}
-                value={enumKey}
-                name={name}
-                enumValues={enumValues}
-                size={small ? "small" : "medium"}/>;
-        } else {
-            return <EnumValuesChip
-                key={`${enumKey}-${index}`}
-                enumKey={enumKey}
-                enumValues={enumValues}
-                size={small ? "small" : "medium"}/>;
-        }
+    const renderValue = (enumKey?: string | number) => {
+        return <EnumValuesChip
+            key={`${enumKey}`}
+            enumKey={String(enumKey)}
+            enumValues={enumValues}
+            size={small ? "small" : "medium"}/>;
     };
+
     return (
         multiple
             ? <MultiSelect
                 inputRef={ref}
-                containerClassName="w-full h-full"
                 className="w-full h-full p-0 bg-transparent"
                 position={"item-aligned"}
                 disabled={disabled}
-                padding={false}
-                includeFocusOutline={false}
+                includeClear={false}
+                useChips={false}
                 value={validValue
                     ? ((internalValue as any[]).map(v => v.toString()))
                     : ([])}
-                onMultiValueChange={onChange}
-                renderValue={renderValue}>
+                onValueChange={onChange}>
                 {enumValues?.map((enumConfig) => (
                     <MultiSelectItem
                         key={enumConfig.id}
@@ -105,14 +94,11 @@ export function VirtualTableSelect(props: {
                 className="w-full h-full p-0 bg-transparent"
                 position={"item-aligned"}
                 disabled={disabled}
-                multiple={multiple}
                 padding={false}
-                includeFocusOutline={false}
                 value={validValue
-                    ? (multiple ? (internalValue as any[]).map(v => v.toString()) : internalValue?.toString())
-                    : (multiple ? [] : "")}
+                    ? internalValue?.toString()
+                    : ""}
                 onValueChange={onChange}
-                onMultiValueChange={onChange}
                 renderValue={renderValue}>
                 {enumValues?.map((enumConfig) => (
                     <SelectItem

package/src/components/common/useColumnsIds.tsx

@@ -106,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

@@ -80,6 +80,18 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
     const [searchString, setSearchString] = React.useState<string | undefined>();
     const [itemCount, setItemCount] = React.useState<number | undefined>(paginationEnabled ? pageSize : undefined);
 
+    const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
+                                                sortBy?: [string, "asc" | "desc"]) => {
+        if (!dataSource.isFilterCombinationValid)
+            return true;
+        return dataSource.isFilterCombinationValid({
+            path: resolvedPath,
+            collection,
+            filterValues,
+            sortBy
+        })
+    }, []);
+
     const initialSortInternal = useMemo(() => {
         if (initialSort && forceFilter && !checkFilterCombination(forceFilter, initialSort)) {
             console.warn("Initial sort is not compatible with the force filter. Ignoring initial sort");
@@ -108,18 +120,6 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
     const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
     const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
 
-    const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
-                                                sortBy?: [string, "asc" | "desc"]) => {
-        if (!dataSource.isFilterCombinationValid)
-            return true;
-        return dataSource.isFilterCombinationValid({
-            path: resolvedPath,
-            collection,
-            filterValues,
-            sortBy
-        })
-    }, []);
-
     const clearFilter = useCallback(() => setFilterValues(forceFilter ?? undefined), [forceFilter]);
 
     const updateFilterValues = useCallback((updatedFilter: FilterValues<Extract<keyof M, string>> | undefined) => {

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,58 @@ 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,
+        databaseId: collection.databaseId,
+        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 +70,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

@@ -19,6 +19,7 @@ export * from "./EntityCollectionView/EntityCollectionViewActions";
 export * from "./EntityCollectionView/useSelectionController";
 
 export * from "./PropertyConfigBadge";
+export * from "./PropertyIdCopyTooltip";
 
 export * from "./EntityCollectionTable";
 export * from "./NotFoundPage";
@@ -29,7 +30,7 @@ export * from "./DeleteConfirmationDialog";
 
 export * from "./FireCMSLogo";
 
-export * from "./FireCMSAppBar";
+export * from "../core/DefaultAppBar";
 
 export * from "./ArrayContainer";
 export * from "./ReferenceWidget";

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,6 +1,6 @@
 import React from "react";
 
-import { Link as ReactLink } from "react-router-dom";
+import { Link as ReactLink, useNavigate } from "react-router-dom";
 import { ErrorBoundary, FireCMSLogo } from "../components";
 import {
     Avatar,
@@ -16,8 +16,9 @@ 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> = {
+export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
     title?: React.ReactNode;
     /**
@@ -29,12 +30,8 @@ export type FireCMSAppBarProps<ADDITIONAL_PROPS = object> = {
 
     dropDownActions?: React.ReactNode;
 
-    includeDrawer?: boolean;
-
     includeModeToggle?: boolean;
 
-    drawerOpen: boolean;
-
     className?: string;
 
     style?: React.CSSProperties;
@@ -48,24 +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,
-                                                        logo,
                                                         user: userProp
-                                                    }: FireCMSAppBarProps) {
+                                                    }: DefaultAppBarProps) {
+
+    const {
+        hasDrawer,
+        drawerOpen,
+        logo
+    } = useApp();
     const navigation = useNavigationController();
 
     const authController = useAuthController();
@@ -74,6 +71,8 @@ export const FireCMSAppBar = function FireCMSAppBar({
         toggleMode
     } = useModeController();
 
+    const navigate = useNavigate();
+
     const largeLayout = useLargeLayout();
 
     const user = userProp ?? authController.user;
@@ -96,20 +95,15 @@ export const FireCMSAppBar = function FireCMSAppBar({
     return (
         <div
             style={style}
-            className={cls("pr-2",
+            className={cls("w-full h-16 transition-all ease-in duration-75 fixed",
                 {
-                    "ml-[17rem]": drawerOpen && largeLayout,
-                    "ml-16": includeDrawer && !(drawerOpen && largeLayout),
-                    "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)}>
 
@@ -121,16 +115,16 @@ export const FireCMSAppBar = function FireCMSAppBar({
                         to={navigation?.basePath ?? "/"}
                     >
                         <div className={"flex flex-row gap-4"}>
-                            {!includeDrawer && (logo
+                            {!hasDrawer && (logo
                                 ? <img src={logo}
                                        alt="Logo"
-                                       className={cls("w-[32px] h-[32px]")}/>
+                                       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"}>
+                                              className={cls("transition-all", drawerOpen ? "ml-2" : "")}>
                                     {title}
                                 </Typography>
                                 : title}
@@ -169,7 +163,11 @@ export const FireCMSAppBar = function FireCMSAppBar({
 
                     {dropDownActions}
 
-                    {!dropDownActions && <MenuItem onClick={authController.signOut}>
+                    {!dropDownActions && <MenuItem onClick={async () => {
+                        await authController.signOut();
+                        // replace current route with home
+                        navigate("/");
+                    }}>
                         <LogoutIcon/>
                         Log Out
                     </MenuItem>}

package/src/core/DefaultDrawer.tsx

@@ -0,0 +1,183 @@
+import React, { useCallback } from "react";
+
+import { useLargeLayout, useNavigationController } from "../hooks";
+
+import { Link, useNavigate } from "react-router-dom";
+import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
+import { IconForView } from "../util";
+import { cls, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
+import { useAnalyticsController } from "../hooks/useAnalyticsController";
+import { DrawerNavigationItem } from "./DrawerNavigationItem";
+import { FireCMSLogo } from "../components";
+import { useApp } from "../app/useApp";
+
+/**
+ * Default drawer used in the CMS
+ * @group Core
+ */
+export function DefaultDrawer({
+                                  className,
+                                  style,
+                              }: {
+    className?: string
+    style?: React.CSSProperties,
+}) {
+
+    const {
+        drawerHovered,
+        drawerOpen,
+        closeDrawer,
+        logo
+    } = useApp();
+
+    const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
+
+    const analyticsController = useAnalyticsController();
+    const navigation = useNavigationController();
+
+    const tooltipsOpen = drawerHovered && !drawerOpen && !adminMenuOpen;
+    const largeLayout = useLargeLayout();
+    const navigate = useNavigate();
+
+    if (!navigation.topLevelNavigation)
+        throw Error("Navigation not ready in Drawer");
+
+    const {
+        navigationEntries,
+        groups
+    }: TopNavigationResult = navigation.topLevelNavigation;
+
+    const adminViews = navigationEntries.filter(e => e.type === "admin") ?? [];
+    const groupsWithoutAdmin = groups.filter(g => g !== "Admin");
+
+    const buildGroupHeader = useCallback((group?: string) => {
+        if (!drawerOpen) return <div className="w-full"/>;
+        return <div
+            className="pl-6 pr-8 py-4 flex flex-row items-center">
+            <Typography variant={"caption"}
+                        color={"secondary"}
+                        className="font-medium flex-grow line-clamp-1">
+                {group ? group.toUpperCase() : "Views".toUpperCase()}
+            </Typography>
+
+        </div>;
+    }, [drawerOpen]);
+
+    const onClick = (view: TopNavigationEntry) => {
+        const eventName: CMSAnalyticsEvent = view.type === "collection"
+            ? "drawer_navigate_to_collection"
+            : (view.type === "view" ? "drawer_navigate_to_view" : "unmapped_event");
+        analyticsController.onAnalyticsEvent?.(eventName, { url: view.url });
+        if (!largeLayout)
+            closeDrawer();
+    };
+
+    return (
+        <>
+            <div className={cls("flex flex-col h-full relative flex-grow w-full", className)} style={style}>
+
+                <DrawerLogo logo={logo}/>
+
+                <div className={"mt-4 flex-grow overflow-scroll no-scrollbar"}
+                style={{
+                    maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
+                }}>
+
+                    {groupsWithoutAdmin.map((group) => (
+                        <div
+                            className={"bg-gray-50 dark:bg-gray-800 dark:bg-opacity-30 my-4 rounded-lg ml-4"}
+                            key={`drawer_group_${group}`}>
+                            {buildGroupHeader(group)}
+                            {Object.values(navigationEntries)
+                                .filter(e => e.group === group)
+                                .map((view, index) =>
+                                    <DrawerNavigationItem
+                                        key={`navigation_${index}`}
+                                        icon={<IconForView collectionOrView={view.collection ?? view.view} size={"small"}/>}
+                                        tooltipsOpen={tooltipsOpen}
+                                        adminMenuOpen={adminMenuOpen}
+                                        drawerOpen={drawerOpen}
+                                        onClick={() => onClick(view)}
+                                        url={view.url}
+                                        name={view.name}/>)}
+                        </div>
+                    ))}
+
+                </div>
+
+                {adminViews.length > 0 && <Menu
+                    side={"right"}
+                    open={adminMenuOpen}
+                    onOpenChange={setAdminMenuOpen}
+                    trigger={
+                        <IconButton
+                            shape={"square"}
+                            className={"m-4 text-gray-900 dark:text-white w-fit"}>
+                            <Tooltip title={"Admin"}
+                                     open={tooltipsOpen}
+                                     side={"right"} sideOffset={28}>
+                                <MoreVertIcon/>
+                            </Tooltip>
+                            {drawerOpen && <div
+                                className={cls(
+                                    drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                                    "mx-4 font-inherit text-inherit"
+                                )}>
+                                ADMIN
+                            </div>}
+                        </IconButton>}
+                >
+                    {adminViews.map((entry, index) =>
+                        <MenuItem
+                            onClick={(event) => {
+                                event.preventDefault();
+                                navigate(entry.path);
+                            }}
+                            key={`navigation_${index}`}>
+                            {<IconForView collectionOrView={entry.view}/>}
+                            {entry.name}
+                        </MenuItem>)}
+
+                </Menu>}
+            </div>
+
+        </>
+    );
+}
+
+/**
+ * This is the logo displayed in the drawer
+ * It expands when the drawer is open.
+ *
+ * @param logo
+
+ */
+export function DrawerLogo({ logo }: {
+    logo?: string;
+}) {
+
+    const navigation = useNavigationController();
+    const { drawerOpen } = useApp();
+    return <div
+        style={{
+            transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+            padding: drawerOpen ? "32px 144px 0px 24px" : "72px 12px 0px 12px"
+        }}
+        className={cls("cursor-pointer ml-4")}>
+
+        <Tooltip title={"Home"}
+                 sideOffset={20}
+                 side="right">
+            <Link
+                to={navigation.basePath}>
+                {logo
+                    ? <img src={logo}
+                           alt="Logo"
+                           className={cls("max-w-full max-h-full",
+                               drawerOpen ?? "w-[112px] h-[112px]")}/>
+                    : <FireCMSLogo/>}
+
+            </Link>
+        </Tooltip>
+    </div>;
+}