Ticket #8045: 8045.4.patch

new file src/bp-core/bp-core-rest-api.php

@@ +1 @@
+<?php
+/**
+ * Core REST API functions.
+ *
+ * @package BuddyPress
+ * @subpackage Core
+ * @since 5.0.0
+ */
+
+// Exit if accessed directly.
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Is the BP REST plugin is active?
+ *
+ * @since 5.0.0
+ *
+ * @return boolean True if the BP REST plugin is active. False otherwise.
+ */
+function bp_rest_is_plugin_active() {
+    return (bool) has_action( 'bp_rest_api_init', 'bp_rest', 5 );
+}
+
+/**
+ * Check the availability of the BP REST API.
+ *
+ * @since 5.0.0
+ *
+ * @return boolean True if the BP REST API is available. False otherwise.
+ */
+function bp_rest_api_is_available() {
+    /**
+     * Filter here to disable the BP REST API.
+     *
+     * The BP REST API requires at least WordPress 4.7.0
+     *
+     * @since 5.0.0
+     *
+     * @param boolean $value True if the BP REST API is available. False otherwise.
+     */
+    return apply_filters( 'bp_rest_api_is_available', function_exists( 'create_initial_rest_routes' ) && bp_rest_is_plugin_active() );
+}
+
+/**
+ * Register the jQuery.ajax wrapper for BP REST API requests.
+ *
+ * @since 5.0.0
+ */
+function bp_rest_api_register_request_script() {
+    if ( ! bp_rest_api_is_available() ) {
+        return;
+    }
+
+    $dependencies = array( 'jquery' );
+
+    // The wrapper for WP REST API requests was introduced in WordPress 4.9.0
+    if ( wp_script_is( 'wp-api-request', 'registered' ) ) {
+        $dependencies = array( 'wp-api-request' );
+    }
+
+    wp_register_script(
+        'bp-api-request',
+        sprintf( '%1$sbp-core/js/bp-api-request%2$s.js', buddypress()->plugin_url, bp_core_get_minified_asset_suffix() ),
+        $dependencies,
+        bp_get_version(),
+        true
+    );
+    wp_localize_script(
+        'bp-api-request',
+        'bpApiSettings',
+        array(
+            'root'  => esc_url_raw( get_rest_url() ),
+            'nonce' => wp_create_nonce( 'wp_rest' ),
+        )
+    );
+}
+add_action( 'bp_init', 'bp_rest_api_register_request_script' );

new file src/bp-core/js/bp-api-request.js

@@ +1 @@
+/**
+ * jQuery.ajax wrapper for BP REST API requests.
+ *
+ * @since  5.0.0
+ * @output bp-core/js/bp-api-request.js
+ */
+/* global bpApiSettings */
+window.bp = window.bp || {};
+
+( function( wp, bp, $ ) {
+    // Bail if not set
+    if ( typeof bpApiSettings === 'undefined' ) {
+        return;
+    }
+
+    bp.isRestEnabled = true;
+
+    // Polyfill wp.apiRequest if WordPress < 4.9
+    bp.apiRequest = wp.apiRequest || function( options ) {
+        var url = bpApiSettings.root;
+
+        if ( options.path ) {
+            url = url + options.path.replace( /^\//, '' );
+        }
+
+        options.url = url;
+        options.beforeSend = function( xhr ) {
+            xhr.setRequestHeader( 'X-WP-Nonce', bpApiSettings.nonce );
+        };
+
+        return $.ajax( options );
+    };
+
+} )( window.wp || {}, window.bp, jQuery );

src/bp-groups/admin/css/admin-rtl.css

@@ -140 +140 @@
         padding-left: 20px;
 }
 
