Page MenuHomePhabricator
Create Task
Maniphest T329033

[Internship] Modernization of web interfaces using Vue.js
Closed, ResolvedPublic
Actions

Description

Description

As part of the Product & Technology intership program the Growth team has proposed to modernize part of their user interfaces using VueJS.

Pool of user interfaces to modernize
The following user interfaces are good candidates to be ported to Vue because they are 100% rendered on the client already so there's no user experience change with the current status quo.

Farther future

  • CollapsibleDrawer (we should collaborate with Design-System-Team on this)
  • Post edit dialog (needs CollapsibleDrawer first)
  • Help panel

The new Vue interfaces will be written in es6 using Vue 3 and Codex libraries. To ease the development and demo process the GrowthExperiments repository contains a vitepress project already set up. See more on how to develop new components and demo them in documentation/frontend/README.md file.

Related Objects
Search...

StatusSubtypeAssignedTask
 ResolvedDMburuguT367429 [Epic] FY 2024-25 Growth Maintenance Work
 OpenSgsT296646 [Epic] Migration of front-end modules to Vue.js components
 ResolvedKStoller-WMFT329033 [Internship] Modernization of web interfaces using Vue.js
 ResolvedSgsT328125 Spike: Experiment with creating GrowthExperiments components in external library
 ResolvedSgsT329034 Publish frontend docs to doc.wikimedia.org/
 ResolvedBUG REPORTCatropeT329987 Importing Codex ES module in Node.js doesn't work
 ResolvedSgsT329036 Setup a unit test environment in the frontend docs
 OpenNoneT329037 Refactor the "Add a link" on-boarding dialog to Vue
 OpenNoneT331986 Integrate the Vue version of the Add a link on-boarding in GrowthExperiments
 ResolvedSgsT335277 Integrate i18n in the VitePress project
 OpenNoneT335568 Create a flag/param to switch on/off the Vue version
 ResolvedSgsT333337 Provide the return value in a standard way
 Resolved• VYanez-WMFT333341 "Add a link" dialog tab navigation
 StalledNoneT333346 Add documentation for "Add a link" on-boarding dialog
Resolved• VYanez-WMFT333348 Use latest Codex dialog slots on "add a link" dialog
 Resolved• VYanez-WMFT333526 Add a link dialog: support passing image reference as a prop
 ResolvedBUG REPORTSgsT333680 ReferenceError: open is not defined
 Resolved• VYanez-WMFT334471 Refactor OnboardingStep component to named slots
 Resolved• VYanez-WMFT334472 Add transitions between dialog steps
 ResolvedSgsT335371 Add RTL support on dialog transitions
 Resolved• VYanez-WMFT335044 Add support for swiping between steps on mobile
 StalledNoneT335268 Improve image loading performance
 OpenNoneT336270 Implement a prototype of OnboardingDialog pattern latest spec
 Resolved• VYanez-WMFT336750 Split transition and swipe logic into a MultiPane component
 OpenNoneT337832 Update the OnboardingDialog styles
 Resolved• VYanez-WMFT339873 Provide URL for the empty link in step 2
 OpenNoneT329038 Refactor the "Add an image" on-boarding dialog to Vue
 Resolved• VYanez-WMFT331395 Prevent VitePress styles to conflict with GrowthExperiments demo styles
 Resolved• VYanez-WMFT331975 Separate demo components from library components
 OpenNoneT333449 Implement visual regression testing framework for documentation/frontend
 StalledNoneT335752 Refactor the "task types/difficulty levels" selection dialog to Vue
 StalledNoneT336161 Refactor the "topic selection dialog" selection dialog to Vue
 OpenNoneT340395 Add a Pinia store to manage state in filter dialogs in GrowthExperiments
 Resolved• VYanez-WMFT336355 Use existing MW translations instead of hardcoded text

Event Timeline

