Studio Home incremental upgrades - product approach

Owned by Felipe Montoya
Feb 01, 2024
3 min read

In the context of the Studio transformation to MFEs, a lot of work went into product definition and having a clear vision for the future of this page.

Edunext in the context of the Spanish Unidigital project proposed to take on some of the work that will be needed to get from the current status that has feature parity in the MFE with the old page, to an incremental upgrade that advances towards the full vision, keeping the scope in check as we can’t take on the whole work.

The scope of the work that edunext is able to take on would include:

  • pagination

  • filtering (by name, org, course ID, active/archived courses)

  • sorting (by name, org, course ID)

To align expectations this document will hold what we believe would be the goal of the set of interventions that edunext can take on at the moment.

The current status in course-authoring:master

image-20240201-210333.png

If an admin uses the flag to only see one organization at the time, it looks like:

image-20240201-220636.png

And only selecting an organization in the dropdown will render the list.

Planned interventions

#1. Filtering

The goal here would be to add a dropdown at the top of the list that has the following options:

Upon entering the page for the first time the list would be filtered to [x]Active so as to maintain the current expectation that archived courses only appear after some action.
The UI elements would maintain the current paragon styling of the overall MFE.

#2. Pagination

The second intervention would be pagination, which would limit the amount of courses fetch by the API. The UI would use the regular paragon pagination objects, which in the learner-home can be seen as:


At the backend, paginating the current API would be a breaking change with the expectation of the MFE. This will require the creation of a V2 API that maps the necessary presentation of the data and allows for the upgraded MFE to be deployed independently from the studio deploy after V2 has reached production.

 

#3. Text search

In terms of the UI, the search will be as described in the Figma file, only with the default paragon variables for the style. Searching will happen upon submission (enter) and not while the user is still writing to minimize queries to the API.

At the backend, the V2 API will include the “search” query param and use it in a Q object to search the API with by the course key and name (case insensitive).

#4. Sorting

The final intervention would be to add a second dropdown, similar to the “filter” dropdown at the top. From the figma file, the “favorites” field is not yet implemented so sorting will be limited to: Name A-Z, Name Z-A, newest, oldest.

At the backend the necessary changes will be made to that the API respects the sorting options.