@firecms/core 3.0.0-canary.5 → 3.0.0-canary.51

package/src/components/HomePage/DefaultHomePage.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect, useState } from "react";
 
 import { useCustomizationController, useFireCMSContext, useNavigationController } from "../../hooks";
-import { PluginGenericProps, PluginHomePageAdditionalCardsProps } from "../../types";
+import { CMSAnalyticsEvent, PluginGenericProps, PluginHomePageAdditionalCardsProps } from "../../types";
 
 import { toArray } from "../../util/arrays";
 import { NavigationGroup } from "./NavigationGroup";
-import { NavigationCollectionCard } from "./NavigationCollectionCard";
+import { NavigationCardBinding } from "./NavigationCardBinding";
 
 // @ts-ignore
 import * as JsSearch from "js-search";
@@ -102,7 +102,7 @@ export function DefaultHomePage({
                     return (
                         <NavigationGroup
                             group={section.title}
-                            key={`plugin_section_${plugin.name}`}>
+                            key={`plugin_section_${plugin.key}`}>
                             {section.children}
                         </NavigationGroup>
                     );
@@ -173,21 +173,25 @@ export function DefaultHomePage({
                             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                 {thisGroupCollections.map((entry) => (
                                     <div key={`nav_${entry.group}_${entry.name}`} className="col-span-1">
-                                        <NavigationCollectionCard
+                                        <NavigationCardBinding
                                             {...entry}
                                             onClick={() => {
-                                                const event =
-                                                    entry.type === "collection"
-                                                        ? "home_navigate_to_collection"
-                                                        : entry.type === "view"
-                                                            ? "home_navigate_to_view"
-                                                            : "unmapped_event";
+                                                let event: CMSAnalyticsEvent;
+                                                if (entry.type === "collection") {
+                                                    event = "home_navigate_to_collection";
+                                                } else if (entry.type === "view") {
+                                                    event = "home_navigate_to_view";
+                                                } else if (entry.type === "admin") {
+                                                    event = "home_navigate_to_admin_view";
+                                                } else {
+                                                    event = "unmapped_event";
+                                                }
                                                 context.analyticsController?.onAnalyticsEvent?.(event, { path: entry.path });
                                             }}
                                         />
                                     </div>
                                 ))}
-                                {AdditionalCards &&
+                                {group?.toLowerCase() !== "admin" && AdditionalCards &&
                                     AdditionalCards.map((AdditionalCard, i) => (
                                         <div key={`nav_${group}_add_${i}`}>
                                             <AdditionalCard {...actionProps} />

package/src/components/HomePage/NavigationCard.tsx

@@ -0,0 +1,69 @@
+import { ArrowForwardIcon, Card, cn, Markdown, Typography, } from "@firecms/ui";
+
+export type NavigationCardProps = {
+    name: string,
+    description?: string;
+    actions: React.ReactNode;
+    icon: React.ReactNode;
+    onClick?: () => void,
+};
+
+export function NavigationCard({
+                                   name,
+                                   description,
+                                   icon,
+                                   actions,
+                                   onClick,
+                               }: NavigationCardProps) {
+
+    return (<Card
+        className={cn("h-full p-4 cursor-pointer min-h-[230px]")}
+        onClick={() => {
+            onClick?.();
+        }}>
+
+        <div className="flex flex-col items-start h-full">
+            <div
+                className="flex-grow w-full">
+
+                <div
+                    className="h-10 flex items-center w-full justify-between text-gray-300 dark:text-gray-600">
+
+                    {icon}
+
+                    <div
+                        className="flex items-center gap-1"
+                        onClick={(event: React.MouseEvent) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                        }}>
+
+                        {actions}
+
+                    </div>
+
+                </div>
+
+                <Typography gutterBottom variant="h5"
+                            component="h2">
+                    {name}
+                </Typography>
+
+                {description && <Typography variant="body2"
+                                            color="secondary"
+                                            component="div">
+                    <Markdown source={description} size={"small"}/>
+                </Typography>}
+            </div>
+
+            <div style={{ alignSelf: "flex-end" }}>
+
+                <div className={"p-4"}>
+                    <ArrowForwardIcon className="text-primary"/>
+                </div>
+            </div>
+
+        </div>
+
+    </Card>)
+}

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -0,0 +1,116 @@
+import { useNavigate } from "react-router-dom";
+
+import { useCustomizationController, useFireCMSContext } from "../../hooks";
+import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
+import { IconForView } from "../../util";
+import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
+import { IconButton, StarBorderIcon, StarIcon } from "@firecms/ui";
+import { NavigationCard } from "./NavigationCard";
+import { SmallNavigationCard } from "./SmallNavigationCard";
+
+/**
+ * This is the component used in the home page to render a card for each
+ * collection or view.
+ * @group Components
+ * @param view
+ * @param path
+ * @param collection
+ * @param url
+ * @param name
+ * @param description
+ * @param onClick
+ * @constructor
+ */
+export function NavigationCardBinding({
+                                          path,
+                                          collection,
+                                          view,
+                                          url,
+                                          name,
+                                          description,
+                                          onClick,
+                                          type
+                                      }: TopNavigationEntry & {
+    onClick?: () => void
+}) {
+
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+    const collectionIcon = <IconForView collectionOrView={collection ?? view}/>;
+
+    const navigate = useNavigate();
+    const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
+
+    const favourite = (userConfigurationPersistence?.favouritePaths ?? []).includes(path);
+
+    const actionsArray: React.ReactNode[] = userConfigurationPersistence
+        ? [
+            <IconButton
+                key={"favourite"}
+                onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (favourite) {
+                        userConfigurationPersistence.setFavouritePaths(
+                            userConfigurationPersistence.favouritePaths.filter(p => p !== path)
+                        );
+                    } else {
+                        userConfigurationPersistence.setFavouritePaths(
+                            [...userConfigurationPersistence.favouritePaths, path]
+                        );
+                    }
+                }}>
+                {
+                    favourite
+                        ? <StarIcon
+                            size={18}
+                            className={"text-secondary"}/>
+                        : <StarBorderIcon
+                            size={18}
+                            className={"text-gray-400 dark:text-gray-500"}/>}
+            </IconButton>
+        ]
+        : [];
+
+    if (customizationController.plugins && collection) {
+        const actionProps: PluginHomePageActionsProps = {
+            path,
+            collection,
+            context
+        };
+        customizationController.plugins.forEach((plugin, i) => (
+            actionsArray.push(plugin.homePage?.CollectionActions
+                ? <plugin.homePage.CollectionActions
+                    key={`actions_${i}`}
+                    {...actionProps}
+                    extraProps={plugin.homePage.extraProps}
+                />
+                : null
+            )))
+    }
+
+    const actions: React.ReactNode | undefined = <>
+        {actionsArray}
+    </>
+
+    if (type === "admin") {
+        return <SmallNavigationCard icon={collectionIcon}
+                                    name={name}
+                                    url={url}/>
+    }
+
+    return <NavigationCard
+        icon={collectionIcon}
+        name={name}
+        description={description}
+        actions={actions}
+        onClick={() => {
+            onClick?.();
+            navigate(url);
+            if (userConfigurationPersistence) {
+                userConfigurationPersistence.setRecentlyVisitedPaths(
+                    [path, ...(userConfigurationPersistence.recentlyVisitedPaths ?? []).filter(p => p !== path)]
+                );
+            }
+        }}/>;
+}

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -0,0 +1,45 @@
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cn, focusedMixin, Typography, } from "@firecms/ui";
+
+import { Link } from "react-router-dom";
+
+export type SmallNavigationCardProps = {
+    name: string,
+    url: string;
+    icon: React.ReactElement;
+};
+
+export function SmallNavigationCard({
+                                 name,
+                                 url,
+                                 icon,
+                             }: SmallNavigationCardProps) {
+
+    return (
+        <>
+
+            <Link
+                tabIndex={0}
+                className={cn(cardMixin,
+                    cardClickableMixin,
+                    focusedMixin,
+                    "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit visited:dark:text-inherit hover:text-inherit hover:dark:text-inherit ")}
+                to={url}
+            >
+
+                <div className="flex flex-row items-center flex-grow gap-2 ">
+                    {icon}
+
+                    <Typography gutterBottom variant="h5"
+                                component="h2"
+                                className="mb-0 ml-4">
+                        {name}
+                    </Typography>
+                </div>
+
+                <div className={"p-4"}>
+                    <ArrowForwardIcon color="primary"/>
+                </div>
+            </Link>
+
+        </>);
+}

package/src/components/HomePage/index.tsx

@@ -1,3 +1,5 @@
 export * from "./DefaultHomePage";
-export * from "./NavigationCollectionCard";
+export * from "./NavigationCardBinding";
 export * from "./NavigationGroup";
+export * from "./NavigationCard";
+export * from "./SmallNavigationCard";

package/src/components/PropertyIdCopyTooltipContent.tsx

@@ -1,4 +1,4 @@
-import { ContentPasteIcon, IconButton, Typography } from "@firecms/ui";
+import { ContentCopyIcon, IconButton, Typography } from "@firecms/ui";
 import { useCallback, useState } from "react";
 
 export function PropertyIdCopyTooltipContent({ propertyId }: { propertyId: string }) {
@@ -12,9 +12,8 @@ export function PropertyIdCopyTooltipContent({ propertyId }: { propertyId: strin
                             color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
                 <Typography variant={"caption"} className={"text-white"}><code>{propertyId}</code></Typography>
             </div>
-            {/*    Copy to clipboard button*/}
             <IconButton size={"small"}>
-                <ContentPasteIcon size={"smallest"}
+                <ContentCopyIcon size={"smallest"}
                                   className={"text-white"}
                                   onClick={useCallback(() => {
                                       navigator.clipboard.writeText(propertyId);

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -17,7 +17,7 @@ import {
 import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
 import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../../util";
-import { useSelectionController } from "../EntityCollectionView/EntityCollectionView";
+import { useSelectionController } from "../EntityCollectionView/useSelectionController";
 import { useColumnIds, useTableSearchHelper } from "../common";
 import { useSideDialogContext } from "../../core";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
@@ -109,7 +109,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
 
     const fullPath = navigation.resolveAliasesFrom(pathInput);
 
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
 
     const [entitiesDisplayedFirst, setEntitiesDisplayedFirst] = useState<Entity<any>[]>([]);
 
@@ -291,6 +291,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         displayedColumnIds={displayedColumnIds}
                         onEntityClick={onEntityClick}
                         tableController={tableController}
+                        enablePopupIcon={false}
                         tableRowActionsBuilder={tableRowActionsBuilder}
                         title={<Typography variant={"subtitle2"}>
                             {collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`}
@@ -349,7 +350,7 @@ function ReferenceDialogActions({
             onNewClick();
         }
         : undefined;
-    const addButton = canCreateEntity(collection, authController, fullPathToCollectionSegments(path), null) &&
+    const addButton = canCreateEntity(collection, authController, path, null) &&
         onClick && (largeLayout
             ? <Button
                 onClick={onClick}
@@ -360,7 +361,6 @@ function ReferenceDialogActions({
             </Button>
             : <Button
                 onClick={onClick}
-                size="medium"
                 variant="outlined"
                 color="primary"
             >

package/src/components/ReferenceWidget.tsx

@@ -50,11 +50,11 @@ export function ReferenceWidget<M extends Record<string, any>>({
 
     const collection: EntityCollection | undefined = useMemo(() => {
         return navigationController.getCollection(path);
-    }, [path, navigationController]);
+    }, [path, navigationController.getCollection]);
 
-    if (!collection) {
-        throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
-    }
+    // if (!collection) {
+    //     throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
+    // }
 
     const onSingleEntitySelected = useCallback((entity: Entity<M> | null) => {
         if (disabled)
@@ -122,7 +122,7 @@ export function ReferenceWidget<M extends Record<string, any>>({
             size={size}/>
 
     }
-    return <div className={cn("text-sm font-medium text-gray-500",
+    return <div className={cn("text-sm font-medium",
         "min-w-80 flex flex-col gap-4",
         "relative transition-colors duration-200 ease-in rounded font-medium",
         disabled ? "bg-opacity-50" : "hover:bg-opacity-75",

package/src/components/SearchIconsView.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 
 import { coolIconKeys, debounce, Icon, IconButton, iconKeys, SearchBar, Tooltip } from "@firecms/ui";
-import { icon_synonyms, iconsSearch } from "../util";
+import { iconSynonyms, iconsSearch } from "../util";
 
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 
-if (process.env.NODE_ENV !== "production") {
-    Object.keys(icon_synonyms).forEach((icon: string) => {
+if (iconSynonyms && process.env.NODE_ENV !== "production") {
+    Object.keys(iconSynonyms).forEach((icon: string) => {
         if (!iconKeys.includes(icon)) {
-            console.warn(`The icon ${icon} no longer exists. Remove it from \`icon_synonyms\``);
+            console.warn(`The icon ${icon} no longer exists. Remove it from \`iconSynonyms\``);
         }
     });
 }

package/src/components/SelectableTable/SelectableTable.tsx

@@ -10,7 +10,7 @@ import {
 } from "../../types";
 import { CellRendererParams, VirtualTable, VirtualTableColumn } from "../VirtualTable";
 import { enumToObjectEntries } from "../../util";
-import { OnCellValueChange, OnColumnResizeParams } from "../common/types";
+import { OnCellValueChange, OnColumnResizeParams } from "../common";
 import { FilterFormFieldProps } from "../VirtualTable/VirtualTableHeader";
 import { ReferenceFilterField } from "./filters/ReferenceFilterField";
 import { StringNumberFilterField } from "./filters/StringNumberFilterField";

package/src/components/SelectableTable/filters/BooleanFilterField.tsx

@@ -32,7 +32,7 @@ export function BooleanFilterField({
     const valueSet = !!value;
 
     return (
-        <div className="w-[200px]">
+        <div className="w-[300px]">
             <BooleanSwitchWithLabel
                 value={valueSetToTrue}
                 allowIndeterminate={true}
@@ -44,6 +44,5 @@ export function BooleanFilterField({
                         : `${title} is false`}
             />
         </div>
-    )
-        ;
+    );
 }

package/src/components/SelectableTable/filters/DateTimeFilterField.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
-import { DateTimeField, Select, SelectItem } from "@firecms/ui";
+import { Checkbox, DateTimeField, Label, Select, SelectItem } from "@firecms/ui";
 import { useCustomizationController } from "../../../hooks";
 
 interface DateTimeFilterFieldProps {
@@ -43,10 +43,10 @@ export function DateTimeFilterField({
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
-    const [internalValue, setInternalValue] = useState<Date | undefined>(fieldValue);
+    const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue);
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined) {
-        let newValue: Date | undefined = val;
+    function updateFilter(op: VirtualTableWhereFilterOp, val: Date | undefined | null) {
+        let newValue: Date | null | undefined = val;
         const prevOpIsArray = multipleSelectOperations.includes(operation);
         const newOpIsArray = multipleSelectOperations.includes(op);
         if (prevOpIsArray !== newOpIsArray) {
@@ -73,7 +73,7 @@ export function DateTimeFilterField({
 
     return (
 
-        <div className="flex w-[440px] items-center">
+        <div className="flex w-[440px]">
             <div className="w-[80px]">
                 <Select value={operation}
                         onValueChange={(value) => {
@@ -88,19 +88,34 @@ export function DateTimeFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2">
+            <div className="flex-grow ml-2 flex flex-col gap-2">
 
                 <DateTimeField
                     mode={mode}
                     size={"medium"}
                     locale={locale}
-                    value={internalValue}
-                    onChange={(dateValue: Date | null) => {
+                    value={internalValue ?? undefined}
+                    onChange={(dateValue: Date | undefined) => {
                         updateFilter(operation, dateValue === null ? undefined : dateValue);
                     }}
                     clearable={true}
                 />
 
+                <Label
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    htmlFor="null-filter"
+                >
+                    <Checkbox id="null-filter"
+                              checked={internalValue === null}
+                              size={"small"}
+                              onCheckedChange={(checked) => {
+                                  if (internalValue !== null)
+                                      updateFilter(operation, null);
+                                  else updateFilter(operation, undefined);
+                              }}/>
+                    Filter for null values
+                </Label>
+
             </div>
 
         </div>

package/src/components/SelectableTable/filters/ReferenceFilterField.tsx

@@ -4,7 +4,7 @@ import { Entity, EntityCollection, EntityReference } from "../../../types";
 import { ReferencePreview } from "../../../preview";
 import { getReferenceFrom } from "../../../util";
 import { useNavigationController, useReferenceDialog } from "../../../hooks";
-import { Button, Select, SelectItem } from "@firecms/ui";
+import { Button, Checkbox, Label, Select, SelectItem } from "@firecms/ui";
 
 interface ReferenceFilterFieldProps {
     name: string,
@@ -48,33 +48,31 @@ export function ReferenceFilterField({
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
 
-    const [onHover, setOnHover] = React.useState(false);
-
     isArray
         ? possibleOperations.push("array-contains-any")
         : possibleOperations.push("in", "not-in");
 
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp>(fieldOperation);
-    const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined>(fieldValue);
+    const [internalValue, setInternalValue] = useState<EntityReference | EntityReference[] | undefined | null>(fieldValue);
 
     const selectedEntityIds = internalValue
         ? (Array.isArray(internalValue) ? internalValue.map((ref) => {
-            if (!(ref.isEntityReference && ref.isEntityReference())) {
+            if (!(ref?.isEntityReference && ref?.isEntityReference())) {
                 return null;
             }
             return ref.id;
         }).filter(Boolean) as string[] : [internalValue.id])
         : [];
 
-    function updateFilter(op: VirtualTableWhereFilterOp, val?: EntityReference | EntityReference[]) {
+    function updateFilter(op: VirtualTableWhereFilterOp, val?: EntityReference | EntityReference[] | null) {
 
         const prevOpIsArray = multipleSelectOperations.includes(operation);
         const newOpIsArray = multipleSelectOperations.includes(op);
         let newValue = val;
         if (prevOpIsArray !== newOpIsArray) {
             // @ts-ignore
-            newValue = newOpIsArray ? (newValue.isEntityReference && newValue.isEntityReference() ? [newValue] : []) : undefined
+            newValue = newOpIsArray ? (newValue?.isEntityReference && newValue?.isEntityReference() ? [newValue] : []) : undefined
         }
 
         setOperation(op);
@@ -129,28 +127,22 @@ export function ReferenceFilterField({
 
     const buildEntry = (reference: EntityReference) => {
         return (
-            <div
-                className="mb-0.5"
-                onMouseEnter={() => setOnHover(true)}
-                onMouseMove={() => setOnHover(true)}
-                onMouseLeave={() => setOnHover(false)}>
-                <ReferencePreview
-                    disabled={!path}
-                    previewProperties={previewProperties}
-                    size={"medium"}
-                    onClick={doOpenDialog}
-                    reference={reference}
-                    onHover={onHover}
-                    allowEntityNavigation={false}
-                />
-            </div>
+            <ReferencePreview
+                disabled={!path}
+                previewProperties={previewProperties}
+                size={"medium"}
+                onClick={doOpenDialog}
+                reference={reference}
+                hover={true}
+                allowEntityNavigation={false}
+            />
         );
     };
 
     return (
 
         <div className="flex w-[440px] flex-row">
-            <div className="w-[120px]">
+            <div className="w-[140px]">
                 <Select value={operation}
                         onValueChange={(value) => {
                             updateFilter(value as VirtualTableWhereFilterOp, internalValue);
@@ -164,21 +156,40 @@ export function ReferenceFilterField({
                 </Select>
             </div>
 
-            <div className="flex-grow ml-2 h-full">
+            <div className="flex-grow ml-2 h-full gap-2 flex flex-col">
 
                 {internalValue && Array.isArray(internalValue) && <div>
                     {internalValue.map((ref, index) => buildEntry(ref))}
                 </div>}
+
                 {internalValue && !Array.isArray(internalValue) && <div>
                     {buildEntry(internalValue)}
                 </div>}
+
                 {(!internalValue || (Array.isArray(internalValue) && internalValue.length === 0)) &&
                     <Button onClick={doOpenDialog}
                             variant={"outlined"}
+                            size={"large"}
                             className="h-full w-full">
                         {multiple ? "Select references" : "Select reference"}
                     </Button>
                 }
+
+                {!isArray && <Label
+                    className="border cursor-pointer rounded-md p-2 flex items-center gap-2 [&:has(:checked)]:bg-gray-100 dark:[&:has(:checked)]:bg-gray-800"
+                    htmlFor="null-filter"
+                >
+                    <Checkbox id="null-filter"
+                              checked={internalValue === null}
+                              size={"small"}
+                              onCheckedChange={(checked) => {
+                                  if (internalValue !== null)
+                                      updateFilter(operation, null);
+                                  else updateFilter(operation, undefined);
+                              }}/>
+                    Filter for null values
+                </Label>}
+
             </div>
 
         </div>