@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/collection_editor/ui/collection_editor/EntityCustomViewsSelectDialog.tsx

@@ -0,0 +1,39 @@
+import { useCustomizationController } from "@rebasepro/core";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
+import React from "react";
+
+export function EntityCustomViewsSelectDialog({
+    open,
+    onClose
+}: { open: boolean, onClose: (selectedViewKey?: string) => void }) {
+    const {
+        entityViews,
+    } = useCustomizationController();
+
+    return <Dialog
+        maxWidth={"md"}
+        open={open}>
+        <DialogTitle>Select custom view</DialogTitle>
+        <DialogContent className={"flex flex-col gap-4"}>
+            {entityViews?.map((view) => {
+                return <Button
+                    key={view.key}
+                    onClick={() => onClose(view.key)}
+                    fullWidth
+                    variant={"text"}
+                >
+                    {view.name} ({view.key})
+                </Button>;
+            })}
+            {(entityViews ?? []).length === 0 &&
+                <Typography variant={"body2"}>
+                    No custom views defined. Define your custom views in the customization settings, before using this
+                    dialog.
+                </Typography>
+            }
+        </DialogContent>
+        <DialogActions>
+            <Button onClick={() => onClose()}>Cancel</Button>
+        </DialogActions>
+    </Dialog>
+}

package/src/collection_editor/ui/collection_editor/EnumForm.tsx