Sgs created this task.Feb 7 2023, 11:25 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 7 2023, 11:25 AM
Sgs added a subtask: T328125: Spike: Experiment with creating GrowthExperiments components in external library.Feb 7 2023, 11:26 AM
Sgs changed the status of subtask T328125: Spike: Experiment with creating GrowthExperiments components in external library from Open to In Progress.Feb 7 2023, 11:52 AM
Sgs added a parent task: T296646: [Epic] Migration of front-end modules to Vue.js components.Feb 7 2023, 12:08 PM
Aklapper added a project: WMF-Internships-2023.Feb 12 2023, 9:17 PM
Sgs moved this task from Inbox to Active Epics on the Growth-Team board.Feb 16 2023, 6:54 PM
Sgs changed the status of subtask T329034: Publish frontend docs to doc.wikimedia.org/ from Open to In Progress.Feb 21 2023, 11:33 AM
kostajh triaged this task as Medium priority.Feb 21 2023, 12:35 PM
kostajh updated the task description. (Show Details)Feb 22 2023, 12:21 PM
kostajh subscribed.
kostajh edited projects, added Growth-Team (Sprint 0 (Growth Team)); removed Growth-Team.Feb 22 2023, 12:23 PM
kostajh moved this task from Incoming to Epics In Progress on the Growth-Team (Sprint 0 (Growth Team)) board.
kostajh updated the task description. (Show Details)
kostajh closed subtask T329034: Publish frontend docs to doc.wikimedia.org/ as Resolved.Feb 22 2023, 12:28 PM
kostajh closed subtask T328125: Spike: Experiment with creating GrowthExperiments components in external library as Resolved.
KStoller-WMF subscribed.Feb 27 2023, 5:53 PM
kostajh updated the task description. (Show Details)Feb 28 2023, 10:25 AM
Sgs changed the status of subtask T329036: Setup a unit test environment in the frontend docs from Open to In Progress.Mar 13 2023, 9:54 AM
kostajh closed subtask T331395: Prevent VitePress styles to conflict with GrowthExperiments demo styles as Resolved.Mar 15 2023, 10:34 AM
kostajh closed subtask T329036: Setup a unit test environment in the frontend docs as Resolved.Mar 22 2023, 1:48 PM
kostajh mentioned this in T332387: Quibble: Update nodeJS to at least v14.18.0.Mar 22 2023, 2:38 PM
kostajh added a subtask: T333449: Implement visual regression testing framework for documentation/frontend.Mar 29 2023, 1:53 PM
Sgs changed the status of subtask T329037: Refactor the "Add a link" on-boarding dialog to Vue from Open to In Progress.Apr 6 2023, 6:25 PM
• VYanez-WMF updated the task description. (Show Details)May 2 2023, 10:00 AM
• VYanez-WMF updated the task description. (Show Details)May 8 2023, 11:16 AM
Sgs changed the status of subtask T331975: Separate demo components from library components from Open to In Progress.May 15 2023, 10:09 AM
Sgs closed subtask T331975: Separate demo components from library components as Resolved.May 15 2023, 10:17 AM
Sgs added a subtask: T336355: Use existing MW translations instead of hardcoded text.May 22 2023, 2:19 PM
Sgs changed the status of subtask T329038: Refactor the "Add an image" on-boarding dialog to Vue from Open to In Progress.May 26 2023, 1:13 PM
kostajh changed the status of subtask T335752: Refactor the "task types/difficulty levels" selection dialog to Vue from Open to In Progress.May 30 2023, 1:16 PM
kostajh changed the status of subtask T336355: Use existing MW translations instead of hardcoded text from Open to In Progress.May 31 2023, 1:39 PM
kostajh updated the task description. (Show Details)Jun 5 2023, 8:26 AM
kostajh added a subscriber: • VYanez-WMF.EditedJun 5 2023, 8:28 AM

In our weekly Vue modernization meetings in May, @Sgs, @VYanez-WMF and I agreed to try to integrate T329037: Refactor the "Add a link" on-boarding dialog to Vue into production MediaWiki. Hence, our focus has shifted towards polishing the Vue application for the onboarding dialog and integration work, rather than investing more time into task type / topic dialogs.

kostajh assigned this task to • VYanez-WMF.Jun 5 2023, 8:28 AM
kostajh closed subtask T336355: Use existing MW translations instead of hardcoded text as Resolved.Jun 12 2023, 8:32 AM
Sgs changed the status of subtask T336161: Refactor the "topic selection dialog" selection dialog to Vue from Open to In Progress.Jun 27 2023, 10:49 AM
Sgs mentioned this in T340556: Move application components to GE modules folder.Jun 27 2023, 3:07 PM
Sgs changed the status of subtask T336161: Refactor the "topic selection dialog" selection dialog to Vue from In Progress to Stalled.Jul 7 2023, 10:42 AM
Sgs changed the status of subtask T335752: Refactor the "task types/difficulty levels" selection dialog to Vue from In Progress to Stalled.
KStoller-WMF edited projects, added Growth-Team; removed Growth-Team (Sprint 0 (Growth Team)).Aug 1 2023, 8:10 PM
KStoller-WMF added a comment.Aug 1 2023, 8:14 PM

I'm cleaning up the Current Growth sprint board to better reflect reality.

Here's a diff post about this work: https://diff.wikimedia.org/2023/06/13/how-to-create-your-own-reusable-dialog-with-codex/

As this internship is over, I'm moving this out of the current sprint. @Sgs Feel free to move it back into the sprint, or move unfinished tasks into a different epic so we can mark this one as resolved.

Aklapper removed • VYanez-WMF as the assignee of this task.Aug 24 2023, 4:59 PM

Removing inactive task assignee who's not with WMF anymore. (WMF Growth-Team: Please do so as part of team offboarding steps - thanks.)

KStoller-WMF closed this task as Resolved.Nov 7 2023, 8:28 PM
KStoller-WMF claimed this task.

@Sgs Since the internship is over, I think it would be best to resolve this epic. If other tasks from within this epic should be prioritized, let's move them into a maintenance epic.

Pppery changed the status of subtask T329037: Refactor the "Add a link" on-boarding dialog to Vue from In Progress to Open.Nov 10 2024, 9:14 PM
Pppery changed the status of subtask T329038: Refactor the "Add an image" on-boarding dialog to Vue from In Progress to Open.
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 · Credits