AJAXify parts of group membership Dashboard UI using REST API

[boonebgorges]

Most actions on group admin (Dashboard) pages require page refreshes. This is an area where we may add AJAX functionality as a progressive enhancement, leveraging the REST API. A few specific examples:

• The group member add autocomplete/suggest. This already runs on AJAX, and I'm unsure whether we can easily convert to the REST API without discarding parts of our server-side "suggest" system, but it may be worth a try.
• The adding of a user to a group (current requires Save Changes)
• Promotion/banning/deleting etc of existing group members
• Group member pagination

It may turn out to be possible to write some of these enhancements so that they can also be ported to the front-end. Thinking here especially of the promote/demote/etc interface.

[imath]

The group member add autocomplete/suggest. This already runs on AJAX, and I'm unsure whether we can easily convert to the REST API without discarding parts of our server-side "suggest" system, but it may be worth a try

Good point. I think it worths giving it a try, it should autocomplete faster ;)

[imath]

In ​8045.group-admin.patch I've tested a quick way to manage roles using the REST endpoint for the group members within the single Group Administration screen.

As you will see I haven’t changed the UI that much but using the BP REST API is introducing some regression when used into the single group admin screen:

• it’s not possible to demote an administrator to a moderator,
• it’s not possible to unban a user to an administrator or a moderator.

I had to play with css and adapt the markup so that if there’s no users into a specific role, then the paragraph informing there a no users is inside a table row to avoid overcomplicating the JavaScript.

Here's some thoughts about the BP REST API:

• BP_REST_Group_Members_Endpoint should probably best named BP_REST_Group_Membership_Endpoint.
• the ‘join’ action should probably be into a create_item() method.
• there should probably be some equivalent methods to groups_{action}_membership_request() where {action} can be ‘send’, ‘accept’, ‘reject’, ‘delete’…
• there should be a way to demote an administrator to a moderator or unban a user to an administrator or a moderator.
• I can see high interests in being able to batch promote/demote/ban/unban from the endpoint.

This first patch is not very ambitious, but before suggesting something a bit more ambitious, I wanted to make sure I wasn’t going into a wrong direction :)

So here’s what i think it would be great to do:

• Use Backbone collection/model/views & underscore templates to replace the current UI and make it usable from the front end. (I thought about using ReastJS but I’m not sure loading this library into the front-end would be a good idea as most Nouveau JavaScript’s using Backbone)
• Use a new UI closer to the way WordPress displays the list of users into the Admin with tabs > All | Admins | Mods | Members and a unique selectbox to manage the role.
• Manage membership requests/invites into 2 other tabs > Requests | Invites,
• Add a search feature as it can be very challenging to find a user when he’s at the 10th page for example.
• Use the BP REST API to get/create/update/delete group memberships.

[espellcaste]

@imath I created an issue, ​https://github.com/buddypress/BP-REST/issues/138, in the BP REST API repo to add and keep track of those suggestions.

A question:

there should probably be some equivalent methods to groups_{action}_membership_request() where {action} can be ‘send’, ‘accept’, ‘reject’, ‘delete’…

I don't get the need for a method for each action. The idea of keeping everything like it is was exactly not to overcomplex and reuse code. What benefit do you see in adding such methods?

I'd recommend to keeping using Backbone, as you already mentioned, it is the one that Nouveau is using, so some code reuse could be done in the back and front-end, not sure, but maybe.

I'm ok with the rest of the suggestions. Just bear in mind the 5.0 timeline. :)

[imath]

Thanks for your feedbacks @espellcaste, Backbone seems the fastest move I agree.

I don't get the need for a method for each action. The idea of keeping everything like it is was exactly not to overcomplex and reuse code. What benefit do you see in adding such methods?

Well maybe I haven't found how to handle private groups membership requests using the BP REST API. Maybe you can point me into the right direction.

About the timeline, we can always extend it, can't we ?

I'm asking because I've just added a ​PR to fix an issue for the Groups endpoint and I've just found the Members endpoint seems to be using the way WordPress is getting users, meaning it's not possible to list users when you don't have the capability to do it (unlogged users or regular members). Is there a reason I'm not aware of explaining why BP_User_Query is not used to list members ?

Maybe working on some real use cases would help us to polish the API ?

[espellcaste]

@imath I added your suggestions to the API, namely:

• Class name was changed into BP_REST_Group_Membership_Endpoint.
• The join action was separated from the update endpoint and has its own create_item() method.
• Now it is possible to demote an administrator to a moderator.
• It's also possible to unban a user to an administrator or a moderator. (Technically you would be promoting a user.)

