Field controls: Show field label as 'DisplayName (Name)' in all edit and browse UIs for consistency and clarity

Author: VargaJoe

apps/sensenet/src/components/field-controls/path.tsx

@@ -27,7 +27,7 @@ export const Path: React.FC<ReactClientFieldSetting<ShortTextFieldSetting>> = (p
   return (
     <>
       <InputLabel shrink htmlFor={props.settings.Name} required={props.settings.Compulsory}>
-        {props.settings.DisplayName}
+        {`${props.settings.DisplayName} (${props.settings.Name})`}
       </InputLabel>
       <Input
         className={classes.input}

apps/sensenet/src/components/field-controls/webhook-trigger.tsx

@@ -325,7 +325,7 @@ export const WebhookTrigger: React.FC<ReactClientFieldSetting<LongTextFieldSetti
               autoComplete="off"
               name={props.settings.Name}
               id={props.settings.Name}
-              label={props.settings.DisplayName}
+              label={`${props.settings.DisplayName} (${props.settings.Name})`}
               placeholder={props.settings.DisplayName}
               value={value?.Path}
               fullWidth={true}
@@ -527,7 +527,7 @@ export const WebhookTrigger: React.FC<ReactClientFieldSetting<LongTextFieldSetti
       return (
         <>
           <Typography variant="caption" gutterBottom={true}>
-            {props.settings.DisplayName}
+            {`${props.settings.DisplayName} (${props.settings.Name})`}
           </Typography>
           <Typography gutterBottom={true}>{value?.Path}</Typography>
           {value?.TriggersForAllEvents ? (

packages/sn-controls-react/src/fieldcontrols/allowed-child-types.tsx

@@ -306,7 +306,7 @@ export const AllowedChildTypes: React.FC<ReactClientFieldSetting & { classes?: A
       return (
         <>
           <Typography variant="caption" gutterBottom={true}>
-            {props.settings.DisplayName}
+            {`${props.settings.DisplayName} (${props.settings.Name})`}
           </Typography>
           {selected.length ? (
             <List dense={true}>

packages/sn-controls-react/src/fieldcontrols/auto-complete.tsx

@@ -54,7 +54,7 @@ export const AutoComplete: React.FC<ReactClientFieldSetting<ReferenceFieldSettin
       return (
         <div>
           <Typography variant="caption" gutterBottom={true}>
-            {props.settings.DisplayName}
+            {`${props.settings.DisplayName} (${props.settings.Name})`}
           </Typography>
           <Typography variant="body1" gutterBottom={true}>
             {props.fieldValue ? (props.fieldValue as any)[0].DisplayName : localization.noValue}

packages/sn-controls-react/src/fieldcontrols/avatar/avatar.tsx

@@ -54,7 +54,7 @@ export const Avatar: FunctionComponent<AvatarProps> = (props) => {
       required={props.settings.Compulsory}>
       {!props.hideLabel && (
         <InputLabel shrink={true} htmlFor={props.settings.Name} className={classes.label}>
-          {props.settings.DisplayName}
+          {`${props.settings.DisplayName} (${props.settings.Name})`}
         </InputLabel>
       )}
 
@@ -87,7 +87,7 @@ export const Avatar: FunctionComponent<AvatarProps> = (props) => {
         shrink={true}
         htmlFor={props.settings.Name}
         style={{ paddingTop: '9px', transformOrigin: 'top center' }}>
-        {props.settings.DisplayName}
+        {`${props.settings.DisplayName} (${props.settings.Name})`}
       </InputLabel>
     </div>
   )

packages/sn-controls-react/src/fieldcontrols/checkbox-group.tsx

@@ -122,7 +122,7 @@ export const CheckboxGroup: React.FC<ReactClientFieldSetting<ChoiceFieldSetting>
       return (
         <>
           <Typography variant="caption" gutterBottom={true}>
-            {props.settings.DisplayName}
+            {`${props.settings.DisplayName} (${props.settings.Name})`}
           </Typography>
           <FormGroup>
             {props.fieldValue ? (

packages/sn-controls-react/src/fieldcontrols/checkbox.tsx

@@ -35,7 +35,7 @@ export const Checkbox: React.FC<ReactClientFieldSetting<FieldSetting>> = (props)
           <FormControlLabel
             name={props.settings.Name}
             control={<MuiCheckbox checked={value} onChange={handleChange} />}
-            label={props.settings.DisplayName}
+            label={`${props.settings.DisplayName} (${props.settings.Name})`}
           />
           {!props.hideDescription && <FormHelperText>{props.settings.Description}</FormHelperText>}
         </FormControl>

packages/sn-controls-react/src/fieldcontrols/color-picker.tsx

@@ -49,7 +49,7 @@ export const ColorPicker: React.FC<ReactClientFieldSetting<ColorFieldSetting>> =
           <TextField
             variant="outlined"
             style={{ maxWidth: '420px', width: '100%' }}
-            label={props.settings.DisplayName}
+            label={`${props.settings.DisplayName} (${props.settings.Name})`}
             type="text"
             name={props.settings.Name}
             id={props.settings.Name}
@@ -86,7 +86,7 @@ export const ColorPicker: React.FC<ReactClientFieldSetting<ColorFieldSetting>> =
       return (
         <>
           <Typography variant="caption" gutterBottom={true}>
-            {props.settings.DisplayName}
+            {`${props.settings.DisplayName} (${props.settings.Name})`}
           </Typography>
           {props.fieldValue ? (
             <div style={{ display: 'flex' }}>

packages/sn-controls-react/src/fieldcontrols/date-picker.tsx

@@ -83,7 +83,7 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
       return (
         <div style={{ display: 'flex', flexDirection: 'column' }}>
           <label htmlFor={props.settings.Name} style={{ fontSize: '15px' }}>
-            {props.settings.DisplayName}
+            {`${props.settings.DisplayName} (${props.settings.Name})`}
           </label>
           <div style={{ maxWidth: '420px' }}>
             <DatePickerLib

packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx

@@ -61,7 +61,7 @@ export const DropDownList: React.FC<ReactClientFieldSetting<ChoiceFieldSetting>>
           required={props.settings.Compulsory}
           disabled={props.settings.ReadOnly}>
           <label htmlFor={props.settings.Name} style={{ fontSize: '15px' }}>
-            {props.settings.DisplayName}
+            {`${props.settings.DisplayName} (${props.settings.Name})`}
           </label>
           <Select
             variant="outlined"
@@ -93,7 +93,7 @@ export const DropDownList: React.FC<ReactClientFieldSetting<ChoiceFieldSetting>>
       return (
         <>
           <Typography variant="caption" gutterBottom={true}>
-            {props.settings.DisplayName}
+            {`${props.settings.DisplayName} (${props.settings.Name})`}
           </Typography>
           <FormGroup>
             {props.fieldValue ? (