@rebasepro/admin 0.12.0 → 0.12.1-canary.g009ed95

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.12.0",
+  "version": "0.12.1-canary.g009ed95",
   "description": "Rebase CMS — content management views, forms, and routing",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -18,7 +18,7 @@
   "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "engines": {
-    "node": ">=20"
+    "node": ">=22.22.0"
   },
   "keywords": [
     "rebase",
@@ -54,66 +54,64 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@floating-ui/dom": "^1.7.6",
+    "@floating-ui/dom": "^1.8.0",
     "cmdk": "^1.1.1",
     "date-fns": "^4.4.0",
     "exceljs": "^4.4.0",
-    "fast-equals": "6.0.0",
-    "fractional-indexing": "3.2.0",
-    "fuse.js": "^7.4.2",
+    "fast-equals": "6.0.2",
+    "fractional-indexing": "4.0.0",
+    "fuse.js": "^7.5.0",
     "json5": "^2.2.3",
-    "markdown-it": "^14.2.0",
+    "markdown-it": "^14.3.0",
     "markdown-it-ins": "^4.0.0",
     "markdown-it-mark": "^4.0.0",
     "markdown-it-task-lists": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
     "prosemirror-commands": "^1.7.1",
-    "prosemirror-dropcursor": "^1.8.2",
+    "prosemirror-dropcursor": "^1.8.3",
     "prosemirror-gapcursor": "^1.4.1",
     "prosemirror-history": "^1.5.0",
     "prosemirror-inputrules": "^1.5.1",
     "prosemirror-keymap": "^1.2.3",
-    "prosemirror-markdown": "^1.13.4",
-    "prosemirror-model": "^1.25.8",
+    "prosemirror-markdown": "^1.13.5",
+    "prosemirror-model": "^1.25.11",
     "prosemirror-schema-list": "^1.5.1",
     "prosemirror-state": "^1.4.4",
     "prosemirror-tables": "^1.8.5",
     "prosemirror-transform": "^1.12.0",
-    "prosemirror-view": "^1.41.9",
-    "react-dropzone": "^15.0.0",
+    "prosemirror-view": "^1.42.2",
+    "react-dropzone": "^19.1.1",
     "react-use-measure": "^2.1.7",
     "zod": "^4.4.3",
-    "@rebasepro/admin-types": "0.12.0",
-    "@rebasepro/app": "0.12.0",
-    "@rebasepro/common": "0.12.0",
-    "@rebasepro/forms": "0.12.0",
-    "@rebasepro/types": "0.12.0",
-    "@rebasepro/inference": "0.12.0",
-    "@rebasepro/ui": "0.12.0",
-    "@rebasepro/utils": "0.12.0"
+    "@rebasepro/admin-types": "0.12.1-canary.g009ed95",
+    "@rebasepro/app": "0.12.1-canary.g009ed95",
+    "@rebasepro/inference": "0.12.1-canary.g009ed95",
+    "@rebasepro/forms": "0.12.1-canary.g009ed95",
+    "@rebasepro/types": "0.12.1-canary.g009ed95",
+    "@rebasepro/ui": "0.12.1-canary.g009ed95",
+    "@rebasepro/utils": "0.12.1-canary.g009ed95",
+    "@rebasepro/common": "0.12.1-canary.g009ed95"
   },
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0",
-    "react-router": "^7.0.0",
-    "react-router-dom": "^7.0.0"
+    "react": ">=19.2.7",
+    "react-dom": ">=19.2.7",
+    "react-router": "^8.3.0"
   },
   "devDependencies": {
     "@jest/globals": "^30.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.1.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/react-measure": "^2.0.12",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.4",
     "jest": "^30.4.2",
-    "react-router": "^7.17.0",
-    "react-router-dom": "^7.17.0",
-    "ts-jest": "^29.4.11",
+    "react-router": "^8.3.0",
+    "ts-jest": "^29.4.12",
     "typescript": "^6.0.3",
-    "vite": "^8.0.16"
+    "vite": "^8.1.5"
   },
   "files": [
     "dist",
@@ -131,13 +129,15 @@
   },
   "jest": {
     "transform": {
-      "^.+\\.[jt]sx?$": "ts-jest"
+      "^.+\\.tsx?$": "ts-jest",
+      "^.+\\.m?jsx?$": "<rootDir>/../../scripts/jest/react-router-esm-transform.cjs"
     },
     "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
     "moduleFileExtensions": [
       "ts",
       "tsx",
       "js",
+      "mjs",
       "jsx",
       "json",
       "node"
@@ -146,9 +146,7 @@
     "testPathIgnorePatterns": [
       "/node_modules/"
     ],
-    "transformIgnorePatterns": [
-      "node_modules/(?!.*fractional-indexing)/"
-    ],
+    "transformIgnorePatterns": [],
     "setupFilesAfterEnv": [
       "<rootDir>/test/setupTests.ts"
     ],

package/src/collection_editor/ConfigControllerProvider.tsx

@@ -6,7 +6,7 @@ import { deepEqual as equal } from "fast-equals";
 import { CollectionsConfigController } from "./types/config_controller";
 import { useCustomizationController, useRebaseContext, useAuthController, useSnackbarController } from "@rebasepro/app";
 import { getTableName } from "@rebasepro/common";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { CollectionEditorController } from "./types/collection_editor_controller";
 import { CollectionInference } from "./types/collection_inference";
 import { CollectionGenerationCallback } from "./api/generateCollectionApi";

package/src/collection_editor/serializable_types.ts

@@ -46,7 +46,8 @@ export interface SerializableAdminBaseOptions {
     hideFromCollection?: boolean;
     readOnly?: boolean;
     disabled?: boolean | SerializablePropertyDisabledConfig;
-    widthPercentage?: number;
+    span?: 1 | 2 | 3 | 4;
+    /** Opaque props handed to a custom `Field` / `Preview`. Round-tripped as-is. */
     customProps?: unknown;
     /** Narrows the filter operators offered for this property. Plain data. */
     filterOperators?: readonly WhereFilterOp[];
@@ -291,8 +292,8 @@ export interface SerializableReferenceProperty extends SerializableBaseProperty
  */
 export type SerializableRelation =
     | { kind: "belongsTo"; target?: string; relationName?: string; localKey?: string; onUpdate?: OnAction; onDelete?: OnAction }
-    | { kind: "hasOne"; target?: string; relationName?: string; foreignKeyOnTarget?: string; onUpdate?: OnAction; onDelete?: OnAction }
-    | { kind: "hasMany"; target?: string; relationName?: string; foreignKeyOnTarget?: string; onUpdate?: OnAction; onDelete?: OnAction }
+    | { kind: "hasOne"; target?: string; relationName?: string; foreignKeyOnTarget?: string; sourceKey?: string; onUpdate?: OnAction; onDelete?: OnAction }
+    | { kind: "hasMany"; target?: string; relationName?: string; foreignKeyOnTarget?: string; sourceKey?: string; onUpdate?: OnAction; onDelete?: OnAction }
     | {
         kind: "manyToMany";
         target?: string;

package/src/collection_editor/serializable_utils.ts

@@ -44,6 +44,41 @@ import type {
  */
 export type CollectionLookup = (slug: string) => AdminCollection | undefined;
 
+/**
+ * Rebuild a serialized relation's `target` slug into the thunk consumers call.
+ *
+ * Shared by the relation *property* and the collection-level `relations` array.
+ * They are the same shape on the wire and they need the same treatment coming
+ * back, but only the property path had it — so a collection imported from an
+ * existing table came off disk with `relations[n].target` still a string, which
+ * typechecks (the serializable shape erases the difference) and throws "target
+ * is not a function" at the first consumer.
+ *
+ * The lookup is consulted lazily, inside the thunk, so collections may
+ * reference each other in any order, including circularly.
+ */
+function fromSerializableRelation<R extends { target?: string; relationName?: string }>(
+    relation: R,
+    label: string,
+    lookup?: CollectionLookup
+): R & { target: () => AdminCollection } {
+    const slug = relation.target;
+    return {
+        ...relation,
+        target: () => {
+            const found = slug ? lookup?.(slug) : undefined;
+            if (!found) {
+                throw new Error(
+                    `Relation "${relation.relationName ?? label}" targets collection "${slug ?? "(none)"}", ` +
+                    "which is not among the collections it was deserialized with. Pass the whole set to " +
+                    "`fromSerializableCollectionConfigs` so slugs can be resolved against each other."
+                );
+            }
+            return found;
+        }
+    };
+}
+
 // ═══════════════════════════════════════════════════════════════════════
 // PROPERTY CONVERSION: Original → Serializable
 // ═══════════════════════════════════════════════════════════════════════
@@ -160,7 +195,8 @@ function toSerializableRelation(link: Relation): SerializableRelation {
             return {
                 kind: link.kind,
                 ...common,
-                ...(link.foreignKeyOnTarget ? { foreignKeyOnTarget: link.foreignKeyOnTarget } : {})
+                ...(link.foreignKeyOnTarget ? { foreignKeyOnTarget: link.foreignKeyOnTarget } : {}),
+                ...(link.sourceKey ? { sourceKey: link.sourceKey } : {})
             };
         case "manyToMany":
             return { kind: "manyToMany", ...common, ...(link.through ? { through: link.through } : {}) };
@@ -600,21 +636,11 @@ type: "date" };
             const result = { ...rest,
 type: "relation" } as unknown as RelationProperty;
             if (relation) {
-                const slug = relation.target;
-                result.relation = {
-                    ...relation,
-                    target: () => {
-                        const found = slug ? lookup?.(slug) : undefined;
-                        if (!found) {
-                            throw new Error(
-                                `Relation "${relation.relationName ?? sp.name}" targets collection "${slug ?? "(none)"}", ` +
-                                "which is not among the collections it was deserialized with. Pass the whole set to " +
-                                "`fromSerializableCollectionConfigs` so slugs can be resolved against each other."
-                            );
-                        }
-                        return found;
-                    }
-                } as unknown as RelationProperty["relation"];
+                result.relation = fromSerializableRelation(
+                    relation,
+                    sp.name ?? "",
+                    lookup
+                ) as unknown as RelationProperty["relation"];
             }
             return result as Property;
         }
@@ -654,10 +680,18 @@ export function fromSerializableCollectionConfig(
     serialized: SerializableCollectionConfig,
     lookup?: CollectionLookup
 ): AdminCollection {
-    const { properties, ...rest } = serialized;
+    const { properties, relations, ...rest } = serialized as SerializableCollectionConfig & {
+        relations?: SerializableRelation[]
+    };
 
     return {
         ...rest,
+        ...(relations
+            ? {
+                relations: relations.map((relation, index) =>
+                    fromSerializableRelation(relation, `relations[${index}]`, lookup))
+            }
+            : {}),
         properties: fromSerializableProperties(properties, lookup)
     } as AdminCollection;
 }

package/src/collection_editor/ui/collection_editor/CollectionEditorDialog.tsx

@@ -30,7 +30,8 @@ import {
     IconButton,
     LoadingButton,
     Tab,
-    Tabs
+    Tabs,
+    Tooltip
 } from "@rebasepro/ui";
 import { EngineProperties, Entity, getDataSourceCapabilities, MapProperty, Properties, Property, TableMetadata, User } from "@rebasepro/types";
 import { PropertyConfig, AdminCollection } from "@rebasepro/admin-types";
@@ -254,11 +255,38 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
             ? applyPropertyConfigs(initialCollection, propertyConfigs)
             : copyFromProp
                 ? (() => {
-                    // When duplicating, copy all properties but clear identifiers
-                    const { subcollections: _sub, ...rest } = copyFromProp as unknown as Record<string, unknown>;
+                    // When duplicating, copy all properties but clear identifiers.
+                    //
+                    // "Identifiers" has to include the ones this dialog cannot
+                    // show. `schema` has no field anywhere in the editor, so a
+                    // duplicate of the Users collection — the one collection
+                    // scaffolded with `schema: "rebase"` — silently produced a
+                    // new collection whose table is created in `rebase` rather
+                    // than `public`, with nothing on screen to explain why.
+                    // Panel-authored collections are `public` collections.
+                    //
+                    // `slug`/`table` are cleared rather than carried: both are
+                    // re-derived from the name the user types (see
+                    // `updateName` in GeneralSettingsForm, which fills untouched
+                    // fields while `isNewCollection`), and carrying them meant a
+                    // duplicate pointed at the source's table until then.
+                    //
+                    // `auth` goes too — a duplicate must not become a second
+                    // auth collection wired to the same user store.
+                    const {
+                        subcollections: _sub,
+                        schema: _schema,
+                        auth: _auth,
+                        ...rest
+                    } = copyFromProp as unknown as Record<string, unknown>;
                     return {
                         ...rest,
                         name: "",
+                        // Same shape the "new collection" branch below starts
+                        // from, so validation and the registry lookups never see
+                        // an undefined slug mid-edit.
+                        slug: fallbackSlug,
+                        table: "",
                         ownerId: authController.user?.uid ?? ""
                     } as AdminCollection<any>;
                 })()
@@ -341,6 +369,10 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
 }
 ) {
 
+    /** Why the submit buttons below are dead, straight from the backend. */
+    const readOnlyTitle = configController?.readOnlyReason
+        || "This backend does not accept collection edits.";
+
     const importConfigRaw = useImportConfig();
     const urlControllerRaw = useUrlController();
     const collectionRegistryRaw = useCollectionRegistryController();
@@ -720,16 +752,23 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
                         )}
                         {fullScreen && !isNewCollection && (
                             <div className="flex items-center gap-2">
-                                <LoadingButton
-                                    variant="filled"
-                                    color="primary"
-                                    type="submit"
-                                    onClick={() => formController.handleSubmit()}
-                                    disabled={!dirty || isSubmitting || configController?.readOnly}
-                                    loading={isSubmitting}
-                                >
-                                    {configController?.readOnly ? "Update (Read-only)" : "Update"}
-                                </LoadingButton>
+                                {/* "(Read-only)" says the button will not work but not why.
+                                    The controller now carries the backend's own reason —
+                                    production, `baas` mode, no `collectionsDir` — so show it. */}
+                                <Tooltip title={configController?.readOnly ? readOnlyTitle : undefined}>
+                                    <div>
+                                        <LoadingButton
+                                            variant="filled"
+                                            color="primary"
+                                            type="submit"
+                                            onClick={() => formController.handleSubmit()}
+                                            disabled={!dirty || isSubmitting || configController?.readOnly}
+                                            loading={isSubmitting}
+                                        >
+                                            {configController?.readOnly ? "Update (Read-only)" : "Update"}
+                                        </LoadingButton>
+                                    </div>
+                                </Tooltip>
                             </div>
                         )}
                     </div>
@@ -935,15 +974,19 @@ function CollectionEditorInternal<M extends Record<string, unknown>>({
                                     {currentView === "properties" && "Create collection"}
                                 </LoadingButton>}
 
-                            {!isNewCollection && !fullScreen && <LoadingButton
-                                variant="filled"
-                                color="primary"
-                                type="submit"
-                                disabled={isSubmitting || configController?.readOnly}
-                                loading={isSubmitting}
-                            >
-                                {configController?.readOnly ? "Update collection (Read-only)" : "Update collection"}
-                            </LoadingButton>}
+                            {!isNewCollection && !fullScreen && <Tooltip title={configController?.readOnly ? readOnlyTitle : undefined}>
+                                <div>
+                                    <LoadingButton
+                                        variant="filled"
+                                        color="primary"
+                                        type="submit"
+                                        disabled={isSubmitting || configController?.readOnly}
+                                        loading={isSubmitting}
+                                    >
+                                        {configController?.readOnly ? "Update collection (Read-only)" : "Update collection"}
+                                    </LoadingButton>
+                                </div>
+                            </Tooltip>}
 
                         </div>
                     )}

