Page MenuHomePhabricator

Migration of Mentor dashboard modules to Vue
Open, In Progress, Needs TriagePublic

Description

Mentor dashboard currently contains three modules:

image.png (1×2 px, 794 KB)

The "Your mentees" module does not have any server-side rendering, so is a good candidate for migrating.

On the other hand, the "Settings" module is less complicated so it probably makes sense to start with that one.

Something to keep in mind is upcoming improvements and features to the dashboard; e.g. we don't want to write a patch to migrate "Your mentees" to Vue, but then see that there are new features in master that need to be brought over. So we should coordinate and make sure that we know who is working on what.

OOUI components that need a Codex replacement

Acceptance criteria

  • Mentee overview module uses Vue 3
  • Settings module uses Vue 3
  • Resources module uses Vue 3 (if needed)
  • ...

Related Objects

Event Timeline

Change 758476 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] [experimental] Mentor dashboard: refactor mentee overview to use Vue and Codex

https://gerrit.wikimedia.org/r/758476

I've added this project to the growing list of places that might be interested in "alpha-testing" codex: T300280. The only blocker at the moment is T294993, which we hope to resolve in 1-2 weeks. Once that happens, we will publish "Codex" packages to NPM and in ResourceLoader for internal MediaWiki usage.

Sgs updated the task description. (Show Details)
STH changed the task status from Open to In Progress.May 26 2022, 12:08 AM

Hiya, a quick clarifying question - is this intended to be migrating to Vue first, and then later to using the Codex library, or to migrate to Codex immediately?

Hiya, a quick clarifying question - is this intended to be migrating to Vue first, and then later to using the Codex library, or to migrate to Codex immediately?

Hi @RHo, short answer, yes, we're trying to migrate all interfaces we can to Codex already. Long answer below.

Vue is a Javascript framework that helps creating any kind of HTML interface and adding user interactions to it. Codex is a collection of pre-created components built with Vue and CSS. Codex can only be used from a Vue application. For using it, we first needed to shape the mentor dashboard in the form of a Vue application. Hence we are migrating all UI interfaces to be built with Vue and in some of the interfaces we are building we have been able to re-use Codex components. That's because not all existing UI components in the dashboard have a Codex replacement.

In the example below you can see how inside the Mentor dashboard application ( outer green rectangle ) we are using some Codex components: Button, Select & LookupSearch ( blue rectangles ).

Codex_dashboard.png (2×2 px, 471 KB)

The filters form ( inner green rectangle ) for instance is living in dropdown-like component (it used to be a OOUI PopupWidget) that we have created with Vue. And inside it uses a Codex button.

Hiya, a quick clarifying question - is this intended to be migrating to Vue first, and then later to using the Codex library, or to migrate to Codex immediately?

Hi @RHo, short answer, yes, we're trying to migrate all interfaces we can to Codex already. Long answer below.

Vue is a Javascript framework that helps creating any kind of HTML interface and adding user interactions to it. Codex is a collection of pre-created components built with Vue and CSS. Codex can only be used from a Vue application. For using it, we first needed to shape the mentor dashboard in the form of a Vue application. Hence we are migrating all UI interfaces to be built with Vue and in some of the interfaces we are building we have been able to re-use Codex components. That's because not all existing UI components in the dashboard have a Codex replacement.

In the example below you can see how inside the Mentor dashboard application ( outer green rectangle ) we are using some Codex components: Button, Select & LookupSearch ( blue rectangles ).

Codex_dashboard.png (2×2 px, 471 KB)

The filters form ( inner green rectangle ) for instance is living in dropdown-like component (it used to be a OOUI PopupWidget) that we have created with Vue. And inside it uses a Codex button.

Thanks @Sgs, I do understand the difference but was asking more with the view (pardon the pun :)) of clarifying if there needs to be a different task(s) created after this is complete to convert/migrate to Codex, where Codex team should be tagged for review/support in some way.

Thanks @Sgs, I do understand the difference but was asking more with the view (pardon the pun :)) of clarifying if there needs to be a different task(s) created after this is complete to convert/migrate to Codex, where Codex team should be tagged for review/support in some way.

Yes, there will be different tasks created after this is complete to complete the migration to Codex where clarifications and feedback from the design systems team will be helpful for sure. Some have already arise from the code reviews of this issue, see as an example T311396: Find replacement for the mentee overview table sort icons

Thanks @Sgs, I do understand the difference but was asking more with the view (pardon the pun :)) of clarifying if there needs to be a different task(s) created after this is complete to convert/migrate to Codex, where Codex team should be tagged for review/support in some way.

Yes, there will be different tasks created after this is complete to complete the migration to Codex where clarifications and feedback from the design systems team will be helpful for sure. Some have already arise from the code reviews of this issue, see as an example T311396: Find replacement for the mentee overview table sort icons

Thanks!