[8500] Support for Controls Writing Sibling Tags

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

@@ -0,0 +1,72 @@
+/*
+ * 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';
+import { processAdditionalFieldMacro } from '../../FormsEngine/lib/formUtils';
+
+export function AdditionalFieldChip(props: { parentFieldId: string; fieldId: string }) {
+	const { fieldId, parentFieldId } = props;
+	const isDark = useIsDarkModeTheme();
+
+	const additionalFieldId = processAdditionalFieldMacro(parentFieldId, fieldId);
+
+	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">
+					{additionalFieldId}
+				</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} parentFieldId={field.id} />
+			))}
+		</>
 	);
 }
 

ui/app/src/components/ContentTypeManagement/descriptors/controls/dateTime.ts

@@ -116,7 +116,8 @@ export const dateTimeDescriptor: DescriptorContentType = {
 		required: commonFieldPropertiesDescriptors['required']
 	},
 	metadata: {
-		suffixes: ['_dt']
+		suffixes: ['_dt'],
+		additionalFields: ['{id}_tz']
 	}
 };
 

ui/app/src/components/DateTimeTimezonePicker/DateTimeTimezonePicker.tsx

@@ -39,6 +39,7 @@ import type { PartialSxRecord } from '../../models';
 export interface DateTimeTimezonePickerProps {
 	id?: string;
 	value: string | Date | number | null;
+	timezoneValue?: string;
 	disabled?: boolean;
 	disablePast?: boolean;
 	autoUpdatePastDate?: boolean;
@@ -51,6 +52,7 @@ export interface DateTimeTimezonePickerProps {
 	size?: TextFieldProps['size'];
 	onError?: DateTimePickerProps['onError'];
 	onChange?(date: Date): void;
+	onTimezoneChange?(timezone: string): void;
 }
 
 export function DateTimeTimezonePicker(props: DateTimeTimezonePickerProps) {
@@ -59,6 +61,7 @@ export function DateTimeTimezonePicker(props: DateTimeTimezonePickerProps) {
 	const {
 		id,
 		value: dateProp,
+		timezoneValue,
 		disabled = false,
 		disablePast = false,
 		autoUpdatePastDate = false,
@@ -70,12 +73,15 @@ export function DateTimeTimezonePicker(props: DateTimeTimezonePickerProps) {
 		sxs = {},
 		size = 'small',
 		onChange,
+		onTimezoneChange,
 		onError
 	} = props;
 	const hour12 = dateTimeFormatOptions?.hour12;
 	const timeZones = useMemo(() => moment.tz.names(), []);
 	const [selectedDate, setSelectedDate] = useState<Moment | null>(null);
-	const [selectedTimezone, setSelectedTimezone] = useState<string | null>(resolvedLocaleData.timeZone ?? null);
+	const [selectedTimezone, setSelectedTimezone] = useState<string | null>(
+		timezoneValue ? timezoneValue : (resolvedLocaleData.timeZone ?? null)
+	);
 	// The control timezone lags behind selectedTimezone. It is only updated when there's a different
 	// selectedTimezone to the navigator's locale, and the value (date) prop changes.
 	const [controlTimezone, setControlTimezone] = useState<string | null>(resolvedLocaleData.timeZone ?? null);
@@ -100,6 +106,7 @@ export function DateTimeTimezonePicker(props: DateTimeTimezonePickerProps) {
 		event.preventDefault();
 		event.stopPropagation();
 		setSelectedTimezone(value);
+		onTimezoneChange?.(value);
 	}) as AutocompleteProps<string, false, true, boolean>['onChange'];
 	useEffect(() => {
 		if (!dateProp) {