search

openedx / frontend-app-course-authoring

The micro-frontend for course authoring in Open edX. Frontend interfaces that currently live in Studio/CMS should eventually live here.
GNU Affero General Public License v3.0
12 stars 65 forks source link

Library Components Tab #1037

Open bradenmacdonald opened 1 month ago

bradenmacdonald commented 1 month ago

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. Screenshot 2024-05-23 at 6 01 36 PM

  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 (#1044) - just display a "plain" component card for now. Screenshot

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

jmakowski1123 commented 1 month ago

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

Screen Shot 2024-06-11 at 11 24 32 AM Screen Shot 2024-06-11 at 11 25 58 AM
ChrisChV commented 1 month ago

@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 commented 1 month ago

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 https://github.com/openedx/frontend-app-course-authoring/issues/1086

Action to copy to clipboard - is now a separate story https://github.com/openedx/frontend-app-course-authoring/issues/1104

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

ChrisChV commented 1 month ago

Hi @jmakowski1123

Card should be color-coded based on type.

Do you have the colors of the cards?

bradenmacdonald commented 1 month ago

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