Wagtail 4.0 compat

[janbaykara]

This PR addresses incompatibilities between wagtail-localize and Wagtail 4.0rc2, following discussion in #558:

Changes

• Aligns the translation editor header with the new Wagtail admin UI
• Moves the preview button to the header, and plugs in the wagtail-localize preview URL
• Synchronises colours with Wagtail admin's new CSS variables
• Makes migrations compatible via the get_revision_model compat method

Approach

The approach I've taken is to use copy the old React codebase into a static_src subdirectory, and conditionally render it based on WAGTAIL_VERSION < 4.0. This is because styling, CSS variables and the relationship between the React codebase and Django templates have changed between Wagtail versions in a complex way.

Not in scope

• In a future PR, it probably makes sense to port the ActionMenu in the footer from React to Django templating too. For now, this seems to work fine, so I've just left it as it is.
• This PR doesn't update the design or styling of the content fields editor itself, beyond updating colours. This could be improved to match Wagtail 4's page editor style, including collapsible fields and so on.

Screenshots

Previous UI:

[janbaykara]

@zerolab I've not fully tested this yet but wanted to put out a first draft. Would appreciate any pointers so we can bring this home.

[janbaykara]

Right now the template header seems to lack some of the right hand icons/actions that normal pages have, unsure how to activate those.

[zerolab]

Hey @janbaykara nice start. My main grip about the approach is that we still support Wagtail 2.15 as an LTS, so the changes then become incompatible with it.

My preferred approach would be to have legacy styles and compontents used for Wagtail < 4.0, then all the new ones.

[janbaykara]

@zerolab perhaps we can run a version check and then load up the right version of the template / component for the wagtail version?

[zerolab]

@janbaykara we take this approach across the codebase, so 👍🏼

[janbaykara]

I think this is ready for review @zerolab @kaedroho

[zerolab]

Hey @janbaykara, thank you so much for this.

I am looking at this now. I see there are lots of whitespace changes in the tsx files (specifically, going from 4 spaces to 2 spaces). Our .editorconfig configuration is set up to use 4 spaces. Can you please tweaks the files accordingly?

[janbaykara]

I am looking at this now. I see there are lots of whitespace changes in the tsx files (specifically, going from 4 spaces to 2 spaces). Our .editorconfig configuration is set up to use 4 spaces. Can you please tweaks the files accordingly?

I'm not 100% but I hope running yarn format will have fixed this.

I've also run pre-commit run --all-files to fix up the python formatting issues.

Have fixed up the other review points.

[janbaykara]

Hm, seems we need to do a WAGTAIL_VERSION check before importing things and messing with the view code too. Makes sense, will action. https://github.com/wagtail/wagtail-localize/runs/8110770886?check_suite_focus=true

[zerolab]

Hey @janbaykara thank you very much for this. I've made the necessary tweaks to get it over the line. See #613 Closing this

[janbaykara]

No worries! Glad you've been able to make progress.