WIP: BUGFIX: Show if selectbox options mismatch with current value

[mhsdesign]

solves: #3520

What I did

For the first and second case (mentioned in #3520) i could imagine adding a warning icon, a proper label and additionally allow to reset the value like:

And for the multi select box it could look like:

Bildschirmaufnahme.2023-06-12.um.23.23.53.mov

For a (slow) datasource it looks like:

Bildschirmaufnahme.2023-07-10.um.15.04.19.mov

multiple: true

Bildschirmaufnahme.2023-07-11.um.09.35.15.mov

How I did it

How to verify it

TODO:

• translations Nope: to low level and this is just a bug fix. Wed need to refactor a lot. WIP: BUGFIX: Show if selectbox options mismatch with current value #3526 (comment)
• backport to 7.3
• discuss icon choice
• discuss if my "simple" approach is enough or if the selectbox should highlight it differently -> yes stay simple for this bugfix
• color icon and string red or orange Nope: this is just a bug fix. Wed need to refactor a lot. WIP: BUGFIX: Show if selectbox options mismatch with current value #3526 (comment)
• move this logic out of selectbox into usage

[crydotsnake]

Icon choice is okay IMO.

[tschoeki]

I'd like to see a bit more warning color in the first example instead of only using the attention icon. Maybe the whole string including the icon could be red or orange. Otherwise, nice fix :)

[crydotsnake]

If you want, i can help you implementing the translations @mhsdesign

But maybe it would be better too backport this PR too 7.3 first.

[mhsdesign]

yes @crydotsnake id love your help ;) feel free to go ahead ^^

[crydotsnake]

yes @crydotsnake id love your help ;) feel free to go ahead ^^

Will try too take a Look at it today. But the backporting part to 7.3 would be better in your hands i believe ;) Wouldnt it be better to do this first?

[crydotsnake]

Also: a merge conflict should come up with #3485 because of the translations. But this should be easy too fix.

[mhsdesign]

The failing unit test is actually right.

In case youre using a datasource, it will first show for a millisecond or sth that the value is invalid, until the datasource is resolved. This is not ideal user experience in cases where this "flashing" might be actually visible -> for example if the datasource is complex or connection is slow.

neos-ui/packages/neos-ui-editors/src/Editors/SelectBox/index.spec.js

Line 220 in 033b086

expect(multiselectLabels(component)).toEqual([]);

edit: tested it, we instead already show a loading spinner, so this is not a real problem.

edit2: no with multiple: true this is indeed a problem:

Bildschirmaufnahme.2023-07-11.um.09.27.47.mov

fixed it:

Bildschirmaufnahme.2023-07-11.um.09.34.13.mov

[mhsdesign]

while i agree it would be nice to have a more explicit color and translations, i dont think its worth the additional complexity under which the SelectBox and MultiSelectBox would have to suffer.

We currently have no concept at all about validating that the editor matches the value and the type, and it might be the wrong place to start with the most complex editor: the select box.

Other editors might face similar problems but a changed datasource might be the most realistic (it happened in a client project)

So for this mini bugfix patch i would either:

A: keep it as is
B: keep it visually as is, but show an console.warning
C: use the proposed solution to show the label as invalid: "foo"

in a longer run we need a concept for every editor, and i could imagine solving it nicely via the validation api.

[Sebobo]

Is this now still "WIP" or not?

[crydotsnake]

I assume this is ready because of:

Visually its still the same as before. Wasn't the idea that the selector is outlined in orange afterwards? Or have I misunderstood something?

[mhsdesign]

Is this now still "WIP" or not?

im still not sure if this is the right approach. @grebaldi and me have prototyped a little thing to allow any editor to report an implausible value which will prevent the editor from being rendered and will show a "reset value" button with the note that the editor is unable to understand this value.

#3580

3580 might be a more general solution while this approach a bit more welcome for editors as they can explicitly chose which values to remove and keep from a multi-select box.

This topic just needs some discussion and experimentation. And is WIP for now ;)

[mhsdesign]

If we go this route the implementation should be in the integration in the select box and probably not directly in it

[mhsdesign]

Replaced by #3745 which features translation and implements this logic outside of the select box, in the integration layer