Related issue closed: ​https://github.com/buddypress/BP-REST/issues/138

Well maybe I haven't found how to handle private groups membership requests using the BP REST API. Maybe you can point me in the right direction.

Private group request is not ​implemeted at this time. This is something pending. Happy to get PR, though. :)

About the timeline, we can always extend it, can't we?

Yes! But personally, I'd like us to do something feasible for the current release timeline, and worry about doing something more complex or that would take more timer later if desired.

the Members endpoint seems to be using the way WordPress is getting users, meaning it's not possible to list users when you don't have the capability to do it (unlogged users or regular members). Is there a reason I'm not aware of explaining why BP_User_Query is not used to listing members?

At the time, that was the decision I made. But we can certainly change that and I did ​here in this commit.

Maybe working on some real use cases would help us to polish the API?

Indeed! That's exactly what I'm counting on. I tried my best to grasp how the API would be used but nothing is better than real use cases. So send your suggestions. Nothing is set on stone.

[imath]

@espellcaste Thanks a lot for your latest commits into the BP REST API. I'll update 8045.group-admin.patch asap :)

[imath]

​8045.2.group-admin.patch is refreshed to take latest Groups Membership endpoint improvements in account + displays the error message to the user if something goes wrong.

[imath]

Hi there, I personaly prefer ​8045.1.patch. It's taking in charge the group members management :

• in the WordPress single Group Admin Screen,
• on the front end in the Group Manage Screen.

It's a good real use case for the BP_REST_Group_Membership_Endpoint controler as it:

• lists group members / paginate / filter by role
• edit members group role
• ban/unban and remove members.

Here two demos of the applied patch :

• Front: ​https://cldup.com/5zJCxp2ARb.mp4
• Admin: ​https://cldup.com/RH7qcgXTa6.mp4

I still need to improve some code formatting/indentation and I'd like to include a search feature. We can discuss about the big choice I've made: the UI is only available if Nouveau is active. But I guess we can also do something wider just like we did for avatars.

Happy to read feedbacks / improvements etc..

[imath]

​8045.2.patch is adding a polyfill to wp.apiRequest in case BuddyPress 5.0 is used into WordPress < 4.9.

FYI @espellcaste I've tested the patch in WordPress 4.7 and found a notice error that is not thrown within latest version of WordPress

Could you look at it:

Notice: Undefined index: items in C:\pathtowordpress\wp-includes\rest-api.php on line 1032

This error is thrown when I'm using the filter to list members with a specific role.

[espellcaste]

@imath Based on travis, ​https://travis-ci.org/buddypress/BP-REST/builds/500147747, I don't see any problems with the unit tests with the version you are mentioning.

Also, I quite didn't understand where exactly you tested it as you said you were testing on WordPress 4.7 but the error was thrown on the latest WP version. :/ ???

Can you elaborate on that?

[imath]

As discussed during our latest ​dev chat, ​8045.3.patch is improving previous version of the patch :

• There's a new bp-api-request.js file you can use as a dependency for any script wishing to make REST API Requests. This means it can be used for #8043
• If the BP REST API is not available, the regular screens are used to manage group members (admin && front)
• It's now easier for any template pack to include the feature.

[imath]

I think Version 4 of the patch is ready to be committed!

It adds a so *useful* search form to group membership management screen, the appearance of the UI is improved, and the way the availability of the REST API is checked has been improved.

[imath]

Now it's ready!

.5.patch fixes a JavaScript error if the REST request Headers are not set, adds a feedback message when no members were found for the search terms or the requested role.

[espellcaste]

@imath I took a look now and didn't see any red flags! Nice job! =D

[imath]

Hi @espellcaste thanks a lot for your feedback, I will commit in a few minutes/hours 😊

[imath]

In 12405:

Introduce a new User Interface to manage Group members

Welcome to the first Core feature to use the BP REST API, although this API is not yet included in BuddyPress! For now this feature is completely silent but as soon as the BP REST API has landed into BuddyPress, you will be able to enjoy a Group member management greatly improved.

1. Whether you prefer to manage Group members from the single Group Administration screen into the WordPress back-end or from the Group Manage screen on the front-end, you will now experience a unique interface to promote, demote, remove or ban the Group members.
2. Very popular Group Administrators will love the new search feature to save some time to find a particular member out of their crowded Group!

On a side note, this commit also introduces the bp-api-request.js JavaScript to ease exchanges with the BP REST API.

Props espellcaste

Fixes #8045