[8500] Support for Controls Writing Sibling Tags

ui/app/src/components/ContentTypeManagement/components/AdditionalFieldChip.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright (C) 2007-2026 Crafter Software Corporation. All Rights Reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as published by
+ * the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import SubdirectoryArrowRightRoundedIcon from '@mui/icons-material/SubdirectoryArrowRightRounded';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import React from 'react';
+import useIsDarkModeTheme from '../../../hooks/useIsDarkModeTheme';
+import { FormattedMessage } from 'react-intl';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import Tooltip from '@mui/material/Tooltip';
+
+export function AdditionalFieldChip(props) {
+	const fieldId = props.fieldId ?? 'test';
+	const isDark = useIsDarkModeTheme();
+
+	return (
+		<Box display="flex" alignItems="center" sx={{ mb: 1 }}>
+			<SubdirectoryArrowRightRoundedIcon sx={{ ml: 3 }} />
+			<Box
+				sx={[
+					{
+						width: '100%',
+						bgcolor: isDark ? 'grey.800' : 'grey.200',
+						borderRadius: 10,
+						overflow: 'hidden',
+						border: '1px solid transparent',
+						px: 1.5,
+						py: 0.5,
+						display: 'flex',
+						justifyContent: 'space-between'
+					}
+				]}
+			>
+				<Typography component="span" variant="body2">
+					{fieldId}
+				</Typography>
+				<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+					<Typography variant="body2" component="span">
+						<FormattedMessage defaultMessage="Additional Field" />
+					</Typography>
+					<Tooltip
+						title="And additional field is a field that this control has permission to edit, beyond its main value. "
+						placement="top"
+					>
+						<InfoOutlinedIcon fontSize="small" />
+					</Tooltip>
+				</Box>
+			</Box>
+		</Box>
+	);
+}
+
+export default AdditionalFieldChip;

ui/app/src/components/ContentTypeManagement/components/FieldChip.tsx

@@ -32,6 +32,7 @@ import controlDescriptors from '../descriptors/controls';
 import dataSourceDescriptors from '../descriptors/dataSources';
 import { applyTranslations } from '../utils';
 import Button from '@mui/material/Button';
