Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
4 tasks
Tracked by #11888
marcellamaki opened this issue Nov 5, 2024 · 2 comments · May be fixed by #12895
Open
4 tasks
Tracked by #11888
Assignees
Labels
APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) DEV: frontend P0 - critical Priority: Release blocker or regression

Comments

@marcellamaki
Copy link
Member

marcellamaki commented Nov 5, 2024

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 Image
Lessons Browsing up and down the tree - breadcrumbs and folder information are present; some elements are iteractive Image
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 Image
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) Image

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
Copy link

Hi, @marcellamaki can I work on it ?

@MisRob
Copy link
Member

MisRob commented Nov 11, 2024

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.

@marcellamaki marcellamaki added P0 - critical Priority: Release blocker or regression APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) DEV: frontend labels Nov 19, 2024
@AlexVelezLl AlexVelezLl linked a pull request Dec 2, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
APP: Coach Re: Coach App (lessons, quizzes, groups, reports, etc.) DEV: frontend P0 - critical Priority: Release blocker or regression
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants