Community-defined Translation Collections: Single selection mode UI
Open, MediumPublic
Actions

Assigned To

Authored By

	PWaigi-WMF
	Jun 28 2024, 11:59 AM

Description

Background

This task explores the UI/UX elements of selecting and discovering translation collections curated by editors on the mobile translation workflow. This work is closely related to T368713, T369268 & T368422.

User story

Discovering Collections
As an editor who is interested in translating articles,
I want to access different sources of collections,
So that I can have a variety of options to choose from based on my interests.

Selecting a single collection
As an editor who is selecting 1 option under Collections,
I want to view the available translation suggestions under the said collection,
So that I can have a targeted focus to translate what interests me.

Design details

This work builds upon the existing custom translation suggestions framework, specifically extending the Basic topic selection (T368422) functionality. The goal is to seamlessly integrate Collections into the existing suggestion system, enhancing the user's ability to discover and engage with curated content from campaigns, events, and wikiprojects.

Basic collection selection mode:

List - Basic selection mode.png (1×2 px, 442 KB)

The Collections option appears as a filter chip in the "Automatic" section, alongside "For you" and "Popular topics".
Selecting Collections replaces the currently active filter, just like selecting any other topic.
Users can switch between Collections and other topics with a single tap, maintaining the simplicity of the single-selection mode.
Users can select a Collection just like any other topic.
When selected, Collection suggestions appear on the Suggestions screen.

NOTE: Tapping the Collection chip to view details about the collection has been extracted to T379273: Community-defined Translation Collections: Collection View

List-based suggestions

Maintain current suggestion card style.
Introduce a small, visual element to indicate the list.

Acceptance Criteria

Successful states:
being able to view different chips under the Collections section sourced from Campaigns, Wiki projects, Events, or Vital Lists.
being able to select a single chip at a time from any of the options under Collections.

QA Results - Test Mobile ContentTranslation

AC	Status	Details
1	✅	T368718#10336693
2	✅	T368718#10336693
3	✅	T368718#10336693
4	✅	T368718#10336693
5	⬜	T368718#10336693
6	⬜	T368718#10336693

Details

Other Assignee: GMikesell-WMF

Subject	Repo	Branch	Lines +/-
Fix label for popular filter, inside filters summary	mediawiki/extensions/ContentTranslation	master	+11 -3
Unified dashboard: Add UI for page collection recommendations	mediawiki/extensions/ContentTranslation	wmf/1.44.0-wmf.3	+667 -109
CX3 Build 0.2.0+20241113	mediawiki/extensions/ContentTranslation	wmf/1.44.0-wmf.3	+5 K -5 K
CX3 Build 0.2.0+20241113	mediawiki/extensions/ContentTranslation	master	+5 K -5 K
Unified dashboard: Add UI for page collection recommendations	mediawiki/extensions/ContentTranslation	master	+667 -109
Update recommendation-api to 2024-11-08-142328-production	operations/deployment-charts	master	+2 -2
Add api method to fetch page collections	mediawiki/extensions/ContentTranslation	master	+80 -47
support page collection recommendations only for specific collection	research/recommendation-api	master	+6 -3
Add endpoint to fetch all page collections with their metadata	research/recommendation-api	master	+30 -1

Customize query in gerrit

Related Objects
Search...

View Standalone Graph

This task is connected to more than 200 other tasks. Only direct parents and subtasks are shown here. Use View Standalone Graph to show more of the graph.

Status	Assigned	Task
		· · ·
Open	None	T113257 Custom translation suggestions: Find opportunities to translate in topic areas selected by the user
In Progress	None	T378958 Custom translation suggestions: Community-defined Collections [EPIC]
Open	ngkountas	T368718 Community-defined Translation Collections: Single selection mode UI
Open	ngkountas	T374597 Community-defined Translation Collections: Default/Vital Articles
Open	None	T378955 Community-defined Translation Collections: Multiple selection mode UI
Resolved	SGautam_WMF	T372130 Useability testing for basic topic selection & community defined translation collections on UL platform
Open	None	T379273 Community-defined Translation Collections: Collection View
		· · ·

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

SGautam_WMF updated the task description. (Show Details)Sep 4 2024, 12:14 PM

SGautam_WMF updated the task description. (Show Details)Sep 4 2024, 2:29 PM

