BUGFIX: Select box shows invalid value

[73nici]

replaces the initial solution #3526 with a refactored approach applied from outside the select-box to reduce the logic there and add translation for the label.

Resolves: #3520

What I did

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

And for the multi select box it will look like this, ensuring the sorting will still work

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

and for multiple: true it looks like:

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

Related discussion #3526 (comment)

[mhsdesign]

Old description from Niclas

Currently the selectbox shows the "choose" placeholder, if an invalid option is selected. This is misleading, cause a value is still selected and therefore can be used.

If the current selected value is not a valid option, the placeholder changes to "invalid value" without the value being updated.
To check this, remove a selected value from a select box. After reloading, the placeholder should read "invalid value".

Fixes #3520

New behaviour:

Old behaviour:

Hi Niclas ;)

i adjusted your pr a bit to what we discussed at the sprint i guess... following todos are still todo:

• transform the helper to ts
• add unit tests for it
• console error when used standalone as component to indicate there are missing values -> not needed for now
• update description
• fix index when dragging and dropping
• adjust label wording?

[mhsdesign]

I added some test for processSelectBoxOptions and also run them against the legacy implementation to make sure the behaviour matches. The result ist promising, only the tests for the new features fail (creates missing option). So the behaviour is correct ;)

FAIL  packages/neos-ui-editors/src/Editors/SelectBox/selectBoxHelpers.spec.ts
  processSelectBoxOptions
    ✓ transforms an associative array with labels to list of objects (1 ms)
    ✓ keeps valid shape of list of objects intact
    ✓ overrules the array key with the explicit value
    ✓ uses numeric string array key for list of objects
    ✓ omits entries that are invalid and empty (1 ms)
    ✕ creates missing option for unmatched string value (2 ms)
    ✕ creates missing options for unmatched additional array value (1 ms)
    ✕ creates missing options for unmatched additional multiple array values (1 ms)
    ✓ ignored current value being null or undefined and doesnt create missing option

[mhsdesign]

e2e failure is currently related:

 ✓ Create a text node in a new container element at the correct position

 Create new nodes
 ✖ Check ClientEval for dependencies between properties of NodeTypes in Creation Dialog

   1) AssertionError: expected [ Array(6) ] to deeply equal [ Array(5) ]

      + expected - actual

         {
           label: 'label_9'
           value: 9
         }
      -  {
      -    icon: 'exclamation-triangle'
      -    label: 'Invalid value: ""'
      -    value: ''
      -  }
       ]


      Browser: Firefox 127.0 / Windows 10 (https://app.saucelabs.com/tests/8ce1a59a62ca48fcb7c99bae4d08ac28)

         41 |            {'label': 'even', value: 'even'}
         42 |        ])
         43 |
         44 |    await t
         45 |        .expect(dependingPropertySelectBox.props.value).eql('')
       > 46 |        .expect(dependingPropertySelectBox.props.options).eql([
         47 |            {label: 'label_1', value: 1},
         48 |            {label: 'label_3', value: 3},
         49 |            {label: 'label_5', value: 5},
         50 |            {label: 'label_7', value: 7},
         51 |            {label: 'label_9', value: 9}

         at <anonymous> (/home/circleci/app/Packages/Application/Neos.Neos.Ui/Tests/IntegrationTests/Fixtures/1Dimension/createNewNodes.e2e.js:46:59)
         at asyncGeneratorStep (/home/circleci/app/Packages/Application/Neos.Neos.Ui/Tests/IntegrationTests/Fixtures/1Dimension/createNewNodes.e2e.js:4:38)
         at _next (/home/circleci/app/Packages/Application/Neos.Neos.Ui/Tests/IntegrationTests/Fixtures/1Dimension/createNewNodes.e2e.js:4:38)

[mhsdesign]

I dont understand the test completely, how can there be an empty string in an integer nodetype property???

neos-ui/Tests/IntegrationTests/Fixtures/1Dimension/createNewNodes.e2e.js

Line 45 in 7c9fc84

.expect(dependingPropertySelectBox.props.value).eql('')

neos-ui/Tests/IntegrationTests/SharedNodeTypesPackage/NodeTypes/Content/NodeWithDependingProperties.yaml

Line 31 in 2be77a4

dependingProperty:

i guess empty string means unset??? we should check on that but ill adjust the "create magic select box option" logic to ignore empty string

[Sebobo]

Works on my machine, thx!
Even the createNew thing which is nowhere documented I think.
I also have to add those options to my NodeTypes schema.

[73nici]

Hey @mhsdesign I think fixed the CI :). Only a snapshot update for selectbox was needed.