👽 Fix Django 4.2 admin form field markup

The fieldboxes/multiple fields on a row was broken since the Django 4.2 upgrade because the markup changed extensively. The markup now again matches a vanilla Django admin. Fielboxes are slightly different since they gain additional wrappers, and the layout of the errors relative to the input/help text changes.
open-formulieren · Dec 10, 2024 · 796dcc8 · 796dcc8
1 parent 5ca2b7d
commit 796dcc8
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 68 deletions.
diff --git a/...in/form_design/registrations/objectsapi/AddressNlObjectsApiVariableConfigurationEditor.js b/...in/form_design/registrations/objectsapi/AddressNlObjectsApiVariableConfigurationEditor.js
@@ -135,25 +135,24 @@ export const AddressNlEditor = ({
   return (
     <>
       <FormRow>
-        <Field name="specificTargetPaths" disabled={!!mappedVariable.targetPath}>
-          <Checkbox
-            name="specificTargetPathsCheckbox"
-            label={
-              <FormattedMessage
-                defaultMessage="Map specific subfields"
-                description="'Map specific subfields' checkbox label"
-              />
-            }
-            helpText={
-              <FormattedMessage
-                description="'Map specific subfields' checkbox help text"
-                defaultMessage="Whether to map the specific subfield of addressNl component"
-              />
-            }
-            checked={specificTargetPaths}
-            onChange={onSpecificTargetPathsChange}
-          />
-        </Field>
+        <Checkbox
+          name="specificTargetPathsCheckbox"
+          label={
+            <FormattedMessage
+              defaultMessage="Map specific subfields"
+              description="'Map specific subfields' checkbox label"
+            />
+          }
+          helpText={
+            <FormattedMessage
+              description="'Map specific subfields' checkbox help text"
+              defaultMessage="Whether to map the specific subfield of addressNl component"
+            />
+          }
+          checked={specificTargetPaths}
+          onChange={onSpecificTargetPathsChange}
+          disabled={!!mappedVariable.targetPath}
+        />
       </FormRow>
       <FormRow>
         <Field

diff --git a/...penforms/js/components/admin/form_design/registrations/objectsapi/fields/DocumentTypes.js b/...penforms/js/components/admin/form_design/registrations/objectsapi/fields/DocumentTypes.js
@@ -88,7 +88,7 @@ const DocumentType = ({name, label, loading, options, isDisabled, helpText}) =>
 
   return (
     <FormRow>
-      <Field name={name} label={label} helpText={helpText} noManageChildProps>
+      <Field name={name} label={label} helpText={helpText} disabled={isDisabled} noManageChildProps>
         <>
           <ReactSelect
             name={name}

diff --git a/src/openforms/js/components/admin/forms/Field.js b/src/openforms/js/components/admin/forms/Field.js
@@ -77,40 +77,48 @@ const Field = ({
     modifiedChildren = React.cloneElement(children, childProps);
   }
   const [hasErrors, formattedErrors] = normalizeErrors(errors, intl);
-  const className = classNames({
+
+  const fieldClassName = classNames('flex-container', {
     fieldBox: fieldBox,
     errors: hasErrors,
-    'field--disabled': disabled,
   });
+  const wrapperClassName = classNames({'field--disabled': disabled});
+
+  const fieldInputMarkup = (
+    <div className={fieldClassName}>
+      {label && (
+        <label className={required ? 'required' : ''} htmlFor={htmlFor}>
+          {label}
+        </label>
+      )}
+      {modifiedChildren}
+    </div>
+  );
+
+  const errorsMarkup = hasErrors && (
+    <ErrorList classNamePrefix={errorClassPrefix} classNameModifier={errorClassModifier}>
+      {formattedErrors}
+    </ErrorList>
+  );
+
+  const helpMarkup = helpText && (
+    <div className="help" id={`id_${name}_helptext`}>
+      <div>{helpText}</div>
+    </div>
+  );
 
-  return (
+  return fieldBox ? (
+    <div className={wrapperClassName}>
+      {errorsMarkup}
+      {fieldInputMarkup}
+      {helpMarkup}
+    </div>
+  ) : (
     <>
-      {!fieldBox && hasErrors ? (
-        <ErrorList classNamePrefix={errorClassPrefix} classNameModifier={errorClassModifier}>
-          {formattedErrors}
-        </ErrorList>
-      ) : null}
-      <div className={className}>
-        {fieldBox && hasErrors ? (
-          <ErrorList classNamePrefix={errorClassPrefix} classNameModifier={errorClassModifier}>
-            {formattedErrors}
-          </ErrorList>
-        ) : null}
-
-        <div className="flex-container">
-          {label && (
-            <label className={required ? 'required' : ''} htmlFor={htmlFor}>
-              {label}
-            </label>
-          )}
-          {modifiedChildren}
-        </div>
-
-        {helpText ? (
-          <div className="help" id={`id_${name}_helptext`}>
-            <div>{helpText}</div>
-          </div>
-        ) : null}
+      {errorsMarkup}
+      <div className={wrapperClassName}>
+        {fieldInputMarkup}
+        {helpMarkup}
       </div>
     </>
   );

diff --git a/src/openforms/js/components/admin/forms/FormRow.js b/src/openforms/js/components/admin/forms/FormRow.js
@@ -10,10 +10,13 @@ const FormRow = ({fields = [], children}) => {
   let hasErrors = false;
   const validationErrors = useContext(ValidationErrorContext);
 
+  let hasAnyFieldBox = false;
   // process (validation) errors here
   const processedChildren = React.Children.map(children, child => {
     // check if it *looks* like a field
-    let {name, errors} = child.props;
+    let {name, errors, fieldBox = false} = child.props;
+    if (fieldBox) hasAnyFieldBox = true;
+
     if (!name) return child;
 
     const childErrors = validationErrors
@@ -45,7 +48,12 @@ const FormRow = ({fields = [], children}) => {
     {errors: processedChildren.length === 1 && hasErrors},
     ...fieldClasses
   );
-  return <div className={className}>{processedChildren}</div>;
+  const inner = hasAnyFieldBox ? (
+    <div className="flex-container form-multiline">{processedChildren}</div>
+  ) : (
+    processedChildren
+  );
+  return <div className={className}>{inner}</div>;
 };
 
 FormRow.propTypes = {

diff --git a/src/openforms/js/components/admin/forms/FormRow.stories.js b/src/openforms/js/components/admin/forms/FormRow.stories.js
@@ -1,20 +1,18 @@
+import {AdminChangeFormDecorator} from 'components/admin/form_design/story-decorators';
+
 import Field from './Field';
-import Fieldset from './Fieldset';
 import FormRow from './FormRow';
 import {TextInput} from './Inputs';
 
-const FormDecorator = Story => (
-  <form>
-    <Fieldset>
-      <Story />
-    </Fieldset>
-  </form>
-);
-
 export default {
   title: 'Admin/Django/FormRow',
   component: FormRow,
-  decorators: [FormDecorator],
+  decorators: [AdminChangeFormDecorator],
+  parameters: {
+    adminChangeForm: {
+      wrapFieldset: true,
+    },
+  },
 };
 
 export const SingleField = {

diff --git a/src/openforms/js/components/admin/forms/Inputs.js b/src/openforms/js/components/admin/forms/Inputs.js
@@ -102,12 +102,8 @@ const Checkbox = ({name, label, helpText, noVCheckbox = false, ...extraProps}) =
   name = prefix ? `${prefix}-${name}` : name;
   const idFor = disabled ? undefined : `id_${name}`;
   return (
-    <>
-      <div
-        className={classNames('flex-container', 'checkbox-row', {
-          'checkbox-row--disabled': disabled,
-        })}
-      >
+    <div className={classNames({'field--disabled': disabled})}>
+      <div className="flex-container checkbox-row">
         <input type="checkbox" name={name} id={idFor} {...extraProps} />{' '}
         <label className={classNames('inline', {vCheckboxLabel: !noVCheckbox})} htmlFor={idFor}>
           {label}
@@ -118,7 +114,7 @@ const Checkbox = ({name, label, helpText, noVCheckbox = false, ...extraProps}) =
           <div>{helpText}</div>
         </div>
       )}
-    </>
+    </div>
   );
 };