[8500] Support for Controls Writing Sibling Tags

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

@@ -0,0 +1,69 @@
+/*
+ * 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={
+							<FormattedMessage defaultMessage="An 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 key={additionalFieldId} fieldId={additionalFieldId} />
+			))}
+		</>
 	);
 }
 

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

@@ -86,6 +86,7 @@ import {
 	displayFormBeingSavedSnack,
 	fetchUpdateRequirements,
 	generateDefaultChangesComment,
+	getAdditionalFieldsIdsFromDescriptor,
 	getCurrentChildFormStateSummary,
 	getScrollContainer,
 	getTargetHeight,
@@ -119,6 +120,8 @@ 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';
+import controlDescriptors from '../ContentTypeManagement/descriptors/controls';
 
 export interface FormSavePromiseResult {
 	close: boolean;
@@ -247,6 +250,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,23 +341,46 @@ 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 =
 				repeat.values ??
-				createParsedValuesObject(fieldsToRender, {}, effectRefs.current.contentTypesById, atomValueCreator);
+				createParsedValuesObject(
+					fieldsToRender,
+					{},
+					effectRefs.current.contentTypesById,
+					atomValueCreator,
+					customControls
+				);
 
+			const descriptors = { ...customControls, ...controlDescriptors };
+			let additionalFieldsIds = [];
 			// If repeat.values was provided, `createCleanValuesObject` didn't run; hence, atomValueCreator needs to be run manually.
-			repeat.values && Object.keys(values).forEach((fieldId) => atomValueCreator(fieldId, values[fieldId]));
+			if (repeat.values) {
+				// First gather all additional fields ids from the provided values
+				fieldsToRender.forEach((field) => {
+					const type = field.type;
+					additionalFieldsIds = [
+						...additionalFieldsIds,
+						...getAdditionalFieldsIdsFromDescriptor(field.id, descriptors[type])
+					];
+				});
+				// Run atomValueCreator for each field considering the additional fields
+				Object.keys(values).forEach((fieldId) => {
+					const isAdditional = additionalFieldsIds.includes(fieldId);
+					atomValueCreator(fieldId, values[fieldId], isAdditional);
+				});
+			}
 
 			const xmlDoc = fromString(parentStackData.itemMeta.contentXml);
 			const fieldId = repeat.fieldId;
@@ -392,7 +419,8 @@ function FormBootstrap(props: FormsEngineProps) {
 					update,
 					parentStackData,
 					stableFormContextRef,
-					parentPathInSite
+					parentPathInSite,
+					customControls
 				});
 				initializeState(requirements.atoms, requirements.values, requirements.itemMeta);
 			};
@@ -424,9 +452,24 @@ 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
+					);
+				},
+				customControls
+			);
 
 			initializeState(atoms, values, {
 				id: contentObject[XmlKeys.modelId] as string,
@@ -481,17 +524,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, {