Funding Request: Improve Editing UX for Neos 9.1

[Marc (Marc Henry Schultz)]

Hey you heard what Sebastian did so far now to my state of things console.log(marcHenry$.current):

I worked 6.5 hours on this budget in August and 64 hours in September

Overall Designs

The designs we tried out can be found online now in figma (though some information is still lost from the original local drafts…)

just to show one design: The floating “plus” quick Node insert (which Sebastian already implemented):

The New Link Editor

Integration and overhaul of the Sitegeist.Archaeopteryx package
Testable / Reviewable PR

Challenges for integrating the Plugin into the Neos.Ui

A good adaption of this plugin was not trivial as outlined in Our Neos UI Editing UX overhaul (9.1):

@Marc

It’s a lot of work to similize the code from Archaeopteryx to Neos Ui to not make it foreign matter. This step is the right choice so we contribute new patterns back to the Neos Ui and eventually show how to replace the NodeTree with server Queries.
The client code can be reduced from 3 of the original 7 js-packages by tying the Neos Ui and the new LinkEditor well together. This opens new ways how we write components as functional ones without using @neos and @connect as decorator.
In other regards the Archaeopteryx uses new patterns and new dependencies which are from today’s perspective questionable and don’t fit well together with the Neos Ui. The additional dependencies like rx-js, react-final-form, styled-components and react-error-boundary must be replaced in favour of using and extending our code or using native react or observable patterns.

All styled components have now been adjusted to use CSS-Modules. For state handling the full blown state managements library rx-js was replaced by a minimal implementation of createChannel() and react-final-form and final-form were removed in favour of plain observables and a new observable utility pickState().

All other new dev dependencies (typescript helpers) and runtime dependencies (react error helper) were removed and replaced by alternative patterns.

This leaves us with a tidy change that now “only” spans 4 js-packages.

Ui & Ux Differences to the Archaeopteryx

Additionally to its code we found that a the Archaeopteryx must be improved regarding its Ui and Ux:

• The link options should be hidden by default and behave equal for every kind of link
• The link preview should be shown above the tabs
• The phone number tab should not separate country calling code as select box from the phone number and only provide a single input
• the mail to tab should use soft input validation instead of rejecting invalid mails
• the web tab should allow a single anchor as relative link
• the web tab should not require the editor to enter protocol path and anchor separately but only contain a single field
  • this single input field should promt to format links as https in case a domain is provided like in the old link editor
• the asset tab should allow anchor links as this might be used in combination with PDFs

Some of the Ui and Ux will probably still change - for example in Dresden we agreed to introduce a vertical navigation and also the behaviour of the link options were heavy under discussion.

Automated Testing

Additionally to the Behat behaviour test for the new endpoints that handle the Node-Tree display, a fair share of automated test cover the Link editor now via browser (testcafe).

Removing technical debt (my voluntary work *g)

With the introduction of the new Link Editor we want to find new patterns to access state and dependencies. Our current React class-components with their high-order-functions / decorators @neos and @connect are not the promoted future of the holy React gods. The Archaeopteryx already used functional-components with custom react hooks. But to integrate the Link Editor we decided to go into the direction of global functions with functional-components. Global functions will behave like our new translate() function from !!!FEATURE: Reform i18n mechanism

• TASK: Introduce global getConfiguration() and cleanup configuration provider
• TASK: Introduce api to use global-state for global registry

To access redux state we can now use the regular hook to make components reactive:

• TASK: Introduce aliased useSelector hook for Neos global State

And while not particular fun, the new Link Editors PHP Behat and Unit tests warranted for a general introduction of Behat on the 9.0 branch - i did this in combination with replacing CircleCi with Github in all parts to have a streamlined CI like in Neos and Flow.

• TASK: use GitHub ci and run behaviour tests and TASK: Fix-up #4008 use GitHub ci

You want to read more?

The post Our Neos UI Editing UX overhaul (9.1) further summarises our intentions as to why we overhaul the node creation and the link editor as well as the inline toolbar.

Feel free to look into our #guild-ux slack channel to be notified of our latest progress