@firecms/core 3.0.0-canary.248 → 3.0.0-canary.249

package/src/components/HomePage/DefaultHomePage.tsx

@@ -1,222 +1,541 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Fuse from "fuse.js";
+import { Container, SearchBar } from "@firecms/ui";
 import { useCustomizationController, useFireCMSContext, useNavigationController } from "../../hooks";
 import {
     CMSAnalyticsEvent,
+    NavigationEntry,
+    NavigationGroupMapping,
     PluginGenericProps,
-    PluginHomePageAdditionalCardsProps,
-    TopNavigationEntry
+    PluginHomePageAdditionalCardsProps
 } from "../../types";
-
 import { toArray } from "../../util/arrays";
-import { NavigationGroup } from "./NavigationGroup";
-import { NavigationCardBinding } from "./NavigationCardBinding";
-
-import Fuse from "fuse.js"
-
-import { Container, SearchBar } from "@firecms/ui";
 import { FavouritesView } from "./FavouritesView";
 import { useRestoreScroll } from "../../internal/useRestoreScroll";
+import { NavigationGroup } from "./NavigationGroup";
+import {
+    NavigationGroupDroppable,
+    NewGroupDropZone,
+    SortableNavigationCard,
+    SortableNavigationGroup,
+    useHomePageDnd
+} from "./HomePageDnD";
+import { DndContext, DragOverlay, MeasuringStrategy } from "@dnd-kit/core";
+import { NavigationCardBinding } from "./NavigationCardBinding";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { restrictToVerticalAxis, restrictToWindowEdges } from "@dnd-kit/modifiers";
+import { RenameGroupDialog } from "./RenameGroupDialog";
 
