Page MenuHomePhabricator
Create Task
Maniphest T299622

Migrate Section translation to Vue 3
Closed, ResolvedPublic8 Estimated Story Points
Actions

Description

Section translation currently uses Vue 2.x. To align with Vue usage in mediawiki T289017: [EPIC] <Core Technology> Upgrade MediaWiki projects from Vue 2 to Vue 3, and to use the benefits of Vue's latest version, we need to migrate to latest stable version - Vue 3.x

This would also mean, migrating to Vuex 4.x and Vue router 4.x

Checklist

  • Upgrade Vue to 3.x
  • Upgrate Vuex to 4.x
  • Upgrade Vue router to 4.x
  • Upgrade Vue banana i18n to Vue 3 version
  • Upgrade Vue-cli as needed
  • Explore replacement of Vue-cli/webpack with Vite

Details

SubjectRepoBranchLines +/-
SX Vue 3 migration: Remove vue/compat buildmediawiki/extensions/ContentTranslationmaster+0 -7
SX Vue3 migration: Fix usage of v-modelmediawiki/extensions/ContentTranslationmaster+21 -17
SX Vue3 migration: Replace slot attributes with new syntaxmediawiki/extensions/ContentTranslationmaster+8 -8
SX: Upgrade vue-router to v4mediawiki/extensions/ContentTranslationmaster+56 -44
SX: Upgrade vuex to v4mediawiki/extensions/ContentTranslationmaster+96 -67
SX: Fix breakpoints and colors plugins to be used with Vite + Vue3mediawiki/extensions/ContentTranslationmaster+99 -68
SX: Refactor event logging plugin to be used with Vue 3mediawiki/extensions/ContentTranslationmaster+33 -19
SX: Upgrade vue-banana-i18n for compatibility with Vue 3mediawiki/extensions/ContentTranslationmaster+59 -38
SX Vue 3 migration: Replace Vue.set with regular JS mutationsmediawiki/extensions/ContentTranslationmaster+15 -22
SXQuickTutorial Vue 3: Fix transitions to only contain a single childmediawiki/extensions/ContentTranslationmaster+4 -4
SX Vue3 migration: Fix attributes with v-bind value falsemediawiki/extensions/ContentTranslationmaster+12 -12
SX Vue 3 migration: Refactor new section placeholder functionalitymediawiki/extensions/ContentTranslationmaster+82 -62
SX Vue 3 migration: Refactor MWRadioGroup to use Vue3 render APImediawiki/extensions/ContentTranslationmaster+27 -22
SX Vue 3 migration: Use global nextTick instead of $nextTickmediawiki/extensions/ContentTranslationmaster+7 -7
SX: Add Vue 3 with compatibility buildmediawiki/extensions/ContentTranslationmaster+88 -120
SX: Explicitly inject dependencies inside composablesmediawiki/extensions/ContentTranslationmaster+174 -134
CX3 Build 0.2.0+20220328mediawiki/extensions/ContentTranslationmaster+25 -21
SX: MT fix - translateTranslationUnitById should be awaitedmediawiki/extensions/ContentTranslationmaster+3 -4
Vite tooling: Fix dynamic import failures, support local configmediawiki/extensions/ContentTranslationmaster+51 -46
CX3: HMR + Vite toolingmediawiki/extensions/ContentTranslationmaster+51 -34
SX: Replace vue-cli with Vitemediawiki/extensions/ContentTranslationmaster+30 K -29 K
Vue 3 + Jest migrationmediawiki/extensions/ContentTranslationmaster+31 K -21 K
Migrate Section Translation to Vue 3mediawiki/extensions/ContentTranslationmaster+45 K -34 K
Show related patches Customize query in gerrit

Related Objects
Search...

Event Timeline

santhosh created this task.Jan 20 2022, 6:42 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 20 2022, 6:42 AM
Pginer-WMF moved this task from Backlog to General infrastructure on the SectionTranslation board.Jan 20 2022, 3:38 PM
Pginer-WMF triaged this task as Medium priority.Feb 25 2022, 9:31 AM
Pginer-WMF moved this task from Quarter Backlog to Priority: SX Adoption on the Language-Team (Language-2022-January-March) board.
gerritbot added a comment.Mar 3 2022, 6:59 AM

Change 767618 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] SX: Replace vue-cli with Vite

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

gerritbot added a project: Patch-For-Review.Mar 3 2022, 6:59 AM
gerritbot added a comment.Mar 3 2022, 11:32 AM

Change 767746 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] CX3: HMR + Vite tooling

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

santhosh raised the priority of this task from Medium to High.Mar 4 2022, 5:40 AM
santhosh set the point value for this task to 8.
santhosh moved this task from Priority: SX Adoption to In Progress on the Language-Team (Language-2022-January-March) board.
gerritbot added a comment.Mar 11 2022, 4:54 AM

