Page MenuHomePhabricator

Create PHP and JavaScript hooks for adding menu items to overflow menu
Closed, ResolvedPublic3 Estimated Story Points

Description

DiscussionTools presents an overflow menu adjacent to topic headers on mobile. The menu will eventually be present on desktop, and we will also render it adjacent to comments.

The menu currently contains a single menu item, "Edit". In this task, we'll create a hook that allows extensions to register other menu items.

The hook should allow:

  • varying the addition of menu items dependent on the relevant title, site config and thread item
  • providing arbitrary data to embed in the menu item
  • providing a list of resource loader modules that DiscussionTools should load when rendering the menu items

We also need a JavaScript hook. When a user selects a menu item, DiscussionTools will fire a JS hook with the menu item. That will allow extensions to listen to the hook, and implement whatever follow-up actions are needed (e.g. opening a dialog).

Acceptance criteria

  • Extensions can register menu items to the overflow menu
  • Extensions can respond to JavaScript events fired when a menu item is selected

Event Timeline

Can these patches be uploaded to gerrit?

Change 942053 had a related patch set uploaded (by Eigyan; author: Eigyan):

[mediawiki/extensions/DiscussionTools@master] Implement new hook in DiscussionTools

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

Action Plan: Discussion Tools(DT) menu integration:

When DT extension is installed it provides an ellipses menu in the topic headers of a user talk page:

This task is to alter the DT codebase to have the ellipses menu be generated via a hook - allowing other extensions to add to the menu in the topic headers as well as the comment level.

Files:

extensions/DiscussionTools/includes/CommentFormatter.php
extensions/DiscussionTools/modules/mobile.js

CommentFormatter.php - is responsible for handling post processing actions like converting language level markers using various regular expressions.

public static function postprocessVisualEnhancements(string $text, Language $lang, UserIdentity $user, bool $isMobile,$output): string

The above function contains the regular expressions used to find and replace in the DOM any instance of /<!--DTELLIPSISBUTTON-->/'

With

$ellipsis = new ButtonMenuSelectWidget( [
  'classes' => [ 'ext-discussiontools-init-section-ellipsisButton' ],
  'framed' => false,
  'icon' => 'ellipsis',
  'infusable' => true,
] );

Mobile.js is responsible for infusing the ButtonMenuSelectWidget on the client side with its menu options.

Every instance of “ext-discussiontools-init-section-ellipsisButton” Is infused with:

var buttonMenu = OO.ui.infuse( this, { menu: {
     horizontalPosition: 'end',
     items: [
        new OO.ui.MenuOptionWidget( {
           data: 'edit',
           icon: 'edit',
           label: mw.msg( 'skin-view-edit' )
        } ),
        // TODO: Move this to a separate module
        new OO.ui.MenuOptionWidget( {
           data: 'report',
           icon: 'flag',
           label: mw.msg( 'reportincident-report-btn-label' ),
        } )
     ]
  }
} );

In my initial coding approach I used the resources loader to run the new DT hook and create a virtual JSON file to pass on to mobile js and provide all the menu options but this approach only solves half the problem in that it doesn’t provide the comment and header id’s or any other relevant data that may need to be optionally passed.


In my second approach I will execute the new DT hook within the appropriate regEX post processor while the ButtonMenuSelectWidget is replacing its comment marker. The MenuOptionWidget will be added server side rather than client side as it currently works. With each iteration of the comment marker replacement the ButtonMenuSelectWidget now has a MenuOptionWidget with optional data provided from the new DiscussionToolsAdditionalMenuItemsHook().

kostajh renamed this task from Implement a hook runner in discussion tools to Create PHP and JavaScript hooks for adding menu items to overflow menu.Sep 28 2023, 10:59 AM
kostajh changed the task status from Open to In Progress.
kostajh updated the task description. (Show Details)
kostajh removed a subscriber: JKieserman.

Change 961809 had a related patch set uploaded (by Kosta Harlan; author: Kosta Harlan):

[mediawiki/extensions/DiscussionTools@master] [WIP] overflow menu: Add hooks for registering and interacting with items

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

Change 942053 abandoned by Kosta Harlan:

[mediawiki/extensions/DiscussionTools@master] Implement new hook in DiscussionTools

Reason:

Next iteration in I5f2a51791f8ba7619d1399a4b93111e9bb44e172

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

Change 962057 had a related patch set uploaded (by Kosta Harlan; author: Kosta Harlan):

[mediawiki/extensions/DiscussionTools@master] [WIP] overflow menu: Allow displaying the menu next to comments

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

Change 961809 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] overflow menu: Add hooks for registering and interacting with items

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

Change 962057 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] overflow menu: Display menu next to comments on mobile

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

kostajh updated the task description. (Show Details)
kostajh removed a subscriber: eigyan.

Test wiki created on Patch demo by DJacksonA using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/1f56c1bf6d/w

Test wiki on Patch demo by DJacksonA using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/1f56c1bf6d/w/

Test wiki created on Patch demo by DJacksonA using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/d35281ea7f/w

Change 965116 had a related patch set uploaded (by Kosta Harlan; author: Kosta Harlan):

[mediawiki/extensions/DiscussionTools@master] DiscussionToolsHooks: Only show edit button in mobile

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

Change 965118 had a related patch set uploaded (by Kosta Harlan; author: Kosta Harlan):

[mediawiki/extensions/DiscussionTools@master] overflow: Factor overflow menu code into its own file

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

Change 965116 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] overflow menu: Only show edit button in mobile

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

Change 965118 merged by jenkins-bot:

[mediawiki/extensions/DiscussionTools@master] overflow menu: Factor code into its own file

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

Test wiki on Patch demo by DJacksonA using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/d35281ea7f/w/