@firecms/collection_editor 3.0.0 → 3.1.0-canary.02232f4

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/EditorCollectionAction.tsx

@@ -1,4 +1,4 @@
-import { CollectionActionsProps, useAuthController, useNavigationController } from "@firecms/core";
+import { CollectionActionsProps, useAuthController, useNavigationController, useTranslation } from "@firecms/core";
 import { IconButton, SettingsIcon, Tooltip, } from "@firecms/ui";
 
 import { useCollectionEditorController } from "../useCollectionEditorController";
@@ -16,7 +16,7 @@ export function EditorCollectionAction({
     const collectionEditorController = useCollectionEditorController();
 
     const parentCollection = navigationController.getCollectionFromIds(parentCollectionIds);
-
+    const { t } = useTranslation();
     const canEditCollection = collectionEditorController.configPermissions
         ? collectionEditorController.configPermissions({
             user: authController.user,
@@ -26,7 +26,7 @@ export function EditorCollectionAction({
 
     const editorButton = <Tooltip
         asChild={true}
-        title={canEditCollection ? "Edit collection" : "You don't have permissions to edit this collection"}>
+        title={canEditCollection ? t("edit_collection") : t("no_permissions_edit_collection")}>
         <IconButton
             size={"small"}
             color={"primary"}

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/EditorEntityAction.tsx

@@ -1,4 +1,4 @@
-import { PluginFormActionProps, useAuthController, useNavigationController } from "@firecms/core";
+import { PluginFormActionProps, useAuthController, useNavigationController, useTranslation } from "@firecms/core";
 import { IconButton, SettingsIcon, Tooltip, } from "@firecms/ui";
 
 import { useCollectionEditorController } from "../useCollectionEditorController";
@@ -14,6 +14,7 @@ export function EditorEntityAction({
     const authController = useAuthController();
     const navigationController = useNavigationController();
     const collectionEditorController = useCollectionEditorController();
+    const { t } = useTranslation();
 
     const parentCollection = navigationController.getCollectionFromIds(parentCollectionIds);
 
@@ -28,7 +29,7 @@ export function EditorEntityAction({
 
     const editorButton = <Tooltip
         asChild={true}
-        title={canEditCollection ? (isDirty ? "You need to save the document before changing the schema" : "Edit schema for this form") : "You don't have permissions to edit this collection"}>
+        title={canEditCollection ? (isDirty ? t("save_before_changing_schema") : t("edit_schema_for_this_form")) : t("no_permissions_to_edit_collection")}>
         <IconButton
             color={"primary"}
             disabled={!canEditCollection || isDirty}

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

@@ -1,18 +1,20 @@
 import { AddIcon, Button } from "@firecms/ui";
+import { useTranslation } from "@firecms/core";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 
 export function NewCollectionButton() {
+    const { t } = useTranslation();
     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,
                     sourceClick: "new_collection_button"
                 })}>
             <AddIcon/>
-            New collection
+            {t("new_collection")}
         </Button>
     </div>
 }

package/src/ui/NewCollectionCard.tsx

@@ -1,4 +1,4 @@
-import { PluginHomePageAdditionalCardsProps, useAuthController } from "@firecms/core";
+import { PluginHomePageAdditionalCardsProps, useAuthController, useTranslation } from "@firecms/core";
 import { AddIcon, Card, cls, Typography } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 
@@ -12,6 +12,8 @@ export function NewCollectionCard({
 
     const authController = useAuthController();
 
+    const { t } = useTranslation();
+
     const collectionEditorController = useCollectionEditorController();
     const canCreateCollections = collectionEditorController.configPermissions
         ? collectionEditorController.configPermissions({
@@ -35,11 +37,12 @@ export function NewCollectionCard({
                 <AddIcon color="primary" size={"large"}/>
                 <Typography color="primary"
                             variant={"caption"}
-                            className={"font-medium"}>{"Add new collection".toUpperCase()}</Typography>
+                            className={"font-medium"}>{t("add_new_collection").toUpperCase()}</Typography>
 
                 {!canCreateCollections &&
-                    <Typography variant={"caption"}>You don&apos;t have permissions to create
-                        collections</Typography>
+                    <Typography variant={"caption"}>
+                        {t("no_permissions_create_collection")}
+                    </Typography>
                 }
             </div>
 

package/src/ui/PropertyAddColumnComponent.tsx

@@ -1,4 +1,4 @@
-import { EntityTableController, getDefaultPropertiesOrder, useAuthController } from "@firecms/core";
+import { EntityTableController, getDefaultPropertiesOrder, useAuthController, useTranslation } from "@firecms/core";
 import { AddIcon, Tooltip } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 import { PersistedCollection } from "../types/persisted_collection";
@@ -17,6 +17,7 @@ export function PropertyAddColumnComponent({
 
     const authController = useAuthController();
     const collectionEditorController = useCollectionEditorController();
+    const { t } = useTranslation();
     const canEditCollection = collectionEditorController.configPermissions
         ? collectionEditorController.configPermissions({
             user: authController.user,
@@ -27,9 +28,9 @@ export function PropertyAddColumnComponent({
     return (
         <Tooltip
             asChild={true}
-            title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
+            title={canEditCollection ? t("add_new_property") : t("no_permission_add_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({