PWaigi-WMF added a subscriber: MMulaudzi-WMF.Sep 5 2024, 11:18 AM

PWaigi-WMF mentioned this in T374597: Community-defined Translation Collections: Default/Vital Articles.Sep 12 2024, 9:22 AM

PWaigi-WMF added a subtask: T374597: Community-defined Translation Collections: Default/Vital Articles.

PWaigi-WMF updated the task description. (Show Details)Sep 12 2024, 9:37 AM

PWaigi-WMF mentioned this in T374604: Technical Exploration: Making lists global and Localizing campaign/event names .Sep 12 2024, 10:32 AM

PWaigi-WMF added a subtask: T374604: Technical Exploration: Making lists global and Localizing campaign/event names .

PWaigi-WMF added a subtask: T368713: Community-defined translation collections: Technical Exploration.Sep 12 2024, 10:34 AM

PWaigi-WMF mentioned this in T371897: Request to host article-country model on Lift Wing.Sep 12 2024, 2:02 PM

Isaac mentioned this in T361637: Support for topic infrastructure work.Sep 23 2024, 7:43 PM

ngkountas claimed this task.Oct 3 2024, 4:58 PM

ngkountas moved this task from Prioritized to In-progress on the LPL Hypothesis board.

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

[mediawiki/extensions/ContentTranslation@master] Unified dashboard: Add UI for community lists

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

gerritbot added a project: Patch-For-Review.Oct 3 2024, 4:59 PM

Pginer-WMF updated the task description. (Show Details)Fri, Oct 25, 11:00 AM

SGautam_WMF attached a referenced file: F57457163: List - Event specific.png. (Show Details)Fri, Oct 25, 11:23 AM

ngkountas moved this task from In-progress to Needs Code Review on the LPL Hypothesis board.Fri, Oct 25, 2:20 PM

@ngkountas I have updated the mockups in this task with "Collections" and "All collections" terminology.

SGautam_WMF updated the task description. (Show Details)Sun, Oct 27, 7:33 AM

PWaigi-WMF updated the task description. (Show Details)Mon, Oct 28, 8:52 AM

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

[research/recommendation-api@master] Add endpoint to fetch all page collections with their metadata

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

Change #1084155 merged by jenkins-bot:

[research/recommendation-api@master] Add endpoint to fetch all page collections with their metadata

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

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

[mediawiki/extensions/ContentTranslation@master] Add api method to fetch page collections

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

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

[research/recommendation-api@master] support page collection recommendations only for specific collection

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

Change #1084781 merged by jenkins-bot:

[research/recommendation-api@master] support page collection recommendations only for specific collection

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

Change #1084205 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] Add api method to fetch page collections

Reason:

squashed into Ie0e7c54cde4ce0d76b28831393a994ecc1968149

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

PWaigi-WMF renamed this task from Custom translation suggestions: Community-defined lists to Custom translation suggestions: Community-defined Collections.Thu, Oct 31, 2:47 PM

PWaigi-WMF renamed this task from Custom translation suggestions: Community-defined Collections to Custom translation suggestions: Community-defined Collections UI (basic selection mode).Mon, Nov 4, 1:03 PM

PWaigi-WMF updated the task description. (Show Details)

PWaigi-WMF mentioned this in T378955: Community-defined Translation Collections: Multiple selection mode UI.

PWaigi-WMF edited subtasks, added: T378955: Community-defined Translation Collections: Multiple selection mode UI; removed: T368713: Community-defined translation collections: Technical Exploration, T374604: Technical Exploration: Making lists global and Localizing campaign/event names .

PWaigi-WMF added a subtask: T372130: Useability testing for basic topic selection & community defined translation collections on UL platform.Mon, Nov 4, 1:17 PM

PWaigi-WMF mentioned this in T378958: Custom translation suggestions: Community-defined Collections [EPIC].Mon, Nov 4, 1:46 PM

PWaigi-WMF added a parent task: T378958: Custom translation suggestions: Community-defined Collections [EPIC].Mon, Nov 4, 1:54 PM

PWaigi-WMF mentioned this in T379048: Community-defined Translation Collections: On-boarding and Product write-ups.Tue, Nov 5, 9:29 AM

PWaigi-WMF renamed this task from Custom translation suggestions: Community-defined Collections UI (basic selection mode) to Community-defined Translation Collections: Single selection mode UI.Tue, Nov 5, 11:43 AM

UOzurumba subscribed.Tue, Nov 5, 2:37 PM

Change #1088276 had a related patch set uploaded (by KartikMistry; author: KartikMistry):

[operations/deployment-charts@master] Update recommendation-api to 2024-11-06-190017-production

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

SBisson mentioned this in T379273: Community-defined Translation Collections: Collection View.Thu, Nov 7, 4:06 PM

SBisson updated the task description. (Show Details)Thu, Nov 7, 4:08 PM

SBisson updated the task description. (Show Details)

Change #1088276 merged by jenkins-bot:

[operations/deployment-charts@master] Update recommendation-api to 2024-11-08-142328-production

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

SBisson mentioned this in T371515: Community-defined Translation Collections: definition, storage & recommendation.Tue, Nov 12, 2:22 PM

Change #1077751 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Unified dashboard: Add UI for page collection recommendations

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

Nikerabbit removed a project: Patch-For-Review.Wed, Nov 13, 7:15 PM

Nikerabbit moved this task from Needs Code Review to Pending deployment on the LPL Hypothesis board.

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

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

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

gerritbot added a project: Patch-For-Review.Wed, Nov 13, 7:15 PM

Change #1090944 merged by jenkins-bot:

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

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

Maintenance_bot removed a project: Patch-For-Review.Wed, Nov 13, 8:30 PM

Change #1091007 had a related patch set uploaded (by KartikMistry; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.3] CX3 Build 0.2.0+20241113

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

gerritbot added a project: Patch-For-Review.Thu, Nov 14, 3:34 AM

Change #1091007 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.3] CX3 Build 0.2.0+20241113

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

Mentioned in SAL (#wikimedia-operations) [2024-11-14T08:56:05Z] <kartik@deploy2002> Started scap sync-world: Backport for [[gerrit:1091007|CX3 Build 0.2.0+20241113 (T368718 T374567)]]

Stashbot mentioned this in T374567: SX: Set aria-label to icon-only Codex buttons.Thu, Nov 14, 8:56 AM

Mentioned in SAL (#wikimedia-operations) [2024-11-14T09:00:09Z] <kartik@deploy2002> kartik: Backport for [[gerrit:1091007|CX3 Build 0.2.0+20241113 (T368718 T374567)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-11-14T09:25:45Z] <kartik@deploy2002> Finished scap sync-world: Backport for [[gerrit:1091007|CX3 Build 0.2.0+20241113 (T368718 T374567)]] (duration: 29m 40s)

Maintenance_bot removed a project: Patch-For-Review.Thu, Nov 14, 9:32 AM

PWaigi-WMF moved this task from Pending deployment to Needs QA on the LPL Hypothesis board.Mon, Nov 18, 2:17 PM

Change #1092259 had a related patch set uploaded (by Sbisson; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.3] Unified dashboard: Add UI for page collection recommendations

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

gerritbot added a project: Patch-For-Review.Mon, Nov 18, 2:30 PM

Change #1092259 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.3] Unified dashboard: Add UI for page collection recommendations

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

Mentioned in SAL (#wikimedia-operations) [2024-11-18T15:30:59Z] <lucaswerkmeister-wmde@deploy2002> Started scap sync-world: Backport for [[gerrit:1092259|Unified dashboard: Add UI for page collection recommendations (T368718)]]

Maintenance_bot removed a project: Patch-For-Review.Mon, Nov 18, 3:31 PM

Mentioned in SAL (#wikimedia-operations) [2024-11-18T15:45:37Z] <lucaswerkmeister-wmde@deploy2002> sbisson, lucaswerkmeister-wmde: Backport for [[gerrit:1092259|Unified dashboard: Add UI for page collection recommendations (T368718)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-11-18T15:58:16Z] <lucaswerkmeister-wmde@deploy2002> Finished scap sync-world: Backport for [[gerrit:1092259|Unified dashboard: Add UI for page collection recommendations (T368718)]] (duration: 27m 17s)

@ngkountas Please review my findings below. If you have any questions, please let me know. Thanks!

Test Result - Test Mobile ContentTranslation

Status: ❓Need More Info / ❌ FAIL
Environment: Test Mobile ContentTranslation
OS: macOS Sonoma 15.0
Browser: Chrome 130
Device: MBA
Emulated Device: iPhone 14 Pro Max

Test Artifact(s):

https://test.m.wikipedia.org/w/index.php?title=Special:ContentTranslation&active-list=suggestions&from=en&to=el&filter-type=automatic&filter-id=previous-edits
https://test.m.wikipedia.org/w/index.php?title=Special:ContentTranslation&active-list=suggestions&from=en&to=es&filter-type=topic&filter-id=sports

Test Steps

Test Case 1: Ensure "Collections" chip is displayed in the "Adjust suggestions" view

Navigate to the mobile translation workflow.
Open the "Adjust suggestions" view.
❌ AC1: Confirm that the "Collections" chip is displayed alongside "For you" and "Popular topics" in the Automatic section.

Does not have "Popular topics" but just "Popular"

2024-11-18_10-05-42.png (1×698 px, 125 KB)

Test Case 2: View sources under "Collections"

Tap the "Collections" chip in the "Adjust suggestions" view.

2.❓ AC2: Verify that sources like Campaigns, Wiki projects, Events, and Vital Lists are displayed as selectable chips.

Is this what it's supposed to look like in the gif below? This is based on the 1st Acceptance Criteria. How do you verify that sources like Campaigns, Wiki projects, Events, and Vital Lists are displayed as selectable chip since all I'm seeing is Vital articles?

2024-11-18_10-09-35.mp4.gif (1×638 px, 2 MB)

Test Case 3: Select a single chip under "Collections"

Tap any chip under "Collections" (e.g., "Art+Feminism").
❌AC3: Confirm that the selected chip becomes active.

The only thing under Collections is "Vital articles". Are there supposed to be more chips under "Collection" like the screenshots in the description?

2024-11-18_10-18-15.mp4.gif (1×698 px, 2 MB)

❓ AC4: Verify that suggestions specific to the selected collection are displayed on the Suggestions screen.

See AC3 gif. It seems to get part of it. I'm not sure how Vertebrae, Bank of Italy, and gecko have to do anything with Art.

See AC3

Test Case 4: View metadata for articles under a selected collection

While viewing article suggestions for a selected collection, check the metadata displayed under each article.
❓ AC5: Confirm that the metadata is accurate and specific to the selected collection.

Is this what you want to see?

2024-11-18_10-24-25.png (1×1 px, 251 KB)

Test Case 5: Handle "No collections available" state

Navigate to the "Collections" section when no collections are available.
❓ AC6: Verify that an appropriate message like "No collections available" is displayed.

For the last acceptance criteria of being able to view an appropriate state when there are no collections available. How do you test this?

2024-11-18_10-28-14.png (1×733 px, 122 KB)

GMikesell-WMF updated Other Assignee, added: GMikesell-WMF.Mon, Nov 18, 7:09 PM

GMikesell-WMF updated the task description. (Show Details)

GMikesell-WMF moved this task from Needs QA to In-progress on the LPL Hypothesis board.

Based on the above screencasts @GMikesell-WMF provided, I believe we can move forward and close this task as done. More specifically,

AC1 looks good, the "All collections" chip is there, as part of the "Automatic" filters group, next to "Popular".
AC2 also looks good. "Vital articles" is listed under "Collections" group. There is no other filter there, because there is still no other page collection to list, as of now.
AC3 is done, as demonstrated in the following screencasts (see below). When user clicks on "Vital articles" filter, the chip becomes active, and the filter is applied once the user clicks on the "Done" button.
AC4 can also be considered done. When user selects and applies the "Vital articles" filter, only suggestions from this collection are displayed in the page/section suggestion lists (see screencast below).
AC5 cannot really verified as part of this work. The API request (link here) does indeed return the page collection metadata properly, for each recommendation, but the task is about the UI and displaying the collection metadata is out of scope for this task. @PWaigi-WMF do you think it's ok to remove this criterion from the acceptance criteria list: being able to view the correct meta-data under each article selected.?
@PWaigi-WMF there is no design for the case when no collections are available. Moreover, this may never be the case, as we have "Vital articles" collection available in all cases. Do you think we should just remove the related acceptance criterion (view an appropriate state when there are no collections available.), or we should create a design for this case and implement it in the UI? If we go for the latter option, I believe we should capture it in a new task and unblock the current one.

Screencast:

In T368718#10336693, @ngkountas wrote:

Based on the above screencasts @GMikesell-WMF provided, I believe we can move forward and close this task as done. More specifically,

AC1 looks good, the "All collections" chip is there, as part of the "Automatic" filters group, next to "Popular".

AC2 also looks good. "Vital articles" is listed under "Collections" group. There is no other filter there, because there is still no other page collection to list, as of now.

AC3 is done, as demonstrated in the following screencasts (see below). When user clicks on "Vital articles" filter, the chip becomes active, and the filter is applied once the user clicks on the "Done" button.

AC4 can also be considered done. When user selects and applies the "Vital articles" filter, only suggestions from this collection are displayed in the page/section suggestion lists (see screencast below).

AC5 cannot really verified as part of this work. The API request (link here) does indeed return the page collection metadata properly, for each recommendation, but the task is about the UI and displaying the collection metadata is out of scope for this task. @PWaigi-WMF do you think it's ok to remove this criterion from the acceptance criteria list: being able to view the correct meta-data under each article selected.?

@PWaigi-WMF there is no design for the case when no collections are available. Moreover, this may never be the case, as we have "Vital articles" collection available in all cases. Do you think we should just remove the related acceptance criterion (view an appropriate state when there are no collections available.), or we should create a design for this case and implement it in the UI? If we go for the latter option, I believe we should capture it in a new task and unblock the current one.

Screencast:

@ngkountas Sorry if some of these were ok. I was just basing it on the acceptance criteria and the screenshots in the description. Please see below, thanks!

AC1- I failed it only because it showed "Popular" compared to the screenshot in the description which has "Popular topics". I was just basing it on the screenshots in the description. Are the screenshots in the description the latest?
AC2- ✅sounds good
AC3- I failed this because of the acceptance criteria in the description of being able to select a single chip at a time from any of the options under Collections. The only thing under Collections is "Vital articles" which my gif matches your video above. Since the criteria in the description said to select a chip under "Collections" and in the screenshots this multiple chips to choose from, I wasn't sure if I was supposed to see something similar since I only have that one option to choose from compared to the few that are in the screenshot.
AC4- ✅ sounds good
AC5 - Ok I can put ⬜ for now and wait for the response if it should be removed from the criteria.
AC6- I will do the same as AC5, pending on the response.

GMikesell-WMF updated the task description. (Show Details)Tue, Nov 19, 5:02 PM

GMikesell-WMF updated the task description. (Show Details)Tue, Nov 19, 5:59 PM

@GMikesell-WMF

I will extract the AC3 & AC5 to T379273; and change the wording.
We can skip testing AC6 entirely since Vital Articles will always be a default collection. Let me tweak the task accordingly.
For AC2, since we are currently recruiting organizers to add their campaign pages, we may not be able to test this IRL until then. We can pause this specific test scenario until we get organizers to add markers to their pages; how does that sound?

@ngkountas

AC1 is about the differences in the copy on the chip; according to the design, the 1st-page shows Popular but on the 2nd page Popular Topics

PWaigi-WMF added a subtask: T379273: Community-defined Translation Collections: Collection View.Wed, Nov 20, 10:04 AM

PWaigi-WMF updated the task description. (Show Details)Wed, Nov 20, 10:31 AM

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

[mediawiki/extensions/ContentTranslation@master] Fix label for popular filter, inside filters summary

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

gerritbot added a project: Patch-For-Review.Wed, Nov 20, 1:02 PM

ngkountas moved this task from In-progress to Needs Code Review on the LPL Hypothesis board.Wed, Nov 20, 1:03 PM

In T368718#10339050, @PWaigi-WMF wrote:

[...]

AC1 is about the differences in the copy on the chip; according to the design, the 1st-page shows Popular but on the 2nd page Popular Topics

@SGautam_WMF @Pginer-WMF is it intentional to have two different labels for the "popular" suggestion filter?

In T368718#10340377, @SBisson wrote:

In T368718#10339050, @PWaigi-WMF wrote:

[...]

AC1 is about the differences in the copy on the chip; according to the design, the 1st-page shows Popular but on the 2nd page Popular Topics

@SGautam_WMF @Pginer-WMF is it intentional to have two different labels for the "popular" suggestion filter?

Ohh that looks by mistake to me. I think we can proceed with just the "Popular". I can update the mockup.

SGautam_WMF updated the task description. (Show Details)Fri, Nov 22, 11:10 AM

Change #1093329 abandoned by Nik Gkountas: