@rebasepro/cms 0.17.3 → 0.18.1

package/src/collection_editor/ui/collection_editor/PropertyEditView.tsx

@@ -1,980 +0,0 @@
-
-import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
-import { deepEqual as equal } from "fast-equals"
-
-import { Formex, FormexController, getIn, useCreateFormex } from "@rebasepro/forms";
-import { ConfirmationDialog } from "@rebasepro/app";
-import { DEFAULT_FIELD_CONFIGS, getFieldConfig, getFieldId } from "../../../components/field_configs";
-import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
-import { Property } from "@rebasepro/types";
-import { PropertyConfig, PropertyConfigId, AdminCollection } from "@rebasepro/cms-types";
-import type { PropertyTypePreset, PropertyType } from "../../extensibility_types";
-import { toSerializableProperty, toSerializableCollectionConfig } from "../../serializable_utils";
-import type { SerializableProperty, SerializableCollectionConfig } from "../../serializable_types";
-import { isPropertyBuilder } from "@rebasepro/common";
-import {
-    AlertTriangleIcon,
-    Button,
-    Card,
-    cls,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    fieldBackgroundDisabledMixin,
-    fieldBackgroundHoverMixin,
-    fieldBackgroundMixin,
-    IconButton,
-    iconSize,
-    InfoLabel,
-    Tooltip,
-    Trash2Icon,
-    Typography
-} from "@rebasepro/ui";
-import { EnumPropertyField } from "./properties/EnumPropertyField";
-import { StoragePropertyField } from "./properties/StoragePropertyField";
-import { MapPropertyField } from "./properties/MapPropertyField";
-import { RepeatPropertyField } from "./properties/RepeatPropertyField";
-import { CommonPropertyFields } from "./properties/CommonPropertyFields";
-import { StringPropertyField } from "./properties/StringPropertyField";
-import { BooleanPropertyField } from "./properties/BooleanPropertyField";
-import { BlockPropertyField } from "./properties/BlockPropertyField";
-import { NumberPropertyField } from "./properties/NumberPropertyField";
-import { ReferencePropertyField } from "./properties/ReferencePropertyField";
-import { DateTimePropertyField } from "./properties/DateTimePropertyField";
-import { AdvancedPropertyValidation } from "./properties/advanced/AdvancedPropertyValidation";
-import { VectorPropertyField } from "./properties/VectorPropertyField";
-
-import { KeyValuePropertyField } from "./properties/KeyValuePropertyField";
-import { RelationPropertyField } from "./properties/RelationPropertyField";
-import { updatePropertyFromWidget } from "./utils/update_property_for_widget";
-import { UrlPropertyField } from "./properties/UrlPropertyField";
-import { supportedFields } from "./utils/supported_fields";
-import { MarkdownPropertyField } from "./properties/MarkdownPropertyField";
-import { isValidRegExp, mergeDeep } from "@rebasepro/utils";
-
-export type PropertyWithId = Property & {
-    id?: string;
-    conditions?: import("@rebasepro/types").PropertyConditions;
-};
-
-export type OnPropertyChangedParams = {
-    id?: string,
-    property: Property,
-    namespace?: string,
-    previousId?: string
-};
-
-export type PropertyFormProps = {
-    includeIdAndName?: boolean;
-    existingProperty: boolean;
-    autoUpdateId?: boolean;
-    autoOpenTypeSelect: boolean;
-    inArray: boolean;
-    propertyKey?: string;
-    propertyNamespace?: string;
-    property?: Property;
-    onPropertyChanged?: (params: OnPropertyChangedParams) => void;
-    onPropertyChangedImmediate?: boolean;
-    onDismiss?: () => void;
-    onDelete?: (id?: string, namespace?: string) => void;
-    onError?: (id: string, namespace?: string, error?: Record<string, any>) => void;
-    initialErrors?: Record<string, any>;
-    existingPropertyKeys?: string[];
-    forceShowErrors?: boolean;
-    allowDataInference: boolean;
-    getData?: () => Promise<object[]>;
-    getController?: (formex: FormexController<PropertyWithId>) => void;
-    propertyConfigs: Record<string, PropertyConfig>;
-    propertyTypePresets?: PropertyTypePreset[];
-    hiddenPropertyTypes?: PropertyType[];
-    renderExtraPropertyFields?: (params: {
-        metadata: Record<string, unknown>;
-        onMetadataChange: (key: string, value: unknown) => void;
-        property: SerializableProperty;
-        collection: SerializableCollectionConfig;
-    }) => React.ReactNode;
-    collectionValues?: AdminCollection;
-
-};
-
-export const PropertyForm = React.memo(
-    function PropertyForm(props: PropertyFormProps) {
-
-        const {
-            includeIdAndName = true,
-            autoOpenTypeSelect,
-            existingProperty,
-            autoUpdateId,
-            inArray,
-            propertyKey,
-            existingPropertyKeys,
-            propertyNamespace,
-            property,
-            onPropertyChanged,
-            onPropertyChangedImmediate = true,
-            onDismiss,
-            onDelete,
-            onError,
-            initialErrors,
-            forceShowErrors,
-            allowDataInference,
-            getController,
-            getData,
-            propertyConfigs,
-            propertyTypePresets,
-            hiddenPropertyTypes,
-            renderExtraPropertyFields,
-            collectionValues
-        } = props;
-
-        const initialValue: PropertyWithId = {
-            id: "",
-            name: ""
-        } as PropertyWithId;
-
-        const disabled = Boolean(property && isPropertyBuilder(property));
-
-        const lastSubmittedProperty = useRef<OnPropertyChangedParams | undefined>(property ? {
-            id: propertyKey,
-            previousId: propertyKey,
-            property
-        } : undefined);
-
-        const doOnPropertyChanged = ({
-            id,
-            property
-        }: OnPropertyChangedParams) => {
-            const params = {
-                id,
-                previousId: lastSubmittedProperty.current?.id,
-                property,
-                namespace: propertyNamespace
-            };
-            lastSubmittedProperty.current = params;
-            onPropertyChanged?.(params);
-        };
-
-        const formexController = useCreateFormex<PropertyWithId>({
-            debugId: "PROPERTY_FORM",
-            initialValues: property
-                ? { id: propertyKey,
-...property } as PropertyWithId
-                : initialValue,
-            initialErrors,
-            validateOnChange: true,
-            validateOnInitialRender: true,
-            onSubmit: (newPropertyWithId, controller) => {
-                const {
-                    id,
-                    ...property
-                } = newPropertyWithId;
-                doOnPropertyChanged({
-                    id,
-                    property: property as Property
-                });
-                if (!existingProperty)
-                    controller.resetForm({ values: initialValue });
-            },
-            validation: (values) => {
-                const errors: Record<string, any> = {};
-                if (includeIdAndName) {
-                    if (!values.name) {
-                        errors.name = "Required";
-                    } else {
-                        const nameError = validateName(values.name);
-                        if (nameError)
-                            errors.name = nameError;
-                    }
-                    if (!values.id) {
-                        errors.id = "Required";
-                    } else {
-                        const idError = validateId(values.id, existingPropertyKeys);
-                        if (idError)
-                            errors.id = idError;
-                    }
-                }
-
-                if (values.type === "string") {
-                    if (values.validation?.matches && !isValidRegExp(values.validation?.matches.toString())) {
-                        errors.validation = {
-                            matches: "Invalid regular expression"
-                        }
-                    }
-                }
-                if (values.type === "reference" && !values.path) {
-                    errors.slug = "You must specify a target collection for the field";
-                }
-                if (values.type === "vector" && (!values.dimensions || isNaN(Number(values.dimensions)) || Number(values.dimensions) <= 0)) {
-                    errors.dimensions = "Vector dimensions must be a positive number";
-                }
-                if (values.propertyConfig === "repeat") {
-                    if (!("of" in values) || !values.of) {
-                        errors.of = "You need to specify a repeat field";
-                    }
-                }
-                if (values.propertyConfig === "block") {
-                    if (!("oneOf" in values) || !values.oneOf) {
-                        errors.oneOf = "You need to specify the properties of this block";
-                    }
-                }
-                return errors;
-            }
-        });
-
-        useEffect(() => {
-            getController?.(formexController);
-        }, [formexController, getController]);
-
-        return <Formex value={formexController}>
-            <PropertyEditFormFields
-                onPropertyChanged={onPropertyChangedImmediate
-                    ? doOnPropertyChanged
-                    : undefined}
-                onDelete={onDelete}
-                includeIdAndTitle={includeIdAndName}
-                propertyNamespace={propertyNamespace}
-                onError={onError}
-                onDismiss={onDismiss}
-                showErrors={forceShowErrors || formexController.submitCount > 0}
-                existing={existingProperty}
-                autoUpdateId={autoUpdateId}
-                inArray={inArray}
-                autoOpenTypeSelect={autoOpenTypeSelect}
-                disabled={disabled}
-                getData={getData}
-                allowDataInference={allowDataInference}
-                propertyConfigs={propertyConfigs}
-                propertyTypePresets={propertyTypePresets}
-                hiddenPropertyTypes={hiddenPropertyTypes}
-                renderExtraPropertyFields={renderExtraPropertyFields}
-                collectionValues={collectionValues}
-                {...formexController}/>
-        </Formex>;
-    }, (a, b) =>
-    a.getData === b.getData &&
-    a.propertyKey === b.propertyKey &&
-    a.propertyNamespace === b.propertyNamespace &&
-    a.includeIdAndName === b.includeIdAndName &&
-    a.autoOpenTypeSelect === b.autoOpenTypeSelect &&
-    a.autoUpdateId === b.autoUpdateId &&
-    a.existingPropertyKeys === b.existingPropertyKeys &&
-    a.existingProperty === b.existingProperty
-);
-
-export function PropertyFormDialog({
-    open,
-    onCancel,
-    onOkClicked,
-    onPropertyChanged,
-    getData,
-    ...formProps
-}: PropertyFormProps & {
-    open?: boolean;
-    onOkClicked?: () => void;
-    onCancel?: () => void;
-}) {
-    const formexRef = useRef<FormexController<PropertyWithId>>(undefined);
-    const getController = (helpers: FormexController<PropertyWithId>) => {
-        formexRef.current = helpers;
-    };
-
-    return <Dialog
-        open={open ?? false}
-        maxWidth={"xl"}
-        fullWidth={true}
-    >
-        <form noValidate={true}
-            autoComplete={"off"}
-            onSubmit={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                formexRef.current?.handleSubmit(e)
-            }}>
-            <DialogTitle hidden>Property edit view</DialogTitle>
-            <DialogContent>
-
-                <PropertyForm {...formProps}
-                    onDismiss={onCancel}
-                    onPropertyChanged={(params) => {
-                        onPropertyChanged?.(params);
-                        onOkClicked?.();
-                    }}
-
-                    onPropertyChangedImmediate={false}
-                    getController={getController}
-                    getData={getData}
-                />
-            </DialogContent>
-
-            <DialogActions>
-
-                {onCancel && <Button
-                    variant={"text"}
-                    onClick={() => {
-                        onCancel();
-                        formexRef.current?.resetForm();
-                    }}>
-                    Cancel
-                </Button>}
-
-                <Button type={"submit"}>
-                    Ok
-                </Button>
-            </DialogActions>
-        </form>
-    </Dialog>;
-
-}
-
-function PropertyEditFormFields({
-    values,
-    errors,
-    setValues,
-    existing,
-    autoUpdateId = false,
-    autoOpenTypeSelect,
-    includeIdAndTitle,
-    onPropertyChanged,
-    onDelete,
-    propertyNamespace,
-    onDismiss,
-    onError,
-    showErrors,
-    disabled,
-    inArray,
-    getData,
-    allowDataInference,
-    propertyConfigs,
-    propertyTypePresets,
-    hiddenPropertyTypes,
-    renderExtraPropertyFields,
-    collectionValues
-}: {
-    includeIdAndTitle?: boolean;
-    existing: boolean;
-    autoUpdateId?: boolean;
-    autoOpenTypeSelect: boolean;
-    propertyNamespace?: string;
-    onDismiss?: () => void;
-    onPropertyChanged?: (params: OnPropertyChangedParams) => void;
-    onDelete?: (id?: string, namespace?: string) => void;
-    onError?: (id: string, namespace?: string, error?: Record<string, any>) => void;
-    showErrors: boolean;
-    inArray: boolean;
-    disabled: boolean;
-    getData?: () => Promise<object[]>;
-    allowDataInference: boolean;
-    propertyConfigs: Record<string, PropertyConfig>;
-    propertyTypePresets?: PropertyTypePreset[];
-    hiddenPropertyTypes?: PropertyType[];
-    renderExtraPropertyFields?: PropertyFormProps["renderExtraPropertyFields"];
-    collectionValues?: AdminCollection;
-
-} & FormexController<PropertyWithId>) {
-
-    const [selectOpen, setSelectOpen] = useState(autoOpenTypeSelect);
-    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-    const [selectedFieldConfigId, setSelectedFieldConfigId] = useState<string | undefined>(values?.type ? getFieldId(values) : undefined);
-
-    const deferredValues = useDeferredValue(values);
-    const nameFieldRef = useRef<HTMLInputElement>(null);
-
-    const lastSubmittedProperty = useRef<object>(values);
-
-    const selectedWidgetError = showErrors && getIn(errors, "selectedWidget");
-
-    useEffect(() => {
-        if (onPropertyChanged) {
-            if ((!includeIdAndTitle || deferredValues.id)) {
-                const {
-                    id,
-                    ...property
-                } = deferredValues;
-                if (!equal(deferredValues, lastSubmittedProperty.current)) {
-                    onPropertyChanged({
-                        id,
-                        property,
-                        namespace: propertyNamespace
-                    });
-                    lastSubmittedProperty.current = deferredValues;
-                }
-            }
-        }
-    }, [deferredValues, includeIdAndTitle, propertyNamespace]);
-
-    useEffect(() => {
-        if (values?.id && onError) {
-            onError(values?.id, propertyNamespace, errors);
-        }
-    }, [errors, propertyNamespace, values?.id]);
-
-    const onWidgetSelectChanged = (newSelectedWidgetId: PropertyConfigId) => {
-        setSelectedFieldConfigId(newSelectedWidgetId);
-        setValues(updatePropertyFromWidget(values, newSelectedWidgetId, propertyConfigs));
-        // Ugly hack to autofocus the name field
-        setTimeout(() => {
-            nameFieldRef.current?.focus();
-        }, 0);
-    };
-
-    const onPresetSelected = useCallback((preset: PropertyTypePreset) => {
-        // Map baseType to the default widgetId
-        const BASE_TYPE_TO_WIDGET: Record<string, string> = {
-            "string": "text_field",
-            "number": "number_input",
-            "boolean": "switch",
-            "date": "date_time",
-            "reference": "reference",
-            "relation": "relation",
-            "map": "group",
-            "array": "repeat",
-            "vector": "vector_input",
-            "geopoint": "geopoint",
-            "binary": "binary"
-        };
-        const widgetId = BASE_TYPE_TO_WIDGET[preset.baseType] || "text_field";
-        setSelectedFieldConfigId(widgetId);
-        // Merge preset defaults into the property
-        const updatedValues = updatePropertyFromWidget(values, widgetId, propertyConfigs);
-        const mergedValues = { ...updatedValues,
-...preset.defaults,
-propertyConfig: widgetId };
-        setValues(mergedValues as PropertyWithId);
-    }, [values, propertyConfigs, setValues]);
-
-    let childComponent;
-    if (selectedFieldConfigId === "text_field" ||
-        selectedFieldConfigId === "multiline" ||
-        selectedFieldConfigId === "user_select" ||
-        selectedFieldConfigId === "email") {
-        childComponent =
-            <StringPropertyField widgetId={selectedFieldConfigId}
-                disabled={disabled}
-                showErrors={showErrors}/>;
-    } else if (selectedFieldConfigId === "url") {
-        childComponent =
-            <UrlPropertyField disabled={disabled}
-                showErrors={showErrors}/>;
-    } else if (selectedFieldConfigId === "markdown") {
-        childComponent =
-            <MarkdownPropertyField disabled={disabled}
-                showErrors={showErrors}/>;
-    } else if (selectedFieldConfigId === "select" ||
-        selectedFieldConfigId === "number_select") {
-        childComponent = <EnumPropertyField
-            multiselect={false}
-            allowDataInference={allowDataInference}
-            updateIds={!existing}
-            disabled={disabled}
-            getData={getData}
-            propertyNamespace={propertyNamespace}
-            showErrors={showErrors}/>;
-    } else if (selectedFieldConfigId === "multi_select" ||
-        selectedFieldConfigId === "multi_number_select") {
-        childComponent = <EnumPropertyField
-            multiselect={true}
-            updateIds={!existing}
-            disabled={disabled}
-            allowDataInference={allowDataInference}
-            getData={getData}
-            propertyNamespace={propertyNamespace}
-            showErrors={showErrors}/>;
-    } else if (selectedFieldConfigId === "file_upload") {
-        childComponent =
-            <StoragePropertyField existing={existing}
-                multiple={false}
-                disabled={disabled}/>;
-    } else if (selectedFieldConfigId === "multi_file_upload") {
-        childComponent =
-            <StoragePropertyField existing={existing}
-                multiple={true}
-                disabled={disabled}/>;
-    } else if (selectedFieldConfigId === "switch") {
-        childComponent = <BooleanPropertyField disabled={disabled}/>;
-    } else if (selectedFieldConfigId === "number_input") {
-        childComponent = <NumberPropertyField disabled={disabled}/>;
-    } else if (selectedFieldConfigId === "group") {
-        childComponent =
-            <MapPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
-                propertyConfigs={propertyConfigs}/>;
-    } else if (selectedFieldConfigId === "block") {
-        childComponent =
-            <BlockPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
-                propertyConfigs={propertyConfigs}/>;
-    } else if (selectedFieldConfigId === "reference") {
-        childComponent =
-            <ReferencePropertyField showErrors={showErrors}
-                existing={existing}
-                multiple={false}
-                disabled={disabled}/>;
-    } else if (selectedFieldConfigId === "date_time") {
-        childComponent = <DateTimePropertyField disabled={disabled}/>;
-    } else if (selectedFieldConfigId === "multi_references") {
-        childComponent =
-            <ReferencePropertyField showErrors={showErrors}
-                existing={existing}
-                multiple={true}
-                disabled={disabled}/>;
-    } else if (selectedFieldConfigId === "repeat") {
-        childComponent =
-            <RepeatPropertyField showErrors={showErrors}
-                existing={existing}
-                getData={getData}
-                allowDataInference={allowDataInference}
-                disabled={disabled}
-                propertyConfigs={propertyConfigs}/>;
-    } else if (selectedFieldConfigId === "key_value") {
-        childComponent =
-            <KeyValuePropertyField disabled={disabled}/>;
-    } else if (selectedFieldConfigId === "relation") {
-        childComponent =
-            <RelationPropertyField
-                showErrors={showErrors}
-                disabled={disabled}/>;
-    } else if (selectedFieldConfigId === "vector_input") {
-        childComponent =
-            <VectorPropertyField
-                disabled={disabled}/>;
-    } else if (selectedFieldConfigId === "geopoint" || selectedFieldConfigId === "binary") {
-        // These two have nothing of their own to configure — a geopoint is a
-        // latitude and a longitude, a binary value is base64 — so the shared
-        // fields above are the whole editor. Said out loud, because a dialog
-        // that just stops is indistinguishable from one that failed to load.
-        childComponent = (
-            <div className={"col-span-12"}>
-                <Typography variant={"body2"} color={"secondary"}>
-                    {selectedFieldConfigId === "geopoint"
-                        ? "A location is stored as a latitude and a longitude. There is nothing further to configure here."
-                        : "Binary values are stored as base64. There is nothing further to configure here."}
-                </Typography>
-            </div>
-        );
-    } else {
-        // No editor matched this widget. `geopoint` lands here every time: the
-        // model defines the type, but the admin has no field binding for it, so
-        // `getDefaultFieldId` falls off the end of its chain, logs to the
-        // console and returns undefined.
-        //
-        // This used to render nothing — the dialog opened showing a name, a
-        // description and no type-specific fields at all, which reads exactly
-        // like a property that simply has no settings. Saying so out loud is
-        // not support, but it is the difference between a gap and a bug.
-        childComponent = (
-            <div className={"col-span-12"}>
-                <InfoLabel mode={"warn"}>
-                    {values?.type
-                        ? `Properties of type "${values.type}" have no editor in the admin panel yet. ` +
-                          "The fields shown here are the ones every property shares — configure the rest in code."
-                        : "This property has no type yet."}
-                </InfoLabel>
-            </div>
-        );
-    }
-
-    return (
-        <>
-            {disabled && <InfoLabel mode={"warn"}>
-                <Typography>This property can&apos;t be edited</Typography>
-                <Typography variant={"caption"}>
-                    You may not have permission to
-                    edit it or it is defined in code and cannot be modified.
-                </Typography>
-            </InfoLabel>}
-
-            <div className="flex mt-2 items-start justify-between">
-                <div className={"w-full flex flex-col gap-2"}>
-                    <WidgetSelectView
-                        initialProperty={values}
-                        value={selectedFieldConfigId as PropertyConfigId}
-                        onValueChange={(value) => onWidgetSelectChanged(value as PropertyConfigId)}
-                        open={selectOpen}
-                        onOpenChange={(open, hasValue) => {
-                            if (!hasValue) {
-                                onDismiss?.();
-                            }
-                            setSelectOpen(open);
-                        }}
-                        disabled={disabled}
-                        showError={Boolean(selectedWidgetError)}
-                        existing={existing}
-                        propertyConfigs={propertyConfigs}
-                        inArray={inArray}
-                        propertyTypePresets={propertyTypePresets}
-                        hiddenPropertyTypes={hiddenPropertyTypes}
-                        onPresetSelected={onPresetSelected}/>
-
-                    {!!selectedWidgetError &&
-                        <Typography variant="caption"
-                            className={"ml-3.5"}
-                            color={"error"}>Required</Typography>}
-
-                    {/*<Typography variant="caption" className={"ml-3.5"}>Define your own custom properties and*/}
-                    {/*    components</Typography>*/}
-
-                </div>
-
-                {onDelete && values?.id &&
-                    <IconButton
-                        variant={"ghost"}
-                        className="mt-1 shrink-0"
-                        disabled={disabled}
-                        onClick={() => setDeleteDialogOpen(true)}>
-                        <Trash2Icon size={iconSize.small}/>
-                    </IconButton>}
-            </div>
-
-            <div className={"grid grid-cols-12 gap-y-8 mt-6 mb-8"}>
-                {includeIdAndTitle &&
-                    <CommonPropertyFields showErrors={showErrors}
-                        disabledId={existing}
-                        isNewProperty={!existing}
-                        disabled={disabled}
-                        autoUpdateId={autoUpdateId}
-                        ref={nameFieldRef}/>}
-
-                {childComponent}
-
-                {renderExtraPropertyFields && collectionValues && (
-                    <div className="col-span-12 mt-4 px-2">
-                        {renderExtraPropertyFields({
-                            metadata: ((values as unknown as Record<string, unknown>).metadata as Record<string, unknown>) ?? {},
-                            onMetadataChange: (key: string, value: unknown) => {
-                                const currentMetadata = ((values as unknown as Record<string, unknown>).metadata as Record<string, unknown>) ?? {};
-                                setValues({
-                                    ...values,
-                                    metadata: { ...currentMetadata,
-[key]: value }
-                                } as PropertyWithId);
-                            },
-                            property: toSerializableProperty(values as Property),
-                            collection: toSerializableCollectionConfig(collectionValues)
-                        })}
-                    </div>
-                )}
-
-                <div className={"col-span-12"}>
-                    <AdvancedPropertyValidation disabled={disabled}/>
-                </div>
-            </div>
-
-            {onDelete &&
-                <ConfirmationDialog open={deleteDialogOpen}
-                    onAccept={() => onDelete(values?.id, propertyNamespace)}
-                    onCancel={() => setDeleteDialogOpen(false)}
-                    title={<div>Delete this property?</div>}
-                    body={
-                        <div> This will <b>not delete any
-                            data</b>, only modify the
-                            collection.</div>
-                    }/>}
-
-        </>
-    );
-}
-
-const idRegEx = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
-
-function validateId(value?: string, existingPropertyKeys?: string[]) {
-
-    let error;
-    if (!value) {
-        error = "You must specify an id for the field";
-    }
-    if (value && !value.match(idRegEx)) {
-        error = "The id can only contain letters, numbers and underscores (_), and not start with a number";
-    }
-    if (value && existingPropertyKeys && existingPropertyKeys.includes(value)) {
-        error = "There is another field with this ID already";
-    }
-    return error;
-}
-
-function validateName(value: string) {
-    let error;
-    if (!value) {
-        error = "You must specify a title for the field";
-    }
-    return error;
-}
-
-const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
-    text_field: "Text",
-    multiline: "Text",
-    markdown: "Text",
-    url: "Text",
-    email: "Text",
-    switch: "Boolean",
-    user_select: "Users",
-    select: "Select",
-    multi_select: "Select",
-    number_input: "Number",
-    number_select: "Select",
-    multi_number_select: "Select",
-    file_upload: "File",
-    multi_file_upload: "File",
-    relation: "Relation",
-    reference: "Reference",
-    multi_references: "Reference",
-    date_time: "Date",
-    group: "Group",
-    key_value: "Group",
-    repeat: "Array",
-    custom_array: "Array",
-    block: "Group",
-    vector_input: "Number",
-    geopoint: "Location",
-    binary: "Binary"
-};
-
-const WIDGET_BASE_TYPE_MAP: Record<string, PropertyType> = {
-    text_field: "string",
-    multiline: "string",
-    markdown: "string",
-    url: "string",
-    email: "string",
-    select: "string",
-    multi_select: "string",
-    file_upload: "string",
-    multi_file_upload: "string",
-    user_select: "string",
-    number_input: "number",
-    number_select: "number",
-    multi_number_select: "number",
-    switch: "boolean",
-    date_time: "date",
-    reference: "reference",
-    multi_references: "reference",
-    relation: "relation",
-    group: "map",
-    key_value: "map",
-    block: "map",
-    repeat: "array",
-    custom_array: "array",
-    vector_input: "vector",
-    geopoint: "geopoint",
-    binary: "binary"
-};
-
-function WidgetSelectView({
-    initialProperty,
-    value,
-    onValueChange,
-    open,
-    onOpenChange,
-    disabled,
-    showError,
-    existing,
-    propertyConfigs,
-    inArray,
-    propertyTypePresets,
-    hiddenPropertyTypes,
-    onPresetSelected
-}: {
-    initialProperty?: PropertyWithId,
-    value?: PropertyConfigId,
-    onValueChange: (value: string) => void,
-    showError: boolean,
-    open: boolean,
-    onOpenChange: (open: boolean, hasValue: boolean) => void,
-    disabled: boolean,
-    existing: boolean,
-    propertyConfigs: Record<string, PropertyConfig>,
-    inArray?: boolean,
-    propertyTypePresets?: PropertyTypePreset[],
-    hiddenPropertyTypes?: PropertyType[],
-    onPresetSelected?: (preset: PropertyTypePreset) => void,
-}) {
-
-    const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
-
-    const filteredFields = hiddenPropertyTypes && !propertyTypePresets
-        ? allSupportedFields.filter(([key]) => {
-            const baseType = WIDGET_BASE_TYPE_MAP[key];
-            return !baseType || !hiddenPropertyTypes.includes(baseType);
-        })
-        : allSupportedFields;
-
-    const displayedWidgets = (inArray
-        ? filteredFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property as Property) && (propertyConfig.property as Property)?.type !== "array")
-        : filteredFields)
-        .map(([key, propertyConfig]) => ({
-            [key]: propertyConfig
-        }))
-        .reduce((a, b) => {
-            return {
-                ...a,
-                ...b
-            }
-        }, {});
-
-    const activePreset = useMemo(() => {
-        if (!propertyTypePresets || !initialProperty) return undefined;
-        return propertyTypePresets.find(p => p.detect?.(toSerializableProperty(initialProperty as Property)));
-    }, [propertyTypePresets, initialProperty]);
-
-    const key = value;
-    const propertyConfig = key ? (DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key]) : undefined;
-    const baseProperty = propertyConfig?.property;
-    const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty as Property) ? getFieldConfig(baseProperty as Property, propertyConfigs) : undefined;
-    const computedFieldConfig = baseFieldConfig && propertyConfig ? mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
-
-    const groups: string[] = [...new Set(Object.keys(displayedWidgets).map(key => {
-        const group = WIDGET_TYPE_MAP[key as PropertyConfigId];
-        if (group) {
-            return group;
-        }
-        return "Custom/Other"
-    }))];
-
-    return <>
-        <div
-            onClick={() => {
-                if (!disabled) {
-                    onOpenChange(!open, Boolean(value));
-                }
-            }}
-            className={cls(
-                "select-none rounded-md text-sm py-2 px-1 transition-colors duration-200",
-                !disabled && "hover:bg-surface-50 dark:hover:bg-surface-800 cursor-pointer",
-                "relative flex items-center mb-2"
-            )}>
-            {!value && <em>Select a property widget</em>}
-            {value && computedFieldConfig && <div
-                className={cls(
-                    "flex items-center")}>
-                <div className={"mr-4"}>
-                    <PropertyConfigBadge propertyConfig={computedFieldConfig}/>
-                </div>
-                <div className={"flex flex-col items-start text-left"}>
-                    <div className="font-semibold text-text-primary dark:text-text-primary-dark tracking-tight">{computedFieldConfig.name}</div>
-                    <Typography variant={"caption"}
-                        className="text-text-secondary dark:text-text-secondary-dark mt-0.5">
-                        {computedFieldConfig.description}
-                    </Typography>
-                </div>
-            </div>}
-        </div>
-        <Dialog open={open}
-            onOpenChange={(open: boolean) => onOpenChange(open, Boolean(value))}
-            maxWidth={"4xl"}>
-            <DialogTitle>
-                {propertyTypePresets ? "Select a property type" : "Select a property widget"}
-            </DialogTitle>
-            <DialogContent>
-                {propertyTypePresets ? (
-                    <div className={"grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 mt-4"}>
-                        {propertyTypePresets.map((preset) => (
-                            <Card
-                                key={preset.id}
-                                onClick={() => {
-                                    onPresetSelected?.(preset);
-                                    onOpenChange(false, true);
-                                }}
-                                className={cls(
-                                    "flex flex-row items-center px-4 py-2 m-1",
-                                    activePreset?.id === preset.id && "ring-2 ring-primary"
-                                )}>
-                                <div className={cls("flex flex-row items-center text-base min-h-[48px]")}>
-                                    {preset.icon && (
-                                        <div className={"mr-4 text-2xl"}>
-                                            {typeof preset.icon === "string" ? preset.icon : preset.icon}
-                                        </div>
-                                    )}
-                                    <div>
-                                        <Typography variant={"label"}>{preset.label}</Typography>
-                                    </div>
-                                </div>
-                            </Card>
-                        ))}
-                    </div>
-                ) : (
-                <div>
-                    {groups.map(group => {
-                        return <div key={group} className={"mt-4"}>
-                            <Typography variant={"label"}>{group}</Typography>
-                            <div className={"grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 mt-4"}>
-                                {Object.entries(displayedWidgets).map(([key, propertyConfig]) => {
-                                    const groupKey = WIDGET_TYPE_MAP[key as PropertyConfigId];
-                                    if (groupKey === group) {
-                                        return <WidgetSelectViewItem
-                                            key={key}
-                                            initialProperty={initialProperty}
-                                            onClick={() => {
-                                                onValueChange(key);
-                                                onOpenChange(false, true);
-                                            }}
-                                            propertyConfig={propertyConfig}
-                                            existing={existing}/>;
-                                    }
-                                    return null;
-                                })}
-                            </div>
-                        </div>;
-                    })}
-                    {/*{displayedWidgets.map(([key, propertyConfig]) => {*/}
-                    {/*    return <WidgetSelectViewItem*/}
-                    {/*        key={key}*/}
-                    {/*        initialProperty={initialProperty}*/}
-                    {/*        onClick={() => {*/}
-                    {/*            onValueChange(key);*/}
-                    {/*            onOpenChange(false);*/}
-                    {/*        }}*/}
-                    {/*        propertyConfig={propertyConfig}*/}
-                    {/*        existing={existing}/>;*/}
-                    {/*})}*/}
-                </div>
-                )}
-            </DialogContent>
-        </Dialog>
-    </>;
-}
-
-export interface PropertySelectItemProps {
-    onClick?: () => void;
-    initialProperty?: PropertyWithId;
-    propertyConfig: PropertyConfig;
-    existing: boolean;
-}
-
-export function WidgetSelectViewItem({
-    onClick,
-    initialProperty,
-    // optionDisabled,
-    propertyConfig,
-    existing
-}: PropertySelectItemProps) {
-    const baseProperty = propertyConfig.property;
-    const shouldWarnChangingtype = existing && !isPropertyBuilder(baseProperty as Property) && (baseProperty as Property).type !== initialProperty?.type;
-
-    return <Card
-        onClick={onClick}
-        className={"flex flex-row items-center px-4 py-2 m-1"}>
-        <div
-            className={cls(
-                "flex flex-row items-center text-base min-h-[48px]"
-            )}>
-            <div className={"mr-8"}>
-                <PropertyConfigBadge propertyConfig={propertyConfig} disabled={shouldWarnChangingtype}/>
-            </div>
-            <div>
-                <div className={"flex flex-row gap-2 items-center"}>
-                    {shouldWarnChangingtype && <Tooltip
-                        title={"This widget uses a different data type than the initially selected widget. This can cause errors with existing data."}>
-                        <AlertTriangleIcon size={iconSize.smallest} className={"w-4"}/>
-                    </Tooltip>}
-                    <Typography
-                        variant={"label"}
-                        color={shouldWarnChangingtype ? "secondary" : undefined}>{propertyConfig.name}</Typography>
-                </div>
-
-                <Typography variant={"caption"}
-                    color={"secondary"}
-                    className={"max-w-sm"}>
-                    {propertyConfig.description}
-                </Typography>
-
-            </div>
-        </div>
-    </Card>
-}