-/**
- * Default entry view for the CMS. This component renders navigation cards
- * for each collection defined in the navigation.
+export const DEFAULT_GROUP_NAME = "Views";
+export const ADMIN_GROUP_NAME = "Admin";
 
- * @group Components
- */
 export function DefaultHomePage({
                                     additionalActions,
                                     additionalChildrenStart,
                                     additionalChildrenEnd
                                 }: {
-    /**
-     * Additional actions to be rendered in the home page, close to the search bar.
-     */
     additionalActions?: React.ReactNode;
-    /**
-     * Additional children to be rendered in the beginning of the home page.
-     */
     additionalChildrenStart?: React.ReactNode;
-    /**
-     * Additional children to be rendered at the end of the home page.
-     */
     additionalChildrenEnd?: React.ReactNode;
 }) {
-
     const context = useFireCMSContext();
     const customizationController = useCustomizationController();
     const navigationController = useNavigationController();
 
-    const fuse = useRef<Fuse<TopNavigationEntry> | null>(null);
-
     if (!navigationController.topLevelNavigation)
-        throw Error("Navigation not ready in FireCMSHomePage");
+        throw Error("Navigation not ready");
 
     const {
-        containerRef,
-        scroll,
-        direction
-    } = useRestoreScroll();
-
-    const {
-        navigationEntries,
-        groups
+        allowDragAndDrop,
+        navigationEntries: rawNavigationEntries,
+        groups: groupOrderFromNavController,
+        onNavigationEntriesUpdate
     } = navigationController.topLevelNavigation;
 
+    const fuse = useRef<Fuse<NavigationEntry> | null>(null);
     const [filteredUrls, setFilteredUrls] = useState<string[] | null>(null);
     const performingSearch = Boolean(filteredUrls);
 
     const filteredNavigationEntries = filteredUrls
-        ? filteredUrls.map(url => navigationEntries.find(e => e.url === url)).filter(Boolean) as TopNavigationEntry[]
-        : navigationEntries;
+        ? rawNavigationEntries.filter((e) => filteredUrls.includes(e.url))
+        : rawNavigationEntries;
 
     useEffect(() => {
-        fuse.current = new Fuse(navigationEntries, {
+        fuse.current = new Fuse(rawNavigationEntries, {
             keys: ["name", "description", "group", "path"]
         });
-    }, [navigationEntries]);
-
-    const updateSearchResults = useCallback(
-        (value?: string) => {
-            if (!value || value === "") {
-                setFilteredUrls(null);
-            } else {
-                const searchResult = fuse.current?.search(value);
-                if (searchResult) {
-                    setFilteredUrls(searchResult.map((e) => e.item.url));
+    }, [rawNavigationEntries]);
+
+    const updateSearch = useCallback((v?: string) => {
+        if (!v?.trim()) return setFilteredUrls(null);
+        const r = fuse.current?.search(v.trim());
+        setFilteredUrls(r ? r.map((x) => x.item.url) : []);
+    }, []);
+
+    /* ───────────────────────────────────────────────────────────────
+       Build groups (all items) + isolate Admin
+       ─────────────────────────────────────────────────────────────── */
+    const [items, setItems] = useState<
+        { name: string; entries: NavigationEntry[] }[]
+    >([]);
+    const [adminGroupData, setAdminGroupData] = useState<{
+        name: string;
+        entries: NavigationEntry[];
+    } | null>(null);
+
+    useEffect(() => {
+        const src = performingSearch
+            ? filteredNavigationEntries
+            : rawNavigationEntries;
+
+        const entriesByGroup: Record<string, NavigationEntry[]> = {};
+        src.forEach((e) => {
+            const g =
+                e.type === "admin"
+                    ? ADMIN_GROUP_NAME
+                    : e.group ?? DEFAULT_GROUP_NAME;
+            (entriesByGroup[g] ??= []).push(e);
+        });
+
+        let allProcessed: { name: string; entries: NavigationEntry[] }[];
+
+        if (performingSearch) {
+            const ordered = [
+                ...new Set(src.map((e) => e.group ?? DEFAULT_GROUP_NAME))
+            ];
+            allProcessed = ordered
+                .map((name) => ({
+                    name,
+                    entries: entriesByGroup[name] || []
+                }))
+                .filter((g) => g.entries.length);
+        } else {
+            allProcessed = groupOrderFromNavController.map((g) => ({
+                name: g,
+                entries: entriesByGroup[g] || []
+            }));
+            Object.keys(entriesByGroup).forEach((g) => {
+                if (!groupOrderFromNavController.includes(g))
+                    allProcessed.push({
+                        name: g,
+                        entries: entriesByGroup[g]
+                    });
+            });
+            allProcessed = allProcessed.filter(
+                (g) =>
+                    g.entries.length ||
+                    groupOrderFromNavController.includes(g.name)
+            );
+        }
+
+        const admin = allProcessed.find((g) => g.name === ADMIN_GROUP_NAME);
+        if (admin) {
+            setAdminGroupData(admin);
+            setItems(allProcessed.filter((g) => g.name !== ADMIN_GROUP_NAME));
+        } else {
+            setAdminGroupData(null);
+            setItems(allProcessed);
+        }
+    }, [
+        performingSearch,
+        filteredNavigationEntries,
+        rawNavigationEntries,
+        groupOrderFromNavController
+    ]);
+
+    /* ───────────────────────────────────────────────────────────────
+       Local update vs. persistence helpers
+       ─────────────────────────────────────────────────────────────── */
+    const updateItems = (
+        updater:
+            | { name: string; entries: NavigationEntry[] }[]
+            | ((
+            prev: { name: string; entries: NavigationEntry[] }[]
+        ) => { name: string; entries: NavigationEntry[] }[])
+    ) => {
+        setItems(updater); // local only
+    };
+
+    const persistNavigationGroups = (
+        latest: { name: string; entries: NavigationEntry[] }[]
+    ) => {
+        const draggable: NavigationGroupMapping[] = latest.map((g) => ({
+            name: g.name,
+            entries: g.entries.map((e) => e.path)
+        }));
+
+        const all: NavigationGroupMapping[] = adminGroupData
+            ? [
+                ...draggable,
+                {
+                    name: adminGroupData.name,
+                    entries: adminGroupData.entries.map((e) => e.path)
                 }
-            }
-        }, []);
+            ]
+            : draggable;
 
-    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);
-    }
+        onNavigationEntriesUpdate(all);
+    };
+
+    /* ───────────────────────────────────────────────────────────────
+       Hook for DnD
+       ─────────────────────────────────────────────────────────────── */
+    const {
+        sensors,
+        collisionDetection,
+        onDragStart,
+        onDragOver,
+        onDragEnd,
+        dropAnimation,
+        activeItemForOverlay,
+        activeGroupData,
+        draggingGroupId,
+        containers,
+        dndKitActiveNode,
+        onDragCancel,
+        isDraggingCardOnly,
+        dialogOpenForGroup,
+        setDialogOpenForGroup,
+        handleRenameGroup,
+        isHoveringNewGroupDropZone,
+        setIsHoveringNewGroupDropZone
+    } = useHomePageDnd({
+        items,
+        setItems: updateItems,
+        disabled: !allowDragAndDrop || performingSearch,
+        onPersist: persistNavigationGroups, // ——► persistence here
+        onGroupMoved: (g) =>
+            context.analyticsController?.onAnalyticsEvent?.("home_move_group", {
+                name: g
+            }),
+        onCardMovedBetweenGroups: (card) =>
+            context.analyticsController?.onAnalyticsEvent?.("home_move_card", {
+                id: card.id
+            }),
+        onNewGroupDrop: () =>
+            context.analyticsController?.onAnalyticsEvent?.(
+                "home_drop_new_group"
+            )
+    });
 