package/src/collection_editor/ui/collection_editor/CollectionRLSTab.tsx

@@ -1,6 +1,6 @@
 
 import { getPolicyNamesForRule, getPolicyNamesForRules } from "@rebasepro/utils";
-import { getEffectiveSecurityRules } from "@rebasepro/common";
+import { getGeneratedPolicyNames } from "@rebasepro/common";
 import React, { useState, useEffect, useMemo } from "react";
 
 /**
@@ -39,6 +39,7 @@ import {
     Typography
 } from "@rebasepro/ui";
 import { useFormex } from "@rebasepro/forms";
+import { useCollectionsConfigController } from "../../useCollectionsConfigController";
 import { useRebaseContext } from "@rebasepro/app";
 import type { AdminCollection } from "@rebasepro/admin-types";
 import type { PostgresPolicy, SecurityOperation, SecurityRule } from "@rebasepro/types";
@@ -114,6 +115,14 @@ export function CollectionRLSTab() {
     const { values, setFieldValue } = useFormex<CollectionWithSecurity>();
     const [editingPolicy, setEditingPolicy] = useState<PostgresPolicy | "new" | null>(null);
 
+    // Every other tab in this dialog disables its inputs when the backend will
+    // not accept an edit — the general and display forms behind a `fieldset
+    // disabled`, the properties editor per control. This one did not, so a
+    // read-only panel still invited you to write a policy, delete one, and
+    // reorder the lot, and only said no at the submit button on the way out.
+    const { readOnly, readOnlyReason } = useCollectionsConfigController();
+    const readOnlyTitle = readOnlyReason || "This backend does not accept collection edits.";
+
     const rules: SecurityRule[] = values.securityRules || [];
 
     const { databaseAdmin } = useRebaseContext();
@@ -209,26 +218,14 @@ export function CollectionRLSTab() {
 
     const tableName = values.id || values.table || values.alias;
 
-    /**
-     * Every policy name `rebase db push` would write for this collection.
-     *
-     * Two things make this more than `rules.map(r => r.name)`:
-     *  - a rule without an explicit `name` becomes `<table>_<op>_<hash>`, so
-     *    comparing `rule.name` to `policyname` never matches for it;
-     *  - the generator also injects the safe-by-default baseline
-     *    (`<table>_default_admin_*`), which is in no collection's `securityRules`.
-     *
-     * Missing either made Rebase's own policies look hand-written, and offered to
-     * import them back into the codebase that produced them.
-     */
+    // Every policy name `rebase db push` would write for this collection — see
+    // `getGeneratedPolicyNames`. This used to be derived here by hand, and the
+    // Studio's RLS editor derived a different subset of it by hand, which is
+    // exactly how the two came to disagree about which policies were drift.
     const generatedPolicyNames = useMemo(() => {
         if (!tableName) return new Set<string>();
-        const effectiveRules = getEffectiveSecurityRules(values as AdminCollection);
-        return getPolicyNamesForRules(
-            [...rules, ...effectiveRules],
-            tableName
-        );
-    }, [rules, tableName, values]);
+        return getGeneratedPolicyNames(values as AdminCollection);
+    }, [tableName, values]);
 
     const unmappedPolicies = dbPolicies.filter(dp => !generatedPolicyNames.has(dp.policyname));
 
@@ -251,9 +248,13 @@ export function CollectionRLSTab() {
                 <div className="w-full flex flex-col">
                 <div className="flex items-center justify-between mb-8">
                     <Typography variant="h5">Row Level Security</Typography>
-                    <Button variant="filled" color="neutral" onClick={() => setEditingPolicy("new")}>
-                        CREATE POLICY
-                    </Button>
+                    <Tooltip title={readOnly ? readOnlyTitle : undefined}>
+                        <div>
+                            <Button variant="filled" color="neutral" disabled={readOnly} onClick={() => setEditingPolicy("new")}>
+                                CREATE POLICY
+                            </Button>
+                        </div>
+                    </Tooltip>
                 </div>
 
                 {rules.length === 0 ? (
@@ -282,7 +283,7 @@ export function CollectionRLSTab() {
                                     </div>
                                 </div>
                                 <div className="flex items-center gap-1 sm:gap-2 shrink-0">
-                                    <Button size="small" variant="text" onClick={() => setEditingPolicy({
+                                    <Button size="small" variant="text" disabled={readOnly} onClick={() => setEditingPolicy({
                                         policyname: rule.name ?? "",
                                         tablename: values.id || values.table || values.alias || "your_table",
                                         permissive: (rule.mode || "permissive").toUpperCase() as PostgresPolicy["permissive"],
@@ -293,7 +294,7 @@ export function CollectionRLSTab() {
                                     })}>
                                         EDIT
                                     </Button>
-                                    <IconButton size="small" onClick={() => {
+                                    <IconButton size="small" disabled={readOnly} onClick={() => {
                                         setFieldValue("securityRules", rules.filter((r: SecurityRule) => r.name !== rule.name));
                                     }}>
                                         <Trash2Icon size={iconSize.smallest} className="text-text-secondary dark:text-text-secondary-dark hover:text-red-500 dark:hover:text-red-500 transition-colors"/>
@@ -336,12 +337,19 @@ export function CollectionRLSTab() {
                                         </div>
                                     </div>
                                     <div className="flex items-center gap-1 sm:gap-2 shrink-0">
-                                        <Button size="small" variant="outlined" color="primary" onClick={() => {
-                                             const rule: SecurityRule = toSecurityRule(dp);
-                                            setFieldValue("securityRules", [...rules, rule]);
-                                        }}>
-                                            Import to codebase
-                                        </Button>
+                                        {/* "Import to codebase" is the one action here that
+                                            names its destination, and it is the one the
+                                            backend refuses when it has no codebase to write. */}
+                                        <Tooltip title={readOnly ? readOnlyTitle : undefined}>
+                                            <div>
+                                                <Button size="small" variant="outlined" color="primary" disabled={readOnly} onClick={() => {
+                                                    const rule: SecurityRule = toSecurityRule(dp);
+                                                    setFieldValue("securityRules", [...rules, rule]);
+                                                }}>
+                                                    Import to codebase
+                                                </Button>
+                                            </div>
+                                        </Tooltip>
                                     </div>
                                 </Paper>
                             ))}

package/src/collection_editor/ui/collection_editor/CollectionRelationsTab.tsx

@@ -41,6 +41,7 @@ export type RelationDraft = {
     target?: string;
     localKey?: string;
     foreignKeyOnTarget?: string;
+    sourceKey?: string;
     through?: { table?: string; sourceColumn?: string; targetColumn?: string };
     joinPath?: JoinStep[];
     cardinality?: "one" | "many";
@@ -119,7 +120,8 @@ kind: "belongsTo",
             return {
                 ...common,
                 kind: draft.kind,
-                ...(draft.foreignKeyOnTarget ? { foreignKeyOnTarget: draft.foreignKeyOnTarget } : {})
+                ...(draft.foreignKeyOnTarget ? { foreignKeyOnTarget: draft.foreignKeyOnTarget } : {}),
+                ...(draft.sourceKey ? { sourceKey: draft.sourceKey } : {})
             };
         case "manyToMany":
             return { ...common,

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

@@ -10,7 +10,7 @@
  * (which has no react-router dependency).
  */
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useUrlController } from "../../_cms_internals";
 import { useSnackbarController } from "@rebasepro/app";
 import { CollectionStudioView, CollectionStudioViewProps } from "./CollectionStudioView";

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

@@ -9,7 +9,7 @@
  * (which has no react-router dependency).
  */
 import React from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router";
 import { useUrlController } from "../../_cms_internals";
 import { CollectionsStudioView, CollectionsStudioViewProps } from "./CollectionsStudioView";
 

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

@@ -67,6 +67,7 @@ export function RelationPropertyField({
     const targetSlug = getTargetSlug(link.target);
     const localKey = link.localKey ?? "";
     const foreignKeyOnTarget = link.foreignKeyOnTarget ?? "";
+    const sourceKey = link.sourceKey ?? "";
     const through = link.through;
     const throughTable = through?.table ?? "";
     const throughSourceColumn = through?.sourceColumn ?? "";
@@ -200,6 +201,21 @@ targetColumn: "" };
                     <FieldCaption>
                         Column on the target table that references this table&apos;s primary key
                     </FieldCaption>
+                    <TextField
+                        className={"mt-4"}
+                        value={sourceKey}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
+                            setFieldValue("relation.sourceKey", e.target.value)
+                        }
+                        label={"Source key (optional)"}
+                        disabled={disabled}
+                        placeholder={"defaults to this table's primary key"}
+                    />
+                    <FieldCaption>
+                        Column on <em>this</em> table that the foreign key above points at. Leave empty
+                        unless the two sides are joined on a natural key — an external identity id, a
+                        SKU — rather than on the row id. It must be unique.
+                    </FieldCaption>
                 </div>
             )}