Page MenuHomePhabricator

Create a page using codex to manage aggregate groups
Closed, ResolvedPublic8 Estimated Story Points

Assigned To
Authored By
abi_
Jan 3 2025, 1:17 PM
Referenced Files
Restricted File
Mar 3 2025, 4:08 PM
F58154251: image.png
Jan 9 2025, 5:00 PM
F58111687: image.png
Jan 3 2025, 3:09 PM
F58111682: image.png
Jan 3 2025, 3:09 PM
F58111677: image.png
Jan 3 2025, 3:09 PM
F58111678: image.png
Jan 3 2025, 3:09 PM

Description

We currently have https://translatewiki.net/wiki/Special:AggregateGroups that uses jQuery / JavaScript.

We want to migrate the Translate extension to use Codex and this is a good place to start with.

Use Codex accordion component to list the aggregate groups.

It should be possible to see the aggregate groups even without JavaScript.

Current status

https://phabricator.wikimedia.org/T382949#10511919

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
mediawiki/extensions/Translatemaster+24 -3
mediawiki/extensions/Translatemaster+16 -3
mediawiki/extensions/Translatemaster+15 -0
mediawiki/extensions/Translatemaster+45 -5
mediawiki/extensions/Translatemaster+9 -31
mediawiki/extensions/Translatemaster+40 -29
mediawiki/extensions/Translatemaster+30 -13
mediawiki/extensions/Translatemaster+52 -16
mediawiki/extensions/Translatemaster+4 -5
mediawiki/extensions/Translatemaster+329 -3
mediawiki/extensions/Translatemaster+109 -40
mediawiki/extensions/Translatemaster+85 -6
mediawiki/extensions/Translatemaster+131 -13
mediawiki/extensions/Translatemaster+4 -0
mediawiki/extensions/Translatemaster+151 -2
mediawiki/extensions/Translatemaster+43 -2
mediawiki/extensions/Translatemaster+113 -16
mediawiki/extensions/Translatemaster+198 -2
mediawiki/extensions/Translatemaster+114 -14
Show related patches Customize query in gerrit

Event Timeline

Change #1106020 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] feat: Refresh Aggregate groups special page with Codex

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

Change #1106021 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] feat: Add dialog to add/edit aggregate groups

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

Change #1106319 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] feat: Add aggregate message group in Special:AggregateGroupRefresh

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

Change #1106567 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] feat: Add edit, delete icon buttons to aggregate groups accordion

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

Change #1106568 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] feat: Allow deletion of aggregate groups on Vue.js refresh page

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

Change #1106569 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] design tweaks: Minor tweaks on refresh special aggregate groups

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

Change #1107963 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] feat: Allow editing of aggregate groups on Vue.js refresh page

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

As of: 1107963: feat: Allow editing of aggregate groups on Vue.js refresh page | https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Translate/+/1107963, the following changes have been implemented:

  1. The list of aggregate groups and the sub groups are rendered on the backend. Codex accordion is used to display these.
  2. If JavaScript is enabled, the additional functionality is available:
    • Possible to create new aggregate groups
    • Edit existing aggregate groups
    • Delete existing aggregate groups

Codex dialog boxes are used to edit or delete existing aggregate groups.

The new special page is at Special:AggregateGroupsRefresh

It is not possible to add or remove groups to aggregate groups yet.

image.png (778×1 px, 31 KB)

image.png (1×1 px, 63 KB)

image.png (1×1 px, 54 KB)

image.png (1×1 px, 40 KB)

Change #1108108 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] QueryMessageGroups Api: Use actual source language for aggregate group

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

Change #1108145 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] feat: Allow removal of message group on refresh special aggregate group

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

Tacsipacsi subscribed.

@abi_, the files in T382949#10429245 aren’t visible, could you please attach them?

Change #1108201 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] AggregateGroups: Move API requests to a service class

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

@abi_, the files in T382949#10429245 aren’t visible, could you please attach them?

Fixed.

Button to remove subgroups from aggregate groups:

image.png (630×1 px, 39 KB)