+import AdditionalFieldChip from './AdditionalFieldChip';
 
 function composeFieldPath(fieldPath: string, fieldId: string): string {
 	return fieldPath ? `${fieldPath}.${fieldId}` : fieldId;
@@ -77,90 +78,97 @@ export function FieldChip(props: FieldChipProps) {
 		'&:hover': { bgcolor: 'action.selected' }
 	};
 	const { formatMessage } = useIntl();
+	const descriptor = descriptors[field.type];
+	const additionalFields = descriptor?.metadata?.additionalFields;
 	return (
-		<Root
-			disabled={isSelected}
-			sx={[
-				{
-					mb: 1,
-					width: '100%',
-					alignItems: 'start',
-					flexDirection: 'column',
-					bgcolor: isDark ? 'grey.800' : 'grey.200',
-					borderRadius: 10,
-					overflow: 'hidden',
-					borderWidth: '1px',
-					borderStyle: 'solid',
-					borderColor: 'transparent'
-				},
-				isRepeat ? { borderRadius: 2 } : selectorButtonStyles,
-				isSelected && selectorButtonSelectedStyles,
-				error && { borderWidth: '1px', borderStyle: 'solid', borderColor: 'error.main' }
-			]}
-			// @ts-expect-error: Handled. Only when it is a button will it receive the onClick.
-			onClick={isRepeat ? undefined : onClick}
-		>
-			<Box
-				component={Title}
-				// @ts-expect-error: Handled. Only when it is a button will it receive the onClick.
-				onClick={isRepeat ? onClick : undefined}
+		<>
+			<Root
 				disabled={isSelected}
 				sx={[
 					{
-						px: 1.5,
-						py: 0.5,
+						mb: 1,
 						width: '100%',
-						display: 'flex',
-						flexWrap: 'wrap',
-						alignItems: 'center',
-						justifyContent: 'space-between'
+						alignItems: 'start',
+						flexDirection: 'column',
+						bgcolor: isDark ? 'grey.800' : 'grey.200',
+						borderRadius: 10,
+						overflow: 'hidden',
+						borderWidth: '1px',
+						borderStyle: 'solid',
+						borderColor: 'transparent'
 					},
-					isRepeat && selectorButtonStyles,
-					error && { color: 'error.main' }
+					isRepeat ? { borderRadius: 2 } : selectorButtonStyles,
+					isSelected && selectorButtonSelectedStyles,
+					error && { borderWidth: '1px', borderStyle: 'solid', borderColor: 'error.main' }
 				]}
+				// @ts-expect-error: Handled. Only when it is a button will it receive the onClick.
+				onClick={isRepeat ? undefined : onClick}
 			>
-				<Box display="flex" alignItems="center">
-					{(field as NewContentTypeField).NEW ? (
-						<Typography component="strong" sx={{ mr: 0.5, fontWeight: 600 }}>
-							<FormattedMessage defaultMessage={`Draft ({type})`} values={{ type: field.type }} />
-						</Typography>
-					) : (
-						<>
+				<Box
+					component={Title}
+					// @ts-expect-error: Handled. Only when it is a button will it receive the onClick.
+					onClick={isRepeat ? onClick : undefined}
+					disabled={isSelected}
+					sx={[
+						{
+							px: 1.5,
+							py: 0.5,
+							width: '100%',
+							display: 'flex',
+							flexWrap: 'wrap',
+							alignItems: 'center',
+							justifyContent: 'space-between'
+						},
+						isRepeat && selectorButtonStyles,
+						error && { color: 'error.main' }
+					]}
+				>
+					<Box display="flex" alignItems="center">
+						{(field as NewContentTypeField).NEW ? (
 							<Typography component="strong" sx={{ mr: 0.5, fontWeight: 600 }}>
-								{field.name}
+								<FormattedMessage defaultMessage={`Draft ({type})`} values={{ type: field.type }} />
 							</Typography>
-							<Typography component="span" variant="body2">
-								({field.id})
-							</Typography>
-						</>
-					)}
-					{error && <Asterisk fontSize="small" />}
-				</Box>
-				<Typography variant="body2">
-					{descriptors[field.type]
-						? applyTranslations(descriptors[field.type], formatMessage).name
-						: capitalize(field.type).replaceAll('-', ' ')}
-				</Typography>
-			</Box>
-			{isRepeat && (
-				<Box p={1} pt={0}>
-					{Object.entries(field.fields).map(([fieldId, subField]) => (
-						<FieldChip
-							key={fieldId}
-							field={subField}
-							fieldPathsWithErrors={fieldPathsWithErrors}
-							selectedFieldIdPath={selectedFieldIdPath}
-							fieldPath={currentFieldPath}
-							onFieldSelected={onFieldSelected}
-							onInsertField={onInsertField}
-						/>
-					))}
-					<Button onClick={() => onInsertField(currentFieldPath)}>
-						<FormattedMessage defaultMessage="Add Field" />
-					</Button>
+						) : (
+							<>
+								<Typography component="strong" sx={{ mr: 0.5, fontWeight: 600 }}>
+									{field.name}
+								</Typography>
+								<Typography component="span" variant="body2">
+									({field.id})
+								</Typography>
+							</>
+						)}
+						{error && <Asterisk fontSize="small" />}
+					</Box>
+					<Typography variant="body2">
+						{descriptors[field.type]
+							? applyTranslations(descriptors[field.type], formatMessage).name
+							: capitalize(field.type).replaceAll('-', ' ')}
+					</Typography>
 				</Box>
-			)}
-		</Root>
+				{isRepeat && (
+					<Box p={1} pt={0}>
+						{Object.entries(field.fields).map(([fieldId, subField]) => (
+							<FieldChip
+								key={fieldId}
+								field={subField}
+								fieldPathsWithErrors={fieldPathsWithErrors}
+								selectedFieldIdPath={selectedFieldIdPath}
+								fieldPath={currentFieldPath}
+								onFieldSelected={onFieldSelected}
+								onInsertField={onInsertField}
+							/>
+						))}
+						<Button onClick={() => onInsertField(currentFieldPath)}>
+							<FormattedMessage defaultMessage="Add Field" />
+						</Button>
+					</Box>
+				)}
+			</Root>
+			{additionalFields?.map((additionalFieldId) => (
+				<AdditionalFieldChip fieldId={additionalFieldId} />
+			))}
+		</>
 	);
 }
 

ui/app/src/components/FormsEngine/FormsEngine.tsx

@@ -119,6 +119,7 @@ import { displayWithPendingChangesConfirm } from '../../utils/ui';
 import useActiveUser from '../../hooks/useActiveUser';
 import FormBackToTop from './components/FormBackToTop';
 import { createComponentId } from '../../utils/system';
