Published on

Release: React 18, better date pickers, form enhancements

Authors
  • Name
    Dave Coates

This release contains changes up until release/2022-08-09.

To upgrade any existing projects it's recommended to pull in the relevant commits from upstream.

git remote add upstream git@gitlab.internal.alliancesoftware.com.au:alliance/template-django.git
git cherry-pick XXX1 XXX2

In cases where you are significantly behind it may be easier to pull the whole app (eg. common_audit) in but you'll need to review the relevant branch.

In this release

Honing the craft: closing the loop

  • Using verbose_name for fields in codegen templates
  • Preference for pk or id: libraries need to use pk but otherwise no preference
  • Stylelint: open to the idea, investigation pending.
  • Developer experience: reverting commit 708d73c9 improves things in many cases but not all. This is now done in the template project itself.
  • Accessibility standards: a page will be added to Alliance Platform docs with some minimum guidelines
  • Email standards: we have base template but will review that and add some basic guidelines to documentation. Investigation pending regarding services to make testing easier.

React 18

This is a fairly straightforward upgrade. The main change is how the root is rendered - see this commit for the changes required.

Presto and Antd should also be upgraded.

Better DatePicker integration

The default DatePicker and RangePicker used with Antd and Presto has been improved with:

  • Handles multiple formats better. You can change the preference in the project but supports dd/mm/yy by default to match a lot of Australian customers expectations. Falls back to other common patterns.
  • Handles initial values that come through as a string or Date object transparently. Everything is converted to a Dayjs object so you don't have to manually do this on each form now.
  • Test cases added for both DatePicker and RangePicker

See commits in this merge request.

Form enhancements

The provided base form (XenopusFrogAppForm) has been enhanced with the following:

  • A default parse has been provided that retains empty values. The default behaviour in final-form is to convert them to undefined which causes problems with DRF partial updates in that you can't clear a value. See this issue for details.

  • FormSection has been added to allow easy nesting of values. For example this form:

    <Form>
  <Section fieldNamePrefix="level1">
    <Item label="club" htmlFor="club" showErrorsFor={['club']}>
      <Field name="club" id="club" component={CharWidget} />
    </Item>
    <Section fieldNamePrefix="level2">
      <Item label="address" htmlFor="address" showErrorsFor={['address']}>
        <Field name="address" id="address" component={CharWidget} />
      </Item>
    </Section>
  </Section>
</Form>

    Would produce a submission data of:

    {
  "level1": {
    "club": "My Club",
    "level2": {
      "address": "Level 1 Main Street"
    }
  }
}

  • Form now accepts a readOnly prop to disable all inputs within the form.

  • FormButton accepts a reset option; either true to reset to initial values or an object to reset the form values to

  • Added subscribeForm prop to subscribe to form changes. This is useful if you need access to form state outside of the form itself.

  • Added formApiRef prop which when specified will be set to the FormApi object from final-form.

  • Test cases added

Other changes

  • 5e749d75 AsyncFileField max_length changed to 500
  • a6192f7f Resolve LHCI failures when multiple pipelines running simultaneously
  • e2fbf681 display_value handles M2M fields (previously just rendered None)
  • d6c6056d Warn when missing migrations on push
  • 4b21e016 Revert commit that caused slow frontend re-builds in dev
  • 3bdbe0be Codegen templates use verbose_name at runtime not just codegen time
  • 489814b4 Disable silk when running tests via manage.py
View on GitHub