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

package/src/components/HomePage/DefaultHomePage.tsx

@@ -1,29 +1,27 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 import { useCustomizationController, useFireCMSContext, useNavigationController } from "../../hooks";
-import { PluginGenericProps, PluginHomePageAdditionalCardsProps } from "../../types";
+import {
+    CMSAnalyticsEvent,
+    PluginGenericProps,
+    PluginHomePageAdditionalCardsProps,
+    TopNavigationEntry
+} 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";
+import Fuse from "fuse.js"
 
 import { Container, SearchBar } from "@firecms/ui";
 import { FavouritesView } from "./FavouritesView";
 import { useRestoreScroll } from "../../internal/useRestoreScroll";
 
-const search = new JsSearch.Search("url");
-search.addIndex("name");
-search.addIndex("description");
-search.addIndex("group");
-search.addIndex("path");
-
 /**
  * Default entry view for the CMS. This component renders navigation cards
  * for each collection defined in the navigation.
- * @constructor
+
  * @group Components
  */
 export function DefaultHomePage({
@@ -49,6 +47,8 @@ export function DefaultHomePage({
     const customizationController = useCustomizationController();
     const navigationController = useNavigationController();
 
+    const fuse = useRef<Fuse<TopNavigationEntry> | null>(null);
+
     if (!navigationController.topLevelNavigation)
         throw Error("Navigation not ready in FireCMSHomePage");
 
@@ -64,13 +64,16 @@ export function DefaultHomePage({
     } = navigationController.topLevelNavigation;
 
     const [filteredUrls, setFilteredUrls] = useState<string[] | null>(null);
+    const performingSearch = Boolean(filteredUrls);
 
     const filteredNavigationEntries = filteredUrls
-        ? navigationEntries.filter((entry) => filteredUrls.includes(entry.url))
+        ? filteredUrls.map(url => navigationEntries.find(e => e.url === url)).filter(Boolean) as TopNavigationEntry[]
         : navigationEntries;
 
     useEffect(() => {
-        search.addDocuments(navigationEntries);
+        fuse.current = new Fuse(navigationEntries, {
+            keys: ["name", "description", "group", "path"]
+        });
     }, [navigationEntries]);
 
     const updateSearchResults = useCallback(
@@ -78,12 +81,15 @@ export function DefaultHomePage({
             if (!value || value === "") {
                 setFilteredUrls(null);
             } else {
-                const searchResult = search.search(value);
-                setFilteredUrls(searchResult.map((e: any) => e.url));
+                const searchResult = fuse.current?.search(value);
+                if (searchResult) {
+                    setFilteredUrls(searchResult.map((e) => e.item.url));
+                }
             }
         }, []);
 
-    const allGroups: Array<string | undefined> = [...groups];
+    const filteredGroups = filteredUrls ? filteredNavigationEntries.map(entry => entry.group) : [];
+    const allGroups: Array<string | undefined> = filteredUrls ? filteredGroups.filter((group, index) => filteredGroups.indexOf(group) === index) : [...groups];
     if (filteredNavigationEntries.filter(e => !e.group).length > 0 || filteredNavigationEntries.length === 0) {
         allGroups.push(undefined);
     }
@@ -102,7 +108,7 @@ export function DefaultHomePage({
                     return (
                         <NavigationGroup
                             group={section.title}
-                            key={`plugin_section_${plugin.name}`}>
+                            key={`plugin_section_${plugin.key}`}>
                             {section.children}
                         </NavigationGroup>
                     );
@@ -134,12 +140,13 @@ export function DefaultHomePage({
                     <SearchBar onTextSearch={updateSearchResults}
                                placeholder={"Search collections"}
                                large={false}
+                               autoFocus={true}
                                innerClassName={"w-full"}
                                className={"w-full flex-grow"}/>
                     {additionalActions}
                 </div>
 
-                <FavouritesView hidden={Boolean(filteredUrls)}/>
+                <FavouritesView hidden={performingSearch}/>
 
                 {additionalChildrenStart}
 
@@ -163,7 +170,7 @@ export function DefaultHomePage({
 
                     const thisGroupCollections = filteredNavigationEntries
                         .filter((entry) => entry.group === group || (!entry.group && group === undefined));
-                    if (thisGroupCollections.length === 0 && AdditionalCards.length === 0)
+                    if (thisGroupCollections.length === 0 && (AdditionalCards.length === 0 || performingSearch))
                         return null;
                     return (
                         <NavigationGroup
@@ -173,21 +180,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/FavouritesView.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 import { useNavigationController } from "../../hooks";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
 import { TopNavigationEntry } from "../../types";
-import { Chip, Collapse, StarBorderIcon, StarIcon } from "@firecms/ui";
+import { Chip, Collapse, StarIcon } from "@firecms/ui";
 
 function NavigationChip({ entry }: { entry: TopNavigationEntry }) {
 
@@ -29,16 +29,11 @@ function NavigationChip({ entry }: { entry: TopNavigationEntry }) {
     return <Chip
         key={entry.path}
         onClick={() => navigate(entry.url)}
-        icon={
-            favourite
-                ? <StarIcon
-                    onClick={onIconClick}
-                    size={18}
-                    className={"text-secondary"}/>
-                : <StarBorderIcon
-                    onClick={onIconClick}
-                    size={18}
-                    className={"text-gray-400 dark:text-gray-500"}/>}>
+        icon={<StarIcon
+            onClick={onIconClick}
+            size={18}
+            className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-500"}/>
+        }>
         {entry.name}
     </Chip>;
 }

package/src/components/HomePage/NavigationCard.tsx

@@ -0,0 +1,69 @@
+import { ArrowForwardIcon, Card, cls, 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={cls("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-surface-300 dark:text-surface-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,111 @@
+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, 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
+
+ */
+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]
+                        );
+                    }
+                }}>
+                <StarIcon
+                    size={18}
+                    className={favourite ? "text-secondary" : "text-surface-400 dark:text-surface-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/NavigationGroup.tsx

@@ -12,8 +12,8 @@ export function NavigationGroup({
     return (
         <ExpandablePanel
             invisible={true}
-            titleClassName={"font-medium text-sm text-gray-600 dark:text-gray-400"}
-            className={"py-4"}
+            titleClassName={"font-medium text-sm text-surface-600 dark:text-surface-400"}
+            innerClassName={"py-4"}
             initiallyExpanded={!(userConfigurationPersistence?.collapsedGroups ?? []).includes(group ?? "ungrouped")}
             onExpandedChange={expanded => {
                 if (userConfigurationPersistence) {

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -0,0 +1,44 @@
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cls, 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={cls(cardMixin,
+                    cardClickableMixin,
+                    "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/NotFoundPage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link as ReactLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { Button, Typography } from "@firecms/ui";
 
 export function NotFoundPage() {
@@ -17,7 +17,7 @@ export function NotFoundPage() {
                 </Typography>
                 <Button
                     variant={"text"}
-                    component={ReactLink}
+                    component={Link}
                     to={"/"}>Back to home</Button>
             </div>
         </div>

package/src/components/PropertyConfigBadge.tsx

@@ -2,15 +2,21 @@ import { getIconForWidget } from "../util";
 import { PropertyConfig } from "../types";
 import { getDefaultFieldConfig } from "../core";
 
-export function PropertyConfigBadge({ propertyConfig }: { propertyConfig: PropertyConfig | undefined }): React.ReactNode {
-    const classes = "h-8 w-8 p-1 rounded-full shadow text-white";
+export function PropertyConfigBadge({
+                                        propertyConfig,
+                                        disabled
+                                    }: {
+    propertyConfig: PropertyConfig | undefined,
+    disabled?: boolean
+}): React.ReactNode {
+    const classes = "h-8 w-8 p-1 rounded-full shadow text-white " + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
 
     const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : undefined;
 
     return <div
         className={classes}
         style={{
-            background: propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888"
+            background: !disabled ? (propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888") : undefined
         }}>
         {propertyConfig?.Icon ? getIconForWidget(propertyConfig, "medium") : getIconForWidget(defaultPropertyConfig, "medium")}
     </div>

package/src/components/PropertyIdCopyTooltip.tsx

@@ -0,0 +1,47 @@
+import { ContentCopyIcon, IconButton, Tooltip, Typography } from "@firecms/ui";
+import { useCallback, useState } from "react";
+
+export function PropertyIdCopyTooltip({
+                                          propertyKey,
+                                          className,
+                                          children,
+                                      }: {
+    propertyKey: string,
+    className?: string,
+    children: React.ReactNode
+}) {
+    return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey}/>}
+                    delayDuration={800}
+                    side={"top"}
+                    align={"start"}
+                    sideOffset={8}
+                    className={className}>
+            {children}
+    </Tooltip>
+
+}
+
+export function PropertyIdCopyTooltipContent({ propertyKey }: { propertyKey: string }) {
+
+    const [copied, setCopied] = useState(false);
+
+    return (
+        <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
+            <div>
+                <Typography variant={"caption"} className={"min-w-20 text-surface-accent-400"}
+                            color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
+                <Typography variant={"caption"} className={"text-white"}><code>{propertyKey}</code></Typography>
+            </div>
+            <IconButton size={"small"}>
+                <ContentCopyIcon size={"smallest"}
+                                 className={"text-white"}
+                                 onClick={useCallback(() => {
+                                     navigator.clipboard.writeText(propertyKey);
+                                     setCopied(true);
+                                     setTimeout(() => setCopied(false), 2000);
+                                 }, [propertyKey])}
+                />
+            </IconButton>
+        </div>
+    );
+}

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -4,7 +4,7 @@ import { CollectionSize, Entity, EntityCollection, FilterValues } from "../../ty
 import {
     EntityCollectionRowActions,
     EntityCollectionTable,
-    useDataSourceEntityCollectionTableController
+    useDataSourceTableController
 } from "../EntityCollectionTable";
 import {
     useAuthController,
@@ -16,8 +16,8 @@ import {
 } from "../../hooks";
 import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
-import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../../util";
-import { useSelectionController } from "../EntityCollectionView/EntityCollectionView";
+import { canCreateEntity, IconForView, resolveCollection } from "../../util";
+import { useSelectionController } from "../EntityCollectionView/useSelectionController";
 import { useColumnIds, useTableSearchHelper } from "../common";
 import { useSideDialogContext } from "../../core";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
@@ -107,9 +107,9 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
     const analyticsController = useAnalyticsController();
     const customizationController = useCustomizationController();
 
-    const fullPath = navigation.resolveAliasesFrom(pathInput);
+    const fullPath = navigation.resolveIdsFrom(pathInput);
 
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
 
     const [entitiesDisplayedFirst, setEntitiesDisplayedFirst] = useState<Entity<any>[]>([]);
 
@@ -233,7 +233,9 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
             selectionEnabled={multiselect}
             hideId={collection?.hideIdFromCollection}
             fullPath={fullPath}
-            selectionController={selectionController}/>;
+            selectionController={selectionController}
+            openEntityMode={"side_panel"}
+        />;
 
     };
 
@@ -247,23 +249,21 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
             error={"Could not find collection with id " + collection}/>
     }
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const resolvedCollection = useMemo(() => resolveCollection({
         collection: collection,
         path: fullPath,
         values: {},
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     }), [collection, customizationController.propertyConfigs, fullPath]);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const displayedColumnIds = useColumnIds(resolvedCollection, false);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const tableController = useDataSourceEntityCollectionTableController<M>({
+    const tableController = useDataSourceTableController<M>({
         fullPath,
         collection,
         entitiesDisplayedFirst,
-        forceFilter
+        forceFilter,
+        updateUrl: false,
     });
 
     const {
@@ -272,7 +272,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         onTextSearchClick,
         textSearchEnabled
     } =
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         useTableSearchHelper({
             collection,
             fullPath,
@@ -291,9 +290,16 @@ 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}`}
+                        openEntityMode={"side_panel"}
+                        title={<Typography variant={"subtitle2"} className={"flex flex-row gap-2"}>
+                            <IconForView
+                                size={"small"}
+                                collectionOrView={collection}
+                                className={"text-surface-300 dark:text-surface-600"}/>
+                            {collection.singularName ? `Select ${collection.singularName}` : `Select
+                                                                                              from ${collection.name}`}
                         </Typography>}
                         defaultSize={collection.defaultSize}
                         properties={resolvedCollection.properties}
@@ -349,7 +355,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 +366,6 @@ function ReferenceDialogActions({
             </Button>
             : <Button
                 onClick={onClick}
-                size="medium"
                 variant="outlined"
                 color="primary"
             >