@rebasepro/admin 0.6.1 → 0.8.0

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

@@ -2,7 +2,7 @@
 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 {
@@ -26,17 +26,23 @@ import {
 import { Field, getIn, useFormex } from "@rebasepro/formex";
 import { useCollectionsConfigController } from "../../useCollectionsConfigController";
 import { singular, toSnakeCase } from "@rebasepro/utils";
+import type { ExtraCollectionFieldsParams } from "../../extensibility_types";
+import { toSerializableCollection } from "../../serializable_utils";
 
 export function GeneralSettingsForm({
     isNewCollection,
     existingPaths,
     existingIds,
-    parentCollection
+    parentCollection,
+    renderExtraCollectionFields,
+    standalone,
 }: {
     isNewCollection: boolean;
     existingPaths?: string[];
     existingIds?: string[];
     parentCollection?: EntityCollection;
+    renderExtraCollectionFields?: (params: ExtraCollectionFieldsParams) => React.ReactNode;
+    standalone?: boolean;
 }) {
 
     const {
@@ -51,9 +57,8 @@ export function GeneralSettingsForm({
 
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
 
-    const authController = useAuthController();
-    const customizationController = useCustomizationController();
-    const configController = useCollectionsConfigController();
+    const configControllerFromContext = useCollectionsConfigController();
+    const configController = standalone ? { readOnly: false } : configControllerFromContext;
 
     const updateDatabaseId = (databaseId: string) => {
         setFieldValue("databaseId", databaseId ?? undefined);
@@ -243,6 +248,18 @@ export function GeneralSettingsForm({
                     </div>
                 </Dialog>
 
+                {renderExtraCollectionFields && (
+                    <div className="mt-4">
+                        {renderExtraCollectionFields({
+                            metadata: (values.metadata ?? {}) as Record<string, unknown>,
+                            onMetadataChange: (key: string, value: unknown) => {
+                                setFieldValue(`metadata.${key}`, value);
+                            },
+                            collection: toSerializableCollection(values),
+                        })}
+                    </div>
+                )}
+
             </Container>
         </div>
     );

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

@@ -1,4 +1,4 @@
-import { useSnackbarController } from "@rebasepro/core";
+import { useSafeSnackbarController } from "../../useSafeSnackbarController";
 import { EntityCollection } from "@rebasepro/types";
 import { Button, CopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@rebasepro/ui";
 import React from "react";
@@ -14,7 +14,7 @@ export function GetCodeDialog({
     open
 }: { onOpenChange: (open: boolean) => void, collection: EntityCollection, open: boolean }) {
 
-    const snackbarController = useSnackbarController();
+    const snackbarController = useSafeSnackbarController();
 
     const code = collection
         ? "import { EntityCollection } from \"@rebasepro/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode({ ...collection }), null, "\t")
@@ -64,7 +64,7 @@ export function GetCodeDialog({
                 onClick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
-                    snackbarController.open({
+                    snackbarController?.open({
                         type: "success",
                         message: "Copied"
                     })

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

@@ -1,12 +1,15 @@
 
-import React, { useDeferredValue, useEffect, useRef, useState } from "react";
+import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
 import { deepEqual as equal } from "fast-equals"
 
 import { Formex, FormexController, getIn, useCreateFormex } from "@rebasepro/formex";
 import { ConfirmationDialog } from "@rebasepro/core";
 import { DEFAULT_FIELD_CONFIGS, getFieldConfig, getFieldId } from "../../../components/field_configs";
 import { PropertyConfigBadge } from "../../../components/PropertyConfigBadge";
-import { Property, PropertyConfig, PropertyConfigId } from "@rebasepro/types";
+import { EntityCollection, Property, PropertyConfig, PropertyConfigId } from "@rebasepro/types";
+import type { PropertyTypePreset, PropertyType } from "../../extensibility_types";
+import { toSerializableProperty, toSerializableCollection } from "../../serializable_utils";
+import type { SerializableProperty, SerializableCollection } from "../../serializable_types";
 import { isPropertyBuilder } from "@rebasepro/common";
 import {
     AlertTriangleIcon,
@@ -82,6 +85,15 @@ export type PropertyFormProps = {
     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: SerializableCollection;
+    }) => React.ReactNode;
+    collectionValues?: EntityCollection;
 
 };
 
@@ -108,7 +120,11 @@ export const PropertyForm = React.memo(
             allowDataInference,
             getController,
             getData,
-            propertyConfigs
+            propertyConfigs,
+            propertyTypePresets,
+            hiddenPropertyTypes,
+            renderExtraPropertyFields,
+            collectionValues
         } = props;
 
         const initialValue: PropertyWithId = {
@@ -228,6 +244,10 @@ export const PropertyForm = React.memo(
                 getData={getData}
                 allowDataInference={allowDataInference}
                 propertyConfigs={propertyConfigs}
+                propertyTypePresets={propertyTypePresets}
+                hiddenPropertyTypes={hiddenPropertyTypes}
+                renderExtraPropertyFields={renderExtraPropertyFields}
+                collectionValues={collectionValues}
                 {...formexController}/>
         </Formex>;
     }, (a, b) =>
@@ -324,7 +344,11 @@ function PropertyEditFormFields({
     inArray,
     getData,
     allowDataInference,
-    propertyConfigs
+    propertyConfigs,
+    propertyTypePresets,
+    hiddenPropertyTypes,
+    renderExtraPropertyFields,
+    collectionValues
 }: {
     includeIdAndTitle?: boolean;
     existing: boolean;
@@ -341,6 +365,10 @@ function PropertyEditFormFields({
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
     propertyConfigs: Record<string, PropertyConfig>;
+    propertyTypePresets?: PropertyTypePreset[];
+    hiddenPropertyTypes?: PropertyType[];
+    renderExtraPropertyFields?: PropertyFormProps["renderExtraPropertyFields"];
+    collectionValues?: EntityCollection;
 
 } & FormexController<PropertyWithId>) {
 
@@ -389,6 +417,29 @@ function PropertyEditFormFields({
         }, 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": "text_field",
+            "binary": "text_field",
+        };
+        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" ||
@@ -454,13 +505,6 @@ function PropertyEditFormFields({
                 existing={existing}
                 multiple={false}
                 disabled={disabled}/>;
-    } else if (selectedFieldConfigId === "reference_as_string") {
-        childComponent =
-            <ReferencePropertyField showErrors={showErrors}
-                existing={existing}
-                asString={true}
-                multiple={false}
-                disabled={disabled}/>;
     } else if (selectedFieldConfigId === "date_time") {
         childComponent = <DateTimePropertyField disabled={disabled}/>;
     } else if (selectedFieldConfigId === "multi_references") {
@@ -520,7 +564,10 @@ function PropertyEditFormFields({
                         showError={Boolean(selectedWidgetError)}
                         existing={existing}
                         propertyConfigs={propertyConfigs}
-                        inArray={inArray}/>
+                        inArray={inArray}
+                        propertyTypePresets={propertyTypePresets}
+                        hiddenPropertyTypes={hiddenPropertyTypes}
+                        onPresetSelected={onPresetSelected}/>
 
                     {!!selectedWidgetError &&
                         <Typography variant="caption"
@@ -553,6 +600,23 @@ function PropertyEditFormFields({
 
                 {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: toSerializableCollection(collectionValues),
+                        })}
+                    </div>
+                )}
+
                 <div className={"col-span-12"}>
                     <AdvancedPropertyValidation disabled={disabled}/>
                 </div>
@@ -615,7 +679,6 @@ const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
     multi_file_upload: "File",
     relation: "Relation",
     reference: "Reference",
-    reference_as_string: "Text",
     multi_references: "Reference",
     date_time: "Date",
     group: "Group",
@@ -626,6 +689,33 @@ const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
     vector_input: "Number"
 };
 
+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",
+};
+
 function WidgetSelectView({
     initialProperty,
     value,
@@ -636,7 +726,10 @@ function WidgetSelectView({
     showError,
     existing,
     propertyConfigs,
-    inArray
+    inArray,
+    propertyTypePresets,
+    hiddenPropertyTypes,
+    onPresetSelected
 }: {
     initialProperty?: PropertyWithId,
     value?: PropertyConfigId,
@@ -647,14 +740,24 @@ function WidgetSelectView({
     disabled: boolean,
     existing: boolean,
     propertyConfigs: Record<string, PropertyConfig>,
-    inArray?: boolean
+    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
-        ? allSupportedFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property as Property) && (propertyConfig.property as Property)?.type !== "array")
-        : allSupportedFields)
+        ? filteredFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property as Property) && (propertyConfig.property as Property)?.type !== "array")
+        : filteredFields)
         .map(([key, propertyConfig]) => ({
             [key]: propertyConfig
         }))
@@ -665,6 +768,11 @@ function WidgetSelectView({
             }
         }, {});
 
+    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;
@@ -711,9 +819,36 @@ function WidgetSelectView({
             onOpenChange={(open: boolean) => onOpenChange(open, Boolean(value))}
             maxWidth={"4xl"}>
             <DialogTitle>
-                Select a property widget
+                {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"}>
@@ -749,6 +884,7 @@ function WidgetSelectView({
                     {/*        existing={existing}/>;*/}
                     {/*})}*/}
                 </div>
+                )}
             </DialogContent>
         </Dialog>
     </>;

package/src/collection_editor/ui/collection_editor/PropertyFieldPreview.tsx

@@ -36,9 +36,9 @@ export function PropertyFieldPreview({
 
     return <ErrorBoundary>
         <div onClick={onClick} className={onClick ? "cursor-pointer" : ""}>
-        <Paper
+        <div
             className={cls(
-                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-800 shadow-xs",
+                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-900 shadow-xs",
                 borderColorClass || "border-surface-200 dark:border-surface-700",
                 selected
                     ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light ring-1 ring-inset ring-primary border-primary/30"
@@ -81,7 +81,7 @@ export function PropertyFieldPreview({
             </ErrorBoundary>
 
             {includeEditButton && <Typography variant={"button"}>EDIT</Typography>}
-        </Paper>
+        </div>
         </div>
     </ErrorBoundary>
 }
@@ -103,9 +103,9 @@ export function NonEditablePropertyPreview({
 
     return (
         <div onClick={onClick} className={onClick ? "cursor-pointer" : ""}>
-        <Paper
+        <div
             className={cls(
-                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-800 border-surface-200 dark:border-surface-700 shadow-xs",
+                "w-full flex flex-row gap-3 items-center px-3 py-2 rounded-lg transition-all duration-200 border bg-white dark:bg-surface-900 border-surface-200 dark:border-surface-700 shadow-xs",
                 selected
                     ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light ring-1 ring-inset ring-primary border-primary/30"
                     : "hover:bg-surface-50 dark:hover:bg-surface-700"
@@ -149,7 +149,7 @@ export function NonEditablePropertyPreview({
                     {"columnType" in property ? (property as { columnType?: string }).columnType ?? property.type : property.type}
                 </Typography>
             </ErrorBoundary>}
-        </Paper>
+        </div>
         </div>
     )
 }

package/src/collection_editor/ui/collection_editor/PropertyTree.tsx

@@ -276,6 +276,7 @@ export function PropertyTreeEntry({
                     {!isPropertyBuilder(property) && !additionalField && editable
                         ? <PropertyFieldPreview
                             property={property}
+                            propertyKey={propertyKey}
                             onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
                             includeName={true}
                             selected={selected}

package/src/collection_editor/ui/collection_editor/RouterCollectionStudioView.tsx

@@ -0,0 +1,44 @@
+/**
+ * Router-aware wrapper around CollectionStudioView.
+ *
+ * This component provides the react-router-based navigation behavior
+ * that Rebase Studio expects: cancel navigates to the root path,
+ * save navigates to the saved collection's slug, and a snackbar
+ * toast is shown on success.
+ *
+ * External consumers should use `CollectionStudioView` directly
+ * (which has no react-router dependency).
+ */
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useUrlController } from "../../_cms_internals";
+import { useSnackbarController } from "@rebasepro/core";
+import { CollectionStudioView, CollectionStudioViewProps } from "./CollectionStudioView";
+
+export type RouterCollectionStudioViewProps = Omit<CollectionStudioViewProps, "onSave" | "onCancel">;
+
+export function RouterCollectionStudioView(props: RouterCollectionStudioViewProps) {
+    const navigate = useNavigate();
+    const urlController = useUrlController();
+    const snackbarController = useSnackbarController();
+
+    return (
+        <CollectionStudioView
+            {...props}
+            onCancel={() => {
+                navigate(urlController.buildAppUrlPath("/"));
+            }}
+            onSave={(savedCollection) => {
+                if (savedCollection) {
+                    snackbarController.open({
+                        type: "success",
+                        message: `Collection ${savedCollection.name || savedCollection.slug} saved`
+                    });
+                    if (props.collectionId === "new") {
+                        navigate(urlController.buildAppUrlPath(`s/schema/${savedCollection.slug}`));
+                    }
+                }
+            }}
+        />
+    );
+}

package/src/collection_editor/ui/collection_editor/RouterCollectionsStudioView.tsx

@@ -0,0 +1,41 @@
+/**
+ * Router-aware wrapper around CollectionsStudioView.
+ *
+ * This component provides the react-router-based navigation behavior
+ * that Rebase Studio expects: the active collection is derived from the
+ * URL, and clicking a collection navigates via react-router.
+ *
+ * External consumers should use `CollectionsStudioView` directly
+ * (which has no react-router dependency).
+ */
+import React from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useUrlController } from "../../_cms_internals";
+import { CollectionsStudioView, CollectionsStudioViewProps } from "./CollectionsStudioView";
+
+export type RouterCollectionsStudioViewProps = Omit<CollectionsStudioViewProps, "activeCollectionId" | "onActiveCollectionChange">;
+
+export function RouterCollectionsStudioView(props: RouterCollectionsStudioViewProps) {
+    const navigate = useNavigate();
+    const urlController = useUrlController();
+    const location = useLocation();
+
+    // Determine the active collection from the URL segment after "schema/"
+    const basePath = urlController.buildAppUrlPath("schema");
+    const relativePath = location.pathname.replace(basePath, "").replace(/^\//, "");
+    const activeCollectionId = relativePath.split("/")[0] || undefined;
+
+    return (
+        <CollectionsStudioView
+            {...props}
+            activeCollectionId={activeCollectionId}
+            onActiveCollectionChange={(id) => {
+                if (id) {
+                    navigate(urlController.buildAppUrlPath(`schema/${id}`));
+                } else {
+                    navigate(urlController.buildAppUrlPath("schema"));
+                }
+            }}
+        />
+    );
+}

package/src/collection_editor/ui/collection_editor/properties/EnumPropertyField.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { getIn, useFormex } from "@rebasepro/formex";
-import { useSnackbarController, useTranslation } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/core";
+import { useSafeSnackbarController } from "../../../useSafeSnackbarController";
 import { EnumValueConfig, EnumValues } from "@rebasepro/types";
 import { resolveEnumValues } from "@rebasepro/common";
 import { Select, SelectItem } from "@rebasepro/ui";
@@ -34,7 +35,7 @@ export function EnumPropertyField({
         setFieldValue
     } = useFormex<PropertyWithId>();
 
-    const snackbarContext = useSnackbarController();
+    const snackbarContext = useSafeSnackbarController();
     const { t } = useTranslation();
 
     const enumValuesPath = multiselect ? "of.enum" : "enum";
@@ -56,7 +57,7 @@ export function EnumPropertyField({
             const enumIds = value.filter(v => Boolean(v?.id)).map((v: EnumValueConfig) => v.id);
             if (defaultValue && !enumIds.includes(defaultValue)) {
                 setFieldValue("defaultValue", undefined);
-                snackbarContext.open({
+                snackbarContext?.open({
                     type: "warning",
                     message: "Default value was cleared"
                 })

package/src/collection_editor/ui/collection_editor/properties/StoragePropertyField.tsx

@@ -13,7 +13,8 @@ import {
 } from "@rebasepro/ui";
 
 import { Field, FormexFieldProps, getIn, useFormex } from "@rebasepro/formex";
-import { useTranslation } from "@rebasepro/core";
+import { useStorageSources, useTranslation } from "@rebasepro/core";
+import { DEFAULT_STORAGE_SOURCE_KEY } from "@rebasepro/types";
 import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
 import { ArrayPropertyValidation } from "./validation/ArrayPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
@@ -42,9 +43,11 @@ export function StoragePropertyField({
         setFieldValue
     } = useFormex();
     const { t } = useTranslation();
+    const storageSources = useStorageSources();
 
     const baseStoragePath = multiple ? "of.storage" : "storage";
     const acceptedFiles = `${baseStoragePath}.acceptedFiles`;
+    const storageSource = `${baseStoragePath}.storageSource`;
 
     const metadata = `${baseStoragePath}.metadata`;
     const fileName = `${baseStoragePath}.fileName`;
@@ -76,6 +79,11 @@ export function StoragePropertyField({
     const fileTypesValue: string[] | undefined = Array.isArray(storedValue) ? storedValue : undefined;
     const allFileTypesSelected = !fileTypesValue || fileTypesValue.length === 0;
 
+    // Available storage backends (from `<Rebase storageSources={...}>`).
+    const sourceKeys = Object.keys(storageSources.sources)
+        .filter((key) => key !== DEFAULT_STORAGE_SOURCE_KEY);
+    const storageSourceValue = (getIn(values, storageSource) as string | undefined) ?? DEFAULT_STORAGE_SOURCE_KEY;
+
     const handleTypesChange = (value: string[]) => {
         if (!value) setFieldValue(acceptedFiles, undefined);
         else setFieldValue(acceptedFiles, value);
@@ -102,6 +110,32 @@ export function StoragePropertyField({
 
                     <div className={"grid grid-cols-12 gap-2 p-4"}>
 
+                        {sourceKeys.length > 0 && (
+                            <div className={"col-span-12"}>
+                                <Select
+                                    className={"w-full"}
+                                    disabled={disabled}
+                                    name={storageSource}
+                                    value={storageSourceValue}
+                                    onValueChange={(value) =>
+                                        setFieldValue(storageSource, !value || value === DEFAULT_STORAGE_SOURCE_KEY ? undefined : value)}
+                                    label={"Storage backend"}
+                                    renderValue={(key) => {
+                                        const label = storageSources.registry[key]?.label;
+                                        return label ?? (key === DEFAULT_STORAGE_SOURCE_KEY ? "Default" : key);
+                                    }}>
+                                    <SelectItem value={DEFAULT_STORAGE_SOURCE_KEY}>
+                                        Default
+                                    </SelectItem>
+                                    {sourceKeys.map((key) => (
+                                        <SelectItem key={key} value={key}>
+                                            {storageSources.registry[key]?.label ?? key}
+                                        </SelectItem>
+                                    ))}
+                                </Select>
+                            </div>
+                        )}
+
                         <div className={"col-span-12"}>
 
                             <MultiSelect

package/src/collection_editor/ui/collection_editor/templates/blog_template.ts

@@ -93,7 +93,7 @@ export const blogCollectionTemplate = {
         publish_date: {
             name: "Publish date",
             type: "date",
-            clearable: true
+            ui: { clearable: true }
         },
         reviewed: {
             name: "Reviewed",

package/src/collection_editor/ui/collection_editor/utils/supported_fields.tsx

@@ -16,7 +16,6 @@ export const supportedFieldsIds: PropertyConfigId[] = [
     "file_upload",
     "multi_file_upload",
     "reference",
-    "reference_as_string",
     "multi_references",
     "relation",
     "switch",