Change 769846 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] Vite tooling: Fix dynamic import failures, support local config

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

gerritbot added a comment.Mar 16 2022, 1:04 PM

Change 771351 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX: Explicitly inject dependencies inside composables

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

gerritbot added a comment.Mar 17 2022, 5:30 PM

Change 771644 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX: Add Vue 3 with compatibility build

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

gerritbot added a comment.Mar 17 2022, 5:30 PM

Change 771645 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX: Upgrade vue-router to v4

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

gerritbot added a comment.Mar 17 2022, 5:30 PM

Change 771666 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX: Upgrade vuex to v4

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

gerritbot added a comment.Mar 17 2022, 5:30 PM

Change 771667 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX: Fix breakpoints and colors plugins to be used with Vite + Vue3

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

gerritbot added a comment.Mar 17 2022, 5:30 PM

Change 771668 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX: Refactor event logging plugin to be used with Vue 3

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

gerritbot added a comment.Mar 17 2022, 5:30 PM

Change 771669 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX: Upgrade vue-banana-i18n for compatibility with Vue 3

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

gerritbot added a comment.Mar 18 2022, 9:34 AM

Change 771829 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX Vue 3 migration: Replace Vue.set with regular JS mutations

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

gerritbot added a comment.Mar 18 2022, 9:34 AM

Change 771830 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SXQuickTutorial Vue 3: Fix transitions to only contain a single child

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

gerritbot added a comment.Mar 18 2022, 9:34 AM

Change 771832 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX Vue 3 migration: Use global nextTick instead of $nextTick

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

gerritbot added a comment.Mar 18 2022, 9:34 AM

Change 771833 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX Vue 3 migration: Refactor MWRadioGroup to use Vue3 render API

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

gerritbot added a comment.Mar 18 2022, 9:34 AM

Change 771834 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX Vue 3 migration: Refactor new section placeholder functionality

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

gerritbot added a comment.Mar 18 2022, 9:34 AM

Change 771835 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX Vue3 migration: Fix attributes with v-bind value false

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

gerritbot added a comment.Mar 18 2022, 9:34 AM

Change 771836 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX Vue3 migration: Replace slot attributes with new syntax

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

gerritbot added a comment.Mar 18 2022, 9:34 AM

Change 771837 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX Vue3 migration: Fix usage of v-model

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

gerritbot added a comment.Mar 18 2022, 1:39 PM

Change 771877 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] SX Vue 3 migration: Remove vue/compat build

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

gerritbot added a comment.Mar 24 2022, 4:46 AM

Change 772393 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] Vue 3 + Jest migration

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

gerritbot added a comment.Mar 24 2022, 5:48 AM

Change 773385 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] Migrate Section Translation to Vue 3

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

gerritbot added a comment.Mar 25 2022, 4:41 AM

Change 773385 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Migrate Section Translation to Vue 3

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

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.5; 2022-03-28).Mar 25 2022, 5:00 AM
gerritbot added a comment.Mar 25 2022, 5:36 AM

Change 772393 abandoned by Santhosh:

[mediawiki/extensions/ContentTranslation@master] Vue 3 + Jest migration

Reason:

Merged with https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ContentTranslation/+/773385

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

gerritbot added a comment.Mar 25 2022, 5:36 AM

Change 767618 abandoned by Santhosh:

[mediawiki/extensions/ContentTranslation@master] SX: Replace vue-cli with Vite

Reason:

Merged with https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ContentTranslation/+/773385

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

gerritbot added a comment.Mar 25 2022, 5:36 AM

Change 767746 abandoned by Santhosh:

[mediawiki/extensions/ContentTranslation@master] CX3: HMR + Vite tooling

Reason:

Merged with https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ContentTranslation/+/773385

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

gerritbot added a comment.Mar 25 2022, 5:36 AM

Change 769846 abandoned by Santhosh:

[mediawiki/extensions/ContentTranslation@master] Vite tooling: Fix dynamic import failures, support local config

Reason:

Merged with https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ContentTranslation/+/773385

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

santhosh updated the task description. (Show Details)EditedMar 25 2022, 5:47 AM

https://sx.wmflabs.org/ is now running on Vue3, Vuex 4, Vue Router 4, Vue Banana i18n 2. Please help testing before it goes to production next week.

There should not be any UI/UX changes from previous version. Everything should work as it used to be.

