@rebasepro/cms 0.17.3 → 0.18.1

package/src/collection_editor/ui/collection_editor/EntityActionsEditTab.tsx

@@ -1,164 +0,0 @@
-
-import React from "react";
-import {
-    ConfirmationDialog,
-    useCustomizationController
-} from "@rebasepro/app";
-import { resolveEntityAction } from "../../_cms_internals";
-
-import { EntityAction, AdminCollection } from "@rebasepro/cms-types";
-import {
-    Alert,
-    Button,
-    Container,
-    IconButton,
-    iconSize,
-    Paper,
-    PlusIcon,
-    Table,
-    TableBody,
-    TableCell,
-    TableRow,
-    Tooltip,
-    Trash2Icon,
-    Typography
-} from "@rebasepro/ui";
-import { useFormex } from "@rebasepro/forms";
-import { EntityActionsSelectDialog } from "./EntityActionsSelectDialog";
-
-export function EntityActionsEditTab({
-    collection,
-    embedded = false
-}: {
-    collection: AdminCollection,
-    embedded?: boolean;
-}) {
-
-    const { entityActions: contextEntityActions } = useCustomizationController();
-
-    const [addEntityActionDialogOpen, setAddEntityActionDialogOpen] = React.useState<boolean>(false);
-    const [actionToDelete, setActionToDelete] = React.useState<string | undefined>();
-
-    const {
-        values,
-        setFieldValue
-    } = useFormex<AdminCollection>();
-
-    const resolvedEntityActions = ((values.entityActions ?? []) as (string | EntityAction<any>)[])
-        .filter((e): e is string => typeof e === "string")
-        .map((e: string) => resolveEntityAction(e, contextEntityActions))
-        .filter(Boolean) as EntityAction<any>[] ?? [];
-    const hardCodedEntityActions = collection.entityActions?.filter((e: string | EntityAction<any>): e is EntityAction<any> => typeof e !== "string") ?? [];
-    const totalEntityActions = resolvedEntityActions.length + hardCodedEntityActions.length;
-
-    const content = (
-        <div className={"flex flex-col gap-12"}>
-            <div className={"flex-grow flex flex-col gap-4 items-start w-full"}>
-                <Typography variant={"h6"}>
-                    Custom actions
-                </Typography>
-
-                {<>
-                    <div className={"flex flex-col gap-4 w-full"}>
-                        {totalEntityActions > 0 && <Table>
-                            <TableBody>
-                                {resolvedEntityActions.map((action) => (
-                                    <TableRow key={action.key}>
-                                        <TableCell
-                                            align="left">
-                                            <Typography variant={"subtitle2"} className={"flex-grow"}>
-                                                {action.name}
-                                            </Typography>
-                                        </TableCell>
-                                        <TableCell
-                                            align="right">
-                                            <Tooltip title={"Remove"}
-                                                asChild={true}>
-                                                <IconButton size="small"
-                                                    onClick={(e) => {
-                                                        e.preventDefault();
-                                                        e.stopPropagation();
-                                                        setActionToDelete(action.key);
-                                                    }}
-                                                    color="inherit">
-                                                    <Trash2Icon size={iconSize.small}/>
-                                                </IconButton>
-                                            </Tooltip>
-                                        </TableCell>
-                                    </TableRow>
-                                ))}
-                                {hardCodedEntityActions.map((action: EntityAction<any>) => (
-                                    <TableRow key={action.key}>
-                                        <TableCell
-                                            align="left">
-                                            <Typography variant={"subtitle2"} className={"flex-grow"}>
-                                                {action.name}
-                                            </Typography>
-                                            <Typography variant={"caption"} className={"flex-grow"}>
-                                                This action is defined in code with
-                                                key <code>{action.key}</code>
-                                            </Typography>
-                                        </TableCell>
-                                    </TableRow>
-                                ))}
-                            </TableBody>
-                        </Table>}
-
-                        <Button
-                            onClick={() => {
-                                setAddEntityActionDialogOpen(true);
-                            }}
-                            variant="filled"
-                            color="neutral"
-                            startIcon={<PlusIcon/>}>
-                            Add custom entity action
-                        </Button>
-                    </div>
-
-                </>}
-
-            </div>
-
-        </div>
-    );
-
-    return (
-        <>
-            {embedded ? (
-                content
-            ) : (
-                <div className={"overflow-auto my-auto"}>
-                    <Container maxWidth={"2xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
-                        {content}
-                    </Container>
-                    <div style={{ height: "52px" }}/>
-                </div>
-            )}
-
-            {actionToDelete &&
-                <ConfirmationDialog open={Boolean(actionToDelete)}
-                    onAccept={() => {
-                        setFieldValue("entityActions", values.entityActions?.filter((e: string | EntityAction<any>) => e !== actionToDelete));
-                        setActionToDelete(undefined);
-                    }}
-                    onCancel={() => setActionToDelete(undefined)}
-                    title={<>Remove this action?</>}
-                    body={<>This will <b>not
-                        delete any data</b>, only
-                        the action in the admin</>}/>}
-
-            <EntityActionsSelectDialog
-                open={addEntityActionDialogOpen}
-                onClose={(selectedActionKey) => {
-                    if (selectedActionKey) {
-                        const value = [...(values.entityActions ?? []), selectedActionKey]
-                            // only actions that are defined in the registry
-                            .filter((e: string | EntityAction<any>): e is string => typeof e === "string" && (contextEntityActions ?? []).some(action => action.key === e));
-                        ;
-                        setFieldValue("entityActions", value);
-                    }
-                    setAddEntityActionDialogOpen(false);
-                }}/>
-        </>
-    );
-}

package/src/collection_editor/ui/collection_editor/EntityActionsSelectDialog.tsx

@@ -1,40 +0,0 @@
-import { useCustomizationController } from "@rebasepro/app";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
-import React from "react";
-
-export function EntityActionsSelectDialog({
-    open,
-    onClose
-}: { open: boolean, onClose: (selectedActionKey?: string) => void }) {
-    const {
-        entityActions
-    } = useCustomizationController();
-
-    return <Dialog
-        maxWidth={"md"}
-        open={open}>
-        <DialogTitle>Select custom action</DialogTitle>
-        <DialogContent className={"flex flex-col gap-4"}>
-            {entityActions?.map((action) => {
-                return <Button
-                    key={action.key}
-                    onClick={() => onClose(action.key)}
-                    fullWidth
-                    variant={"text"}
-                >
-                    {action.name} ({action.key})
-                </Button>;
-            })}
-            {(entityActions ?? []).length === 0 &&
-                <Typography variant={"body2"}>
-                    No custom actions defined. Define your custom actions 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/EntityCustomViewsSelectDialog.tsx

@@ -1,39 +0,0 @@
-import { useCustomizationController } from "@rebasepro/app";
-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

@@ -1,373 +0,0 @@
-
-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 {
-    Badge,
-    Button,
-    CircularProgress,
-    DebouncedTextField,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    IconButton,
-    iconSize,
-    ListIcon,
-    Paper,
-    RefreshCcwIcon,
-    SettingsIcon,
-    Typography
-} from "@rebasepro/ui";
-import { extractEnumFromValues } from "@rebasepro/inference";
-import { Field, Formex, getIn, useCreateFormex, useFormex } from "@rebasepro/forms";
-
-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) => {
-                if (!enumValue) return false;
-                return !currentEnumValues?.some((v: EnumValueConfig) => v.id === enumValue.id);
-            });
-
-            newEnumValues.forEach((enumValue) => {
-                if (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"}/> : <RefreshCcwIcon/>}
-                        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 && <RefreshCcwIcon size={iconSize.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={iconSize.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`) as string | undefined : 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>
-}
-