From 45b5af70a30666c87e975c65db40ebdc2f12a074 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 2 Nov 2026 00:26:21 +0000 Subject: [PATCH 1/5] feat(studio): add a field to a read-only base object as an extension in its pair On a base object of a read-only base, Studio's Add field writes the customer's __c field into the pair's object_extension of that object, and the field inspector edits a base field only within the spec's display-property whitelist, written as the extension's fieldPatches. Co-Authored-By: Claude Claude-Session: https://claude.ai/code/session_01QsR2jVPKQuoz3QHyQ76RnU --- .../inspectors/ObjectFieldInspector.tsx | 106 +++-- .../views/studio-design/AddFieldPopover.tsx | 24 +- .../studio-design/StudioCustomizeControls.tsx | 198 ++++++++++ .../studio-design/StudioDesignSurface.tsx | 362 +++++++++++++++--- ui/packages/i18n/src/namespaces/studio/en.ts | 4 + ui/packages/i18n/src/namespaces/studio/zh.ts | 3 + 6 files changed, 617 insertions(+), 80 deletions(-) diff --git a/ui/packages/app-shell/src/views/metadata-admin/inspectors/ObjectFieldInspector.tsx b/ui/packages/app-shell/src/views/metadata-admin/inspectors/ObjectFieldInspector.tsx index d902058a724..5079425445c 100644 --- a/ui/packages/app-shell/src/views/metadata-admin/inspectors/ObjectFieldInspector.tsx +++ b/ui/packages/app-shell/src/views/metadata-admin/inspectors/ObjectFieldInspector.tsx @@ -49,6 +49,7 @@ import * as React from 'react'; import { + BASE_FIELD_DISPLAY_WHITELIST, FieldSchema, isAggregateCompatibleWithFieldType, isBodyTableRelationship, @@ -131,6 +132,7 @@ import { FilterConditionField } from './FilterConditionField.js'; import type { FilterCondition } from './datasetFilterCondition.js'; import { usePickerLoad, type LoadState } from '../loadState.js'; import { fieldNameTakenRefusal } from '../../studio-design/AddFieldPopover.js'; +import { BaseFieldDisplayPatchContext } from '../../studio-design/StudioCustomizeControls.js'; /** @@ -689,6 +691,25 @@ function writePredicate(orig: unknown, next: string): unknown { /* ─────────────── Inspector ─────────────── */ +/** The inspector label of each whitelisted field key; a key with none is named as it is spelled. */ +const DISPLAY_PATCH_KEY_LABEL: Readonly> = { + label: 'designer.field.label', + description: 'designer.field.description', + inlineHelpText: 'designer.field.helpText', + placeholder: 'designer.field.placeholder', +}; + +/** The sentence a base field's inspector reads under: the whitelist, as the inspector names its inputs. */ +function displayPatchSentence(locale: SupportedLocale): string { + const names: string[] = BASE_FIELD_DISPLAY_WHITELIST.field.map((key) => + DISPLAY_PATCH_KEY_LABEL[key] ? t(DISPLAY_PATCH_KEY_LABEL[key], locale) : key, + ); + if (BASE_FIELD_DISPLAY_WHITELIST.option.length > 0) names.push(t('designer.field.basePatchOnly.optionLabels', locale)); + return tFormat('designer.field.basePatchOnly', locale, { + properties: names.join(t('designer.field.basePatchOnly.separator', locale)), + }); +} + /** * The CEL editors this inspector mounts, as aggregation keys. Errors are * counted PER SITE rather than into one running total: the four editors lint @@ -799,7 +820,15 @@ export function ObjectFieldInspector({ // field says where it comes from. A hook, so above the `!entry` return. const external = readExternalBinding(draft); const externalWriteState = useExternalWriteState(external); - const ddlLocked = readOnly || !!external; + // objectstack#28575 (ADR-0146 D10) — a read-only base's own field, edited + // through its pair: only the spec's display-property whitelist + // (BASE_FIELD_DISPLAY_WHITELIST, read here, never copied) stays editable + // (`displayLocked`), every other control is `locked`, under one sentence. + const displayPatchOnly = React.useContext(BaseFieldDisplayPatchContext); + const locked = readOnly || displayPatchOnly; + const ddlLocked = locked || !!external; + const whitelisted = (key: string) => (BASE_FIELD_DISPLAY_WHITELIST.field as readonly string[]).includes(key); + const displayLocked = (key: string) => readOnly || (displayPatchOnly && !whitelisted(key)); /* ─── Blocking CEL verdicts → the host's Save gate (objectui#4306) ───── * @@ -1209,7 +1238,7 @@ export function ObjectFieldInspector({ index={idx} total={view.entries.length} onMove={moveTo} - disabled={readOnly} + disabled={locked} /> ); @@ -1220,13 +1249,13 @@ export function ObjectFieldInspector({ label: typeof def.label === 'string' ? def.label : entry.name, })} onClick={removeField} - disabled={readOnly} + disabled={locked} /> ); const typeMetaLabel = typeMeta ? t(`engine.fieldType.${typeMeta.id}`, locale) : undefined; // objectui#11786 — read off the field as it stands, for the hints below. - const heldNeed = readOnly ? null : guardHeldNeed(entry.name, def); + const heldNeed = locked ? null : guardHeldNeed(entry.name, def); return ( {/* Basic */}
+ {displayPatchOnly && ( +

+ {displayPatchSentence(locale)} +

+ )} {external && (
@@ -1276,7 +1310,7 @@ export function ObjectFieldInspector({ onSelectionChange?.({ kind: 'field', id: derivedName, label: v }); } }} - disabled={readOnly} + disabled={displayLocked('label')} testId="field-label-input" /> patchDef({ required: v || undefined })} // Locked once it is on: the box can still be ticked on a stored // master that lacks it, never cleared (objectui#12326). - disabled={readOnly || (cbpMasterDetail && def.required === true)} + disabled={locked || (cbpMasterDetail && def.required === true)} /> patchDef({ unique: v || undefined })} - disabled={readOnly} + disabled={locked} />
{cbpMasterDetail && ( @@ -1319,7 +1353,7 @@ export function ObjectFieldInspector({ label={tr('designer.field.description')} value={typeof def.description === 'string' ? (def.description as string) : ''} onCommit={(v) => patchDef({ description: v || undefined })} - disabled={readOnly} + disabled={displayLocked('description')} rows={2} /> {defaultValueKind(type) && ( @@ -1328,7 +1362,7 @@ export function ObjectFieldInspector({ value={def.defaultValue} options={offeredOptions} onCommit={(v) => patchDef({ defaultValue: v })} - disabled={readOnly} + disabled={locked} locale={locale} /> )} @@ -1336,7 +1370,7 @@ export function ObjectFieldInspector({ label={tr('designer.field.helpText')} value={typeof def.inlineHelpText === 'string' ? (def.inlineHelpText as string) : ''} onCommit={(v) => patchDef({ inlineHelpText: v || undefined })} - disabled={readOnly} + disabled={displayLocked('inlineHelpText')} rows={2} placeholder={tr('designer.field.helpTextPlaceholder')} /> @@ -1350,7 +1384,7 @@ export function ObjectFieldInspector({ boundPicklist={typeof def.picklist === 'string' ? def.picklist : undefined} roster={picklistRoster} onCommit={bindPicklist} - disabled={readOnly} + disabled={locked} locale={locale} /> )} @@ -1369,7 +1403,8 @@ export function ObjectFieldInspector({ onChange={patchOptions} kindAllowed={kindAllowed} drivesPath={drivesPath} - disabled={readOnly} + disabled={locked} + labelsEditable={!readOnly && displayPatchOnly && BASE_FIELD_DISPLAY_WHITELIST.option.some((k) => k === 'label')} locale={locale} /> )} @@ -1383,7 +1418,7 @@ export function ObjectFieldInspector({ label={tr('designer.field.relatedObject')} value={typeof def.reference === 'string' ? (def.reference as string) : ''} onCommit={(v) => patchDef({ reference: v || undefined })} - disabled={readOnly} + disabled={locked} placeholder={tr('designer.field.objectNamePlaceholder')} locale={locale} /> @@ -1392,7 +1427,7 @@ export function ObjectFieldInspector({ def={def} patchDef={patchDef} hostFieldNames={view.entries.map((e) => e.name).filter((n) => n !== entry.name)} - readOnly={readOnly} + readOnly={locked} locale={locale} /> {(type === 'lookup' || type === 'master_detail') && ( @@ -1401,7 +1436,7 @@ export function ObjectFieldInspector({ patchDef={patchDef} unsetDefKey={unsetDefKey} ownFields={view.entries} - readOnly={readOnly} + readOnly={locked} locale={locale} /> )} @@ -1434,7 +1469,7 @@ export function ObjectFieldInspector({ settleFormulaType({ errors: issues.filter((i) => i.severity === 'error').length }); }} onInferredTypeChange={(inferred) => settleFormulaType({ typed: true, inferred })} - disabled={readOnly} + disabled={locked} placeholder="record.amount * 0.2" objectName={typeof (draft as any).name === 'string' ? ((draft as any).name as string) : undefined} // A formula may reference every sibling, not itself (circular). @@ -1456,7 +1491,7 @@ export function ObjectFieldInspector({ )} @@ -1466,27 +1501,27 @@ export function ObjectFieldInspector({ label={tr('designer.field.precision')} value={typeof def.precision === 'number' ? (def.precision as number) : undefined} onCommit={(v) => patchDef({ precision: v })} - disabled={readOnly} + disabled={locked} /> {offersScale(type) && ( patchDef({ scale: v })} - disabled={readOnly} + disabled={locked} /> )} patchDef({ min: v })} - disabled={readOnly} + disabled={locked} /> patchDef({ max: v })} - disabled={readOnly} + disabled={locked} /> )} @@ -1496,7 +1531,7 @@ export function ObjectFieldInspector({ candidates={currencyCodeFieldCandidates(view.entries, name)} onCommit={(next) => patchDef({ currencyConfig: next })} onCreateCodeField={createCurrencyCodeField} - disabled={readOnly} + disabled={locked} tr={tr} /> )} @@ -1506,14 +1541,14 @@ export function ObjectFieldInspector({ label={tr('designer.field.minLength')} value={typeof def.minLength === 'number' ? (def.minLength as number) : undefined} onCommit={(v) => patchDef({ minLength: v })} - disabled={readOnly} + disabled={locked} placeholder="0" /> patchDef({ maxLength: v })} - disabled={readOnly} + disabled={locked} placeholder="255" /> @@ -1531,7 +1566,7 @@ export function ObjectFieldInspector({ // a declaration the write path enforces — "no domain" is the // key's absence, never a value of it (objectui#7597). onCommit={(v) => (v ? patchDef({ valueDomain: v }) : unsetDefKey('valueDomain'))} - disabled={readOnly} + disabled={locked} /> )}
@@ -1544,26 +1579,26 @@ export function ObjectFieldInspector({ label={tr('designer.field.readonly')} value={!!def.readonly} onCommit={(v) => patchDef({ readonly: v || undefined })} - disabled={readOnly} + disabled={locked} /> patchDef({ hidden: v || undefined })} - disabled={readOnly} + disabled={locked} /> patchDef({ trackHistory: v || undefined })} - disabled={readOnly} + disabled={locked} /> patchDef({ placeholder: v || undefined })} - disabled={readOnly} + disabled={displayLocked('placeholder')} /> {/* Conditional rules (ADR-0036 B2) — CEL editors with live lint + field autocomplete against THIS object's fields (objectui#1582). */} @@ -1577,7 +1612,7 @@ export function ObjectFieldInspector({ value={readPredicate(def.visibleWhen)} onChange={(v) => patchDef({ visibleWhen: writePredicate(def.visibleWhen, v) })} onLintChange={(issues) => reportCel('visibleWhen', issues)} - disabled={readOnly} + disabled={locked} placeholder="record.status != 'draft'" objectName={typeof (draft as any).name === 'string' ? ((draft as any).name as string) : undefined} fieldNames={view.entries.map((e) => e.name)} @@ -1597,7 +1632,7 @@ export function ObjectFieldInspector({ value={readPredicate(def.readonlyWhen)} onChange={(v) => patchDef({ readonlyWhen: writePredicate(def.readonlyWhen, v) })} onLintChange={(issues) => reportCel('readonlyWhen', issues)} - disabled={readOnly} + disabled={locked} placeholder="record.status == 'closed'" objectName={typeof (draft as any).name === 'string' ? ((draft as any).name as string) : undefined} fieldNames={view.entries.map((e) => e.name)} @@ -1617,7 +1652,7 @@ export function ObjectFieldInspector({ value={readPredicate(def.requiredWhen)} onChange={(v) => patchDef({ requiredWhen: writePredicate(def.requiredWhen, v) })} onLintChange={(issues) => reportCel('requiredWhen', issues)} - disabled={readOnly} + disabled={locked} placeholder="record.amount > 10000" objectName={typeof (draft as any).name === 'string' ? ((draft as any).name as string) : undefined} fieldNames={view.entries.map((e) => e.name)} @@ -1646,7 +1681,7 @@ export function ObjectFieldInspector({ .map((g) => ({ value: g.key as string, label: String(g.label ?? g.key) })), ]} onCommit={(v) => patchDef({ group: v || undefined })} - disabled={readOnly} + disabled={locked} /> )} @@ -1869,6 +1904,7 @@ function OptionsEditor({ kindAllowed, drivesPath, disabled, + labelsEditable = false, locale, }: { rows: OptionRow[]; @@ -1878,6 +1914,8 @@ function OptionsEditor({ /** The record path follows this field, so its options' kinds steer it. */ drivesPath: boolean; disabled?: boolean; + /** objectstack#28575 — under `disabled`, each option's label stays editable (a base field's display patch). */ + labelsEditable?: boolean; locale?: string; }) { // Local editing buffer. We keep a blank trailing row visible for input but @@ -2027,7 +2065,7 @@ function OptionsEditor({ onChange={(e) => updateLabel(i, e.target.value)} placeholder={t('designer.field.optLabel', locale)} aria-label={t('designer.field.optLabel', locale)} - disabled={disabled} + disabled={disabled && !labelsEditable} data-testid="option-label" className="h-7 min-w-0 flex-1 text-xs" /> diff --git a/ui/packages/app-shell/src/views/studio-design/AddFieldPopover.tsx b/ui/packages/app-shell/src/views/studio-design/AddFieldPopover.tsx index 80b0cce6108..53f0a814253 100644 --- a/ui/packages/app-shell/src/views/studio-design/AddFieldPopover.tsx +++ b/ui/packages/app-shell/src/views/studio-design/AddFieldPopover.tsx @@ -25,6 +25,11 @@ * its authoring context with no element to hand over): the host passes * `open` / `onOpenChange`, `children` is the element it is placed against, * and `returnFocusTo` names where focus goes back when it closes. + * + * objectstack#28575 (ADR-0146 D10) — on a read-only base's object the field + * is the customer's extension field (`extensionField`): its api name takes + * the spec's suffix (`region` → `region__c`), shown before Create, a typed + * name the same, and Create always hands the suffixed name. */ import * as React from 'react'; @@ -40,6 +45,7 @@ import type { FieldTypeId } from '../metadata-admin/previews/field-types.js'; import { FieldTypePicker } from '../metadata-admin/inspectors/FieldTypePicker.js'; import { t, tFormat, useMetadataLocale, type SupportedLocale } from '../metadata-admin/i18n.js'; import { toFieldNameLoose } from '../metadata-admin/previews/object-fields-io.js'; +import { extensionFieldName } from './StudioCustomizeControls.js'; /** * The refusal for an api name another field of the object already holds, or @@ -76,6 +82,11 @@ export interface AddFieldPopoverProps { returnFocusTo?: () => HTMLElement | null; /** Which edge of `children` the popover lines up with. */ align?: 'start' | 'end'; + /** + * objectstack#28575 — the field is a customer extension field of a base + * object: its api name is suffixed (`__c`), and Create hands that name. + */ + extensionField?: boolean; } export function AddFieldPopover({ @@ -86,6 +97,7 @@ export function AddFieldPopover({ onOpenChange, returnFocusTo, align = 'end', + extensionField = false, }: AddFieldPopoverProps): React.ReactElement { const locale = useMetadataLocale(); const [openState, setOpenState] = React.useState(false); @@ -111,18 +123,19 @@ export function AddFieldPopover({ }; const trimmed = label.trim(); - const derived = toFieldNameLoose(trimmed).replace(/_+$/, ''); + const suffixed = (name: string) => (extensionField ? extensionFieldName(name) : name); + const derived = suffixed(toFieldNameLoose(trimmed).replace(/_+$/, '')); const derivedTaken = !!derived && takenNames.includes(derived); // The label alone cannot name the field: the author types the api name. const asksName = !!trimmed && (!derived || derivedTaken); - const typed = apiName.replace(/_+$/, ''); + const typed = suffixed(apiName.replace(/_+$/, '')); const typedRefusal = fieldNameTakenRefusal(typed, takenNames, locale); const typedTaken = !!typedRefusal; const canCreate = !!trimmed && (!asksName || (!!typed && !typedTaken)); const submit = (e: React.FormEvent) => { e.preventDefault(); if (!canCreate) return; - onCreate(trimmed, type, asksName ? typed : undefined); + onCreate(trimmed, type, asksName ? typed : extensionField ? derived : undefined); setOpen(false); }; const nameHint = !asksName @@ -203,6 +216,11 @@ export function AddFieldPopover({ {nameHint}

)} + {!nameHint && extensionField && typed && ( +

+ {t('designer.field.apiName', locale)}: {typed} +

+ )} )} diff --git a/ui/packages/app-shell/src/views/studio-design/StudioCustomizeControls.tsx b/ui/packages/app-shell/src/views/studio-design/StudioCustomizeControls.tsx index 77f90a4464d..cbcd1694c00 100644 --- a/ui/packages/app-shell/src/views/studio-design/StudioCustomizeControls.tsx +++ b/ui/packages/app-shell/src/views/studio-design/StudioCustomizeControls.tsx @@ -49,9 +49,15 @@ import { isOverridableMetadataType, type OverrideDeclarationParsed, } from '@objectstack/spec/kernel'; +import { + BASE_FIELD_DISPLAY_WHITELIST, + EXTENSION_FIELD_SUFFIX, + isExtensionFieldName, +} from '@objectstack/spec/data'; import { Layers, Pencil, RotateCcw } from 'lucide-react'; import { postureHasOrgWall, useTenancyPosture } from '../../hooks/useTenancyPosture.js'; import { t, tFormat } from '../metadata-admin/i18n.js'; +import { readFields, writeFields, type FieldEntry } from '../metadata-admin/previews/object-fields-io.js'; /** * The types Studio's Customize door covers: the Interfaces pillar's view, @@ -364,3 +370,195 @@ export function StudioRestoreOriginalDialog({ ); } + +/* ───────────── Object extensions (objectstack#28575, ADR-0146 D10) ───────────── */ + +/** + * The selected field is a read-only base package's own field, edited through + * the base's pair: the field inspector, which the registry mounts with the + * shared inspector props, keeps only the inputs of the spec's display-property + * whitelist editable. The Data pillar provides it around the inspector. + */ +export const BaseFieldDisplayPatchContext = React.createContext(false); + +/** + * The metadata type a base object's extension is written as: one row per + * package per target object, filed under the target's name, its body + * `ObjectExtensionSchema` (`extend`, `fields`, `fieldPatches`, …). + */ +export const OBJECT_EXTENSION_TYPE = 'object_extension'; + +/** The pair's extension of one base object: `extend` names the object. */ +export type ObjectExtensionBody = Record & { extend: string }; + +const isPlainRecord = (v: unknown): v is Record => + v !== null && typeof v === 'object' && !Array.isArray(v); + +/** + * `name` spelled as a customer extension field: the spec's suffix appended + * once (`region` → `region__c`, `region__c` unchanged). Empty stays empty. + */ +export function extensionFieldName(name: string): string { + if (!name) return name; + return isExtensionFieldName(name) ? name : `${name}${EXTENSION_FIELD_SUFFIX}`; +} + +/** + * The extension body a read served for `objectName`: the document without + * its `_` keys (the envelope a read stamps, which the strict schema refuses), + * `extend` set to the object. `null` when the read served no document. + */ +export function objectExtensionBodyOf(doc: unknown, objectName: string): ObjectExtensionBody | null { + if (!isPlainRecord(doc)) return null; + const body: Record = {}; + for (const [key, value] of Object.entries(doc)) { + if (!key.startsWith('_')) body[key] = value; + } + return { ...body, extend: objectName }; +} + +/** The names `ext.fields` declares. */ +export function extensionFieldNames(ext: Record | null | undefined): string[] { + return ext && isPlainRecord(ext.fields) ? Object.keys(ext.fields) : []; +} + +/** `def` with one field patch applied: the whitelisted keys, and option labels by stored value. */ +function applyFieldPatch(def: Record, patch: Record): Record { + const out: Record = { ...def }; + for (const key of BASE_FIELD_DISPLAY_WHITELIST.field) { + if (patch[key] !== undefined) out[key] = patch[key]; + } + const optionPatches = patch.options; + if (isPlainRecord(optionPatches) && Array.isArray(def.options)) { + out.options = def.options.map((option) => { + if (!isPlainRecord(option) || typeof option.value !== 'string') return option; + const optionPatch = optionPatches[option.value]; + if (!isPlainRecord(optionPatch)) return option; + const next: Record = { ...option }; + for (const key of BASE_FIELD_DISPLAY_WHITELIST.option) { + if (optionPatch[key] !== undefined) next[key] = optionPatch[key]; + } + return next; + }); + } + return out; +} + +/** + * The object the Data pillar shows for a base object with the pair's + * extension of it: the object as served (which already holds the pair's + * PUBLISHED extension, merged by the registry), with the extension's + * `fieldPatches` applied to the fields they name and its `fields` laid over + * by name, the extension winning, so a published field the extension still + * declares shows once. A field the published extension declared and the + * extension no longer does (`published`) is left out: the extension + * removed it. + */ +export function foldObjectExtension( + object: Record, + ext: Record | null, + published: ReadonlySet = new Set(), +): Record { + if (!ext) return object; + const view = readFields(object.fields); + const own = isPlainRecord(ext.fields) ? ext.fields : {}; + const patches = isPlainRecord(ext.fieldPatches) ? ext.fieldPatches : {}; + const entries: FieldEntry[] = []; + for (const entry of view.entries) { + if (published.has(entry.name) && !Object.prototype.hasOwnProperty.call(own, entry.name)) continue; + const patch = patches[entry.name]; + entries.push(isPlainRecord(patch) ? { name: entry.name, def: applyFieldPatch(entry.def, patch) } : entry); + } + for (const [name, def] of Object.entries(own)) { + if (!isPlainRecord(def)) continue; + const at = entries.findIndex((e) => e.name === name); + if (at >= 0) entries[at] = { name, def }; + else entries.push({ name, def }); + } + return { ...object, fields: writeFields({ shape: view.shape, entries }) }; +} + +/** + * The base object's own fields: the names the served object holds that are + * neither the extension's nor the published extension's. + */ +export function baseOwnedFieldNames( + object: Record, + ext: Record | null, + published: ReadonlySet = new Set(), +): Set { + const ours = new Set([...extensionFieldNames(ext), ...published]); + return new Set(readFields(object.fields).entries.map((e) => e.name).filter((n) => !ours.has(n))); +} + +const optionLabels = (options: unknown): Map => { + const out = new Map(); + if (!Array.isArray(options)) return out; + for (const option of options) { + if (isPlainRecord(option) && typeof option.value === 'string') out.set(option.value, option.label); + } + return out; +}; + +/** + * The extension after an edit of the folded object's fields (`before` → + * `after`, both as the folded object holds them): every field that is not + * the base's is the extension's, declared whole in `fields`, in the edited + * order; on a base field, only a change to a whitelisted property + * ({@link BASE_FIELD_DISPLAY_WHITELIST}, option labels by stored value) is + * written, into its `fieldPatches` entry, and a property cleared drops from + * the patch, so the base's own text shows again. Any other change to a base + * field is not the extension's to make, and is not written. + */ +export function routeFoldedFieldsEdit(input: { + before: unknown; + after: unknown; + baseOwned: ReadonlySet; + ext: ObjectExtensionBody; +}): ObjectExtensionBody { + const { before, after, baseOwned, ext } = input; + const was = new Map(readFields(before).entries.map((e) => [e.name, e.def])); + const fields: Record = {}; + const patches: Record> = {}; + if (isPlainRecord(ext.fieldPatches)) { + for (const [name, patch] of Object.entries(ext.fieldPatches)) { + if (isPlainRecord(patch)) patches[name] = { ...patch }; + } + } + for (const entry of readFields(after).entries) { + if (!baseOwned.has(entry.name)) { + Object.defineProperty(fields, entry.name, { value: entry.def, enumerable: true, writable: true, configurable: true }); + continue; + } + const prev = was.get(entry.name); + if (!prev) continue; + const patch: Record = { ...(patches[entry.name] ?? {}) }; + for (const key of BASE_FIELD_DISPLAY_WHITELIST.field) { + const next = entry.def[key]; + if (next === prev[key]) continue; + if (next === undefined || next === '') delete patch[key]; + else patch[key] = next; + } + const prevLabels = optionLabels(prev.options); + const nextLabels = optionLabels(entry.def.options); + const optionPatch: Record = isPlainRecord(patch.options) ? { ...patch.options } : {}; + for (const [value, label] of nextLabels) { + if (!prevLabels.has(value) || prevLabels.get(value) === label) continue; + const entryPatch: Record = isPlainRecord(optionPatch[value]) ? { ...optionPatch[value] } : {}; + if (typeof label === 'string' && label !== '') entryPatch.label = label; + else delete entryPatch.label; + if (Object.keys(entryPatch).length > 0) optionPatch[value] = entryPatch; + else delete optionPatch[value]; + } + if (Object.keys(optionPatch).length > 0) patch.options = optionPatch; + else delete patch.options; + if (Object.keys(patch).length > 0) patches[entry.name] = patch; + else delete patches[entry.name]; + } + const out: ObjectExtensionBody = { ...ext }; + delete out.fields; + delete out.fieldPatches; + if (Object.keys(fields).length > 0) out.fields = fields; + if (Object.keys(patches).length > 0) out.fieldPatches = patches; + return out; +} diff --git a/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx b/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx index 5b5010618d5..9d73ca66b4f 100644 --- a/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx +++ b/ui/packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx @@ -417,8 +417,17 @@ import { overrideDraftBody, useCustomizeDoorWalled, useServedOverride, + OBJECT_EXTENSION_TYPE, + baseOwnedFieldNames, + extensionFieldName, + extensionFieldNames, + foldObjectExtension, + objectExtensionBodyOf, + routeFoldedFieldsEdit, type CustomizeBlock, + type ObjectExtensionBody, type ServedOverride, + BaseFieldDisplayPatchContext, } from './StudioCustomizeControls.js'; import { DraftChangesPanel, @@ -7083,6 +7092,26 @@ function addedFieldName(label: string, existing: string[]): string { return derived && !existing.includes(derived) ? derived : nextFieldName(existing); } +/** + * objectstack#28575 — {@link addedFieldName} for a customer extension field: + * the name the Add field popover shows, suffixed (`region__c`), or the next + * free `field___c`. + */ +function addedExtensionFieldName(label: string, existing: string[]): string { + const derived = extensionFieldName(toFieldNameLoose(label).replace(/_+$/, '')); + if (derived && !existing.includes(derived)) return derived; + let i = existing.length + 1; + let name = extensionFieldName(`field_${i}`); + while (existing.includes(name)) name = extensionFieldName(`field_${++i}`); + return name; +} + +/** objectstack#28575 — an extension body's `fields` map; `{}` when it declares none. */ +function extensionFieldsOf(body: ObjectExtensionBody): Record { + const fields = body.fields; + return fields && typeof fields === 'object' && !Array.isArray(fields) ? (fields as Record) : {}; +} + /** * Data pillar — the package's objects: a records grid (Airtable parity) plus * table-based field management. Add a field, or click a column header's edit @@ -7374,6 +7403,37 @@ export function DataPillar({ const requestedSurface = useRequestedSurface(); const appliedRequestRef = React.useRef(0); const [objDraft, setObjDraft] = React.useState>({}); + // objectstack#28575 (ADR-0146 D10) — a base object of a read-only base takes + // fields as an extension in the base's pair, never in its own buffer: the + // pair's `object_extension` of it (`extend` = the object), filed under the + // object's name. The base object stays as shipped; `objDraft` holds it as + // served (which already folds the pair's PUBLISHED extension), and what the + // pillar shows is `shownDraft`, the two folded. `published` names the + // fields the published extension declares, so one the draft drops is gone. + const extendsBase = packageReadOnly && customization !== null && current !== null && !current.addedIn; + const [ext, setExt] = React.useState<{ + for: string; + body: ObjectExtensionBody; + published: ReadonlySet; + } | null>(null); + const [extDirty, setExtDirty] = React.useState(false); + const [extHasDraft, setExtHasDraft] = React.useState(false); + const [extReloadNonce, setExtReloadNonce] = React.useState(0); + const extLoadedRef = React.useRef(null); + const extOpen = extendsBase && ext !== null && ext.for === current?.name ? ext : null; + // Adding a field asks the ensure door for the pair once per base: its + // answer names every write, ⛔ never a `.custom` spelled here. + const extWalled = customization?.walled === true; + const extWritable = extOpen !== null && !extWalled; + const shownDraft = React.useMemo( + () => (extOpen ? foldObjectExtension(objDraft, extOpen.body, extOpen.published) : objDraft), + [objDraft, extOpen], + ); + // The served object's own fields: the ones a base-field patch addresses. + const baseOwnedFields = React.useMemo( + () => (extOpen ? baseOwnedFieldNames(objDraft, extOpen.body, extOpen.published) : null), + [objDraft, extOpen], + ); // ADR-0015 — an external object's table belongs to the remote database: the // pillar offers no Add field on it (grid "+" column, Form toolbar) and says // where its fields come from. Rename / retype / duplicate / remove are gated @@ -7417,7 +7477,7 @@ export function DataPillar({ // and the open inspector's live verdict always wins. const [celVerdicts, setCelVerdicts] = React.useState>({}); const liveFieldReport = fieldSel?.kind === 'field' && blockingReport.key === fieldSelKey; - const openFieldStamp = fieldSel?.kind === 'field' ? fieldCelStamp(objDraft, fieldSel.id) : null; + const openFieldStamp = fieldSel?.kind === 'field' ? fieldCelStamp(shownDraft, fieldSel.id) : null; React.useEffect(() => { if (!liveFieldReport || fieldSel === null) return; const kept = { field: fieldSel.id, count: blockingReport.count, stamp: openFieldStamp }; @@ -7433,7 +7493,7 @@ export function DataPillar({ const celFieldPrefix = `${current?.name ?? ''}:field:`; for (const [key, kept] of Object.entries(celVerdicts)) { if (!key.startsWith(celFieldPrefix) || key === fieldSelKey) continue; - if (kept.count > 0 && kept.stamp === fieldCelStamp(objDraft, kept.field)) { + if (kept.count > 0 && kept.stamp === fieldCelStamp(shownDraft, kept.field)) { celHeldFields.push(kept.field); inspectorBlocking += kept.count; } @@ -7640,6 +7700,20 @@ export function DataPillar({ recordRead: recordObjRead, dialog: objConflictDialog, } = useDraftSaveGuard(client, reloadObjDraft); + // objectstack#28575 — the extension buffer's own guard, pinned by its draft read at the pair. + const reloadExt = React.useCallback(() => setExtReloadNonce((n) => n + 1), []); + const { + save: saveExtDraft, + recordRead: recordExtRead, + dialog: extConflictDialog, + } = useDraftSaveGuard(client, reloadExt); + // The pair a READ names is the surface's (`StudioBaseCustomization.pairId`), + // read through this ref, so the pair a first add creates never reloads the + // buffer it is about to save. + const extReadPairRef = React.useRef(customization?.pairId ?? null); + React.useLayoutEffect(() => { + extReadPairRef.current = customization?.pairId ?? null; + }); // Left-rail search + inline "new object" creator (design §4: rail = search + New). const [query, setQuery] = React.useState(''); const [creating, setCreating] = React.useState(false); @@ -7905,13 +7979,62 @@ export function DataPillar({ }; }, [client, current, packageId, publishNonce, objReloadNonce, recordObjRead]); + // objectstack#28575 — the pair's extension of the open base object: its + // pending draft at the pair, else its published row there, else a new + // `{ extend }`. Loaded once per object, and again after a publish. A draft + // starts from the published body, so a publish never drops a field the + // published extension already declares. + React.useEffect(() => { + if (!extendsBase || !current) { + extLoadedRef.current = null; + return; + } + const name = current.name; + const loadKey = `${name}#${publishNonce}#${extReloadNonce}`; + if (extLoadedRef.current === loadKey) return; + extLoadedRef.current = loadKey; + let cancelled = false; + let settled = false; + setExt(null); + setExtDirty(false); + setExtHasDraft(false); + const pair = extReadPairRef.current; + (async () => { + try { + let draft: ObjectExtensionBody | null = null; + let published: ObjectExtensionBody | null = null; + if (pair) { + const [draftRead, publishedRow] = await Promise.all([ + readDraftForSave>(client, OBJECT_EXTENSION_TYPE, name, pair), + client.get>(OBJECT_EXTENSION_TYPE, name, { packageId: pair }), + ]); + if (cancelled) return; + draft = objectExtensionBodyOf(extractDraftBody(draftRead.answer), name); + published = objectExtensionBodyOf(publishedRow, name); + recordExtRead(OBJECT_EXTENSION_TYPE, name, pair, draftRead.pin); + } + setExt({ for: name, body: draft ?? published ?? { extend: name }, published: new Set(extensionFieldNames(published)) }); + setExtHasDraft(draft !== null); + } catch (e) { + if (!cancelled) setError(plainRefusal(e)); + } finally { + settled = true; + } + })(); + return () => { + cancelled = true; + // A load cancelled before it settled takes its claim back (see the object load above). + if (!settled) extLoadedRef.current = null; + }; + }, [client, current, extendsBase, publishNonce, extReloadNonce, recordExtRead]); + // The header counts the fields the canvas shows, and names the platform's // own columns apart: "2 fields (+8 system)". const fieldCount = React.useMemo(() => { - const all = readFields(objDraft.fields).entries.length; - const own = formFieldNames(objDraft.fields).length; + const all = readFields(shownDraft.fields).entries.length; + const own = formFieldNames(shownDraft.fields).length; return { own, system: all - own }; - }, [objDraft]); + }, [shownDraft]); const fieldCountText = tFormat(fieldCount.own === 1 ? 'engine.studio.data.fieldCountOne' : 'engine.studio.data.fieldCount', locale, { count: fieldCount.own, @@ -7946,9 +8069,9 @@ export function DataPillar({ * a PRODUCER-side fix; ListView's by-identity dependency is correct for a genuine * column change and is left alone. */ - const gridColumns = React.useMemo( + const gridColumnsKey = React.useMemo( () => - readFields(objDraft.fields) + JSON.stringify(readFields(shownDraft.fields) // objectui#11780 — a column the platform injects AND hides (`__search`, // `owning_business_unit_id`) is no column an author manages. Read off // the definition this memo already holds, so the key stays @@ -7968,9 +8091,13 @@ export function DataPillar({ // what the grid asks for. The new field is still selected in the // inspector, which is where it gets configured; it joins the grid once // it is published and therefore queryable. - .filter((n) => publishedFieldNames.has(n)), - [objDraft.fields, publishedFieldNames], + .filter((n) => publishedFieldNames.has(n))), + [shownDraft.fields, publishedFieldNames], ); + // objectstack#28575 — keyed on the column NAMES: the folded object + // (`shownDraft`) is rebuilt on every extension edit, and a label typed into + // an extension field must not re-key this fetch input. + const gridColumns = React.useMemo(() => JSON.parse(gridColumnsKey) as string[], [gridColumnsKey]); /** * The design-mode FORM's fields: the object's own fields, dropping @@ -8001,15 +8128,17 @@ export function DataPillar({ * `fields` identical, so the looser key would churn (and re-run the form's * field-generation effect) on every unrelated draft edit (icon, label). */ - const formFields = React.useMemo(() => formFieldNames(objDraft.fields), [objDraft.fields]); + // objectstack#28575 — keyed on the names, as `gridColumns` is. + const formFieldsKey = React.useMemo(() => JSON.stringify(formFieldNames(shownDraft.fields)), [shownDraft.fields]); + const formFields = React.useMemo(() => JSON.parse(formFieldsKey) as string[], [formFieldsKey]); // objectui#12515 — what the Form tab's Preview renders. The draft differs // from the published definition when there is no published one, a pending // draft, or an unsaved edit; then Preview shows the draft unless the author // picked Published (offered only when a published version exists). - const draftDiffers = !hasBaseline || hasDraft || dirty; + const draftDiffers = !hasBaseline || hasDraft || dirty || (extOpen !== null && (extHasDraft || extDirty)); const previewShowsDraft = !hasBaseline || (draftDiffers && previewSource === 'draft'); - const previewDraft = previewShowsDraft ? objDraft : null; + const previewDraft = previewShowsDraft ? shownDraft : null; const previewObjectName = current?.name ?? ''; const previewDataSource = React.useMemo( () => @@ -8147,6 +8276,73 @@ export function DataPillar({ snapshot: objDraft, save: doSave, }); + + // objectstack#28575 — the ensure door's answer for this base's extension + // writes: asked by the first add (no prompt), once per base, and again only + // after a refusal. + const extPairRef = React.useRef<{ base: string; asked: Promise } | null>(null); + const extPairFor = React.useCallback((custom: StudioBaseCustomization): Promise => { + const held = extPairRef.current; + if (held && held.base === custom.base) return held.asked; + const asked = custom.ensure(); + extPairRef.current = { base: custom.base, asked }; + asked.catch(() => { + if (extPairRef.current?.asked === asked) extPairRef.current = null; + }); + return asked; + }, []); + // The extension's draft save, into the pair the door answered. A refusal + // (the suffix, a structural key, the ensure door's walled 403) is shown as + // the server sent it. + const doSaveExt = React.useCallback( + async (sent: DraftSend) => { + if (!extOpen || !customization) return; + const { for: name, body } = extOpen; + setSaving('draft'); + setError(null); + try { + const pair = await extPairFor(customization); + const outcome = await saveExtDraft(OBJECT_EXTENSION_TYPE, name, body, { + mode: 'draft', + packageId: pair, + surface: 'studio', + }); + if (outcome === 'reloaded') return; + setExtHasDraft(true); + if (sent.unmoved()) setExtDirty(false); + setSavedAt(new Date()); + onDraftSaved?.({ type: OBJECT_EXTENSION_TYPE, name }); + } catch (e) { + setError(plainRefusal(e)); + } finally { + setSaving(false); + } + }, + [extOpen, customization, extPairFor, saveExtDraft, onDraftSaved], + ); + const { flush: flushExtSave } = useDraftAutoSave({ + target: `${OBJECT_EXTENSION_TYPE}:${current?.name ?? ''}`, + loadedFor: extOpen ? `${OBJECT_EXTENSION_TYPE}:${extOpen.for}` : '', + dirty: extDirty, + blocked: !extWritable || !!saving || saveBlocking > 0, + snapshot: extOpen?.body ?? null, + save: doSaveExt, + }); + // An edit of the folded object's fields, written into the extension: an + // extension field whole, a base field's whitelisted change as its patch. + const onExtFieldsPatch = React.useCallback( + (patch: Record) => { + if (!extWritable || !('fields' in patch)) return; + setExt((prev) => { + if (!prev) return prev; + const before = foldObjectExtension(objDraft, prev.body, prev.published).fields; + const baseOwned = baseOwnedFieldNames(objDraft, prev.body, prev.published); + return { ...prev, body: routeFoldedFieldsEdit({ before, after: patch.fields, baseOwned, ext: prev.body }) }; + }); + setExtDirty(true); + }, + [extWritable, objDraft], + ); // objectstack#27485 — an unsent edit the CEL verdict holds is named like an // incomplete one: the held line, the surface's Publish and the rail's // question all read it, so it outlives the inspector without going unseen. @@ -8220,26 +8416,28 @@ export function DataPillar({ setCurrent(next); return true; } - if (saving || (dirty && objHeld === null && flushObjSave())) { + // objectstack#28575 — and the base object's extension buffer the same way. + if (saving || (dirty && objHeld === null && flushObjSave()) || (extDirty && flushExtSave())) { setSwitchTo(next); return true; } - if (!confirmDropUnsavedWork(dirty, locale)) return false; + if (!confirmDropUnsavedWork(dirty || extDirty, locale)) return false; setSwitchTo(null); setCurrent(next); return true; }, - [current, saving, dirty, objHeld, flushObjSave, locale], + [current, saving, dirty, extDirty, objHeld, flushObjSave, flushExtSave, locale], ); React.useEffect(() => { if (!switchTo || saving) return; if (dirty && objHeld === null && flushObjSave()) return; + if (extDirty && flushExtSave()) return; setSwitchTo(null); // Still dirty: the save was refused (on screen) or an edit taken meanwhile // is held. The author stays; the next switch asks. - if (dirty) return; + if (dirty || extDirty) return; setCurrent(switchTo); - }, [switchTo, saving, dirty, objHeld, flushObjSave]); + }, [switchTo, saving, dirty, extDirty, objHeld, flushObjSave, flushExtSave]); // The live request's apply (see `requestedSurface` above). objectstack#26845 // — another object's load replaces the buffer a held edit lives in, so it // goes through the rail's own switch (`openObject`): an unsent edit is sent @@ -8275,7 +8473,26 @@ export function DataPillar({ // the label derived none (or a taken one); otherwise it is derived here. const addField = React.useCallback((label: string, type: FieldTypeId, typedName?: string) => { // objectui#11272 — never onto another object's buffer (not offered then). - if (readOnly || !objLoaded || objIsExternal) return; + if (!objLoaded || objIsExternal) return; + // objectstack#28575 (ADR-0146 D10) — on a read-only base's object the + // field is the customer's own, `__c`, declared in the pair's extension of + // it; the base object's buffer is never touched. Create asks the ensure + // door for the pair (no prompt); the extension's autosave writes there. + if (extendsBase) { + if (!extWritable || !customization) return; + const existing = readFields(shownDraft.fields).entries.map((e) => e.name); + const asked = typedName ? extensionFieldName(typedName) : ''; + const name = asked && !existing.includes(asked) ? asked : addedExtensionFieldName(label, existing); + const { def } = newField(name, type, label); + setExt((prev) => + prev ? { ...prev, body: { ...prev.body, fields: { ...extensionFieldsOf(prev.body), [name]: def } } } : prev, + ); + setExtDirty(true); + setFieldSel({ kind: 'field', id: name }); + extPairFor(customization).catch((e: unknown) => setError(plainRefusal(e))); + return; + } + if (readOnly) return; const view = readFields(objDraft.fields); const existing = view.entries.map((e) => e.name); const name = typedName && !existing.includes(typedName) ? typedName : addedFieldName(label, existing); @@ -8283,11 +8500,13 @@ export function DataPillar({ setObjDraft((d) => ({ ...d, fields: writeFields(view) })); setDirty(true); setFieldSel({ kind: 'field', id: name }); - }, [objDraft, readOnly, objLoaded, objIsExternal]); - const canAddFields = !readOnly && !objIsExternal; + }, [objDraft, readOnly, objLoaded, objIsExternal, extendsBase, extWritable, customization, shownDraft, extPairFor]); + // objectstack#28575 — a read-only base's object takes fields into its pair, + // unless the ensure door is walled for this caller (drawn disabled below). + const canAddFields = !objIsExternal && (extendsBase ? extWritable : !readOnly); const addFieldTakenNames = React.useMemo( - () => readFields(objDraft.fields).entries.map((e) => e.name), - [objDraft.fields], + () => readFields(shownDraft.fields).entries.map((e) => e.name), + [shownDraft.fields], ); // objectui#12516 — the Records grid's "+" column opens the same popover. The @@ -8344,6 +8563,13 @@ export function DataPillar({ // Observed (objectui#11939): an object inspector registered after this pillar // rendered fills the field rail below without a remount. const inspector = useRegisteredMetadataInspector('object'); + // objectstack#28575 — on a base object the field rail is writable (into the + // pair's extension) for a field, never for a group; a base field opens in + // the inspector's display-property mode. + const fieldRailReadOnly = readOnly && !(extWritable && fieldSel?.kind === 'field'); + const selectedBaseField = + extWritable && fieldSel?.kind === 'field' && baseOwnedFields !== null && baseOwnedFields.has(String(fieldSel.id)); + const addFieldWalledId = React.useId(); // objectui#12725 — the field rail is up exactly when the render below draws // it; that is when the pillar holds the slot's properties half. A selection @@ -8437,6 +8663,26 @@ export function DataPillar({ ); + // objectstack#28575 — on a base object the Form toolbar's Add field sits + // beside the Layout / Preview control: the designer, read-only on a base + // object, draws none, and the field goes into the pair's extension. + const formToolbarLeading = + extendsBase && canAddFields ? ( +
+ {formModeControl} + + + +
+ ) : ( + formModeControl + ); // The selected object's own icon (from its metadata) — prefer the loaded // draft body, fall back to the rail header. getIcon degrades to Database. @@ -8506,6 +8752,7 @@ export function DataPillar({ return (
{objConflictDialog} + {extConflictDialog}
{isMobile && railOpen && (
{t('engine.studio.autoSaving', locale)} - ) : savedAt && !dirty ? ( + ) : savedAt && !dirty && !extDirty ? ( {tFormat('engine.studio.data.lastSaved', locale, { time: savedAt.toLocaleTimeString(displayLocale, { hour: '2-digit', minute: '2-digit' }), @@ -8634,6 +8881,29 @@ export function DataPillar({ action left to put in one. */} {/* objectui#12453 — on the Form tab it carries the layout's read-only sentence the Layout control no longer does. */} + {/* objectstack#28575 — the ensure door refuses this caller: Add + field draws disabled, in the console's own sentence. */} + {extendsBase && extWalled && objLoaded && !objIsExternal && (viewMode === 'grid' || viewMode === 'form') && ( + + + + {t('engine.studio.customize.walled', locale)} + + + )} {readOnly && ( gridAddFieldButton.current} + extensionField={extendsBase} >