Page MenuHomePhabricator

Reuse variables.less and common components from ext.growthExperiments.MentorDashboard.Vue
Closed, DeclinedPublic


We started the migration of client code to Vue with the module ext.growthExperiments.MentorDasboard which resulted on the creation of ext.growthExperiments.MentorDasboard.Vue. The latter module contains style code that complies with Codex design tokens (see variables.less) and components that could be re-used when creating new Vue components for other modules (see components prefixed with a capital C, like CPopper. The C stands for common or codex candidate)

Acceptance Criteria

  1. Should be able to use GrowthExperiments design tokens from any GrowthExperiments Vue module
  2. Should be able to use GrowthExperiments common components from any GrowthExperiments Vue module
Completion checklist


  • The patches have been code reviewed and merged
  • The task passes its acceptance criteria


  • There are existing and passing unit/integration tests
  • Tests for every involved patch should pass
  • Coverage for every involved project should have improved or stayed the same

Design & QA

  • If the task is UX/Design related: it must be reviewed and approved by the UX/Design team
  • Must be reviewed and approved by Quality Assurance.


  • Related and updated documentation done where necessary

Event Timeline

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

[mediawiki/extensions/GrowthExperiments@master] WIP: extract common vue components

Sgs changed the task status from Open to In Progress.Aug 9 2022, 5:41 PM
Sgs moved this task from In Progress to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.
Sgs triaged this task as Low priority.Sep 6 2022, 4:05 PM

As per comment in gerrit 820787 and conversations with Kosta, we will research deeper the best ways to reuse components and design tokens between GrowthExperiments modules. Alternatives include reusing an existing module (ie DataStore) as the central library for GE reusable code and research for Vue 3 lazy loading mechanisms. Reducing priority to bottom for now and moving it under the maintenance epic.

Change 820787 abandoned by Sergio Gimeno:

[mediawiki/extensions/GrowthExperiments@master] Create ext.growthExperiments.UI to reuse common vue components and styles


needs research/rework

We're already reusing the same less variables hosted in vue-components/variables.less in both the (new) impact module and mentor dashboard. While this is not ideal it works for now. Declining in favor of reacting to the publication of Codex design tokens in T322274: [Epic] Publish the design-tokens package in NPM.