Page MenuHomePhabricator

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

Description

Description
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

Functionality

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

Engineering

  • 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.

Documentation

  • 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

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

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 (Current Sprint) 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

Reason:

needs research/rework

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

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.