+#group-manage-members-ui .subnav-filters .filter.last {
+        float: left;
+}
+
+#group-manage-members-ui .subnav-filters .left-menu {
+        float: right;
+}
+
+#group-manage-members-ui .subnav-filters .group-members-paginate-button:last-child {
+        margin-left: 2em;
+}
+
+#group-manage-members-ui .subnav-filters .dashicons {
+        padding-top: 2px;
+}
+
+#group-manage-members-ui .uname-column .profile-photo {
+        margin-left: 1em;
+}
+
 @media screen and (max-width: 782px) {
 
         .bp-groups-settings-section label {

src/bp-groups/admin/css/admin.css

@@ -140 +140 @@
         padding-right: 20px;
 }
 
+#group-manage-members-ui .subnav-filters .filter.last {
+        float: right;
+}
+
+#group-manage-members-ui .subnav-filters .left-menu {
+        float: left;
+}
+
+#group-manage-members-ui .subnav-filters .group-members-paginate-button:last-child {
+        margin-right: 2em;
+}
+
+#group-manage-members-ui .subnav-filters .dashicons {
+        padding-top: 2px;
+}
+
+#group-manage-members-ui .uname-column .profile-photo {
+        margin-right: 1em;
+}
+
 @media screen and (max-width: 782px) {
 
         .bp-groups-settings-section label {

src/bp-groups/bp-groups-admin.php

@@ -891 +891 @@
  * @param BP_Groups_Group $item The BP_Groups_Group object for the current group.
  */
 function bp_groups_admin_edit_metabox_members( $item ) {
+        // Use the BP REST API if it supported.
+        if ( bp_rest_api_is_available() && bp_groups_has_manage_group_members_templates() ) {
+                wp_enqueue_script( 'bp-group-manage-members' );
+                wp_localize_script(
+                        'bp-group-manage-members',
+                        'bpGroupManageMembersSettings',
+                        bp_groups_get_group_manage_members_script_data( $item->id )
+                );
+
+                bp_get_template_part( 'common/js-templates/group-members/index' );
+
+                /**
+                 * Echo out the JavaScript variable.
+                 * This seems to be required by the autocompleter, leaving this here for now...
+                 */
+                echo '<script type="text/javascript">var group_id = "' . esc_js( $item->id ) . '";</script>';
+                return;
+        }
 
         // Pull up a list of group members, so we can separate out the types
         // We'll also keep track of group members here to place them into a

new file src/bp-groups/bp-groups-cssjs.php

@@ +1 @@
+<?php
+/**
+ * Groups component CSS/JS
+ *
+ * @package BuddyPress
+ * @subpackage GroupsScripts
+ * @since 5.0.0
+ */
+
+// Exit if accessed directly.
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Register Groups JavaScripts.
+ *
+ * @since 5.0.0
+ */
+function bp_groups_register_scripts() {
+    wp_register_script(
+        'bp-group-manage-members',
+        sprintf( '%1$sbp-groups/js/manage-members%2$s.js', buddypress()->plugin_url, bp_core_get_minified_asset_suffix() ),
+        array( 'json2', 'wp-backbone', 'bp-api-request' ),
+        bp_get_version(),
+        true
+    );
+}
+add_action( 'bp_enqueue_scripts',       'bp_groups_register_scripts', 1 );
+add_action( 'bp_admin_enqueue_scripts', 'bp_groups_register_scripts', 1 );
+
+/**
+ * Get JavaScript data for the Manage Group Members UI.
+ *
+ * @since 5.0.0
+ *
+ * @param  integer $group_id Required. The Group ID whose members has to be managed.
+ * @return array   The JavaScript data.
+ */
+function bp_groups_get_group_manage_members_script_data( $group_id = 0 ) {
+        if ( ! $group_id ) {
+                return array();
+        } else {
+                $group_id = (int) $group_id;
+        }
+
+        $path = sprintf( '/%1$s/%2$s/%3$s/%4$s/members?exclude_admins=false',
+                bp_rest_namespace(),
+                bp_rest_version(),
+                buddypress()->groups->id,
+                $group_id
+        );
+
+        $preloaded_members = array();
+        if ( function_exists( 'rest_preload_api_request' ) ) {
+                $preloaded_members = rest_preload_api_request( '', $path );
+        }
+
+        return array(
+                'path'      => remove_query_arg( 'exclude_admins', $path ),
+                'preloaded' => reset( $preloaded_members ),
+                'roles'     => bp_groups_get_group_roles(),
+        );
+}

src/bp-groups/bp-groups-functions.php

@@ -1111 +1111 @@
 
 /** Group Member Status Checks ************************************************/
 
+/**
+ * Get the Group roles.
+ *
+ * @since 5.0.0
+ *
+ * @return array The list of Group role objects.
+ */
+function bp_groups_get_group_roles() {
+        return array(
+                'admin' => (object) array(
+                        'id'           => 'admin',
+                        'name'         => __( 'Administrator', 'buddypress' ),
+                        'is_admin'     => true,
+                        'is_banned'    => false,
+                        'is_confirmed' => true,
+                        'is_mod'       => false,
+                ),
+                'mod' => (object) array(
+                        'id'           => 'mod',
+                        'name'         => __( 'Moderator', 'buddypress' ),
+                        'is_admin'     => false,
+                        'is_banned'    => false,
+                        'is_confirmed' => true,
+                        'is_mod'       => true,
+                ),
+                'member' => (object) array(
+                        'id'           => 'member',
+                        'name'         => __( 'Member', 'buddypress' ),
+                        'is_admin'     => false,
+                        'is_banned'    => false,
+                        'is_confirmed' => true,
+                        'is_mod'       => false,
+                ),
+                'banned' => (object) array(
+                        'id'           => 'banned',
+                        'name'         => __( 'Banned', 'buddypress' ),
+                        'is_admin'     => false,
+                        'is_banned'    => true,
+                        'is_confirmed' => true,
+                        'is_mod'       => false,
+                ),
+        );
+}
+
 /**
  * Check whether a user is an admin of a given group.
  *

src/bp-groups/bp-groups-template.php

@@ -6217 +6217 @@
          */
         return apply_filters( 'bp_groups_get_profile_stats', $r['output'], $r );
 }
+
+/**
+ * Check if the active template pack includes the Group Membership management UI templates.
+ *
+ * @since 5.0.0
+ *
+ * @return boolean True if the active template pack includes the Group Membership management UI templates.
+ *                 False otherwise.
+ */
+function bp_groups_has_manage_group_members_templates() {
+        return file_exists( bp_locate_template( 'common/js-templates/group-members/index.php' ) );
+}

src/bp-groups/classes/class-bp-groups-component.php

@@ -128 +128 @@
                         'template',
                         'adminbar',
                         'functions',
-                        'notifications'
+                        'notifications',
+                        'cssjs',
                 );
 
                 // Conditional includes.

new file src/bp-groups/js/manage-members.js

@@ +1 @@
+/* global bpGroupManageMembersSettings, _, Backbone */
+/* @version 5.0.0 */
+
+( function( wp, bp, $ ) {
+
+        // Bail if not set
+        if ( typeof bpGroupManageMembersSettings === 'undefined' || ! bp.isRestEnabled ) {
+                return;
+        }
+
+        // Copy useful WP Objects into BP.
+        _.extend( bp, _.pick( wp, 'Backbone', 'template' ) );
+
+        bp.Models      = bp.Models || {};
+        bp.Collections = bp.Collections || {};
+        bp.Views       = bp.Views || {};
+
+        /**
+         * Model for the Member of the displayed group.
+         */
+        bp.Models.groupMember = Backbone.Model.extend( {
+                defaults: {
+                        id: 0,
+                        name: '',
+                        avatar_urls : {},
+                        is_admin: false,
+                        is_banned: false,
+                        is_confirmed: false,
+                        is_mod: false,
+                        link: ''
+                },
+                options : {
+                        path: bpGroupManageMembersSettings.path,
+                        type: 'POST',
+                        data: {},
+                        dataType: 'json'
+                },
+
+                initialize: function() {
+                        // Make sure to reset data & path on model's sync.
+                        this.on( 'sync', this.resetRequestOptions, this );
+                },
+
+                resetRequestOptions: function() {
+                        this.options.data = {};
+                        this.options.path = bpGroupManageMembersSettings.path;
+                },
+
+                sync: function( method, model, options ) {
+                        options  = options || {};
+                        options.context = this;
+                        var data = options.data || {};
+                        this.options.path = this.options.path.concat( '/' + model.get( 'id' ) );
+
+                        _.extend( options, this.options );
+                        _.extend( options.data, data );
+
+                        if ( 'delete' === method || 'update' === method ) {
+                                if ( 'delete' === method ) {
+                                        options.headers = { 'X-HTTP-Method-Override': 'DELETE' };
+                                } else {
+                                        options.headers = { 'X-HTTP-Method-Override': 'PUT' };
+                                }
+
+                                return bp.apiRequest( options );
+                        }
+                },
+
+                parse: function( response ) {
+                        if ( _.isArray( response ) ) {
+                                response = _.first( response );
+                        }
+
+                        return response;
+                }
+        } );
+
+        /**
+         * Collection for the Members of the displayed group.
+         */
+        bp.Collections.groupMembers = Backbone.Collection.extend( {
+                model: bp.Models.groupMember,
+                options : {
+                        path: bpGroupManageMembersSettings.path,
+                        type: 'GET',
+                        data: {},
+                        dataType: 'json'
+                },
+
+                initialize: function() {
+                        // Make sure to reset data on collection's reset.
+                        this.on( 'reset', function() {
+                                this.options.data = {};
+                        }, this );
+                },
+
+                sync: function( method, collection, options ) {
+                        options  = options || {};
+                        options.context = this;
+                        var data = options.data || {};
+
+                        _.extend( options, this.options );
+                        _.extend( options.data, data );
+
+                        if ( 'read' === method ) {
+                                var self = this, success = options.success;
+                                options.success = function( data, textStatus, request ) {
+                                        if ( ! _.isUndefined( request ) ) {
+                                                self.totalPages        = parseInt( request.getResponseHeader( 'X-WP-TotalPages' ), 10 );
+                                                self.totalGroupMembers = parseInt( request.getResponseHeader( 'X-WP-Total' ), 10 );
+                                        }
+
+                                        self.currentPage = options.data.page || 1;
+
+                                        if ( success ) {
+                                                return success.apply( this, arguments );
+                                        }
+                                };
+
+                                return bp.apiRequest( options );
+                        }
+                }
+        } );
+
+        // Extend wp.Backbone.View with .prepare().
+        bp.View = bp.View || bp.Backbone.View.extend( {
+                prepare: function() {
+                        if ( ! _.isUndefined( this.model ) && _.isFunction( this.model.toJSON ) ) {
+                                return this.model.toJSON();
+                        } else {
+                                return {};
+                        }
+                }
+        } );
+
+        bp.Views.GroupMemberUpdatingInfo = bp.View.extend( {
+                tagName: 'p',
+                template : bp.template( 'bp-manage-members-updating' ),
+
+                initialize: function() {
+                        this.model = new Backbone.Model( {
+                                type: this.options.value
+                        } );
+                }
+        } );
+
+        bp.Views.GroupMemberErrorInfo = bp.View.extend( {
+                tagName: 'p',
+                template : bp.template( 'bp-manage-members-error' ),
+
+                initialize: function() {
+                        this.model = new Backbone.Model( {
+                                message: this.options.value
+                        } );
+                }
+        } );
+
+        bp.Views.GroupsMembersLabel = bp.Views.GroupMemberUpdatingInfo.extend( {
+                tagName: 'label',
+                template:  bp.template( 'bp-manage-members-label' )
+        } );
+
+        bp.Views.GroupRolesDropDown = bp.View.extend( {
+                tagName: 'select',
+                filters: _.extend( { all: { name: 'All members' } }, bpGroupManageMembersSettings.roles ),
+
+                events: {
+                        change: 'change'
+                },
+
+                initialize: function() {
+                        if ( this.options.omits ) {
+                                this.filters = _.omit( this.filters, this.options.omits );
+                        }
+
+                        // Build `<option>` elements.
+                        this.$el.html( _.chain( this.filters ).map( function( filter, value ) {
+                                var optionOutput = $( '<option></option>' ).val( value ).html( filter.name )[0];
+
+                                if ( this.options.currentRole && value === this.options.currentRole ) {
+                                        return {
+                                                el: $( optionOutput ).prop( 'selected', true )
+                                        };
+                                } else {
+                                        return {
+                                                el: optionOutput
+                                        };
+                                }
+                        }, this ).pluck( 'el' ).value() );
+                },
+
+                change: function( event ) {
+                        var role =  $( event.target ).val(), queryArgs = { roles: [ role ] };
+
+                        if ( ! this.collection ) {
+                                return;
+                        }
+
+                        if ( 'all' === role ) {
+                                // Unset the current role.
+                                this.collection.currentRole = '';
+
+                                queryArgs = { 'exclude_admins': false };
+                        } else {
+                                // Set the current role.
+                                this.collection.currentRole = role;
+                        }
+
+                        // Reset the current page.
+                        this.collection.currentPage = 1;
+
+                        queryArgs.page = 1;
+                        $( '#manage-members-search' ).val( '' );
+
+                        this.collection.fetch( {
+                                data: queryArgs,
+                                reset: true
+                        } );
+                }
+        } );
+
+        bp.Views.GroupMembersSearch = bp.View.extend( {
+                className: 'bp-dir-search-form',
+                tagName: 'form',
+                template:  bp.template( 'bp-manage-members-search' ),
+
+                events: {
+                        'click #manage-members-search-submit' : 'searchMember'
+                },
+
+                searchMember: function( event ) {
+                        event.preventDefault();
+
+                        var searchTerms = $( '#manage-members-search' ).val(),
+                            queryArgs = _.extend( this.collection.options.data, { search: searchTerms, page: 1 } );
+
+                        // Reset the current page.
+                        this.collection.currentPage = 1;
+
+                        if ( ! this.collection.currentRole ) {
+                                queryArgs.exclude_admins = false;
+                        } else {
+                                queryArgs.roles = [ this.collection.currentRole ];
+                        }
+
+                        this.collection.fetch( {
+                                data: queryArgs,
+                                reset: true
+                        } );
+                }
+        } );
+
+        bp.Views.GroupsMembersPagination = bp.View.extend( {
+                className: 'bp-pagination',
+                template:  bp.template( 'bp-manage-members-paginate' ),
+
+                events: {
+                        'click .group-members-paginate-button' : 'queryPage'
+                },
+
+                initialize: function() {
+                        this.collection.on( 'reset', this.setPagination, this );
+                },
+
+                setPagination: function( collection ) {
+                        var attributes = _.pick( collection, [ 'currentPage', 'totalGroupMembers', 'totalPages' ] );
+
+                        if ( attributes.totalPages > 1 ) {
+                                attributes.nextPage = attributes.currentPage + 1;
+                                attributes.prevPage = attributes.currentPage - 1;
+                        }
+
+                        this.model = new Backbone.Model( attributes );
+                        this.render();
+                },
+
+                queryPage: function( event ) {
+                        event.preventDefault();
+
+                        var page = $( event.currentTarget ).data( 'page' ),
+                            searchTerms = $( '#manage-members-search' ).val(),
+                            queryArgs = _.extend( this.collection.options.data, { search: searchTerms, page: page } );
+
+                        if ( ! this.collection.currentRole ) {
+                                queryArgs.exclude_admins = false;
+                        } else {
+                                queryArgs.roles = [ this.collection.currentRole ];
+                        }
+
+                        this.collection.fetch( {
+                                data: queryArgs,
+                                reset: true
+                        } );
+                }
+        } );
+
+        bp.Views.GroupMembersListRow = bp.View.extend( {
+                tagName: 'tr',
+                template : bp.template( 'bp-manage-members-row' ),
+
+                events: {
+                        'click .group-member-actions a' : 'doMemberAction',
+                        'change .group-member-edit select' : 'editMemberRole'
+                },
+
+                initialize: function() {
+                        var roleProps = [ 'is_admin', 'is_banned', 'is_confirmed', 'is_mod' ],
+                                self = this;
+
+                        _.each( bpGroupManageMembersSettings.roles, function( props ) {
+                                if ( _.isMatch( self.model.attributes,  _.pick( props, roleProps ) ) ) {
+                                        self.model.set( 'role', _.pick( props, ['id', 'name'] ), { silent: true } );
+                                }
+                        } );
+
+                        this.model.collection.on( 'reset', this.clearRow, this );
+                },
+
+                clearRow: function() {
+                        this.views.view.remove();
+                },
+
+                renderEditForm: function() {
+                        var userId = this.model.get( 'id' );
+
+                        this.render();
+
+                        this.views.set( '#edit-group-member-' + userId, [
+                                new bp.Views.GroupsMembersLabel( { value: userId, attributes: { 'for': 'group-member' + userId + '-role' } } ),
+                                new bp.Views.GroupRolesDropDown( { id: 'group-member' + userId + '-role', omits: [ 'all', 'banned' ], currentRole: this.model.get( 'role' ).id } ).render()
+                        ] );
+                },
+
+                resetRow: function() {
+                        this.model.set( 'editing', false );
+
+                        return this.render();
+                },
+
+                getRoleObject: function( roleId ) {
+                        var roles = bpGroupManageMembersSettings.roles;
+
+                        if ( _.isUndefined( roles[ roleId ] ) ) {
+                                return {};
+                        }
+
+                        return _.extend(
+                                { role: _.pick( roles[ roleId ], ['id', 'name'] ) },
+                                _.pick( roles[ roleId ], [ 'is_admin', 'is_banned', 'is_confirmed', 'is_mod' ] )
+                        );
+                },
+
+                doMemberAction: function( event ) {
+                        event.preventDefault();
+
+                        var action = $( event.target ).data( 'action' ), self = this;
+
+                        if ( 'edit' === action ) {
+                                this.model.set( 'editing', true );
+                                return this.renderEditForm();
+
+                        } else if ( 'abort' === action ) {
+                                return this.resetRow();
+
+                        } else if ( 'ban' === action || 'unban' === action ) {
+                                var newRole = ( 'ban' === action ) ? 'banned' : 'member', roleObject = this.getRoleObject( newRole );
+
+                                if ( ! roleObject ) {
+                                        return this.resetRow();
+                                } else {
+                                        this.model.set( 'managingBan', true );
+                                        this.render();
+                                }
+
+                                // Display user feedback.
+                                this.views.set( '#edit-group-member-' + this.model.get( 'id' ), new bp.Views.GroupMemberUpdatingInfo( { value: action } ).render() );
+
+                                // Update Group member's role.
+                                this.model.save( roleObject, {
+                                        wait: true,
+                                        data: { action: action },
+                                        success: function( model) {
+                                                self.model.collection.remove( model );
+                                                return self.clearRow();
+                                        },
+                                        error: function( model, response ) {
+                                                self.views.set( '#edit-group-member-' + model.get( 'id' ), new bp.Views.GroupMemberErrorInfo( { value: response.responseJSON.message } ).render() );
+
+                                                // Make sure to reset request options.
+                                                model.resetRequestOptions();
+                                                model.set( 'managingBan', false );
+                                        }
+                                } );
+                        } else if ( 'remove' === action ) {
+                                this.model.set( 'removing', true );
+                                this.render();
+
+                                // Display user feedback.
+                                this.views.set( '#edit-group-member-' + this.model.get( 'id' ), new bp.Views.GroupMemberUpdatingInfo( { value: action } ).render() );
+
+                                // Destroy the membership model.
+                                this.model.destroy( {
+                                        wait: true,
+                                        data: {},
+                                        success: function() {
+                                                return self.clearRow();
+                                        },
+                                        error: function( model, response ) {
+                                                self.views.set( '#edit-group-member-' + model.get( 'id' ), new bp.Views.GroupMemberErrorInfo( { value: response.responseJSON.message } ).render() );
+
+                                                // Make sure to reset request options.
+                                                model.resetRequestOptions();
+                                                model.set( 'removing', false );
+                                        }
+                                } );
+                        }
+                },
+
+                editMemberRole: function( event ) {
+                        var newRole = $( event.target ).val(), roleObject = this.getRoleObject( newRole ),
+                            currentRole = this.model.get( 'role').id, roleAction = 'promote', self = this;
+
+                        if ( newRole === this.model.get( 'role' ).id || ! roleObject ) {
+                                return this.resetRow();
+                        }
+
+                        this.views.set( '#edit-group-member-' + this.model.get( 'id' ), new bp.Views.GroupMemberUpdatingInfo().render() );
+
+                        if ( 'admin' === currentRole || ( 'mod' === currentRole && 'member' === newRole ) ) {
+                                roleAction = 'demote';
+                        }
+
+                        // Update Group member's role
+                        this.model.save( roleObject, {
+                                wait: true,
+                                data: {
+                                        action: roleAction,
+                                        role: newRole
+                                },
+                                success: function( model ) {
+                                        if ( self.model.collection.currentRole && newRole !== self.model.collection.currentRole ) {
+                                                self.model.collection.remove( model );
+                                                return self.clearRow();
+                                        } else {
+                                                return self.resetRow();
+                                        }
+                                },
+                                error: function( model, response ) {
+                                        self.views.set( '#edit-group-member-' + model.get( 'id' ), new bp.Views.GroupMemberErrorInfo( { value: response.responseJSON.message } ).render() );
+
+                                        // Make sure to reset request options.
+                                        model.resetRequestOptions();
+                                        model.set( 'editing', false );
+                                }
+                        } );
+                }
+        } );
+
+        bp.Views.GroupMembersListHeader = bp.View.extend( {
+                tagName: 'thead',
+                template : bp.template( 'bp-manage-members-header' )
+        } );
+
+        bp.Views.GroupMembersListTable = bp.View.extend( {
+                tagName: 'tbody',
+
+                initialize: function() {
+                        var preloaded = bpGroupManageMembersSettings.preloaded || {},
+                            models = [];
+
+                        this.collection.on( 'reset', this.addListTableRows, this );
+
+                        if ( preloaded.body && preloaded.body.length > 0 ) {
+                                _.each( preloaded.body, function( member ) {
+                                        models.push( new bp.Models.groupMember( member ) );
+                                } );
+
+                                this.collection.currentPage = 1;
+                                if ( preloaded.headers && preloaded.headers[ 'X-WP-TotalPages' ] ) {
+                                        this.collection.totalPages = parseInt( preloaded.headers[ 'X-WP-TotalPages' ], 10 );
+                                }
+
+                                if ( preloaded.headers && preloaded.headers[ 'X-WP-Total' ] ) {
+                                        this.collection.totalGroupMembers = parseInt( preloaded.headers[ 'X-WP-Total' ], 10 );
+                                }
+
+                                this.collection.reset( models );
+                        } else {
+                                this.collection.fetch( {
+                                        data: { 'exclude_admins': false },
+                                        reset: true
+                                } );
+                        }
+                },
+
+                addListTableRows: function( collection ) {
+                        _.each( collection.models, function( member ) {
+                                this.views.add( new bp.Views.GroupMembersListRow( { model: member } ) );
+                        }, this );
+                }
+        } );
+
+        bp.Views.GroupMembersUI = bp.View.extend( {
+                className: 'group-members',
+
+                initialize: function() {
+                        var groupMembers = new bp.Collections.groupMembers();
+
+                        // Set filters.
+                        this.views.set( '#group-roles-filter', [
+                                new bp.Views.GroupsMembersLabel( { attributes: { 'for': 'group-members-role-filter' } } ),
+                                new bp.Views.GroupRolesDropDown( { id: 'group-members-role-filter', collection: groupMembers } )
+                        ] );
+
+                        // Set the search form.
+                        this.views.set( '#group-members-search-form', new bp.Views.GroupMembersSearch( { id: 'group-members-search', collection: groupMembers } ) );
+
+                        // Set Paginate links.
+                        this.views.set( '#group-members-pagination', new bp.Views.GroupsMembersPagination( { collection: groupMembers } ) );
+
+                        // Set Group members list header and body.
+                        this.views.set( '#group-members-list-table', [
+                                new bp.Views.GroupMembersListHeader(),
+                                new bp.Views.GroupMembersListTable( { collection: groupMembers } )
+                        ] );
+                }
+        } );
+
+        // Inject the UI to manage Group Members into the DOM.
+        bp.manageGroupMembersUI = new bp.Views.GroupMembersUI( { el:'#group-manage-members-ui' } ).render();
+
+} )( window.wp || {}, window.bp || {}, jQuery );

new file src/bp-templates/bp-nouveau/buddypress/common/js-templates/group-members/index.php

@@ +1 @@
+<?php
+/**
+ * BP Nouveau single group's membership management main template.
+ *
+ * This template is used to inject the BuddyPress Backbone views
+ * dealing with a group's membership management.
+ *
+ * @since 5.0.0
+ * @version 5.0.0
+ */
+?>
+
+<?php
+/**
+ * Placeholder to inject elements of the UI
+ * to manage Group members.
+ *
+ * @since 5.0.0
+ * @version 5.0.0
+ */
+?>
+<div id="group-manage-members-ui" class="standard-form">
+        <ul class="subnav-filters">
+                <li id="group-roles-filter" class="last filter"><?php // Placeholder for the Group Role Tabs ?></li>
+                <li id="group-members-pagination" class="left-menu"><?php // Placeholder for paginate links ?></li>
+                <li id="group-members-search-form" class="bp-search"><?php // Placeholder for search form ?></li>
+        </ul>
+        <table id="group-members-list-table" class="<?php echo is_admin() ? 'widefat bp-group-members' : 'bp-list'; ?>"><?php // Placeholder to list members ?></table>
+</div>
+
+<script type="text/html" id="tmpl-bp-manage-members-updating">
+        <# if ( ! data.type ) { #>
+                <small><?php echo esc_html_x( 'Updating role... Please wait.', 'group manage members update feedback', 'buddypress' ); ?></small>
+        <# } else if ( 'ban' === data.type ) { #>
+                <small><?php echo esc_html_x( 'Banning member... Please wait.', 'group manage members ban feedback', 'buddypress' ); ?></small>
+        <# } else if ( 'unban' === data.type ) { #>
+                <small><?php echo esc_html_x( 'Unbanning member... Please wait.', 'group manage members unban feedback', 'buddypress' ); ?></small>
+        <# } else if ( 'remove' === data.type ) { #>
+                <small><?php echo esc_html_x( 'Removing member... Please wait.', 'group manage members remove feedback', 'buddypress' ); ?></small>
+        <# } #>
+</script>
+
+<script type="text/html" id="tmpl-bp-manage-members-error">
+   <small>{{data.message}}</small>
+</script>
+
+<script type="text/html" id="tmpl-bp-manage-members-header">
+        <tr>
+                <th><?php echo esc_html_x( 'Group Members', 'group manage members table header', 'buddypress' ); ?></th>
+                <th><?php echo esc_html_x( 'Roles', 'group manage members table header', 'buddypress' ); ?></th>
+        </tr>
+</script>
+
+<script type="text/html" id="tmpl-bp-manage-members-label">
+        <# if ( data.type && 'filter' !== data.type ) { #>
+                <?php echo esc_html_x( 'Change role for:', 'group manage members row edit', 'buddypress' ); ?>
+        <# } else { #>
+                <?php echo esc_html_x( 'Filter:', 'group manage members roles filter', 'buddypress' ); ?></small>
+        <# } #>
+</script>
+
+<script type="text/html" id="tmpl-bp-manage-members-row">
+        <td class="uname-column">
+                <div class="group-member">
+                        <a href="{{{data.link}}}">
+                                <img src="{{{data.avatar_urls.thumb}}}" alt="{{data.name}}" class="avatar profile-photo alignleft"/>
+                                {{data.name}}
+                        </a>
+                </div>
+                <div class="group-member-actions row-actions">
+                        <# if ( ! data.editing && ! data.is_banned ) { #>
+                                <span class="edit"><a href="#edit-role" data-action="edit"><?php echo esc_html_x( 'Edit', 'group member edit role link', 'buddypress' ); ?></a> | </span>
+                        <# } #>
+                        <# if ( data.editing ) { #>
+                                <span><a href="#edit-role-abort" data-action="abort"><?php echo esc_html_x( 'Stop editing', 'group member edit role abort link', 'buddypress' ); ?></a> | </span>
+                        <# } #>
+                        <# if ( ! data.is_banned ) { #>
+                                <span class="spam"><a href="#ban" class="submitdelete" data-action="ban"><?php echo esc_html_x( 'Ban', 'group member ban link', 'buddypress' ); ?></a> | </span>
+                        <# } else { #>
+                                <span class="ham"><a href="#unban" data-action="unban"><?php echo esc_html_x( 'Unban', 'group member unban link', 'buddypress' ); ?></a> | </span>
+                        <# } #>
+                        <span class="delete"><a href="#remove" class="submitdelete" data-action="remove"><?php echo esc_html_x( 'Remove', 'group member ban link', 'buddypress' ); ?></a></span>
+                </div>
+        </td>
+        <td class="urole-column">
+                <# if ( ! data.editing  && ! data.managingBan && ! data.removing ) { #>
+                        {{data.role.name}}
+                <# } else { #>
+                        <div id="edit-group-member-{{data.id}}" class="group-member-edit"><?php // Placeholder for the Edit Role Dropdown. ;?></div>
+                <# } #>
+        </td>
+</script>
+
+<script type="text/html" id="tmpl-bp-manage-members-search">
+        <?php
+                $button_classes = array( 'bp-button', 'bp-search' );
+                $screen_reader_class = 'bp-screen-reader-text';
+
+                if ( is_admin() ) {
+                        $button_classes[]    = 'button-secondary';
+                        $screen_reader_class = 'screen-reader-text';
+                }
+        ?>
+        <label for="manage-members-search" class="<?php echo sanitize_html_class( $screen_reader_class ); ?>">
+                <?php esc_html_e( 'Search Members', 'buddypress' ); ?>
+        </label>
+        <input type="search" id="manage-members-search" class="small" placeholder="<?php echo esc_attr_x( 'Search', 'search placeholder text', 'buddypress' ); ?>"/>
+        <button type="submit" id="manage-members-search-submit" class="<?php echo join( ' ', array_map( 'sanitize_html_class', $button_classes ) ); ?>">
+                <span class="dashicons dashicons-search" aria-hidden="true"></span>
+                <span class="<?php echo sanitize_html_class( $screen_reader_class ); ?>"><?php echo esc_html_x( 'Search', 'button', 'buddypress' ); ?></span>
+        </button>
+</script>
+
+<script type="text/html" id="tmpl-bp-manage-members-paginate">
+        <?php
+                $button_classes = array( 'group-members-paginate-button' );
+                $screen_reader_class = 'bp-screen-reader-text';
+
+                if ( is_admin() ) {
+                        $button_classes[]    = 'button-secondary';
+                        $screen_reader_class = 'screen-reader-text';
+                }
+        ?>
+        <# if ( 1 !== data.currentPage && data.totalPages ) { #>
+                <button class="<?php echo join( ' ', array_map( 'sanitize_html_class', $button_classes ) ); ?>" data-page="{{data.prevPage}}">
+                        <span class="dashicons dashicons-arrow-left"></span>
+                        <span class="<?php echo sanitize_html_class( $screen_reader_class ); ?>"><?php echo esc_html_x( 'Prev.', 'link', 'buddypress' ); ?></span>
+                </button>
+        <# } #>
+        <# if ( data.totalPages !== data.currentPage ) { #>
+                <button class="<?php echo join( ' ', array_map( 'sanitize_html_class', $button_classes ) ); ?>" data-page="{{data.nextPage}}">
+                        <span class="<?php echo sanitize_html_class( $screen_reader_class ); ?>"><?php echo esc_html_x( 'Next', 'link', 'buddypress' ); ?></span>
+                        <span class="dashicons dashicons-arrow-right"></span>
+                </button>
+        <# } #>
+</script>

src/bp-templates/bp-nouveau/buddypress/groups/single/admin/manage-members.php

@@ -3 +3 @@
  * BP Nouveau Group's manage members template.
  *
  * @since 3.0.0
- * @version 3.1.0
+ * @version 5.0.0
  */
 ?>
 
@@ -11 +11 @@
         <?php esc_html_e( 'Manage Group Members', 'buddypress' ); ?>
 </h2>
 
-        <p class="bp-help-text"><?php esc_html_e( 'Manage your group members; promote to moderators, admins or demote or ban.', 'buddypress' ); ?></p>
+<p class="bp-help-text"><?php esc_html_e( 'Manage your group members; promote to moderators, admins or demote or ban.', 'buddypress' ); ?></p>
+
+<?php if ( bp_rest_api_is_available() ) :
+        /**
+         * Get the templates to manage Group Members using the BP REST API.
+         *
+         * @since 5.0.0
+         */
+        bp_get_template_part( 'common/js-templates/group-members/index' );
+
+else : ?>
 
         <dl class="groups-manage-members-list">
 
@@ -119 +129 @@
 
                 bp_nouveau_user_feedback( 'group-manage-members-none' );
 
-        endif; ?>
+        endif;
 
+endif;

src/bp-templates/bp-nouveau/common-styles/_bp_groups_management.scss

@@ -139 +139 @@
         }
 
 } //close .groups-manage-members-list
