@agent-native/core 0.80.5 → 0.80.7

package/corpus/templates/content/app/components/editor/DocumentProperties.tsx

@@ -6,6 +6,7 @@ import {
 } from "@agent-native/core/client";
 import type {
   AddContentDatabaseSourceFieldPropertyRequest,
+  BindContentDatabaseSourceFieldRequest,
   ContentDatabaseResponse,
   ContentDatabaseSourceFieldPropertyResponse,
   ContentDatabaseSource,
@@ -848,6 +849,22 @@ function PropertyRow({
   );
 }
 
+// Mirror of the server's propertyTypeForSourceField — keep in sync. Used to
+// gate which source fields can bind into a column (type compatibility).
+function propertyTypeForSourceFieldType(
+  sourceFieldType: string,
+): DocumentPropertyType {
+  if (sourceFieldType === "number") return "number";
+  if (sourceFieldType === "datetime" || sourceFieldType === "date") {
+    return "date";
+  }
+  if (sourceFieldType === "url") return "url";
+  if (sourceFieldType === "boolean" || sourceFieldType === "checkbox") {
+    return "checkbox";
+  }
+  return "text";
+}
+
 export function PropertyManagementPopover({
   property,
   documentId,
@@ -857,6 +874,7 @@ export function PropertyManagementPopover({
   triggerTrailing,
   sourceField,
   sourceAttached = false,
+  sources,
 }: {
   property: DocumentProperty;
   documentId: string;
@@ -866,12 +884,65 @@ export function PropertyManagementPopover({
   triggerTrailing?: ReactNode;
   sourceField?: ContentDatabaseSource["fields"][number] | null;
   sourceAttached?: boolean;
+  sources?: ContentDatabaseSource[];
 }) {
   const t = useT();
   const configure = useConfigureDocumentProperty(documentId);
   const duplicate = useDuplicateDocumentProperty(documentId);
   const remove = useDeleteDocumentProperty(documentId);
   const { data: propertiesData } = useDocumentProperties(documentId);
+  const bindQueryClient = useQueryClient();
+  const bindSourceField = useActionMutation<
+    ContentDatabaseResponse,
+    BindContentDatabaseSourceFieldRequest
+  >("bind-content-database-source-field", {
+    onSuccess: () => {
+      bindQueryClient.invalidateQueries({
+        queryKey: ["action", "get-content-database"],
+      });
+      bindQueryClient.invalidateQueries({
+        queryKey: ["action", "list-document-properties", { documentId }],
+      });
+    },
+  });
+  // Per-source field bindings for THIS column (row-union): which source fields
+  // feed it, and which unmapped, type-compatible fields could be bound into it
+  // (at most one field per source per column).
+  const allSourceFieldEntries = (sources ?? []).flatMap((src) =>
+    src.fields.map((field) => ({ source: src, field })),
+  );
+  const boundSourceFields = allSourceFieldEntries.filter(
+    (entry) => entry.field.propertyId === property.definition.id,
+  );
+  const boundSourceIds = new Set(boundSourceFields.map((b) => b.source.id));
+  const columnType = property.definition.type;
+  const bindableSourceFields = allSourceFieldEntries.filter((entry) => {
+    if (
+      entry.field.propertyId ||
+      entry.field.mappingType === "title" ||
+      entry.field.mappingType === "system" ||
+      entry.field.writeOwner === "derived" ||
+      boundSourceIds.has(entry.source.id)
+    ) {
+      return false;
+    }
+    const fieldIsMultiValue = [
+      "list",
+      "array",
+      "tags",
+      "multi_select",
+    ].includes(entry.field.sourceFieldType.trim().toLowerCase());
+    // text columns accept any SCALAR field but not multi-value ones (lossy);
+    // otherwise the derived type must match the column type.
+    return columnType === "text"
+      ? !fieldIsMultiValue
+      : columnType ===
+          propertyTypeForSourceFieldType(entry.field.sourceFieldType);
+  });
+  const showBindingEditor =
+    !isComputedPropertyType(columnType) &&
+    columnType !== "blocks" &&
+    (boundSourceFields.length > 0 || bindableSourceFields.length > 0);
   // Whether deleting THIS property removes the last Blocks field of the type —
   // i.e. the body. Drives the yellow warning in the delete dialog.
   const blocksFieldCount = (propertiesData?.properties ?? []).filter(
@@ -1169,7 +1240,85 @@ export function PropertyManagementPopover({
             </div>
           ) : null}
 
-          {sourceAttached ? (
+          {showBindingEditor ? (
+            <>
+              <DropdownMenuSeparator />
+              <div className="grid gap-1.5 px-2 py-1.5 text-xs">
+                <div className="font-medium text-foreground">
+                  {t("database.sourcesFeedingThisColumn")}
+                </div>
+                {boundSourceFields.length > 0 ? (
+                  <div className="grid gap-1">
+                    {boundSourceFields.map(({ source: src, field }) => (
+                      <div
+                        key={field.id}
+                        className="flex min-w-0 items-center gap-1.5"
+                      >
+                        <IconLink className="size-3.5 shrink-0 text-muted-foreground" />
+                        <span className="min-w-0 flex-1 truncate text-muted-foreground">
+                          <span className="text-foreground">
+                            {src.sourceName}
+                          </span>{" "}
+                          · {field.sourceFieldLabel}
+                        </span>
+                        <button
+                          type="button"
+                          aria-label={`Unbind ${field.sourceFieldLabel} from ${src.sourceName}`}
+                          disabled={bindSourceField.isPending}
+                          className="shrink-0 rounded p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50"
+                          onClick={() =>
+                            void bindSourceField.mutateAsync({
+                              documentId,
+                              sourceFieldId: field.id,
+                              propertyId: null,
+                            })
+                          }
+                        >
+                          <IconX className="size-3.5" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-muted-foreground">
+                    {t("database.noSourceFieldsBoundYet")}
+                  </div>
+                )}
+                {bindableSourceFields.length > 0 ? (
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger className="mt-0.5 rounded px-1.5 py-1 text-xs">
+                      <IconPlus className="mr-1.5 size-3.5 text-muted-foreground" />
+                      {t("database.bindAFieldFromASource")}
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuSubContent className="max-h-80 w-64 overflow-auto">
+                      {bindableSourceFields.map(({ source: src, field }) => (
+                        <DropdownMenuItem
+                          key={field.id}
+                          disabled={bindSourceField.isPending}
+                          onSelect={(event) => {
+                            event.preventDefault();
+                            void bindSourceField.mutateAsync({
+                              documentId,
+                              sourceFieldId: field.id,
+                              propertyId: property.definition.id,
+                            });
+                          }}
+                        >
+                          <IconLink className="mr-2 size-3.5 shrink-0 text-muted-foreground" />
+                          <span className="min-w-0 flex-1 truncate">
+                            {field.sourceFieldLabel}
+                          </span>
+                          <span className="ml-2 shrink-0 truncate text-[11px] text-muted-foreground">
+                            {src.sourceName}
+                          </span>
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuSubContent>
+                  </DropdownMenuSub>
+                ) : null}
+              </div>
+            </>
+          ) : sourceAttached ? (
             <>
               <DropdownMenuSeparator />
               <div className="grid gap-1 px-2 py-1.5 text-xs">