feat: custom single option select component [WD-10960]

[mas-who]

Done

• Created a custom single option select component that is searchable and can have its option labels modified.

QA

1. Run the LXD-UI:
   • On the demo server via the link posted by @webteam-app below. This is only available for PRs created by collaborators of the repo. Ask @mas-who or @edlerd for access.
   • With a local copy of this branch, build and run as described in the docs.
2. Perform the following QA steps:
   • Navigate to Permissions -> Groups
   • try modify permissions for a group, make sure the interaction with the permission selector is as expected.

[webteam-app]

Demo

Jenkins

demos.haus

[mas-who]

@edlerd I updated the implementation for PermissionSelector with the new custom selector component. Haven't modified the option labels for the selectors yet since but have added title attributes to them which was previously not possible. I think we should discuss what's a good design for the permission selectors in terms of option labels and maybe do that as a follow up task? As an example, we can do something like what's shown below (this is not part of this PR at the moment):

Lastly, I still need to fix the permission e2e tests, but thought we should have a discussion around about the above topic first since these tests could be affected.

[edlerd]

we can do something like what's shown below (this is not part of this PR at the moment):

Interesting idea, but we should not use a chip as non-interactive element as per the design guidelines. They should be interactive, here we need a component that is informational, not interactive.

[mas-who]

we can do something like what's shown below (this is not part of this PR at the moment):

Interesting idea, but we should not use a chip as non-interactive element as per the design guidelines. They should be interactive, here we need a component that is informational, not interactive.

Aah thanks for the tip! This is currently just a demonstration for what we can do with the new select component 🙂 Not sure if we should update how the option labels are presented as part of this PR though since it might broaden the scope a bit?

[edlerd]

The select works nicely and looks great!

One QA issue:

• when having many options with some being truncated, then searching for options that have short description, the dropdown width decreases for me

Also a couple of other ideas below.

[edlerd]

QA looks mostly good now, found one more issue below.
Several comments for the code.

[edlerd]

Found one more issue on QA, code also seems all right, just one naming issue that confused me.

[edlerd]

QA and code LGTM, one idea to simplify a bit more.