Implement "Add to collection" on the component sidebar

[rpenido]

As a library author, I want to associate the selected component with one of more collections:

As a library author, I want to remove a component from a collection.

[pomegranited]

@rpenido We need to be able to remove a component from a collection too.. Could you update this ticket to cover that?

I don't see a screen on Figma for this, but we can borrow the way Tags do it with the little "x" button:

[bradenmacdonald]

@pomegranited @rpenido Instead of that, please add a "Remove from collection" to the three dot menu for components in a collection context. And keep this widget as only an "Add" widget. CC @jmakowski1123 @sdaitzman

I've updated this ticket to include that three-dot menu change too.

[bradenmacdonald]

@jmakowski1123 @sdaitzman I put a mockup of the "Remove from [Collection Name]" three-dot menu above. Please review and let me know if you have changes.

[jmakowski1123]

I prefer the 3-dot approach. Defer to @sdaitzman for final call.

[pomegranited]

@sdaitzman CC @jmakowski1123 @bradenmacdonald @rpenido a component can live in multiple collections.. how would that work with the 3-dot menu?

[bradenmacdonald]

@pomegranited You only see that menu if you're currently "in" a collection. And then it removes it from whichever collection you're in. If you're just using the general library home page / search, you can't remove components from collections with the three dot menu.

e.g. from this collection you can remove the items from "Studio Advanced" regardless of what other collections they're in. From this page you can't remove items from any collection.

[navinkarkera]

@bradenmacdonald @pomegranited Should we display already selected collections as checked in the collections section in component sidebar? This way we can also remove or add i.e. update the collections for a component from any page.