Library Collections Tab

[jmakowski1123]

Designs: Mid-Fi Figma link

Implement the grid/card view of collections in the library that match the current keyword search.

Collections Cards:

Display the collection name, description and tag icon with tag count (see tagging epic).
Note: We will probably descope the three-dot menu from collections cards on the Collections tab and where collections cards are displayed on the Library home.

The description field is populated at the time of the collection creation, or can be added later from the Collections sidebar. If a collection contains no description, the space can be left empty.

The Collection card contains a count of how many pieces of content are contained within the collection. If there are no pieces of content in the collection, the count should not display at all.

Card should be color-coded based on type.

details TBD
Long titles/descriptions/types should be truncated with an ellipsis as shown in the mockups.

Icons should match the icons we're using in the courseware search modal, and should be sharing the same code.

Implement Infinite scroll (Hint: useInfiniteQuery)

Keep the empty states for when there are no collections in the library or no collections matching the search.

[pomegranited]

Hi @jmakowski1123 @bradenmacdonald

@rpenido identified some missing requirements for this ticket (thank you!). There's one Product question below, but these points can be added into this ticket without trouble.

• Question: should the "Home > Recently Modified" section display the recently modified Collections + Components, or just Components?
  If we're showing only Components, modify the Recently Modified search query to exclude type='collections'.
  If we're showing Collections + Components, then no changes are required to this query.
• Exclude Collections from the Components list on the Home page and Components tab.
  This can be done by passing an extra filter to exclude type='collections' from the Components part of the multi-search query.
• Fetch Collections by adding a 3rd query to the multi-search query, using the extra filter type='collection'.
• Display the first 4 Collection cards in the "Collections" slot on the Home page, just like we do with Components.
• Refer to Option 1: Searching/filtering/sorting the list of Collections for details on expected functionality here.

[pomegranited]

Hi @jmakowski1123 @lizc577 @sdaitzman @marcotuts one product questions for you :) CC @navinkarkera

Should the "Home > Recently Modified" section display the recently modified Collections + Components, or just Components?

The Collection.modified field will be updated when the Collection metadata (title, description) changes and when Components are added/removed from the Collection.

[sdaitzman]

Hi @pomegranited, that section should display both recently modified collections and components. Collections should be considered modified when components have been added or edited as well.

[navinkarkera]

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

[sdaitzman]

@navinkarkera thanks! Here are some issues I noticed:

1. Overflow menu on collection cards does not open on click (this may be under another ticket, feel free to disregard if so)
2. Overflow menu icon on hover has low contrast ratio against the circle behind it. The hover background circle should ideally be a slightly darker version of the card header color.
3. When selecting a collection, the collections sidebar should open (this may be under another ticket, feel free to disregard if so)

[lizc577]

Grid/layout and responsiveness to search and sort look good.
I echo Sam's comment above regarding the hover state color.
I assume functionality for collections is in another ticket? Clicking on the card and the 3 dot menu does not function here currently, if this is intended, please disregard.

[navinkarkera]

I assume functionality for collections is in another ticket? Clicking on the card and the 3 dot menu does not function here currently, if this is intended, please disregard.

@sdaitzman @lizc577 Yes, that is correct. Functionality of the card like 3 dot menu and sidebar is not in scope of this task.

Overflow menu icon on hover has low contrast ratio against the circle behind it. The hover background circle should ideally be a slightly darker version of the card header color.

Got it, I'll fix it in #1281

[jmakowski1123]

• Re: 3-dot menu on the collections card, correct that it's not in scope for this task. Here's a story for the action that should be available from that 3-dot menu: Open a collection page from 3-dot menu on a collection card #1310

[jmakowski1123]

Looks good!