+import { useCustomControlsDescriptorsById } from '../../hooks/useCustomControlsDescriptorsById';
 
 export interface FormSavePromiseResult {
 	close: boolean;
@@ -247,6 +248,7 @@ function FormBootstrap(props: FormsEngineProps) {
 	const username = useActiveUser()?.username;
 	const effectRefs = useUpdateRefs({ contentTypesById, username });
 	const stableFormContextRef = useRef<StableFormContextProps>(formsStackData[stackIndex]);
+	const customControls = useCustomControlsDescriptorsById();
 
 	const contextApi = useMemo<FormsEngineFormApiContextProps>(() => {
 		const getInitialValues = () => stableFormContextRef.current.originalValues;
@@ -337,15 +339,16 @@ function FormBootstrap(props: FormsEngineProps) {
 				expandedStateBySectionId: buildSectionExpandedStateAtoms(contentType.sections),
 				fileName: atom('')
 			});
-			const atomValueCreator: Parameters<typeof createParsedValuesObject>[3] = (fieldId, value) => {
+			const atomValueCreator: Parameters<typeof createParsedValuesObject>[3] = (fieldId, value, isAdditional) => {
 				setFieldAtoms(
 					stableFormContextRef,
 					contentType,
 					contentType.fields[repeat.fieldId].fields,
 					fieldId,
 					atoms,
 					value,
-					siteId
+					siteId,
+					isAdditional
 				);
 			};
 			const values =
@@ -424,9 +427,23 @@ function FormBootstrap(props: FormsEngineProps) {
 				fileName: atom('')
 			});
 			const contentObject = createObjectWithSystemProps(contentType);
-			const values = createParsedValuesObject(contentType.fields, contentObject, contentTypesById, (fieldId, value) => {
-				setFieldAtoms(stableFormContextRef, contentType, contentType.fields, fieldId, atoms, value, siteId);
-			});
+			const values = createParsedValuesObject(
+				contentType.fields,
+				contentObject,
+				contentTypesById,
+				(fieldId, value, isAdditional) => {
+					setFieldAtoms(
+						stableFormContextRef,
+						contentType,
+						contentType.fields,
+						fieldId,
+						atoms,
+						value,
+						siteId,
+						isAdditional
+					);
+				}
+			);
 
 			initializeState(atoms, values, {
 				id: contentObject[XmlKeys.modelId] as string,
@@ -481,17 +498,19 @@ function FormBootstrap(props: FormsEngineProps) {
 						requirements.contentType.fields,
 						requirements.contentObject,
 						effectRefs.current.contentTypesById,
-						(fieldId, value) => {
+						(fieldId, value, isAdditional) => {
 							setFieldAtoms(
 								stableFormContextRef,
 								requirements.contentType,
 								requirements.contentType.fields,
 								fieldId,
 								atoms,
 								value,
-								siteId
+								siteId,
+								isAdditional
 							);
-						}
+						},
+						customControls
 					);
 
 					initializeState(atoms, values, {

ui/app/src/components/FormsEngine/lib/formUtils.tsx

@@ -73,6 +73,7 @@ import { createComponentId } from '../../../utils/system';
 import { showErrorDialog } from '../../../state/actions/dialogs';
 import { ensureSingleSlash } from '../../../utils/string';
 import { nou } from '../../../utils/object';
+import type { DescriptorContentType } from '../../ContentTypeManagement/utils';
 
 /**
  * Returns the scroll container for the form's container.
@@ -487,7 +488,8 @@ export function setFieldAtoms(
 	fieldId: string,
 	atomsTarget: FormsEngineAtoms,
 	value: unknown,
-	siteId?: string
+	siteId?: string,
+	isAdditional?: boolean
 ): void {
 	let field = fieldLookup[fieldId];
 	if (!field) {
@@ -506,6 +508,20 @@ export function setFieldAtoms(
 				id: 'folder-name',
 				name: 'Folder Name'
 			};
+		} else if (isAdditional) {
+			field = {
+				defaultValue: undefined,
+				description: '',
+				fields: undefined,
+				helpText: '',
+				properties: undefined,
+				sortable: false,
+				type: '',
+				validations: undefined,
+				values: undefined,
+				id: fieldId,
+				name: fieldId
+			};
 		} else {
 			!systemFieldsNotInType.includes(fieldId) &&
 				console.warn(`Field ${fieldId} not found in content type "${contentType.name}" (${contentType.id})`);
@@ -915,3 +931,15 @@ export function composePathForType(basePath: string, fileName: string, contentTy
 		return ensureSingleSlash(`${basePath}/${fileName}.xml`);
 	}
 }
+
+export function getAdditionalFieldsIdsFromDescriptor(
+	field: ContentTypeField,
+	descriptor: DescriptorContentType
+): string[] {
+	// console.log('field', field);
+	// console.log(`descriptor for ${field.id}/${field.type}`, descriptor);
+	const additionalFields = descriptor.metadata?.additionalFields ?? [];
+
+	// TODO: are there going to be other placeholders besides {id}?
+	return additionalFields.map((additionalField) => additionalField.replaceAll('{id}', field.id));
+}