feat: add SelectWithIcon component

[vickyyyyyyy]

Select component including buttons to add and remove the field.
This can be used as an alternative to the -- remove -- option that currently exists in our dropdowns.

displayIcon
Toggle for displaying the add button

isMulti
Supports both Select and MultiSelect

children
Renders elements between the Select field and the remove button

renderRemove
Toggle for displaying the remove button

onRemove
Function bound to remove button

addIcon
Overrides the default icon for adding

removeIcon
Overrides the default icon for removing

onClickOutside
Function bound to clicks outside of the Select

Work done:

• Added component

• Added test fixtures

• Added lodash to use kebabCase for the option test fixtures

• Added @testing-library/user-event for better event handling and it is also suggested by RTL

• Added @babel/plugin-transform-runtime to fix following error when trying to run async tests:
  

• Bumped react-dom down to match current react version and also, it looks like react-dom version 17+ causes the tests to fail when there are components wrapped within ClickOutsideWrapper

Basic:

Multi:

Remove Option:

Children:

Custom Add Icon:

Custom Remove Icon:

[scottlepp]

Is there an issue this component resolves? This is needed in some plugin?

Probably want someone from ux to review this.

[vickyyyyyyy]

Is there an issue this component resolves? This is needed in some plugin?

Just a suggestion for a better way of adding and removing fields - at the moment, across multiple plugins, we are removing fields by relying on selecting a specific -- remove -- option, which isn't really how the dropdown options should be used (and relies on pushing a specific remove option right to the top of the options array). If we had a remove button instead, this should help with the UX and tidy up the code.

Example of removing via the dropdown options:

Probably want someone from ux to review this.

Sounds good, asked UX for review here: https://raintank-corp.slack.com/archives/G014QJ45DD4/p1607365776010900

[vickyyyyyyy]

closing this - the component has changed considerably in the SNOW plugin from this. If we want to revisit and extract it out, we can open another PR with the updated changes