@@ -0,0 +1,370 @@
+import { FieldCaption } from "../../_cms_internals";
+import React, { useEffect } from "react";
+import { deepEqual as equal } from "fast-equals"
+
+;
+import { EnumValueConfig, EnumValues } from "@rebasepro/types";
+import { ArrayContainer, ArrayEntryParams } from "../../_cms_internals";
+import {
+    AutorenewIcon,
+    Badge,
+    Button,
+    CircularProgress,
+    DebouncedTextField,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    ListIcon,
+    Paper,
+    SettingsIcon,
+    Typography
+} from "@rebasepro/ui";
+import { extractEnumFromValues } from "@rebasepro/schema-inference";
+import { Field, Formex, getIn, useCreateFormex, useFormex } from "@rebasepro/formex";
+
+type EnumFormProps = {
+    enumValues: EnumValueConfig[];
+    onValuesChanged?: (enumValues: EnumValueConfig[]) => void;
+    onError?: (error: boolean) => void;
+    updateIds: boolean;
+    disabled: boolean;
+    allowDataInference?: boolean;
+    getData?: () => Promise<string[]>;
+};
+
+export function EnumForm({
+    enumValues,
+    onValuesChanged,
+    onError,
+    updateIds,
+    disabled,
+    allowDataInference,
+    getData
+}: EnumFormProps) {
+
+    const formex = useCreateFormex<{
+        enum: EnumValueConfig[]
+    }>({
+        initialValues: { enum: enumValues },
+        validateOnChange: true,
+        validation: (values) => {
+            interface EnumFieldError { label?: string; id?: string; }
+            const enumErrors: EnumFieldError[] = [];
+            let hasAnyError = false;
+            if (values.enum) {
+                values.enum.forEach((enumValue, index) => {
+                    const fieldError: EnumFieldError = {};
+                    if (!enumValue?.label) {
+                        fieldError.label = "You must specify a label for this enum value entry";
+                        hasAnyError = true;
+                    }
+                    if (!enumValue?.id) {
+                        fieldError.id = "You must specify an ID for this enum value entry";
+                        hasAnyError = true;
+                    }
+                    enumErrors[index] = fieldError;
+                });
+            }
+            const errors = hasAnyError ? { enum: enumErrors } : {};
+            onError?.(hasAnyError);
+            return errors as Record<string, string>;
+        }
+    });
+
+    const {
+        values,
+        errors
+    } = formex;
+
+    useEffect(() => {
+        if (onValuesChanged) {
+            onValuesChanged(values.enum);
+        }
+    }, [values.enum]);
+
+    return <Formex value={formex as ReturnType<typeof useCreateFormex>}>
+        <EnumFormFields enumValuesPath={"enum"}
+            values={values}
+            errors={errors}
+            shouldUpdateId={updateIds}
+            disabled={disabled}
+            allowDataInference={allowDataInference}
+            getData={getData} />
+    </Formex>
+
+}
+
+type EnumFormFieldsProps = {
+    values: {
+        enum: EnumValueConfig[]
+    };
+    errors: { enum?: Array<{ label?: string; id?: string }> };
+    enumValuesPath: string;
+    shouldUpdateId: boolean;
+    disabled: boolean;
+    getData?: () => Promise<string[]>;
+    allowDataInference?: boolean;
+};
+
+// const EnumFormFields = React.memo(
+function EnumFormFields({
+    values,
+    errors,
+    disabled,
+    enumValuesPath,
+    shouldUpdateId,
+    allowDataInference,
+    getData,
+}: EnumFormFieldsProps) {
+
+    const {
+        setFieldValue
+    } = useFormex();
+
+    const [lastInternalIdAdded, setLastInternalIdAdded] = React.useState<number | undefined>();
+    const [editDialogIndex, setEditDialogIndex] = React.useState<number | undefined>();
+    const [inferring, setInferring] = React.useState(false);
+
+    const inferredValuesRef = React.useRef(new Set());
+    const inferredValues = inferredValuesRef.current;
+
+    const buildEntry = ({
+        index,
+        internalId
+    }: ArrayEntryParams) => {
+        const justAdded = lastInternalIdAdded === internalId;
+        const entryError = errors?.enum?.[index];
+        return <EnumEntry index={index}
+            disabled={disabled}
+            enumValuesPath={enumValuesPath}
+            autoFocus={justAdded}
+            entryError={entryError}
+            shouldUpdateId={shouldUpdateId || justAdded}
+            onDialogOpen={() => setEditDialogIndex(index)}
+            inferredEntry={inferredValues.has(values.enum[index]?.id as string)}
+            key={`${internalId}`} />;
+    };
+
+    const inferValues = async () => {
+        if (!getData)
+            return;
+        setInferring(true);
+        getData?.().then((data) => {
+            if (!data)
+                return;
+
+            const flatData = data.flat();
+
+            const fieldData = Array.from(new Set(flatData));
+
+            const currentEnumValues = values.enum;
+            const foundEnumValues = extractEnumFromValues(fieldData);
+
+            // add only new enum values
+            const newEnumValues = foundEnumValues.filter((enumValue) => {
+                return !currentEnumValues?.some((v: EnumValueConfig) => v.id === enumValue.id);
+            });
+
+            newEnumValues.forEach((enumValue) => {
+                inferredValues.add(enumValue.id);
+            });
+            setFieldValue(enumValuesPath, [...newEnumValues, ...currentEnumValues], true);
+        }).catch(e => {
+            console.error(e);
+        })
+            .finally(() => setInferring(false));
+    }
+
+    return (
+        <div className={"col-span-12"}>
+            <div className="ml-3.5 flex flex-row items-center">
+                <ListIcon />
+                <Typography variant={"subtitle2"}
+                    className="ml-2 grow">
+                    Values
+                </Typography>
+                {allowDataInference &&
+                    <Button loading={inferring}
+                        disabled={disabled || inferring}
+                        variant={"text"}
+                        size={"small"}
+                        onClick={inferValues}>
+                        {inferring ? <CircularProgress size={"smallest"} /> : <AutorenewIcon />}
+                        Infer values from data
+                    </Button>}
+            </div>
+
+            <Paper className="p-4 m-1">
+
+                <ArrayContainer droppableId={enumValuesPath}
+                    addLabel={"Add enum value"}
+                    value={values.enum}
+                    disabled={disabled}
+                    size={"small"}
+                    buildEntry={buildEntry}
+                    onInternalIdAdded={setLastInternalIdAdded}
+                    canAddElements={true}
+                    onValueChange={(value: EnumValueConfig[]) => setFieldValue(enumValuesPath, value)}
+                    newDefaultEntry={{
+                        id: "",
+                        label: ""
+                    }} />
+
+                <EnumEntryDialog index={editDialogIndex}
+                    open={editDialogIndex !== undefined}
+                    enumValuesPath={enumValuesPath}
+                    onClose={() => setEditDialogIndex(undefined)} />
+            </Paper>
+        </div>
+    );
+}
+
+type EnumEntryProps = {
+    index: number,
+    enumValuesPath: string,
+    shouldUpdateId: boolean,
+    autoFocus: boolean,
+    onDialogOpen: () => void;
+    disabled: boolean;
+    inferredEntry?: boolean;
+    entryError?: { label?: string, id?: string }
+};
+
+const EnumEntry = React.memo(
+    function EnumEntryInternal({
+        index,
+        shouldUpdateId: updateId,
+        enumValuesPath,
+        autoFocus,
+        onDialogOpen,
+        disabled,
+        inferredEntry,
+        entryError
+    }: EnumEntryProps) {
+
+        const {
+            values,
+            handleChange,
+            errors,
+            setFieldValue,
+            touched
+        } = useFormex<EnumValues>();
+
+        const shouldUpdateIdRef = React.useRef(!getIn(values, `${enumValuesPath}[${index}].id`));
+        const shouldUpdateId = updateId || shouldUpdateIdRef.current;
+
+        const idValue = getIn(values, `${enumValuesPath}[${index}].id`);
+        const labelValue = getIn(values, `${enumValuesPath}[${index}].label`);
+
+        const currentLabelRef = React.useRef(labelValue);
+
+        React.useEffect(() => {
+            if ((currentLabelRef.current === idValue || !idValue) && shouldUpdateId) {
+                setFieldValue(`${enumValuesPath}[${index}].id`, labelValue);
+            }
+            currentLabelRef.current = labelValue;
+        }, [labelValue]);
+
+        return (
+            <>
+                <div className={"flex w-full align-center justify-center"}>
+                    <Field name={`${enumValuesPath}[${index}].label`}
+                        as={DebouncedTextField}
+                        className={"grow"}
+                        required
+                        disabled={disabled}
+                        size="small"
+                        autoFocus={autoFocus}
+                        autoComplete="off"
+                        endAdornment={inferredEntry && <AutorenewIcon size={"small"} />}
+                        error={Boolean(entryError?.label)} />
+
+                    {!disabled &&
+                        <Badge color={"error"} invisible={!entryError?.id}>
+                            <IconButton
+                                size="small"
+                                aria-label="edit"
+                                className={"m-1"}
+                                onClick={() => onDialogOpen()}>
+                                <SettingsIcon size={"small"} />
+                            </IconButton>
+                        </Badge>}
+
+                </div>
+
+                {entryError?.label && <Typography variant={"caption"}
+                    className={"ml-3.5 text-red-500 dark:text-red-500"}>
+                    {entryError?.label}
+                </Typography>}
+
+                {entryError?.id && <Typography variant={"caption"}
+                    className={"ml-3.5 text-red-500 dark:text-red-500"}>
+                    {entryError?.id}
+                </Typography>}
+
+            </>);
+    },
+    function areEqual(prevProps: EnumEntryProps, nextProps: EnumEntryProps) {
+        return prevProps.index === nextProps.index &&
+            prevProps.enumValuesPath === nextProps.enumValuesPath &&
+            prevProps.shouldUpdateId === nextProps.shouldUpdateId &&
+            prevProps.inferredEntry === nextProps.inferredEntry &&
+            equal(prevProps.entryError, nextProps.entryError) &&
+            prevProps.autoFocus === nextProps.autoFocus;
+    }
+);
+
+function EnumEntryDialog({
+    index,
+    open,
+    onClose,
+    enumValuesPath
+}: {
+    index?: number;
+    open: boolean;
+    enumValuesPath: string;
+    onClose: () => void;
+}) {
+
+    const {
+        errors,
+    } = useFormex<EnumValues>();
+
+    const idError = index !== undefined ? getIn(errors, `${enumValuesPath}[${index}].id`) : undefined;
+    return <Dialog
+        maxWidth="md"
+        aria-labelledby="enum-edit-dialog"
+        open={open}
+        onOpenChange={(open) => !open ? onClose() : undefined}
+    >
+        <DialogTitle hidden>Enum form dialog</DialogTitle>
+        <DialogContent>
+            {index !== undefined &&
+                <div>
+                    <Field name={`${enumValuesPath}[${index}].id`}
+                        as={DebouncedTextField}
+                        required
+                        label={"ID"}
+                        size="small"
+                        autoComplete="off"
+                        error={Boolean(idError)} />
+
+                    <FieldCaption error={Boolean(idError)}>
+                        {idError ?? "Value saved in the data source"}
+                    </FieldCaption>
+                </div>}
+        </DialogContent>
+
+        <DialogActions>
+            <Button
+                autoFocus
+                onClick={onClose}>
+                Ok
+            </Button>
+        </DialogActions>
+
+    </Dialog>
+}
+

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

