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.

[sdaitzman]

@navinkarkera I don't think we should alway show checkboxes there. In the workflow in Figma, we intended the same "Add to Collections" sidebar widget state (with checkboxes and collection search box) to be reused for a "Manage Collections" state

Before assigning a component to any collections:

After:

After clicking "Manage Collections":

[navinkarkera]

@sdaitzman Thank! Got it.

@bradenmacdonald @pomegranited I have a working implementation (#1373) which works as per @sdaitzman's suggestion i.e., we are able to add or remove collections from a component.

Do we still need to implement the "remove from collection" menu option in component card?

[jmakowski1123]

Yes, the 3-dot menu pathway is a way to complete the action more efficiently, if the sidebar doesn't need to be opened for previews, etc. We will explore bulk add options in future releases, but this works for now.

If the 3-dot workflow needs to be prioritized against epic 6 stories, for example, please prioritize epic 6.

[navinkarkera]

@jmakowski1123 Got it. Updated the PR to include this option, also updated the showcase video in description.

[pomegranited]

@jmakowski1123 @lizc577 @sdaitzman @marcotuts This is ready for AC testing on the sandbox CC @navinkarkera

[jmakowski1123]

I don't think it's working? I can't click on "add to collection", either from the dropdown in the sidebar or from the component card.

[pomegranited]

@navinkarkera could you investigate ^ ?

[bradenmacdonald]

I think we're missing a story for the "Add to collection" menu item (maybe @navinkarkera can do that as a fast-follow fix to this?). This story is about the widget in the sidebar, which you can see on the sandbox now under the "Manage" tab:

(Note that I've collapsed the "Tags" section here to make it easier to see)

[navinkarkera]

Apologies for missing to bring the missing story for the menu item to notice. I can surely add the functionality as soon as the story is created.

[bradenmacdonald]

@jmakowski1123 @sdaitzman Actually, I don't see the component card three-dot menu "Add to Collection" in Figma. Would you like that implemented or removed? If the user clicks on it, what should happen? (Open the sidebar, show the manage tab, and collapse the 'tags' widget so the Collections widget is prominent?)

[jmakowski1123]

That may not be the optimal UI implementation, but I think that works for MVP. Here's the story: #1394

[jmakowski1123]

When I add or remove a component from a collection, the count status on the collection tile doesn't update automatically. I need to either refresh the page or move to a different page and come back.

[jmakowski1123]

In general though, this is looking great

[pomegranited]

When I add or remove a component from a collection, the count status on the collection tile doesn't update automatically. I need to either refresh the page or move to a different page and come back.

Raised openedx/modular-learning#234 to address this so it can be tracked separately.

[ChrisChV]

In general though, this is looking great

@jmakowski1123 can we move this to Done?