Page MenuHomePhabricator

Build UI framework to support CX dashboard and section translation workflow.
Closed, ResolvedPublic

Description

Develop the common infrastructure that will allow to implement the different pieces of Section Translation (T243495). This will be based on the technical exploration done in January (T242006).

Aspects to support:

  • Common UI widgets - Buttons, Icons, Grid, ButtonGroup with i18n and following the mediawiki design guidelines.
  • Common Content translation specific UI widgets - Translation work item with thumbnail, title, languages, description, Basic chrome of the page
  • Language selection controls
  • Unit testing each UI components - Jest
  • Data store possibly using vuex
  • Mediawiki api backend
  • Dialog navigation

Along with developing these widgets, to demonstrate and prove that it fits the purpose, they will be used to construct the minimal CX dashboard optimized to mobile interface. This will have the chrome(Page header), translator's translations(to test api integration) and its listing(to test UI widgets)

This will also take the advantage of the proof of concept done as part of T242006

The latest version(master branch) will be always available at sx.wmflabs.org

Applying to one usecase

Once the general infrastructure is available, it will be applied to one usecase.

From product perspective the proposed step to start with would be "picking a section" (T241587) to maximize delivered value and minimize blockers. Support for this initial step allows to enable a basic version of the core process when connected with Content Translation's one-section mode (T234323). In this way, a basic experience that actually allows to translate a section can be demoed, tested, shared with early adopters, used for user research, and validate our analytics (i.e., how we visualize the initial "sectiontranslation" edits ). That is, making it useful while the team works on additional pieces that complete the experience, without having to wait for those to complete.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 12 2020, 9:58 AM
Pginer-WMF triaged this task as High priority.Mar 12 2020, 9:58 AM
santhosh renamed this task from Build Section Translation framework to Build UI framework to support CX dashboard and section translation workflow..Mar 12 2020, 10:12 AM
santhosh updated the task description. (Show Details)
santhosh updated the task description. (Show Details)

Change 580871 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Translation lists and suggestions

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

Change 578310 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Layout for dashboard: Bottom navigation and translation lists

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

Change 583925 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Add storybook support for UI library components

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

Change 578310 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Layout for dashboard: Bottom navigation and translation lists

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

santhosh updated the task description. (Show Details)Apr 1 2020, 9:42 AM

Change 585204 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Add snapshots for MWAutonym and MWThumbnail

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

Change 585205 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Refactor translation lists to separate components

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

Change 585484 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Add Dialog UI component, tests, stories

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

Change 587191 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] storybook: Grid

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

Change 580871 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Translation lists and suggestions

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

Change 587428 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] dashboard: Validate the bundle created by webpack

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

Change 588371 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Storybook: Add story for Autonym, Card, ButtonGroup, Spinner, Botton Nav

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

Change 583925 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Add storybook support for UI library components

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

Change 585204 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Add snapshots for MWAutonym and MWThumbnail

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

Change 589287 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] MWInput and MWLanguageSelector

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

Change 585205 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Refactor translation lists to separate components

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

Change 585484 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Add Dialog UI component, tests, stories

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

Change 587191 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] storybook: Grid

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

Change 588371 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Storybook: Add story for Autonym, Card, ButtonGroup, Spinner, Bottom Nav

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

Change 589287 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] MWInput and MWLanguageSelector

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

Change 587428 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] dashboard: Validate the bundle created by webpack

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

Change 591343 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] WIP: Section selector

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

Change 594462 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Refactor: Use model classes

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

Change 594883 had a related patch set uploaded (by Santhosh; owner: Santhosh):
[mediawiki/extensions/ContentTranslation@master] Use wikimedia.ui instead of mediawiki.ui style guide

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

santhosh updated the task description. (Show Details)May 8 2020, 8:46 AM

Change 591343 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Section selector - basic version

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

Change 594462 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Refactor: Use model classes

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

Change 594883 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Use wikimedia.ui instead of mediawiki.ui style guide

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

Moving this to QA since basic components are developed. We will have specific ticket for enhancements and new features of this UI library.

The components are illustrated in storybook: https://people.wikimedia.org/~santhosh/storybook/

Jpita added a subscriber: Jpita.Thu, Jun 25, 10:00 AM

@santhosh Do I need to do something here?

@santhosh Do I need to do something here?

Not much. You will testing the features we build on top of this in other ticket. Just moved to review column for your visibility to this activity. Feel free to pass to done column

santhosh closed this task as Resolved.Thu, Jul 9, 4:47 AM