@@ -0,0 +1,277 @@
+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 { EntityCollection } from "@rebasepro/types";
+import {
+    BooleanSwitchWithLabel,
+    Chip,
+    cls,
+    Container,
+    DebouncedTextField,
+    Dialog,
+    ExpandablePanel,
+    HistoryIcon,
+    IconButton,
+    SearchIcon,
+    Select,
+    SelectItem,
+    TextField,
+    Tooltip,
+    Typography,
+    WarningIcon
+} from "@rebasepro/ui";
+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<EntityCollection>();
+
+    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={"tealDarker"}>
+                        <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 as any).table)} />
+
+                            <FieldCaption error={(touched as any).table && Boolean((errors as any).table)}>
+                                {(touched as any).table && Boolean((errors as any).table)
+                                    ? (errors as any).table
+                                    : isSubcollection ? "Relative path to the parent (no need to include the parent path)" : "PostgreSQL table name for this collection"}
+                            </FieldCaption>
+                            
+                            {(values as any).isTableMissing && (
+                                <div className="mt-2 p-3 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-300 border border-red-200 dark:border-red-800/30 rounded-md text-sm font-medium flex gap-2">
+                                    <div className="mt-0.5"><WarningIcon size="smallest" /></div>
+                                    <span>
+                                        The table <b>"{(values as any).table}"</b> does not exist in the database schema. 
+                                        If you've recently created it, make sure to generate and run your database migrations.
+                                    </span>
+                                </div>
+                            )}
+                        </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 */}
+                    {false && <ExpandablePanel
+                        title={<Typography variant="subtitle2">Advanced settings</Typography>}
+                        initiallyExpanded={false}
+                        className="mt-4"
+                        innerClassName="p-4 flex flex-col gap-4"
+                    >
+                        {/* History revisions */}
+                        <div>
+                            <BooleanSwitchWithLabel
+                                position={"start"}
+                                allowIndeterminate={true}
+                                label={<span className="flex items-center gap-2"><HistoryIcon size={"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>}
+                </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>
+}