@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/collection_editor/ui/collection_editor/GeneralSettingsForm.tsx

@@ -0,0 +1,252 @@
+
+import { IconForView } from "@rebasepro/core";
+import { FieldCaption } from "../../_cms_internals";
+import React, { useState } from "react";
+import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { SearchIconsView } from "../../_cms_internals";
+import type { EntityCollection, PostgresCollection } from "@rebasepro/types";
+import { BooleanSwitchWithLabel, Chip, cls, Container, DebouncedTextField, Dialog, ExpandablePanel, IconButton, Select, SelectItem, TextField, Tooltip, Typography , iconSize } from "@rebasepro/ui";
+import { HistoryIcon, SearchIcon } from "lucide-react";
+import { Field, getIn, useFormex } from "@rebasepro/formex";
+import { useCollectionsConfigController } from "../../useCollectionsConfigController";
+import { singular, toSnakeCase } from "@rebasepro/utils";
+
+export function GeneralSettingsForm({
+    isNewCollection,
+    existingPaths,
+    existingIds,
+    parentCollection
+}: {
+    isNewCollection: boolean;
+    existingPaths?: string[];
+    existingIds?: string[];
+    parentCollection?: EntityCollection;
+}) {
+
+    const {
+        values,
+        setFieldValue,
+        handleChange,
+        touched,
+        errors,
+        setFieldTouched,
+        submitCount
+    } = useFormex<PostgresCollection>();
+
+    const [iconDialogOpen, setIconDialogOpen] = useState(false);
+
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+    const configController = useCollectionsConfigController();
+
+    const updateDatabaseId = (databaseId: string) => {
+        setFieldValue("databaseId", databaseId ?? undefined);
+    }
+
+    const updateName = (name: string) => {
+        setFieldValue("name", name);
+
+        const pathTouched = getIn(touched, "table");
+        if (!pathTouched && isNewCollection && name) {
+            setFieldValue("table", toSnakeCase(name));
+        }
+
+        const idTouched = getIn(touched, "slug");
+        if (!idTouched && isNewCollection && name) {
+            setFieldValue("slug", toSnakeCase(name));
+        }
+
+        const singularNameTouched = getIn(touched, "singularName");
+        if (!singularNameTouched && isNewCollection && name) {
+            setFieldValue("singularName", singular(name));
+        }
+    };
+
+    const collectionIcon = <IconForView collectionOrView={values}/>;
+    const isSubcollection = !!parentCollection;
+    const showErrors = submitCount > 0;
+
+    return (
+        <div className={"overflow-auto my-auto"}>
+            <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
+
+                <div>
+                    <div className="flex flex-row gap-2 items-center">
+                        <Typography variant={!isNewCollection ? "h5" : "h4"} className={"flex-grow"}>
+                            {isNewCollection ? "New collection" : `${values?.name} collection`}
+                        </Typography>
+                        <DefaultDatabaseField databaseId={values.databaseId}
+                            disabled={configController?.readOnly}
+                            onDatabaseIdUpdate={updateDatabaseId}/>
+
+                        <Tooltip title={"Change icon"}
+                            asChild={true}>
+                            <IconButton
+                                shape={"square"}
+                                disabled={configController?.readOnly}
+                                onClick={() => setIconDialogOpen(true)}>
+                                {collectionIcon}
+                            </IconButton>
+                        </Tooltip>
+                    </div>
+
+                    {parentCollection && <Chip colorScheme={"teal"}>
+                        <Typography variant={"caption"}>
+                            This is a subcollection of <b>{parentCollection.name}</b>
+                        </Typography>
+                    </Chip>}
+
+                </div>
+
+                <fieldset disabled={configController?.readOnly} className="contents">
+                    <div className={"grid grid-cols-12 gap-4"}>
+
+                        {/* Name */}
+                        <div className={"col-span-12"}>
+                            <TextField
+                                value={values.name ?? ""}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => updateName(e.target.value)}
+                                label={"Name"}
+                                autoFocus={true}
+                                required
+                                error={showErrors && Boolean(errors.name)}/>
+                            <FieldCaption error={touched.name && Boolean(errors.name)}>
+                                {touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)"}
+                            </FieldCaption>
+                        </div>
+
+                        {/* Table name */}
+                        <div className={cls("col-span-12")}>
+                            <Field name={"table"}
+                                as={DebouncedTextField}
+                                label={"Table name"}
+                                required
+                                error={showErrors && Boolean(errors.table)}/>
+
+                            <FieldCaption error={touched.table && Boolean(errors.table)}>
+                                {touched.table && Boolean(errors.table)
+                                    ? errors.table
+                                    : isSubcollection ? "Relative path to the parent (no need to include the parent path)" : "PostgreSQL table name for this collection"}
+                            </FieldCaption>
+                        </div>
+
+
+                        {/* Singular Name */}
+                        <div className={"col-span-12"}>
+                            <TextField
+                                error={showErrors && Boolean(errors.singularName)}
+                                name={"singularName"}
+                                aria-describedby={"singularName-helper"}
+                                onChange={(e) => {
+                                    setFieldTouched("singularName", true);
+                                    return handleChange(e);
+                                }}
+                                value={values.singularName ?? ""}
+                                label={"Singular name"}/>
+                            <FieldCaption error={showErrors && Boolean(errors.singularName)}>
+                                {showErrors && Boolean(errors.singularName) ? errors.singularName : "Optionally define a singular name for your entities"}
+                            </FieldCaption>
+                        </div>
+
+                        {/* Description */}
+                        <div className={"col-span-12"}>
+                            <TextField
+                                error={showErrors && Boolean(errors.description)}
+                                name="description"
+                                value={values.description ?? ""}
+                                onChange={handleChange}
+                                multiline
+                                minRows={2}
+                                aria-describedby="description-helper-text"
+                                label="Description"
+                            />
+                            <FieldCaption error={showErrors && Boolean(errors.description)}>
+                                {showErrors && Boolean(errors.description) ? errors.description : "Description of the collection, you can use markdown"}
+                            </FieldCaption>
+                        </div>
+
+                        {/* Collection ID */}
+                        <div className={"col-span-12"}>
+                            <DebouncedTextField
+                                name={"slug"}
+                                value={values.slug ?? ""}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setFieldValue("slug", e.target.value)}
+                                disabled={!isNewCollection}
+                                label={"Collection ID"}
+                                error={showErrors && Boolean(errors.slug)}/>
+                            <FieldCaption error={touched.slug && Boolean(errors.slug)}>
+                                {touched.slug && Boolean(errors.slug) ? errors.slug : "This ID identifies this collection. Typically the same as the path."}
+                            </FieldCaption>
+                        </div>
+
+                    </div>
+
+                    {/* Advanced Settings */}
+                    {/* eslint-disable-next-line no-constant-condition */}
+                    {false ? <ExpandablePanel
+                        title={<Typography variant="subtitle2">Advanced settings</Typography>}
+                        initiallyExpanded={false}
+                        className="mt-4"
+                        innerClassName="p-4 flex flex-col gap-4"
+                    >
+                        {/* HistoryIcon revisions */}
+                        <div>
+                            <BooleanSwitchWithLabel
+                                position={"start"}
+                                allowIndeterminate={true}
+                                label={<span className="flex items-center gap-2"><HistoryIcon size={iconSize.smallest}/>{values.history === null || values.history === undefined ? "Document history revisions enabled if enabled globally" : (
+                                    values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled"
+                                )}</span>}
+                                onValueChange={(v) => setFieldValue("history", v)}
+                                value={values.history ?? null}
+                            />
+                            <FieldCaption>
+                                When enabled, each document in this collection will have a history of changes.
+                                This is useful for auditing purposes. The data is stored in a subcollection of the document
+                                in your database, called <b>__history</b>.
+                            </FieldCaption>
+                        </div>
+
+                    </ExpandablePanel> : null}
+                </fieldset>
+
+                <div style={{ height: "52px" }}/>
+
+                <Dialog
+                    open={iconDialogOpen}
+                    onOpenChange={setIconDialogOpen}
+                    maxWidth={"xl"}
+                    fullWidth
+                >
+                    <div className={"p-4 overflow-auto min-h-[200px]"}>
+                        <SearchIconsView selectedIcon={typeof values.icon === "string" ? values.icon : undefined}
+                            onIconSelected={(icon: string) => {
+                                setIconDialogOpen(false);
+                                setFieldValue("icon", icon);
+                            }}/>
+                    </div>
+                </Dialog>
+
+            </Container>
+        </div>
+    );
+}
+
+function DefaultDatabaseField({
+    databaseId,
+    disabled = false,
+    onDatabaseIdUpdate
+}: { databaseId?: string, disabled?: boolean, onDatabaseIdUpdate: (databaseId: string) => void }) {
+
+    return <Tooltip title={"Database ID"}
+        side={"top"}
+        align={"start"}>
+        <TextField size={"small"}
+            invisible={true}
+            inputClassName={"text-end"}
+            disabled={disabled}
+            value={databaseId ?? ""}
+            onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => onDatabaseIdUpdate(e.target.value)}
+            placeholder={"(default)"}></TextField>
+    </Tooltip>
+}

