Library Components Tab

[bradenmacdonald]

Designs: Mid-Fi Figma link

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

✅ In Scope:

1. Display the component name, description, type and tag icon with tag count (see tagging epic). Note: this isn't the final design - check Figma. Note: The type includes: text (for the text blocks), video (for the video blocks), open response (for ORAs), specific CAPA problem types - single select, multi-select, dropdown, numerical input, text input (for the problem block), and specific advanced problem types - annotation, poll, etc (for the advanced problem block).

2. The 3-dot menu should contain actions for: Edit, Copy to Clipboard, Add to collection. Separate stories exist for each action from the 3-dot menu so it just needs to be a placeholder for now.

   • for now, the "description" is just the same text we display in the Studio Courseware search modal, which comes from index_dictionary. In the future users will be able to add their own descriptions.
     

3. Card should be color-coded based on type.

   • details TBD

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

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

6. Implement Infinite scroll (Hint: useInfiniteQuery)

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

🛑 Out of Scope:

1. Video thumbnail cards will come in a different story (Library Components: Discovery of Video preview #1044) - just display a "plain" component card for now.
   

Notes:
You can temporarily enable the Library Authoring MFE in order to create components for testing.

[jmakowski1123]

For some reason I cannot replace screenshots in the original text, but these are the hifi card designs:

[ChrisChV]

@jmakowski1123 CC @bradenmacdonald

Clicking on the Edit action opens the requisite editor

I think this would not be done for now in this task, since we would have this same problem

Clicking on Copy to Clipboard copies the component to the clipboard

I think this is out of the scope of this task. We can add that functionality in another task in this epic.

(see comments for most recent designs)

Are there designs for the menus?

[jmakowski1123]

Got it. So all we need for now in this story is a placeholder for the 3-dot menu.

Then in future stories:

Action to edit - is contingent on getting the editors into Libraries, which I created as Epic 4 #1086

Action to copy to clipboard - is now a separate story #1104

Action to add to collection - will be a separate story in Epic 2

[ChrisChV]

Hi @jmakowski1123

Card should be color-coded based on type.

Do you have the colors of the cards?

[bradenmacdonald]

@ChrisChV The colors are here: https://www.figma.com/design/Y3gSyrpG6uncUUfjK7eQuo/Content-Libraries-and-Taxonomies?node-id=2130-52666&t=edCcbOnCFP9j2ibq-4

[ChrisChV]

@jmakowski1123 This it's ready for AC testing

Edit: In https://tagging-preview.staging.do.opencraft.hosting/dashboard

[jmakowski1123]

@jmakowski1123 This it's ready for AC testing

Edit: In https://tagging-preview.staging.do.opencraft.hosting/dashboard

Was that link supposed to go to a course in Studio? The only sample Library I can see the prototype cards is here: https://app.tagging-preview.staging.do.opencraft.hosting/course-authoring/library/lib:Axim:Math101

These examples don't contain truncated titles or descriptions, so can't test those two things. Am I looking in the right place though?

[ChrisChV]

Hi @jmakowski1123

Was that link supposed to go to a course in Studio?

This is the link of Studio. You can see the libraries list on the "Libraries" tab.

These examples don't contain truncated titles or descriptions, so can't test those two things

I created Library for AC testing with these cases.

[jmakowski1123]

Thank you, this looks good!