Change #1111310 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] feat: Allow addition of sub groups on refresh special aggregate group

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

Change #1106020 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] feat: Refresh Aggregate groups special page with Codex

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

Change #1106021 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] feat: Add dialog to add/edit aggregate groups

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

Change #1106319 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] feat: Add aggregate message group on Special:AggregateGroup refresh

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

Change #1106567 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] feat: Add edit, delete icon buttons to aggregate groups accordion

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

Change #1106568 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] feat: Allow deletion of aggregate groups on Vue.js refresh page

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

Change #1106569 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] design: Add some margin below the add aggregate group button

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

Change #1107963 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] feat: Allow editing of aggregate groups on Vue.js refresh page

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

The initial patches for codexification of Aggregate groups special page have been merged (Thanks @ngkountas for merging in the patches and @Tacsipacsi for the all the valuable feedback), and are now available on translatewiki.net.

  1. Old jQuery version: https://translatewiki.net/wiki/Special:AggregateGroups
  2. New codex version: https://translatewiki.net/wiki/Special:AggregateGroups?refresh=true

The goal is to achieve feature parity and keep the UI similar to before but make it less brittle. The new Codex version still works the same way without JavaScript. Users can view the aggregate groups and their sub groups without JavaScript, but modifying them requires JavaScript.

TODO:

Change #1118767 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] feat: Allow expanding/collapsing aggregate group sections

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

Change #1118774 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] feat: Display few initial suggestions in message group lookup

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

Change #1108145 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] feat: Allow removal of message group on refresh special aggregate group

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

Change #1108201 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] AggregateGroups: Move API requests to a "service" function

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

Change #1118665 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] main: aggregategroups: Use then/catch with Promises

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

Change #1111310 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] feat: Allow addition of sub groups on refresh special aggregate group

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

Change #1118665 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] maintenance: aggregategroups: Use then/catch with Promises

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

Change #1118767 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] feat: Allow expanding/collapsing aggregate group sections

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

Change #1122073 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] AggregateGroups: Use und as the default empty language code

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

Change #1108108 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Remove default 'en' language code for aggregate groups

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

Change #1123087 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] Move Utilities::getLanguageSelector to AggregateGroupsSpecialPage

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

Change #1122073 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] AggregateGroups: Use "und" as the default empty language code

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

Change #1123087 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] Move Utilities::getLanguageSelector to AggregateGroupsSpecialPage

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

Change #1124121 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] feat: Improve support for mobile on aggregate group refresh

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

Change #1124139 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] perf: Use requestAnimationFrame to expand/collapse details element

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

I'm noticing that the performance of the "Expand all / Collapse all" buttons is a bit laggy.

{F58583869}

I've submitted a patch (https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Translate/+/1124139/1) to modify the open attribute of the details element within requestAnimationFrame(). I think that might improve things a bit.

The next step would be to progressively expand the details element with something like:

function progressiveExpand() {
  const detailsElements = Array.from(document.querySelectorAll('details'));
  let index = 0;
  
  function expandNext() {
    if (index < detailsElements.length) {
      detailsElements[index].setAttribute('open', '');
      index++;
      requestAnimationFrame(expandNext);
    }
  }
  
  requestAnimationFrame(expandNext);
}

But I wouldn't bother with it unless users start complaining about it.

Change #1118774 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] feat: Display initial suggestions in lookup on aggregate group refresh

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

Change #1124121 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] feat: Improve support for mobile on aggregate group refresh

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

Change #1124139 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] perf: Use requestAnimationFrame in batches to expand/collapse details

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

Looks good on translatewiki.net. Waiting for the deployment to Meta-Wiki next week to QA and close.

Making this the default is another task?

Change #1125659 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] perf: Use requestAnimationFrame in batches to load the entity selector

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

Change #1125659 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] perf: Use requestAnimationFrame in batches to load the entity selector

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

All changes are deployed on Meta-Wiki: https://meta.wikimedia.org/wiki/Special:AggregateGroups?refresh=true

Performance on Firefox is decent. Mobile support is also acceptable.

Separate task has been created to make this the default version: T388360 and remove the old code.