@firecms/collection_editor 3.0.0 → 3.1.0-canary.1df3b2c

package/src/ui/AddKanbanColumnAction.tsx

@@ -0,0 +1,203 @@
+import React, { useCallback, useMemo, useState } from "react";
+import {
+    EntityCollection,
+    getPropertyInPath,
+    ResolvedStringProperty,
+    resolveCollection,
+    resolveEnumValues,
+    toSnakeCase,
+    useAuthController,
+    useCustomizationController
+} from "@firecms/core";
+import {
+    AddIcon,
+    Button,
+    cls,
+    defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    IconButton,
+    TextField,
+    Typography
+} from "@firecms/ui";
+import { useCollectionsConfigController } from "../useCollectionsConfigController";
+
+/**
+ * Component rendered at the end of the Kanban board to add new columns (enum values).
+ * Opens a dialog to input a new enum value for the column property.
+ */
+export function AddKanbanColumnAction({
+    collection,
+    fullPath,
+    parentCollectionIds,
+    columnProperty
+}: {
+    collection: EntityCollection;
+    fullPath: string;
+    parentCollectionIds: string[];
+    columnProperty: string;
+}) {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [newValueLabel, setNewValueLabel] = useState("");
+    const [saving, setSaving] = useState(false);
+
+    const configController = useCollectionsConfigController();
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+
+    const resolvedCollection = useMemo(() => resolveCollection({
+        collection,
+        path: fullPath,
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
+    }), [collection, fullPath, customizationController.propertyConfigs, authController]);
+
+    // Get current enum values
+    const currentEnumValues = useMemo(() => {
+        const property = getPropertyInPath(resolvedCollection.properties, columnProperty);
+        if (!property || !('dataType' in property) || property.dataType !== "string") {
+            return [];
+        }
+        const stringProperty = property as ResolvedStringProperty;
+        if (!stringProperty.enumValues) {
+            return [];
+        }
+        return resolveEnumValues(stringProperty.enumValues) ?? [];
+    }, [resolvedCollection, columnProperty]);
+
+    const handleAddColumn = useCallback(async () => {
+        if (!newValueLabel.trim() || !configController) return;
+
+        setSaving(true);
+        try {
+            // Check for property in persisted collection first, then resolved collection
+            // This handles code-defined properties that aren't in the persisted config
+            let property = collection?.properties?.[columnProperty];
+            let isCodeDefinedProperty = false;
+
+            if (!property || typeof property === 'function') {
+                // Property not in persisted config - check resolved collection
+                property = resolvedCollection.properties?.[columnProperty];
+                isCodeDefinedProperty = true;
+            }
+
+            // Type guard: property must be an object with dataType === "string"
+            if (!property || typeof property === 'function' || !('dataType' in property) || property.dataType !== "string") {
+                console.error("Column property not found or not a string. Property:", property);
+                setSaving(false);
+                return;
+            }
+
+            // Now we know property is a StringProperty
+            const stringProperty = property as { dataType: "string"; enumValues?: any; name?: string };
+
+            // Create new enum value
+            const newId = toSnakeCase(newValueLabel.trim());
+            const newEnumValue = {
+                id: newId,
+                label: newValueLabel.trim()
+            };
+
+            // Get existing enum values from the resolved property (current runtime values)
+            // Use currentEnumValues which is already computed from resolvedCollection
+            const existingEnumValues = currentEnumValues.map(ev => ({
+                id: ev.id,
+                label: ev.label
+            }));
+
+            // Add new enum value
+            const updatedEnumValues = [...existingEnumValues, newEnumValue];
+
+            // Build the property to save
+            // If it's code-defined, we create a minimal override with just enumValues
+            const updatedProperty = isCodeDefinedProperty
+                ? {
+                    dataType: "string" as const,
+                    name: stringProperty.name || columnProperty,
+                    enumValues: updatedEnumValues
+                }
+                : {
+                    ...property,
+                    enumValues: updatedEnumValues
+                };
+
+            // Save the updated property
+            await configController.saveProperty({
+                path: fullPath,
+                propertyKey: columnProperty,
+                property: updatedProperty as any,
+                parentCollectionIds
+            });
+
+            setNewValueLabel("");
+            setDialogOpen(false);
+        } catch (error) {
+            console.error("Error adding new column:", error);
+        } finally {
+            setSaving(false);
+        }
+    }, [newValueLabel, configController, collection, columnProperty, fullPath, parentCollectionIds]);
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === "Enter" && newValueLabel.trim()) {
+            handleAddColumn();
+        }
+    };
+
+    return (
+        <>
+            <div
+                className={cls(
+                    "border h-full w-80 min-w-80 mx-2 flex flex-col items-center justify-center rounded-md",
+                    "bg-surface-50 dark:bg-surface-950 hover:bg-surface-100 dark:hover:bg-surface-900",
+                    "cursor-pointer transition-colors duration-200 ease-in-out",
+                    defaultBorderMixin
+                )}
+                onClick={() => setDialogOpen(true)}
+            >
+                <IconButton size="large" className="opacity-60 hover:opacity-100">
+                    <AddIcon size="large" />
+                </IconButton>
+                <Typography variant="caption" color="secondary" className="mt-2">
+                    Add Column
+                </Typography>
+            </div>
+
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent className="max-w-md">
+                    <Typography variant="h6" className="mb-4">
+                        Add New Column
+                    </Typography>
+                    <Typography variant="body2" color="secondary" className="mb-4">
+                        Add a new option to the "{columnProperty}" property.
+                        This will create a new column in the Kanban board.
+                    </Typography>
+                    <TextField
+                        label="Column Name"
+                        value={newValueLabel}
+                        onChange={(e) => setNewValueLabel(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        autoFocus
+                        disabled={saving}
+                    />
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        variant="text"
+                        onClick={() => setDialogOpen(false)}
+                        disabled={saving}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        onClick={handleAddColumn}
+                        disabled={saving || !newValueLabel.trim()}
+                    >
+                        {saving ? "Adding..." : "Add Column"}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}

package/src/ui/EditorCollectionActionStart.tsx

@@ -35,7 +35,7 @@ export function EditorCollectionActionStart({
                 title={tableController.sortBy || tableController.filterValues ? "Save default filter and sort" : "Clear default filter and sort"}>
                 <Button
                     size={"small"}
-                    variant={"outlined"}
+                    variant={"text"}
                     onClick={() => configController
                         ?.saveCollection({
                             id: collection.id,
@@ -58,7 +58,6 @@ export function EditorCollectionActionStart({
             {(collection.initialFilter || collection.initialSort) && <Tooltip
                 title={"Reset to default filter and sort"}>
                 <Button
-                    color={"primary"}
                     size={"small"}
                     variant={"text"}
                     onClick={() => {

package/src/ui/HomePageEditorCollectionAction.tsx

@@ -4,26 +4,31 @@ import {
     useAuthController,
     useSnackbarController
 } from "@firecms/core";
-import { DeleteIcon, IconButton, Menu, MenuItem, MoreVertIcon, SettingsIcon, } from "@firecms/ui";
+import { ContentCopyIcon, DeleteIcon, IconButton, Menu, MenuItem, MoreVertIcon, SettingsIcon, } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 import { useState } from "react";
 import { useCollectionsConfigController } from "../useCollectionsConfigController";
 
 export function HomePageEditorCollectionAction({
-                                                   path,
-                                                   collection
-                                               }: PluginHomePageActionsProps) {
-
+    path,
+    collection
+}: PluginHomePageActionsProps) {
 
     const snackbarController = useSnackbarController();
     const authController = useAuthController();
     const configController = useCollectionsConfigController();
     const collectionEditorController = useCollectionEditorController();
 
-    const permissions = collectionEditorController.configPermissions({
-        user: authController.user,
-        collection
-    });
+    const permissions = collectionEditorController?.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        })
+        : {
+            createCollections: false,
+            editCollections: false,
+            deleteCollections: false
+        };
 
     const onEditCollectionClicked = () => {
         collectionEditorController?.editCollection({
@@ -32,6 +37,17 @@ export function HomePageEditorCollectionAction({
         });
     };
 
+    const onDuplicateCollectionClicked = () => {
+        // Use copyFrom to duplicate the collection with all properties
+        // The editor will handle clearing name, path, and id
+        collectionEditorController?.createCollection({
+            copyFrom: collection,
+            parentCollectionIds: [],
+            redirect: true,
+            sourceClick: "home_page_duplicate"
+        });
+    };
+
     const [deleteRequested, setDeleteRequested] = useState(false);
 
     const deleteCollection = () => {
@@ -50,9 +66,21 @@ export function HomePageEditorCollectionAction({
             {permissions.deleteCollections &&
                 <Menu
                     trigger={<IconButton size={"small"}>
-                        <MoreVertIcon size={"small"}/>
+                        <MoreVertIcon size={"small"} />
                     </IconButton>}
                 >
+                    {permissions.createCollections &&
+                        <MenuItem
+                            dense={true}
+                            onClick={(event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                onDuplicateCollectionClicked();
+                            }}>
+                            <ContentCopyIcon />
+                            Duplicate
+                        </MenuItem>
+                    }
                     <MenuItem
                         dense={true}
                         onClick={(event) => {
@@ -60,7 +88,7 @@ export function HomePageEditorCollectionAction({
                             event.stopPropagation();
                             setDeleteRequested(true);
                         }}>
-                        <DeleteIcon/>
+                        <DeleteIcon />
                         Delete
                     </MenuItem>
 
@@ -74,7 +102,7 @@ export function HomePageEditorCollectionAction({
                     onClick={(event) => {
                         onEditCollectionClicked();
                     }}>
-                    <SettingsIcon size={"small"}/>
+                    <SettingsIcon size={"small"} />
                 </IconButton>}
         </div>
 
@@ -85,7 +113,7 @@ export function HomePageEditorCollectionAction({
             title={<>Delete this collection?</>}
             body={<> This will <b>not
                 delete any data</b>, only
-                the collection in the CMS</>}/>
+                the collection in the CMS</>} />
     </>;
 
 }

package/src/ui/KanbanSetupAction.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { EntityCollection, useNavigationController } from "@firecms/core";
+import { Button } from "@firecms/ui";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+
+/**
+ * Component rendered when Kanban view is missing orderProperty configuration.
+ * Provides a CTA button to open the collection editor to configure Kanban.
+ */
+export function KanbanSetupAction({
+    collection,
+    fullPath,
+    parentCollectionIds
+}: {
+    collection: EntityCollection;
+    fullPath: string;
+    parentCollectionIds: string[];
+}) {
+    const collectionEditorController = useCollectionEditorController();
+
+    const handleConfigureClick = () => {
+        collectionEditorController.editCollection({
+            id: collection.id,
+            parentCollectionIds,
+            initialView: "display",
+            expandKanban: true
+        });
+    };
+
+    return (
+        <Button
+            variant="outlined"
+            onClick={handleConfigureClick}
+        >
+            Configure Kanban
+        </Button>
+    );
+}

package/src/ui/MissingReferenceWidget.tsx

@@ -11,7 +11,7 @@ export function MissingReferenceWidget({ path: pathProp }: {
     const collectionEditor = useCollectionEditorController();
     return <div className={"p-1 flex flex-col items-center"}>
         <ErrorView error={"No collection for path: " + path}/>
-        <Button className={"mx-2"} variant={"outlined"}
+        <Button className={"mx-2"}
                 size={"small"}
                 onClick={() => {
                     collectionEditor.createCollection({

package/src/ui/NewCollectionButton.tsx

@@ -5,7 +5,7 @@ export function NewCollectionButton() {
     const collectionEditorController = useCollectionEditorController();
     return <div className={"bg-surface-50 dark:bg-surface-900 min-w-fit rounded"}>
         <Button className={"min-w-fit"}
-                variant={"outlined"}
+
                 onClick={() => collectionEditorController.createCollection({
                     parentCollectionIds: [],
                     redirect: true,

package/src/ui/PropertyAddColumnComponent.tsx

@@ -29,7 +29,7 @@ export function PropertyAddColumnComponent({
             asChild={true}
             title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
             <div
-                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100 bg-opacity-40 hover:bg-surface-100 dark:bg-surface-950 dark:bg-opacity-40 dark:hover:bg-surface-950"}
+                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100 bg-opacity-40 bg-surface-100/40 hover:bg-surface-100 dark:bg-surface-950 dark:bg-opacity-40 dark:bg-surface-950/40 dark:hover:bg-surface-950"}
                 // className={onHover ? "bg-white dark:bg-surface-950" : undefined}
                 onClick={() => {
                     collectionEditorController.editProperty({

package/src/ui/collection_editor/AICollectionGeneratorPopover.tsx

@@ -0,0 +1,225 @@
+import React, { useState } from "react";
+import { EntityCollection, useNavigationController, useSnackbarController, AIIcon } from "@firecms/core";
+import {
+    Button,
+    CircularProgress,
+    IconButton,
+    Menu,
+    SendIcon,
+    TextField,
+    Typography
+} from "@firecms/ui";
+import {
+    CollectionGenerationCallback,
+    CollectionGenerationApiError,
+    CollectionOperation
+} from "../../api/generateCollectionApi";
+import { PersistedCollection } from "../../types/persisted_collection";
+
+export interface AICollectionGeneratorPopoverProps {
+    /**
+     * Current collection being edited (if modifying an existing collection)
+     */
+    existingCollection?: PersistedCollection;
+
+    /**
+     * Callback when a collection is generated or modified.
+     * Includes the collection and optionally the operations that were applied.
+     */
+    onGenerated: (collection: EntityCollection, operations?: CollectionOperation[]) => void;
+
+    /**
+     * Callback function for generating/modifying collections.
+     * The plugin is API-agnostic - the consumer provides the implementation.
+     */
+    generateCollection: CollectionGenerationCallback;
+
+    /**
+     * Optional custom trigger button. If not provided, a default AI button is used.
+     */
+    trigger?: React.ReactNode;
+
+    /**
+     * Size of the button
+     */
+    size?: "small" | "medium" | "large";
+
+    /**
+     * Whether to show the label text
+     */
+    showLabel?: boolean;
+}
+
+export function AICollectionGeneratorPopover({
+    existingCollection,
+    onGenerated,
+    generateCollection,
+    trigger,
+    size = "small",
+    showLabel = true
+}: AICollectionGeneratorPopoverProps) {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [prompt, setPrompt] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const navigation = useNavigationController();
+    const snackbarController = useSnackbarController();
+
+    const existingCollections = navigation.collections ?? [];
+
+    const handleGenerate = async () => {
+        if (!prompt.trim()) return;
+
+        setLoading(true);
+        setError(null);
+
+        try {
+            const collectionsContext = existingCollections.map(c => ({
+                path: c.path,
+                id: c.id,
+                name: c.name,
+                properties: c.properties,
+                propertiesOrder: c.propertiesOrder
+            }));
+
+            const result = await generateCollection({
+                prompt: prompt.trim(),
+                existingCollections: collectionsContext.slice(0, 30),
+                ...(existingCollection && {
+                    existingCollection: {
+                        path: existingCollection.path,
+                        id: existingCollection.id,
+                        name: existingCollection.name,
+                        properties: existingCollection.properties,
+                        propertiesOrder: existingCollection.propertiesOrder
+                    }
+                })
+            });
+
+            onGenerated(result.collection, result.operations);
+            setMenuOpen(false);
+            setPrompt("");
+            snackbarController.open({
+                type: "success",
+                message: existingCollection
+                    ? "Collection updated with AI suggestions"
+                    : "Collection generated successfully"
+            });
+        } catch (e) {
+            console.error("Error generating collection:", e);
+            const errorMessage = e instanceof CollectionGenerationApiError
+                ? e.message
+                : "Failed to generate collection. Please try again.";
+            setError(errorMessage);
+            snackbarController.open({
+                type: "error",
+                message: errorMessage
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleGenerate();
+        }
+    };
+
+    const defaultTrigger = showLabel ? (
+        <Button
+            variant="text"
+            size={size}
+            disabled={loading}
+            startIcon={loading
+                ? <CircularProgress size="smallest" />
+                : <AIIcon size="small" />
+            }
+        >
+            AI Assist
+        </Button>
+    ) : (
+        <IconButton
+            size={size}
+            disabled={loading}
+            aria-label="AI Assist"
+        >
+            {loading
+                ? <CircularProgress size="smallest" />
+                : <AIIcon size="small" />
+            }
+        </IconButton>
+    );
+
+    return (
+        <Menu
+            open={menuOpen}
+            onOpenChange={(open) => {
+                setMenuOpen(open);
+                if (!open) {
+                    setError(null);
+                }
+            }}
+            trigger={trigger ?? defaultTrigger}
+        >
+            <div className="p-4 flex flex-col gap-3 min-w-[360px] max-w-[480px]">
+                <div className="flex items-center gap-2">
+                    <AIIcon size="small" />
+                    <Typography variant="subtitle2">
+                        {existingCollection ? "Modify Collection with AI" : "Generate Collection with AI"}
+                    </Typography>
+                </div>
+
+                <Typography variant="caption" color="secondary">
+                    {existingCollection
+                        ? "Describe the changes you want to make to this collection."
+                        : "Describe the collection you want to create."
+                    }
+                </Typography>
+
+                <TextField
+                    size="small"
+                    multiline
+                    autoFocus
+                    className="w-full text-text-primary dark:text-text-primary-dark"
+                    value={prompt}
+                    onChange={(e) => setPrompt(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder={existingCollection
+                        ? "e.g., Add a thumbnail image field with storage, make price required..."
+                        : "e.g., Create a products collection with name, price, description, and category..."
+                    }
+                    disabled={loading}
+                />
+
+                {error && (
+                    <Typography variant="caption" className="text-red-500">
+                        {error}
+                    </Typography>
+                )}
+
+                <div className="flex justify-end gap-2">
+                    <Button
+                        variant="text"
+                        size="small"
+                        onClick={() => setMenuOpen(false)}
+                        disabled={loading}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="filled"
+                        size="small"
+                        onClick={handleGenerate}
+                        disabled={!prompt.trim() || loading}
+                        startIcon={loading ? <CircularProgress size="smallest" /> : undefined}
+                    >
+                        {loading ? "Generating..." : "Generate"}
+                    </Button>
+                </div>
+            </div>
+        </Menu>
+    );
+}