Add 'No selection' option to GID selector

[carma12]

To replicate the same behavior as in the current WebUI, the 'GID' field located in the 'Add user' modal should have a 'No selection' option. Also, a new GID value can be added and associated to a newly-created user.

Fixes: #236

[pvoborni]

Note: in the review which lead to #236 was mentioned: In user add dialog, I cannot unset GID when I selected some, also the GID field should allow to enter arbitrary integer.

This and #236 is about the first part. But it won't solve the other: "the GID field should allow to enter arbitrary integer" - see the old UI.

[carma12]

Note: in the review which lead to #236 was mentioned: In user add dialog, I cannot unset GID when I selected some, also the GID field should allow to enter arbitrary integer.

This and #236 is about the first part. But it won't solve the other: "the GID field should allow to enter arbitrary integer" - see the old UI.

I think the PF Select component currently doesn't allow any writing functionality, but I can check with them in case there is some tweak/alternative component we can use for that.

If not, I can open a discussion with Brian to find out how to approach this design-wise. I will set the 'WIP' tag on this PR while discussing this topic.

[carma12]

I checked with the PatternFly team and there is a type of Selector that allows type-ahead functionality. So I can replace the existing Select component with this one and modify the description of the PR.

[carma12]

@pvoborni - I have added a new commit to handle the type-ahead functionality in the GID field. Feel free to review it and share your thoughts on it. Thanks!

[pvoborni]

I've provided some simplifying/readability suggestions.

But I'd do one more, I'd say more important. The AddUser modal is "polluted" with a "large" GID logic that makes the AddUser component hard to read. It would be more readable to move out the GID logic to a separate component e.g. called GidSelector which would wrap TypeAheadSelectWithCreate the same way as the dialog does. Thus the dialog could have only:

import GIdSelector from "../form/GIdSelector"

const [gid, setGid] = useState("");

<GidSelector selected={gid} onSelectedChange={setGid} />

[pvoborni]

Is this useful? I see that it is used in AddUser but is there a reason for it?

[carma12]

This is meant to update the selection list options that are retrieved from the AddUser, IIRC. As this bit was included in the Select with Type ahead original code, I decided to include it as well as part of the functionality.

[pvoborni]

The fact that it was in the example code is not a reason to have it here. But in this case it was not even in the example. The example implements a component SelectTypeaheadCreatable that has no externally definable props. I.e. these functions were internal to the component.

The only reason to expose them would be to allow the parent component to work with the new states. E.g. to use them in adding new users. But this imho not needed.

Also with

let gidOptions = getGidOptions(GIDs);

  const onChangeGidOptions = (newList: SelectOptionProps[]) => {
    gidOptions = newList;
  };

it has no effect now.

[carma12]

@pvoborni - The code has been updated based on your feedback. Feel free to keep reviewing.

[pvoborni]

Provided another round of comments.

[carma12]

@pvoborni - As suggested, I removed the onOptionsChange prop from the TypeAheadSelectWithCreate component and adjusted the AddUser one. You were right, it is not needed and works fine this way. Feel free to review it.

[pvoborni]

LGTM