+    const {
+        containerRef,
+        direction
+    } = useRestoreScroll();
+
+    const dndDisabled = !allowDragAndDrop || performingSearch;
+
+    const dndModifiers = useMemo(() => {
+        if (dndKitActiveNode?.data.current?.type === "group")
+            return [restrictToVerticalAxis, restrictToWindowEdges];
+        return [restrictToWindowEdges];
+    }, [dndKitActiveNode]);
+
+    /* ───────────────────────────────────────────────────────────────
+       Plugin extras
+       ─────────────────────────────────────────────────────────────── */
     let additionalPluginChildrenStart: React.ReactNode | undefined;
     let additionalPluginChildrenEnd: React.ReactNode | undefined;
     let additionalPluginSections: React.ReactNode | undefined;
+
     if (customizationController.plugins) {
-        const sectionProps: PluginGenericProps = {
-            context
-        };
-        additionalPluginSections = <>
-            {customizationController.plugins.filter(plugin => plugin.homePage?.includeSection)
-                .map((plugin, i) => {
-                    const section = plugin.homePage!.includeSection!(sectionProps)
-                    return (
-                        <NavigationGroup
-                            group={section.title}
-                            key={`plugin_section_${plugin.key}`}>
-                            {section.children}
-                        </NavigationGroup>
-                    );
-                })}
-        </>;
-
-        additionalPluginChildrenStart = <div className={"flex flex-col gap-2"}>
-            {customizationController.plugins.filter(plugin => plugin.homePage?.additionalChildrenStart)
-                .map((plugin, i) => {
-                    return <div key={`plugin_children_start_${i}`}>{plugin.homePage!.additionalChildrenStart}</div>;
-                })}
-        </div>;
-
-        additionalPluginChildrenEnd = <div className={"flex flex-col gap-2"}>
-            {customizationController.plugins.filter(plugin => plugin.homePage?.additionalChildrenEnd)
-                .map((plugin, i) => {
-                    return <div key={`plugin_children_start_${i}`}>{plugin.homePage!.additionalChildrenEnd}</div>;
-                })}
-        </div>;
+        const sectionProps: PluginGenericProps = { context };
+
+        additionalPluginSections = (
+            <>
+                {customizationController.plugins
+                    .filter((p) => p.homePage?.includeSection)
+                    .map((plugin) => {
+                        const section = plugin.homePage!.includeSection!(
+                            sectionProps
+                        );
+                        return (
+                            <NavigationGroup
+                                group={section.title}
+                                key={`plugin_section_${plugin.key}`}
+                            >
+                                {section.children}
+                            </NavigationGroup>
+                        );
+                    })}
+            </>
+        );
+
+        additionalPluginChildrenStart = (
+            <div className="flex flex-col gap-2">
+                {customizationController.plugins
+                    .filter((p) => p.homePage?.additionalChildrenStart)
+                    .map((plugin, i) => (
+                        <div key={`plugin_children_start_${i}`}>
+                            {plugin.homePage!.additionalChildrenStart}
+                        </div>
+                    ))}
+            </div>
+        );
+
+        additionalPluginChildrenEnd = (
+            <div className="flex flex-col gap-2">
+                {customizationController.plugins
+                    .filter((p) => p.homePage?.additionalChildrenEnd)
+                    .map((plugin, i) => (
+                        <div key={`plugin_children_end_${i}`}>
+                            {plugin.homePage!.additionalChildrenEnd}
+                        </div>
+                    ))}
+            </div>
+        );
     }
 
+    /* ───────────────────────────────────────────────────────────────
+       Render
+       ─────────────────────────────────────────────────────────────── */
     return (
-        <div id="home_page"
-             ref={containerRef}
-             className="py-2 overflow-auto h-full w-full">
-            <Container maxWidth={"6xl"}>
+        <div ref={containerRef} className="py-2 overflow-auto h-full w-full">
+            <Container maxWidth="6xl">
+                {/* search & actions */}
                 <div
                     className="w-full sticky py-4 transition-all duration-400 ease-in-out top-0 z-10 flex flex-row gap-4"
-                    style={{ top: direction === "down" ? -84 : 0 }}>
-                    <SearchBar onTextSearch={updateSearchResults}
-                               placeholder={"Search collections"}
-                               large={false}
-                               autoFocus={true}
-                               innerClassName={"w-full"}
-                               className={"w-full flex-grow"}/>
+                    style={{ top: direction === "down" ? -84 : 0 }}
+                >
+                    <SearchBar
+                        onTextSearch={updateSearch}
+                        placeholder="Search collections"
+                        autoFocus
+                        innerClassName="w-full"
+                        className="w-full flex-grow"
+                    />
                     {additionalActions}
                 </div>
 
                 <FavouritesView hidden={performingSearch}/>
 
                 {additionalChildrenStart}
-
                 {additionalPluginChildrenStart}
 
-                {allGroups.map((group, index) => {
-
-                    const AdditionalCards: React.ComponentType<PluginHomePageAdditionalCardsProps>[] = [];
-                    const actionProps: PluginHomePageAdditionalCardsProps = {
-                        group,
-                        context
-                    };
-
-                    if (customizationController.plugins) {
-                        customizationController.plugins.forEach(plugin => {
-                            if (plugin.homePage?.AdditionalCards) {
-                                AdditionalCards.push(...toArray(plugin.homePage?.AdditionalCards));
-                            }
-                        });
-                    }
-
-                    const thisGroupCollections = filteredNavigationEntries
-                        .filter((entry) => entry.group === group || (!entry.group && group === undefined));
-                    if (thisGroupCollections.length === 0 && (AdditionalCards.length === 0 || performingSearch))
-                        return null;
-                    return (
-                        <NavigationGroup
-                            group={group}
-                            key={`plugin_section_${group}`}>
-
-                            <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.path}_${entry.name}`} className="col-span-1">
-                                        <NavigationCardBinding
-                                            {...entry}
-                                            onClick={() => {
-                                                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>
-                                ))}
-                                {group?.toLowerCase() !== "admin" && AdditionalCards &&
-                                    AdditionalCards.map((AdditionalCard, i) => (
-                                        <div key={`nav_${group}_add_${i}`}>
-                                            <AdditionalCard {...actionProps} />
-                                        </div>
-                                    ))}
+                {/* ─────── DND context ─────── */}
+                <DndContext
+                    sensors={sensors}
+                    collisionDetection={collisionDetection}
+                    measuring={{
+                        droppable: {
+                            strategy: MeasuringStrategy.Always,
+                            frequency: 500
+                        }
+                    }}
+                    onDragStart={onDragStart}
+                    onDragOver={onDragOver}
+                    onDragEnd={onDragEnd}
+                    onDragCancel={onDragCancel}
+                    modifiers={dndModifiers}
+                >
+                    <SortableContext
+                        key={JSON.stringify(containers)}
+                        items={containers}
+                        strategy={verticalListSortingStrategy}
+                    >
+                        {items.map((groupData) => {
+                            const groupKey = groupData.name;
+                            const entriesInGroup = groupData.entries;
+
+                            const AdditionalCards: React.ComponentType<PluginHomePageAdditionalCardsProps>[] =
+                                [];
+                            customizationController.plugins?.forEach((p) => {
+                                if (p.homePage?.AdditionalCards)
+                                    AdditionalCards.push(
+                                        ...toArray(p.homePage.AdditionalCards)
+                                    );
+                            });
+
+                            const actionProps: PluginHomePageAdditionalCardsProps = {
+                                group:
+                                    groupKey === DEFAULT_GROUP_NAME
+                                        ? undefined
+                                        : groupKey,
+                                context
+                            };
+
+                            if (
+                                entriesInGroup.length === 0 &&
+                                (AdditionalCards.length === 0 || performingSearch) &&
+                                !groupOrderFromNavController.includes(groupKey)
+                            )
+                                return null;
+
+                            return (
+                                <SortableNavigationGroup
+                                    key={groupKey}
+                                    groupName={groupKey}
+                                    disabled={dndDisabled}
+                                >
+                                    <NavigationGroup
+                                        group={
+                                            groupKey === DEFAULT_GROUP_NAME
+                                                ? undefined
+                                                : groupKey
+                                        }
+                                        minimised={
+                                            draggingGroupId === groupKey &&
+                                            !isDraggingCardOnly
+                                        }
+                                        isPotentialCardDropTarget={
+                                            isDraggingCardOnly
+                                        }
+                                        dndDisabled={dndDisabled}
+                                        onEditGroup={() => {
+                                            if (dndDisabled) return;
+                                            setDialogOpenForGroup(groupKey);
+                                        }}
+                                    >
+                                        <NavigationGroupDroppable
+                                            id={groupKey}
+                                            itemIds={entriesInGroup.map(
+                                                (e) => e.url
+                                            )}
+                                            isPotentialCardDropTarget={
+                                                isDraggingCardOnly
+                                            }
+                                        >
+                                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ">
+                                                {entriesInGroup.map(
+                                                    (entry) => (
+                                                        <SortableNavigationCard
+                                                            key={entry.url}
+                                                            entry={entry}
+                                                            onClick={() => {
+                                                                let event: CMSAnalyticsEvent =
+                                                                    "unmapped_event";
+                                                                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";
+
+                                                                context.analyticsController?.onAnalyticsEvent?.(
+                                                                    event,
+                                                                    {
+                                                                        path: entry.path
+                                                                    }
+                                                                );
+                                                            }}
+                                                        />
+                                                    )
+                                                )}
+                                                {!performingSearch &&
+                                                    groupKey.toLowerCase() !==
+                                                    ADMIN_GROUP_NAME.toLowerCase() &&
+                                                    AdditionalCards.map(
+                                                        (C, i) => (
+                                                            <C
+                                                                key={`extra_${groupKey}_${i}`}
+                                                                {...actionProps}
+                                                            />
+                                                        )
+                                                    )}
+                                            </div>
+                                        </NavigationGroupDroppable>
+                                    </NavigationGroup>
+                                </SortableNavigationGroup>
+                            );
+                        })}
+                    </SortableContext>
+
+                    <NewGroupDropZone
+                        disabled={dndDisabled}
+                        setIsHovering={setIsHoveringNewGroupDropZone}
+                    />
+
+                    <DragOverlay adjustScale={false} dropAnimation={dropAnimation}>
+                        {activeGroupData &&
+                        draggingGroupId === activeGroupData.name ? (
+                            <div
+                                className="rounded-lg bg-transparent"
+                                style={{
+                                    padding: 0,
+                                    margin: 0
+                                }}
+                            >
+                                <NavigationGroup
+                                    group={
+                                        activeGroupData.name ===
+                                        DEFAULT_GROUP_NAME
+                                            ? undefined
+                                            : activeGroupData.name
+                                    }
+                                    isPreview={false}
+                                    minimised
+                                />
                             </div>
-                        </NavigationGroup>
-                    );
-                })}
+                        ) : activeItemForOverlay ? (
+                            <NavigationCardBinding
+                                {...activeItemForOverlay}
+                                shrink={isHoveringNewGroupDropZone}
+                            />
+                        ) : null}
+                    </DragOverlay>
+                </DndContext>
+
+                {!performingSearch && adminGroupData && (
+                    <NavigationGroup group={adminGroupData.name}>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 ">
+                            {adminGroupData.entries.map((entry) => (
+                                <NavigationCardBinding
+                                    key={entry.url}
+                                    {...entry}
+                                    onClick={() => {
+                                        let event: CMSAnalyticsEvent =
+                                            "unmapped_event";
+                                        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";
+
+                                        context.analyticsController?.onAnalyticsEvent?.(
+                                            event,
+                                            { path: entry.path }
+                                        );
+                                    }}
+                                />
+                            ))}
+                        </div>
+                    </NavigationGroup>
+                )}
 
                 {additionalPluginSections}
-
                 {additionalPluginChildrenEnd}
-
                 {additionalChildrenEnd}
-
             </Container>
+
+            {dialogOpenForGroup && (
+                <RenameGroupDialog
+                    open
+                    initialName={dialogOpenForGroup}
+                    existingGroupNames={items
+                        .map((g) => g.name)
+                        .filter((n) => n !== dialogOpenForGroup)}
+                    onClose={() => setDialogOpenForGroup(null)}
+                    onRename={(newName) => {
+                        handleRenameGroup(dialogOpenForGroup, newName);
+                        setDialogOpenForGroup(null);
+                    }}
+                />
+            )}
         </div>
     );
 }