santhosh moved this task from In Progress to Needs QA on the Language-Team (Language-2022-January-March) board.Mar 25 2022, 5:48 AM
Pginer-WMF mentioned this in T304678: Language selector search box should get the input focus automatically.Mar 25 2022, 11:39 AM
Pginer-WMF mentioned this in T304679: After switching languages the Section Translation dashboard could no longer be scrolled.Mar 25 2022, 11:48 AM
Pginer-WMF added a subtask: T304678: Language selector search box should get the input focus automatically.Mar 25 2022, 11:55 AM
Pginer-WMF mentioned this in T304684: Initial translation loading indefinitely.Mar 25 2022, 12:13 PM
Pginer-WMF added a subscriber: Pginer-WMF.Mar 25 2022, 12:18 PM
In T299622#7805779, @santhosh wrote:

https://sx.wmflabs.org/ is now running on Vue3, Vuex 4, Vue Router 4, Vue Banana i18n 2. Please help testing before it goes to production next week.

There should not be any UI/UX changes from previous version. Everything should work as it used to be.

On a first pass I found these regressions, which I added as sub-tasks:

The first one is more severe since prevents adding any content to the translation to continue the translation (and testing ) process.

Another issue I found during the testing process (T304679) does not seem to be due to refactoring since are also present in production or in Test Wikipedia

Pginer-WMF mentioned this in T304817: Present sections no longer listed.Mar 28 2022, 9:28 AM
Pginer-WMF mentioned this in T304823: Duplicate editing toolbar in Section Translation.Mar 28 2022, 9:43 AM
Pginer-WMF added a comment.Mar 28 2022, 9:49 AM

I noticed a couple more regressions in another round of tests:

gerritbot added a comment.Mar 28 2022, 11:49 AM

Change 774457 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] SX: MT fix - translateTranslationUnitById should be awaited

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

gerritbot added a comment.Mar 28 2022, 12:15 PM

Change 774457 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] SX: MT fix - translateTranslationUnitById should be awaited

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

gerritbot added a comment.Mar 28 2022, 3:51 PM

Change 774507 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20220328

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

gerritbot added a comment.Mar 28 2022, 5:08 PM

Change 774507 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20220328

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

gerritbot added a comment.Mar 29 2022, 7:55 AM

Change 771351 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX: Explicitly inject dependencies inside composables

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:55 AM

Change 771644 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX: Add Vue 3 with compatibility build

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:55 AM

Change 771832 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX Vue 3 migration: Use global nextTick instead of $nextTick

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:55 AM

Change 771833 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX Vue 3 migration: Refactor MWRadioGroup to use Vue3 render API

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:55 AM

Change 771834 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX Vue 3 migration: Refactor new section placeholder functionality

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:55 AM

Change 771835 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX Vue3 migration: Fix attributes with v-bind value false

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:55 AM

Change 771830 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SXQuickTutorial Vue 3: Fix transitions to only contain a single child

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:55 AM

Change 771829 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX Vue 3 migration: Replace Vue.set with regular JS mutations

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:55 AM

Change 771669 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX: Upgrade vue-banana-i18n for compatibility with Vue 3

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:55 AM

Change 771668 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX: Refactor event logging plugin to be used with Vue 3

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:56 AM

Change 771667 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX: Fix breakpoints and colors plugins to be used with Vite + Vue3

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:56 AM

Change 771666 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX: Upgrade vuex to v4

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:56 AM

Change 771645 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX: Upgrade vue-router to v4

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:56 AM

Change 771836 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX Vue3 migration: Replace slot attributes with new syntax

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:56 AM

Change 771837 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX Vue3 migration: Fix usage of v-model

Reason:

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

gerritbot added a comment.Mar 29 2022, 7:57 AM

Change 771877 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX Vue 3 migration: Remove vue/compat build

Reason:

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

Pginer-WMF closed subtask T304684: Initial translation loading indefinitely as Resolved.Mar 31 2022, 10:23 AM
Pginer-WMF edited projects, added Language-Team (Language-2022-April-June); removed Language-Team (Language-2022-January-March).Apr 4 2022, 8:25 AM
Pginer-WMF moved this task from Quarter Backlog to Needs QA on the Language-Team (Language-2022-April-June) board.
Pginer-WMF closed subtask T304817: Present sections no longer listed as Invalid.Apr 5 2022, 10:18 AM
Pginer-WMF closed subtask T304823: Duplicate editing toolbar in Section Translation as Resolved.Apr 8 2022, 8:16 AM
Pginer-WMF closed subtask T304678: Language selector search box should get the input focus automatically as Resolved.
Nikerabbit removed a project: Patch-For-Review.Apr 19 2022, 7:09 AM
EChukwukere-WMF added a subscriber: EChukwukere-WMF.May 10 2022, 3:06 AM

Testing status: QA PASS

I was able to carry out the basic app launch and was able to perform simple article translations

EChukwukere-WMF moved this task from Needs QA to Done on the Language-Team (Language-2022-April-June) board.May 10 2022, 3:06 AM
Pginer-WMF closed this task as Resolved.May 13 2022, 10:56 AM
Pginer-WMF claimed this task.
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL