Fixes #39505 - Update OrderableSelect to PF5#11018
Open
tlabaj wants to merge 10 commits into
Open
Conversation
tlabaj
changed the title
tlabaj
marked this pull request as ready for review
July 8, 2026 12:50
Lukshio
requested changes
Jul 13, 2026
Lukshio
left a comment
Lukshio
left a comment
Contributor
There was a problem hiding this comment.
Hi, I went thru the PR and have some notes. Also we have something similar in our plugin, that leads me to the idea of creating reusable component. So could you please create new component from this PR?
Check also this PR so you can better design the new component. theforeman/foreman_ansible#796
Please also take a look at our PF guide.
Contributor
There was a problem hiding this comment.
Do not include locale changes, they are updated in a bulk in a separate PR
Move Draggable inside DualListOptionItem so PF5 receives a single list item element, and guard option normalization for form field usage. Co-authored-by: Cursor <cursoragent@cursor.com>
foreman_ansible and katello still import the orderable HOC from foremanReact; keep helpers exported while the form input uses PF5. Co-authored-by: Cursor <cursoragent@cursor.com>
Lukshio
requested changes
Jul 16, 2026
Contributor
There was a problem hiding this comment.
Please add test for reordering and onDrop handling
| deprecate( | ||
| 'forms/OrderableSelect/helpers', | ||
| 'OrderableDualListSelector from foremanReact/components/common/OrderableDualListSelector/OrderableDualListSelector', | ||
| '3.21' |
Contributor
There was a problem hiding this comment.
Suggested change
| '3.21' | |
| '5.1' |
Comment on lines
+20
to
+29
| const newRemoveFrom = removeFrom.filter( | ||
| option => !selectedValues.includes(String(option.value)) | ||
| ); | ||
| const moved = selectedValues | ||
| .map(value => | ||
| removeFrom.find(option => String(option.value) === String(value)) | ||
| ) | ||
| .filter(Boolean); | ||
|
|
||
| return [newRemoveFrom, appendUniqueOptions(addTo, moved)]; |
Contributor
There was a problem hiding this comment.
Converting array to set and then using .has instead of .includes will reduce time complexity
| }; | ||
|
|
||
| const isItemSelected = stateName => value => | ||
| selectState[stateName].includes(String(value)); |
Contributor
There was a problem hiding this comment.
Creating helper Set for available and selected and then use .has instead of .include will also reduce time complexity.
Comment on lines
+32
to
+38
| const listOptionType = PropTypes.oneOfType([ | ||
| PropTypes.string, | ||
| PropTypes.shape({ | ||
| label: PropTypes.string.isRequired, | ||
| value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, | ||
| }), | ||
| ]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #39505 - Update OrderableSelect to PF5
Summary
Replaces the legacy PF3
OrderableSelect(typeahead + react-dnd tokens) with a PF5 composable dual list for ordered multi-value form fields.The only current consumer is VMware VM Boot order (
orderable_select_fon the new VM form). The form contract is unchanged: multiple hidden inputs with the samename, values submitted in boot order.Intentional UX change (PF3 → PF5)
DragDropThis is an intentional structural change, not a 1:1 PF component swap. A dual list matches existing Foreman/Satellite patterns and was preferred over keeping the typeahead token UI. User-visible outcome is the same: users can select boot devices and control their order.
Implementation
OrderableDualListSelector— reusable PF5 dual list incommon/(controlled API, drag-and-drop on chosen pane, tooltips, dedup on move). Intended for reuse by plugins (e.g. foreman_ansible).OrderableDualList— thin form wrapper (initial state, hidden inputs,onChange).orderable_select_fcontinues to registerorderableSelectinInputFactory; no parallel helper added.OrderableSelect/helpers.jskept and deprecated for plugin compatibility (orderableHOC still used by foreman_ansible/katello until they migrate).