+
+#group-manage-members-ui {
+
+        #group-members-search-form {
+
+                button[type="submit"] {
+                        float: right;
+                        font-size: inherit;
+                        font-weight: 400;
+                        line-height: 1.5;
+                        text-align: center;
+                        text-transform: none;
+
+                        span {
+                                font-family: dashicons;
+
+                                @include font-size(18);
+                                line-height: 1.6;
+                        }
+                }
+        }
+
+        #group-members-pagination {
+
+                button:last-child {
+                        margin-right: 2em;
+                }
+        }
+}

src/bp-templates/bp-nouveau/common-styles/_bp_search.scss

@@ -8 +8 @@
 
         form.bp-dir-search-form,
         form.bp-messages-search-form,
-        form[data-bp-search].bp-invites-search-form {
+        form[data-bp-search].bp-invites-search-form,
+        form#group-members-search {
                 border: 1px solid $bp-border-color;
 
                 width: 100%;
@@ -68 +69 @@
 
         } // close form
 
+        form#group-members-search {
+
+                &:hover {
+                        border: 1px solid darken($bp-border-color, 10%);
+                        box-shadow: inset 0 0 3px #eee;
+                }
+        }
+
         // this block needs to be moved really.
         ul.filters {
 

src/bp-templates/bp-nouveau/css/buddypress-rtl.css

@@ -2559 +2559 @@
         }
 }
 
+#group-manage-members-ui #group-members-search-form button[type="submit"] {
+        float: left;
+        font-size: inherit;
+        font-weight: 400;
+        line-height: 1.5;
+        text-align: center;
+        text-transform: none;
+}
+
+#group-manage-members-ui #group-members-search-form button[type="submit"] span {
+        font-family: dashicons;
+        font-size: 18px;
+        line-height: 1.6;
+}
+
+#group-manage-members-ui #group-members-pagination button:last-child {
+        margin-left: 2em;
+}
+
 /**
 *-----------------------------------------
 * @subsection 5.2.1.2 - Group Members List
@@ -3691 +3710 @@
 
 .buddypress-wrap form.bp-dir-search-form,
 .buddypress-wrap form.bp-messages-search-form,
-.buddypress-wrap form[data-bp-search].bp-invites-search-form {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form,
+.buddypress-wrap form#group-members-search {
         border: 1px solid #eee;
         width: 100%;
 }
 
 .buddypress-wrap form.bp-dir-search-form label,
 .buddypress-wrap form.bp-messages-search-form label,
-.buddypress-wrap form[data-bp-search].bp-invites-search-form label {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form label,
+.buddypress-wrap form#group-members-search label {
         margin: 0;
 }
 
@@ -3710 +3731 @@
 .buddypress-wrap form.bp-messages-search-form button[type="submit"],
 .buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"],
 .buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="text"],
-.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"] {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"],
+.buddypress-wrap form#group-members-search input[type="search"],
+.buddypress-wrap form#group-members-search input[type="text"],
+.buddypress-wrap form#group-members-search button[type="submit"] {
         background: none;
         border: 0;
         border-radius: 0;
@@ -3722 +3746 @@
 .buddypress-wrap form.bp-messages-search-form input[type="search"],
 .buddypress-wrap form.bp-messages-search-form input[type="text"],
 .buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"],
-.buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="text"] {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="text"],
+.buddypress-wrap form#group-members-search input[type="search"],
+.buddypress-wrap form#group-members-search input[type="text"] {
         float: right;
         line-height: 1.5;
         padding: 3px 10px;
@@ -3731 +3757 @@
 
 .buddypress-wrap form.bp-dir-search-form button[type="submit"],
 .buddypress-wrap form.bp-messages-search-form button[type="submit"],
-.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"] {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"],
+.buddypress-wrap form#group-members-search button[type="submit"] {
         float: left;
         font-size: inherit;
         font-weight: 400;
@@ -3744 +3771 @@
 
 .buddypress-wrap form.bp-dir-search-form button[type="submit"] span,
 .buddypress-wrap form.bp-messages-search-form button[type="submit"] span,
-.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"] span {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"] span,
+.buddypress-wrap form#group-members-search button[type="submit"] span {
         font-family: dashicons;
         font-size: 18px;
         line-height: 1.6;
@@ -3752 +3780 @@
 
 .buddypress-wrap form.bp-dir-search-form button[type="submit"].bp-show,
 .buddypress-wrap form.bp-messages-search-form button[type="submit"].bp-show,
-.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"].bp-show {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"].bp-show,
+.buddypress-wrap form#group-members-search button[type="submit"].bp-show {
         height: auto;
         right: 0;
         overflow: visible;
@@ -3762 +3791 @@
 
 .buddypress-wrap form.bp-dir-search-form input[type="search"]::-webkit-search-cancel-button,
 .buddypress-wrap form.bp-messages-search-form input[type="search"]::-webkit-search-cancel-button,
-.buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"]::-webkit-search-cancel-button {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"]::-webkit-search-cancel-button,
+.buddypress-wrap form#group-members-search input[type="search"]::-webkit-search-cancel-button {
         -webkit-appearance: searchfield-cancel-button;
 }
 
@@ -3771 +3801 @@
 .buddypress-wrap form.bp-messages-search-form input[type="search"]::-webkit-search-results-button,
 .buddypress-wrap form.bp-messages-search-form input[type="search"]::-webkit-search-results-decoration,
 .buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"]::-webkit-search-results-button,
-.buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"]::-webkit-search-results-decoration {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"]::-webkit-search-results-decoration,
+.buddypress-wrap form#group-members-search input[type="search"]::-webkit-search-results-button,
+.buddypress-wrap form#group-members-search input[type="search"]::-webkit-search-results-decoration {
         display: none;
 }
 
+.buddypress-wrap form#group-members-search:hover {
+        border: 1px solid #d5d4d4;
+        box-shadow: inset 0 0 3px #eee;
+}
+
 .buddypress-wrap ul.filters li form label input {
         line-height: 1.4;
         padding: 0.1em 0.7em;

src/bp-templates/bp-nouveau/css/buddypress.css

@@ -2559 +2559 @@
         }
 }
 
+#group-manage-members-ui #group-members-search-form button[type="submit"] {
+        float: right;
+        font-size: inherit;
+        font-weight: 400;
+        line-height: 1.5;
+        text-align: center;
+        text-transform: none;
+}
+
+#group-manage-members-ui #group-members-search-form button[type="submit"] span {
+        font-family: dashicons;
+        font-size: 18px;
+        line-height: 1.6;
+}
+
+#group-manage-members-ui #group-members-pagination button:last-child {
+        margin-right: 2em;
+}
+
 /**
 *-----------------------------------------
 * @subsection 5.2.1.2 - Group Members List
@@ -3691 +3710 @@
 
 .buddypress-wrap form.bp-dir-search-form,
 .buddypress-wrap form.bp-messages-search-form,
-.buddypress-wrap form[data-bp-search].bp-invites-search-form {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form,
+.buddypress-wrap form#group-members-search {
         border: 1px solid #eee;
         width: 100%;
 }
 
 .buddypress-wrap form.bp-dir-search-form label,
 .buddypress-wrap form.bp-messages-search-form label,
-.buddypress-wrap form[data-bp-search].bp-invites-search-form label {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form label,
+.buddypress-wrap form#group-members-search label {
         margin: 0;
 }
 
@@ -3710 +3731 @@
 .buddypress-wrap form.bp-messages-search-form button[type="submit"],
 .buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"],
 .buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="text"],
-.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"] {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"],
+.buddypress-wrap form#group-members-search input[type="search"],
+.buddypress-wrap form#group-members-search input[type="text"],
+.buddypress-wrap form#group-members-search button[type="submit"] {
         background: none;
         border: 0;
         border-radius: 0;
@@ -3722 +3746 @@
 .buddypress-wrap form.bp-messages-search-form input[type="search"],
 .buddypress-wrap form.bp-messages-search-form input[type="text"],
 .buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"],
-.buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="text"] {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="text"],
+.buddypress-wrap form#group-members-search input[type="search"],
+.buddypress-wrap form#group-members-search input[type="text"] {
         float: left;
         line-height: 1.5;
         padding: 3px 10px;
@@ -3731 +3757 @@
 
 .buddypress-wrap form.bp-dir-search-form button[type="submit"],
 .buddypress-wrap form.bp-messages-search-form button[type="submit"],
-.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"] {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"],
+.buddypress-wrap form#group-members-search button[type="submit"] {
         float: right;
         font-size: inherit;
         font-weight: 400;
@@ -3744 +3771 @@
 
 .buddypress-wrap form.bp-dir-search-form button[type="submit"] span,
 .buddypress-wrap form.bp-messages-search-form button[type="submit"] span,
-.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"] span {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"] span,
+.buddypress-wrap form#group-members-search button[type="submit"] span {
         font-family: dashicons;
         font-size: 18px;
         line-height: 1.6;
@@ -3752 +3780 @@
 
 .buddypress-wrap form.bp-dir-search-form button[type="submit"].bp-show,
 .buddypress-wrap form.bp-messages-search-form button[type="submit"].bp-show,
-.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"].bp-show {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form button[type="submit"].bp-show,
+.buddypress-wrap form#group-members-search button[type="submit"].bp-show {
         height: auto;
         left: 0;
         overflow: visible;
@@ -3762 +3791 @@
 
 .buddypress-wrap form.bp-dir-search-form input[type="search"]::-webkit-search-cancel-button,
 .buddypress-wrap form.bp-messages-search-form input[type="search"]::-webkit-search-cancel-button,
-.buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"]::-webkit-search-cancel-button {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"]::-webkit-search-cancel-button,
+.buddypress-wrap form#group-members-search input[type="search"]::-webkit-search-cancel-button {
         -webkit-appearance: searchfield-cancel-button;
 }
 
@@ -3771 +3801 @@
 .buddypress-wrap form.bp-messages-search-form input[type="search"]::-webkit-search-results-button,
 .buddypress-wrap form.bp-messages-search-form input[type="search"]::-webkit-search-results-decoration,
 .buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"]::-webkit-search-results-button,
-.buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"]::-webkit-search-results-decoration {
+.buddypress-wrap form[data-bp-search].bp-invites-search-form input[type="search"]::-webkit-search-results-decoration,
+.buddypress-wrap form#group-members-search input[type="search"]::-webkit-search-results-button,
+.buddypress-wrap form#group-members-search input[type="search"]::-webkit-search-results-decoration {
         display: none;
 }
 
+.buddypress-wrap form#group-members-search:hover {
+        border: 1px solid #d5d4d4;
+        box-shadow: inset 0 0 3px #eee;
+}
+
 .buddypress-wrap ul.filters li form label input {
         line-height: 1.4;
         padding: 0.1em 0.7em;

src/bp-templates/bp-nouveau/includes/groups/functions.php

@@ -3 +3 @@
  * Groups functions
  *
  * @since 3.0.0
- * @version 3.1.0
+ * @version 5.0.0
  */
 
 // Exit if accessed directly.
@@ -68 +68 @@
                 ' );
         }
 
-        if ( ! bp_is_group_invites() && ! ( bp_is_group_create() && bp_is_group_creation_step( 'group-invites' ) ) ) {
-                return;
+        if ( bp_is_group_invites() || ( bp_is_group_create() && bp_is_group_creation_step( 'group-invites' ) ) ) {
+                wp_enqueue_script( 'bp-nouveau-group-invites' );
         }
 
-        wp_enqueue_script( 'bp-nouveau-group-invites' );
+        if ( bp_is_group_admin_page() && bp_is_group_admin_screen( 'manage-members' ) ) {
+                wp_enqueue_script( 'bp-group-manage-members' );
+                wp_localize_script(
+                        'bp-group-manage-members',
+                        'bpGroupManageMembersSettings',
+                        bp_groups_get_group_manage_members_script_data( bp_get_current_group_id() )
+                );
+        }
 }
 
 /**

src/class-buddypress.php

@@ -487 +487 @@
                 require( $this->plugin_dir . 'bp-core/bp-core-moderation.php'       );
                 require( $this->plugin_dir . 'bp-core/bp-core-loader.php'           );
                 require( $this->plugin_dir . 'bp-core/bp-core-customizer-email.php' );
+                require( $this->plugin_dir . 'bp-core/bp-core-rest-api.php'         );
 
                 // Maybe load deprecated functionality (this double negative is proof positive!)
                 if ( ! bp_get_option( '_bp_ignore_deprecated_code', ! $this->load_deprecated ) ) {