package/src/collection_editor/ui/collection_editor/GetCodeDialog.tsx

@@ -0,0 +1,142 @@
+import { useSnackbarController } from "@rebasepro/core";
+import { EntityCollection } from "@rebasepro/types";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
+import { CopyIcon } from "lucide-react";
+import React from "react";
+import JSON5 from "json5";
+import { Highlight, themes } from "prism-react-renderer"
+import { camelCase } from "./utils/strings";
+import { clone } from "@rebasepro/formex";
+import { isEmptyObject } from "@rebasepro/utils";
+
+export function GetCodeDialog({
+    collection,
+    onOpenChange,
+    open
+}: { onOpenChange: (open: boolean) => void, collection: EntityCollection, open: boolean }) {
+
+    const snackbarController = useSnackbarController();
+
+    const code = collection
+        ? "import { EntityCollection } from \"@rebasepro/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode({ ...collection }), null, "\t")
+        : "No collection selected";
+    return <Dialog open={open}
+        onOpenChange={onOpenChange}
+        maxWidth={"4xl"}>
+        <DialogTitle variant={"h6"}>Code for {collection.name}</DialogTitle>
+        <DialogContent>
+
+            <Typography variant={"body2"} className={"my-4 mb-8"}>
+                If you want to customise the collection in code, you can add this collection code to your CMS
+                app configuration.
+                More info in the <a
+                    rel="noopener noreferrer"
+                    href={"https://rebase.pro/docs/cloud/quickstart"}>docs</a>.
+            </Typography>
+            <Highlight
+                theme={themes.vsDark}
+                code={code}
+                language="typescript"
+            >
+                {({
+                    className,
+                    style,
+                    tokens,
+                    getLineProps,
+                    getTokenProps
+                }) => (
+                    <pre style={style} className={"p-4 rounded-xs text-sm"}>
+                        {tokens.map((line, i) => (
+                            <div key={i} {...getLineProps({ line })}>
+                                {line.map((token, key) => (
+                                    <span key={key} {...getTokenProps({ token })}/>
+                                ))}
+                            </div>
+                        ))}
+                    </pre>
+                )}
+            </Highlight>
+
+        </DialogContent>
+        <DialogActions>
+            <Button
+                variant={"text"}
+                size={"small"}
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    snackbarController.open({
+                        type: "success",
+                        message: "Copied"
+                    })
+                    return navigator.clipboard.writeText(code);
+                }}>
+                <CopyIcon/>
+                CopyIcon to clipboard
+            </Button>
+            <Button onClick={() => onOpenChange(false)}>Close</Button>
+        </DialogActions>
+    </Dialog>;
+}
+
+function collectionToCode(collection: EntityCollection): object {
+
+    const propertyCleanup = (value: unknown): unknown => {
+        if (value === undefined || value === null) {
+            return value;
+        }
+        const valueCopy = clone(value);
+        if (typeof valueCopy === "function") {
+            return valueCopy;
+        }
+        if (Array.isArray(valueCopy)) {
+            return valueCopy.map((v: unknown) => propertyCleanup(v));
+        }
+        if (typeof valueCopy === "object") {
+            if (valueCopy === null)
+                return valueCopy;
+            const obj = valueCopy as Record<string, any>;
+            Object.keys(obj).forEach((key) => {
+                if (!isEmptyObject(obj)) {
+                    const childRes = propertyCleanup(obj[key]);
+                    if (childRes !== null && childRes !== undefined && childRes !== false && !isEmptyObject(childRes)) {
+                        obj[key] = childRes;
+                    } else {
+                        delete obj[key];
+                    }
+                }
+            });
+            delete obj.resolved;
+            delete obj.propertiesOrder;
+            delete obj.propertyConfig;
+
+        }
+
+        return valueCopy;
+    }
+
+    return {
+        id: collection.slug,
+        name: collection.name,
+        singularName: collection.singularName,
+        path: collection.slug,
+        description: collection.description,
+
+        icon: collection.icon,
+        group: collection.group,
+        filter: collection.filter,
+        sort: collection.sort,
+        properties: Object.entries({
+            ...(collection.properties ?? {})
+        })
+            .map(([key, value]) => ({
+                [key]: propertyCleanup(value)
+            }))
+            .reduce((a, b) => ({
+                ...a,
+                ...b
+            }), {})
+        // subcollections: (collection.subcollections ?? []).map(collectionToCode)
+    }
+
+}

package/src/collection_editor/ui/collection_editor/KanbanConfigSection.tsx

@@ -0,0 +1,194 @@
+
+import { FieldCaption } from "../../_cms_internals";
+import React, { useMemo, useRef, useState } from "react";
+import { useAuthController, useCustomizationController } from "@rebasepro/core";
+import { EntityCollection, Property } from "@rebasepro/types";
+import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
+import { getFieldConfig } from "../../../components/field_configs";
+import { IconButton, Select, SelectItem, Typography, Button , iconSize } from "@rebasepro/ui";
+import { XIcon } from "lucide-react";
+import { useFormex } from "@rebasepro/formex";
+import { PropertyFormDialog } from "./PropertyEditView";
+import { unslugify } from "@rebasepro/utils";
+
+export function KanbanConfigSection({
+    className,
+    forceExpanded
+}: {
+    className?: string;
+    forceExpanded?: boolean;
+}) {
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+    const { values, setFieldValue } = useFormex<EntityCollection>();
+    const panelRef = useRef<HTMLDivElement>(null);
+    const [columnPropertyDialogOpen, setColumnPropertyDialogOpen] = useState(false);
+
+    // Get enum string properties (for columnProperty)
+    const enumStringProperties = useMemo(() => {
+        const result: { key: string; label: string; property: Property }[] = [];
+        if (!values.properties) return result;
+
+        Object.entries(values.properties).forEach(([key, prop]) => {
+            if (prop && "type" in prop && prop.type === "string" && prop.enum) {
+                result.push({
+                    key,
+                    label: (prop as Property).name || key,
+                    property: prop as Property
+                });
+            }
+        });
+        return result;
+    }, [values.properties]);
+
+    const kanbanConfig = values.kanban;
+
+    // Check if columnProperty references a non-existent property
+    const columnPropertyMissing = Boolean(kanbanConfig?.columnProperty) &&
+        !enumStringProperties.some(p => p.key === kanbanConfig?.columnProperty);
+
+    // Scroll to section when forceExpanded
+    React.useEffect(() => {
+        if (forceExpanded && panelRef.current) {
+            setTimeout(() => {
+                panelRef.current?.scrollIntoView({ behavior: "smooth",
+block: "center" });
+            }, 100);
+        }
+    }, [forceExpanded]);
+
+    const showCreateButton = !kanbanConfig?.columnProperty || columnPropertyMissing;
+    const dialogPropertyKey = columnPropertyMissing && kanbanConfig?.columnProperty
+        ? kanbanConfig.columnProperty
+        : "status";
+    const dialogPropertyName = columnPropertyMissing && kanbanConfig?.columnProperty
+        ? unslugify(kanbanConfig.columnProperty)
+        : "Status";
+
+    return (
+        <div className={className} ref={panelRef}>
+            <Select
+                key={`column-select-${enumStringProperties.length}`}
+                name="kanban.columnProperty"
+                label="Kanban Column Property"
+                fullWidth={true}
+                position={"item-aligned"}
+                disabled={enumStringProperties.length === 0}
+                error={columnPropertyMissing}
+                value={kanbanConfig?.columnProperty ?? ""}
+                onValueChange={(v) => {
+                    if (v) {
+                        setFieldValue("kanban", {
+                            ...kanbanConfig,
+                            columnProperty: v
+                        });
+                    } else {
+                        setFieldValue("kanban", undefined);
+                    }
+                }}
+                renderValue={(value) => {
+                    if (columnPropertyMissing) {
+                        return <span className="text-red-500">{value} (not found)</span>;
+                    }
+                    const prop = enumStringProperties.find(p => p.key === value);
+                    if (!prop) return "Select a property";
+                    const fieldConfig = getFieldConfig(prop.property, customizationController.propertyConfigs);
+                    return (
+                        <div className="flex items-center gap-2">
+                            <PropertyConfigBadge propertyConfig={fieldConfig}/>
+                            <span>{prop.label}</span>
+                        </div>
+                    );
+                }}
+                endAdornment={kanbanConfig?.columnProperty ? (
+                    <IconButton
+                        size="small"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            setFieldValue("kanban", undefined);
+                        }}
+                    >
+                        <XIcon size={iconSize.smallest}/>
+                    </IconButton>
+                ) : undefined}
+            >
+                {enumStringProperties.map((prop) => {
+                    const fieldConfig = getFieldConfig(prop.property, customizationController.propertyConfigs);
+                    return (
+                        <SelectItem key={prop.key} value={prop.key}>
+                            <div className="flex items-center gap-3">
+                                <PropertyConfigBadge propertyConfig={fieldConfig}/>
+                                <div>
+                                    <div>{prop.label}</div>
+                                    <Typography variant="caption" color="secondary">
+                                        {fieldConfig?.name || "Enum"}
+                                    </Typography>
+                                </div>
+                            </div>
+                        </SelectItem>
+                    );
+                })}
+            </Select>
+            <FieldCaption error={columnPropertyMissing}>
+                {columnPropertyMissing
+                    ? `Property "${kanbanConfig?.columnProperty}" does not exist or is not an enum string property. Please select a valid property or clear the selection.`
+                    : enumStringProperties.length === 0
+                        ? "No enum string properties found. Add a string property with enum to use Kanban view."
+                        : "Select a string property with enum values to group entities into columns"
+                }
+            </FieldCaption>
+
+            {showCreateButton && (
+                <>
+                    <Button
+                        variant="text"
+                        size="small"
+                        className="ml-3.5 mt-2"
+                        onClick={() => setColumnPropertyDialogOpen(true)}
+                    >
+                        + Create &quot;{dialogPropertyKey}&quot; property
+                    </Button>
+                    <PropertyFormDialog
+                        open={columnPropertyDialogOpen}
+                        onCancel={() => setColumnPropertyDialogOpen(false)}
+                        property={{
+                            type: "string",
+                            name: dialogPropertyName,
+                            enum: [
+                                { id: "todo",
+label: "To Do" },
+                                { id: "in_progress",
+label: "In Progress" },
+                                { id: "done",
+label: "Done" }
+                            ]
+                        } as Property}
+                        propertyKey={dialogPropertyKey}
+                        existingProperty={false}
+                        autoOpenTypeSelect={false}
+                        autoUpdateId={false}
+                        inArray={false}
+                        allowDataInference={false}
+                        propertyConfigs={customizationController.propertyConfigs}
+
+                        existingPropertyKeys={Object.keys(values.properties ?? {})}
+                        onPropertyChanged={({ id, property }) => {
+                            const newProperties = {
+                                ...values.properties,
+                                [id!]: property
+                            };
+                            const newPropertiesOrder = [...(values.propertiesOrder ?? Object.keys(values.properties ?? {})), id];
+                            setFieldValue("properties", newProperties);
+                            setFieldValue("propertiesOrder", newPropertiesOrder);
+                            setFieldValue("kanban", {
+                                ...kanbanConfig,
+                                columnProperty: id
+                            });
+                            setColumnPropertyDialogOpen(false);
+                        }}
+                    />
+                </>
+            )}
+        </div>
+    );
+}

