@rebasepro/admin 0.0.1-canary.4f204c2

package/src/collection_editor/ui/AddKanbanColumnAction.tsx

@@ -0,0 +1,186 @@
+
+import React, { useCallback, useMemo, useState } from "react";
+import {
+    useAuthController,
+    useCustomizationController,
+    useTranslation
+} from "@rebasepro/core";
+import { getPropertyInPath } from "../_cms_internals";
+import { EntityCollection, EnumValueConfig, StringProperty } from "@rebasepro/types";
+import { resolveEnumValues } from "@rebasepro/common";
+import { Button, cls, defaultBorderMixin, Dialog, DialogActions, DialogContent, IconButton, TextField, Typography } from "@rebasepro/ui";
+import { PlusIcon } from "lucide-react";
+import { useCollectionsConfigController } from "../useCollectionsConfigController";
+import { toSnakeCase } from "@rebasepro/utils";
+
+/**
+ * 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 { t } = useTranslation();
+
+    // Get current enum values
+    const currentEnumValues = useMemo(() => {
+        const property = getPropertyInPath(collection.properties, columnProperty);
+        if (!property || !("type" in property) || property.type !== "string") {
+            return [];
+        }
+        const stringProperty = property as StringProperty;
+        if (!stringProperty.enum) {
+            return [];
+        }
+        return resolveEnumValues(stringProperty.enum) ?? [];
+    }, [collection, 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;
+
+            // Property not in persisted config - use base collection
+            if (!property || typeof property === "function") {
+                property = collection.properties?.[columnProperty];
+                isCodeDefinedProperty = true;
+            }
+
+            // Type guard: property must be an object with type === "string"
+            if (!property || typeof property === "function" || !("type" in property) || property.type !== "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 { type: "string"; enum?: EnumValueConfig[]; 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 enum
+            const updatedProperty = isCodeDefinedProperty
+                ? {
+                    type: "string" as const,
+                    name: stringProperty.name || columnProperty,
+                    enum: updatedEnumValues
+                }
+                : {
+                    ...property,
+                    enum: updatedEnumValues
+                };
+
+            // Save the updated property
+            await configController.saveProperty({
+                path: fullPath,
+                propertyKey: columnProperty,
+                property: updatedProperty as StringProperty,
+                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-900 hover:bg-surface-100 dark:hover:bg-surface-900",
+                    "cursor-pointer transition-colors duration-200 ease-in-out",
+                    defaultBorderMixin
+                )}
+                onClick={() => setDialogOpen(true)}
+            >
+                <IconButton className="opacity-60 hover:opacity-100">
+                    <PlusIcon/>
+                </IconButton>
+                <Typography variant="caption" color="secondary" className="mt-2">
+                    {t("studio_add_kanban_column")}
+                </Typography>
+            </div>
+
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent className="max-w-md">
+                    <Typography variant="h6" className="mb-4">
+                        {t("studio_add_kanban_column_title")}
+                    </Typography>
+                    <Typography variant="body2" color="secondary" className="mb-4">
+                        {t("studio_add_kanban_column_desc", { property: columnProperty })}
+                    </Typography>
+                    <TextField
+                        label={t("studio_add_kanban_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}
+                    >
+                        {t("studio_add_kanban_column_cancel")}
+                    </Button>
+                    <Button
+                        onClick={handleAddColumn}
+                        disabled={saving || !newValueLabel.trim()}
+                    >
+                        {saving ? t("studio_add_kanban_column_adding") : t("studio_add_kanban_column_add")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}

package/src/collection_editor/ui/CollectionViewHeaderAction.tsx

@@ -0,0 +1,50 @@
+import { useTranslation } from "@rebasepro/core";
+import { EntityCollection, EntityTableController, Property } from "@rebasepro/types";
+import { IconButton, Tooltip } from "@rebasepro/ui";
+import { SettingsIcon } from "lucide-react";
+import React from "react";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+
+export function CollectionViewHeaderAction({
+    propertyKey,
+    onHover,
+    property,
+    path,
+    parentCollectionIds,
+    collection,
+    tableController
+}: {
+    property: Property,
+    propertyKey: string,
+    onHover: boolean,
+    path: string,
+    parentCollectionIds: string[],
+    collection: EntityCollection;
+    tableController: EntityTableController;
+}) {
+
+    const collectionEditorController = useCollectionEditorController();
+    const { t } = useTranslation();
+
+    return (
+        <Tooltip
+            asChild={true}
+            title={t("studio_collection_view_edit")}>
+            <IconButton
+                className={onHover ? "bg-white dark:bg-surface-900" : "hidden"}
+                onClick={() => {
+                    collectionEditorController.editProperty({
+                        propertyKey,
+                        property,
+                        editedCollectionId: collection.slug,
+                        parentCollectionIds,
+                        collection,
+                        existingEntities: tableController.data ?? []
+                    });
+                }}
+                size={"small"}>
+                <SettingsIcon/>
+            </IconButton>
+        </Tooltip>
+    )
+}

package/src/collection_editor/ui/EditorCollectionAction.tsx

@@ -0,0 +1,58 @@
+import { useCollectionRegistryController } from "../_cms_internals";
+import { useAuthController, useTranslation } from "@rebasepro/core";
+import { EntityCollection, CollectionActionsProps } from "@rebasepro/types";
+import { IconButton, Tooltip } from "@rebasepro/ui";
+import { SettingsIcon } from "lucide-react";
+
+import { useCollectionEditorController } from "../useCollectionEditorController";
+
+export function EditorCollectionAction({
+    path,
+    parentCollectionIds,
+    collection,
+    tableController
+}: CollectionActionsProps) {
+
+    const authController = useAuthController();
+    const collectionRegistry = useCollectionRegistryController();
+    const collectionEditorController = useCollectionEditorController();
+    const { t } = useTranslation();
+
+    const parentCollection = parentCollectionIds.length > 0 ? collectionRegistry.getCollection(parentCollectionIds[parentCollectionIds.length - 1]) : undefined;
+
+    const canEditCollection = !collectionEditorController.configController?.readOnly && (collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        }).editCollections
+        : true);
+
+    const tooltipTitle = collectionEditorController.configController?.readOnly
+        ? (collectionEditorController.configController.readOnlyReason || t("studio_editor_collection_disabled"))
+        : (canEditCollection ? t("studio_editor_collection_edit") : t("studio_editor_collection_no_permission"));
+
+    const editorButton = <Tooltip
+        asChild={true}
+        title={tooltipTitle}>
+        <IconButton
+            size={"small"}
+            color={"primary"}
+            disabled={!canEditCollection}
+            onClick={canEditCollection
+                ? () => collectionEditorController?.editCollection({
+                    id: collection.slug,
+                    path,
+                    parentCollectionIds,
+                    parentCollection: parentCollection as EntityCollection,
+                    existingEntities: tableController?.data ?? []
+                })
+                : undefined}>
+            <SettingsIcon/>
+        </IconButton>
+    </Tooltip>;
+
+    return <>
+        {editorButton}
+    </>
+
+}

package/src/collection_editor/ui/EditorCollectionActionStart.tsx

@@ -0,0 +1,93 @@
+import { deepEqual as equal } from "fast-equals"
+
+import {
+    useAuthController,
+    useSnackbarController,
+    useTranslation
+} from "@rebasepro/core";
+import { EntityCollection, CollectionActionsProps } from "@rebasepro/types";
+import { Button, Tooltip } from "@rebasepro/ui";
+import { SaveIcon, UndoIcon } from "lucide-react";
+
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { useCollectionsConfigController } from "../useCollectionsConfigController";
+import { mergeDeep } from "@rebasepro/utils";
+
+export function EditorCollectionActionStart({
+    path,
+    parentCollectionIds,
+    collection,
+    tableController
+}: CollectionActionsProps) {
+
+    const authController = useAuthController();
+    const collectionEditorController = useCollectionEditorController();
+    const configController = useCollectionsConfigController();
+    const snackbarController = useSnackbarController();
+    const { t } = useTranslation();
+
+    const canEditCollection = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        }).editCollections
+        : true;
+
+    let saveDefaultFilterButton = null;
+    if (!equal(getObjectOrNull(tableController.filterValues), getObjectOrNull(collection.filter)) ||
+        !equal(getObjectOrNull(tableController.sortBy), getObjectOrNull(collection.sort))) {
+        saveDefaultFilterButton = <>
+            <Tooltip
+                asChild={true}
+                title={tableController.sortBy || tableController.filterValues ? t("studio_editor_collection_start_save_filter") : t("studio_editor_collection_start_clear_filter")}>
+                <Button
+                    size={"small"}
+                    variant={"text"}
+                    onClick={() => configController
+                        ?.saveCollection({
+                            id: collection.slug,
+                            parentCollectionIds,
+                            collectionData: mergeDeep(collection as EntityCollection,
+                                {
+                                    filter: tableController.filterValues ?? null,
+                                    sort: tableController.sortBy ?? null
+                                })
+                        }).then(() => {
+                            snackbarController.open({
+                                type: "success",
+                                message: t("studio_editor_collection_start_saved")
+                            });
+                        })}>
+                    <SaveIcon/>
+                </Button>
+            </Tooltip>
+
+            {(collection.filter || collection.sort) && <Tooltip
+                title={t("studio_editor_collection_start_reset_filter")}>
+                <Button
+                    size={"small"}
+                    variant={"text"}
+                    onClick={() => {
+                        tableController.clearFilter?.();
+                        if (collection?.filter)
+                            tableController.setFilterValues?.(collection?.filter);
+                        if (collection?.sort)
+                            tableController.setSortBy?.(collection?.sort);
+                    }}>
+                    <UndoIcon/>
+                </Button>
+            </Tooltip>}
+        </>;
+    }
+
+    return <>
+        {canEditCollection && saveDefaultFilterButton}
+    </>
+
+}
+
+function getObjectOrNull(o?: object): object | null {
+    if (o && Object.keys(o).length === 0)
+        return o
+    return o ?? null;
+}

package/src/collection_editor/ui/EditorEntityAction.tsx

@@ -0,0 +1,54 @@
+import { useCollectionRegistryController } from "../_cms_internals";
+import { useAuthController, useTranslation } from "@rebasepro/core";
+import { EntityCollection, PluginFormActionProps } from "@rebasepro/types";
+import { IconButton, Tooltip } from "@rebasepro/ui";
+import { SettingsIcon } from "lucide-react";
+
+import { useCollectionEditorController } from "../useCollectionEditorController";
+
+export function EditorEntityAction({
+    path,
+    parentCollectionIds,
+    collection,
+    formContext
+}: PluginFormActionProps) {
+
+    const authController = useAuthController();
+    const collectionRegistry = useCollectionRegistryController();
+    const collectionEditorController = useCollectionEditorController();
+    const { t } = useTranslation();
+
+    const parentCollection = parentCollectionIds.length > 0 ? collectionRegistry.getCollection(parentCollectionIds[parentCollectionIds.length - 1]) : undefined;
+
+    const canEditCollection = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        }).editCollections
+        : true;
+
+    const isDirty = formContext?.formex.dirty ?? false;
+
+    const editorButton = <Tooltip
+        asChild={true}
+        title={canEditCollection ? (isDirty ? t("studio_editor_entity_save_first") : t("studio_editor_entity_edit_schema")) : t("studio_editor_entity_no_permission")}>
+        <IconButton
+            color={"primary"}
+            disabled={Boolean(!canEditCollection || isDirty)}
+            onClick={canEditCollection
+                ? () => collectionEditorController?.editCollection({
+                    id: collection.slug,
+                    path,
+                    parentCollectionIds,
+                    parentCollection: parentCollection as EntityCollection
+                })
+                : undefined}>
+            <SettingsIcon/>
+        </IconButton>
+    </Tooltip>;
+
+    return <>
+        {editorButton}
+    </>
+
+}

package/src/collection_editor/ui/HomePageEditorCollectionAction.tsx

@@ -0,0 +1,120 @@
+import {
+    ConfirmationDialog,
+    useAuthController,
+    useSnackbarController,
+    useTranslation
+} from "@rebasepro/core";
+import { PluginHomePageActionsProps } from "@rebasepro/types";
+import { IconButton, Menu, MenuItem } from "@rebasepro/ui";
+import { CopyIcon, MoreVerticalIcon, SettingsIcon, Trash2Icon } from "lucide-react";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { useState } from "react";
+import { useCollectionsConfigController } from "../useCollectionsConfigController";
+
+export function HomePageEditorCollectionAction({
+    slug,
+    collection
+}: PluginHomePageActionsProps) {
+
+    const snackbarController = useSnackbarController();
+    const authController = useAuthController();
+    const configController = useCollectionsConfigController();
+    const collectionEditorController = useCollectionEditorController();
+    const { t } = useTranslation();
+
+    const permissions = collectionEditorController?.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        })
+        : {
+            createCollections: false,
+            editCollections: false,
+            deleteCollections: false
+        };
+
+    const onEditCollectionClicked = () => {
+        collectionEditorController?.editCollection({
+            id: collection.slug,
+            parentCollectionIds: []
+        });
+    };
+
+    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 = () => {
+        configController?.deleteCollection({ id: collection.slug }).then(() => {
+            setDeleteRequested(false);
+            snackbarController.open({
+                message: t("studio_home_collection_deleted"),
+                type: "success"
+            });
+        });
+    };
+
+    return <>
+
+        <div>
+            {permissions.deleteCollections &&
+                <Menu
+                    trigger={<IconButton size={"small"}>
+                        <MoreVerticalIcon/>
+                    </IconButton>}
+                >
+                    {permissions.createCollections &&
+                        <MenuItem
+                            dense={true}
+                            onClick={(event: React.MouseEvent) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                onDuplicateCollectionClicked();
+                            }}>
+                            <CopyIcon/>
+                            {t("studio_home_duplicate_collection")}
+                        </MenuItem>
+                    }
+                    <MenuItem
+                        dense={true}
+                        onClick={(event: React.MouseEvent) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            setDeleteRequested(true);
+                        }}>
+                        <Trash2Icon/>
+                        {t("studio_home_delete")}
+                    </MenuItem>
+
+                </Menu>
+
+            }
+
+            {permissions.editCollections &&
+                <IconButton
+                    size={"small"}
+                    onClick={(event: React.MouseEvent) => {
+                        onEditCollectionClicked();
+                    }}>
+                    <SettingsIcon/>
+                </IconButton>}
+        </div>
+
+        <ConfirmationDialog
+            open={deleteRequested}
+            onAccept={deleteCollection}
+            onCancel={() => setDeleteRequested(false)}
+            title={<>{t("studio_home_confirm_delete_title")}</>}
+            body={<>{t("studio_home_confirm_delete_no_data")}</>}/>
+    </>;
+
+}

package/src/collection_editor/ui/KanbanSetupAction.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { useTranslation } from "@rebasepro/core";
+import { EntityCollection } from "@rebasepro/types";
+import { Button } from "@rebasepro/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 { t } = useTranslation();
+
+    const handleConfigureClick = () => {
+        collectionEditorController.editCollection({
+            id: collection.slug,
+            parentCollectionIds,
+            initialView: "display",
+            expandKanban: true
+        });
+    };
+
+    return (
+        <Button
+            variant="filled"
+            onClick={handleConfigureClick}
+        >
+            {t("studio_kanban_configure")}
+        </Button>
+    );
+}

package/src/collection_editor/ui/MissingReferenceWidget.tsx

@@ -0,0 +1,33 @@
+import { useCollectionRegistryController } from "../_cms_internals";
+import { ErrorView, useTranslation } from "@rebasepro/core";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { Button } from "@rebasepro/ui";
+import { prettifyIdentifier } from "@rebasepro/utils";
+import { getLastSegment } from "@rebasepro/common";
+
+export function MissingReferenceWidget({ path: pathProp }: {
+    path: string
+}) {
+    const registry = useCollectionRegistryController();
+    const path = getLastSegment(pathProp);
+    const parentCollectionIds = registry.getParentCollectionIds(pathProp);
+    const collectionEditor = useCollectionEditorController();
+    const { t } = useTranslation();
+    return <div className={"p-1 flex flex-col items-center"}>
+        <ErrorView error={t("studio_missing_reference_error", { path })}/>
+        <Button className={"mx-2"}
+            size={"small"}
+            onClick={() => {
+                collectionEditor.createCollection({
+                    initialValues: { path,
+name: prettifyIdentifier(path) },
+                    parentCollectionIds,
+                    redirect: false,
+                    sourceClick: "missing_reference"
+                });
+            }}>
+            {t("studio_missing_reference_create")}
+        </Button>
+    </div>;
+}
+

package/src/collection_editor/ui/NewCollectionButton.tsx

@@ -0,0 +1,27 @@
+import { Button } from "@rebasepro/ui";
+import { PlusIcon } from "lucide-react";
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { useAdminModeController, useTranslation } from "@rebasepro/core";
+
+export function NewCollectionButton() {
+    const adminModeController = useAdminModeController();
+    const collectionEditorController = useCollectionEditorController();
+    const { t } = useTranslation();
+
+    if (adminModeController.mode === "studio") {
+        return null;
+    }
+
+    return <div className={"bg-surface-50 dark:bg-surface-900 min-w-fit rounded-xs"}>
+        <Button className={"min-w-fit"}
+
+            onClick={() => collectionEditorController.createCollection({
+                parentCollectionIds: [],
+                redirect: true,
+                sourceClick: "new_collection_button"
+            })}>
+            <PlusIcon/>
+            {t("studio_new_collection")}
+        </Button>
+    </div>
+}