Update `<ResourceSelection />` so that can it can be used in lessons, without breaking the current quiz workflow

marcellamaki commented 2 weeks ago

Overview

The lesson management workflow (adding resources to lessons) is being updated to use the similar side panel management UX that we introduced in quizzes in 0.17. This issue is one way that we are refactoring the selection of resources and folders, tracking and updating local state, etc. to have a cohesive experience across lessons and quizzes.

The purpose of this issue is to do as minimal a refactor as possible of the existing ResourceSelection component, currently used in quizzes, to allow an MVP use case in lessons without breaking the current quiz functionality. For this issue, you should create an <UpdatedResourceSelection /> component. The purpose of this is not to rearchitect the entire idea of the resource selection, but rather to find the simplified version that can be used in the updated lessons case. Extending the component functionality for the new features of quizzes (i.e. question selection), or even using it in quizzes at all, will happen later and is beyond the scope of this issue.

Related but out of scope tasks and issues:

Updating the component(s) in quizzes
Replacing the ContentCardList with KCards/KCardGrid
Refactoring the side panel (things like navigation/routing, headers, etc.)
the "top stuff" - small components that go in the slot at the top of the side panel

Description

This new <ResourceSelection /> should be something in between the current version, which is closely connected to quizzes, and the ContentCardList, a child component that renders the resource cards and their corresponding selection, although the state management lives outside of the list.

The component should:

have a header/title, which has a default of h1 but is able to override the header level (h1, h2, etc.)
contain the search button (which opens the search panel, as a subroute)
display breadcrumbs when we're in the tree
display folder title and details when we're in the tree
render the content card list
manage navigation up and down the tree
manage the selection (and the rules for selection) of resources; for example, "selecting all" for all folders of a channel should not be possible
although the selection rules will differ somewhat from quizzes, they should be applied in a similar way, with reasonable maximums about the number of items that can be selected at once, and the number of items that can be added to a lesson. (Previously, we have not allowed folder selection and resources had to be added individually. Therefore, the chances of someone adding an entire channel to a lesson were diminished 😄)

Additional technical considerations:

The checkbox selection state does not reflect the current state of the lesson, but rather the current state of the user selection. (It is what is in your shopping cart buying groceries, not what is in your pantry at home). Deselecting an item that is checked simply removes it from the "cart", or working state
Making card selections within the resource selection component can only add items to your lesson. Removal and reordering of resources takes place on the lesson main page.
The lesson should be updated on form "save and close" not on each "selection" (because if it were updated on each "check", we would run into a problem with deleting resources via checkboxes, which we don't want to do)

Variations of the side panel with resource selection

Description of content	Reference screenshot
Lessons Minimal "top stuff" in the slot (no breadcrumbs or chips); List is an array of resources (not folders), no tracking of relative location in topic tree
Lessons Browsing up and down the tree - breadcrumbs and folder information are present; some elements are iteractive
Lessons Search results - search can be across all resources on the device, or scoped to a channel or topic, and this is indicated at the top. search chips (interactive) contain information about the results
Quizzes Folder navigation - more "top stuff" (please note that this reflects the current state in quizzes and is used as an example, and may be changed)

Goals

The first goal of this issue is to further refine the spec in collaboration with @marcellamaki with inputs from @nucleogenesis and @rtibbles to make final decisions around things like the selection rules. Note that once QA starts working on this and testing, we may encounter a few unpredictable edge cases and need to make further refinements.

The second goal is to update the component:

[ ] Create a "simplified copy" of the ResourceSelection component that is the most simple version, that could be used in lessons. This could be done by copying all of the ResourceSelection to something like UpdatedResourceSelection and deleting code, or by creating a new UpdatedResourceSelection and selectively copying and updating the functionality
[ ] This new copied component should be able to manage folder and resource selection, and be flexible enough to be added across Lesson management (bookmarks, search results, and topic/tree navigation)
[ ] This component does not have to be added in all of these places in scope of this issue, but for testing could be implemented either in "bookmarks" or in "tree navigation"
[ ] Resources can be properly selected and added to the lesson

abhirupPann commented 1 week ago

Hi, @marcellamaki can I work on it ?

MisRob commented 1 week ago

Hi @abhirupPann, thanks for volunteering! This issue is not meant for contribution, but there are another contributing opportunities. See the contributing guidelines including links to issues suitable for contribution for each repository here:

You can also see the list of unassigned "help wanted" or "good first issue" issues across all repositories.

learningequality / kolibri