package/src/collection_editor/ui/collection_editor/LayoutModeSwitch.tsx

@@ -0,0 +1,41 @@
+import { cls, ToggleButtonGroup, Typography } from "@rebasepro/ui";
+import { ColumnsIcon, PanelLeftIcon, SquareIcon } from "lucide-react";
+
+export function LayoutModeSwitch({
+    value,
+    onChange,
+    className
+}: {
+    value: "side_panel" | "full_screen" | "split";
+    onChange: (value: "side_panel" | "full_screen" | "split") => void;
+    className?: string;
+}) {
+
+    return <div className={cls(className)}>
+        <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>Document view</Typography>
+        <div className={"my-2"}>
+            <ToggleButtonGroup
+                value={value}
+                onValueChange={onChange}
+                options={[
+                    {
+                        value: "side_panel",
+                        label: "Side panel",
+                        icon: <ColumnsIcon/>
+                    },
+                    {
+                        value: "full_screen",
+                        label: "Full screen",
+                        icon: <SquareIcon/>
+                    },
+                    {
+                        value: "split",
+                        label: "Split view",
+                        icon: <PanelLeftIcon/>
+                    }
+                ]}
+            />
+        </div>
+        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>Should documents be opened full screen or in an inline side dialog</Typography>
+    </div>
+}