Use AJAX for activating features / plugins in Performance Lab

plugins/performance-lab/includes/admin/load.php

@@ -49,9 +49,6 @@ function perflab_load_features_page(): void {
 
 	// Handle style for settings page.
 	add_action( 'admin_head', 'perflab_print_features_page_style' );
-
-	// Handle script for settings page.
-	add_action( 'admin_footer', 'perflab_print_plugin_progress_indicator_script' );
 }
 
 /**
@@ -228,8 +225,14 @@ function perflab_enqueue_features_page_scripts(): void {
 	wp_enqueue_style( 'thickbox' );
 	wp_enqueue_script( 'plugin-install' );
 
-	// Enqueue the a11y script.
-	wp_enqueue_script( 'wp-a11y' );
+	// Enqueue plugin activate AJAX script and localize script data.
+	wp_enqueue_script(
+		'perflab-plugin-activate-ajax',
+		plugins_url( 'includes/admin/plugin-activate-ajax.js', PERFLAB_MAIN_FILE ),
+		array( 'wp-i18n', 'wp-a11y', 'wp-api-fetch' ),
+		PERFLAB_VERSION,
+		true
+	);
 }
 
 /**
@@ -396,42 +399,6 @@ static function ( $name ) {
 	}
 }
 
-/**
- * Callback function that print plugin progress indicator script.
- *
- * @since 3.1.0
- */
-function perflab_print_plugin_progress_indicator_script(): void {
-	$js_function = <<<JS
-		function addPluginProgressIndicator( message ) {
-			document.addEventListener( 'DOMContentLoaded', function () {
-				document.addEventListener( 'click', function ( event ) {
-					if (
-						event.target.classList.contains(
-							'perflab-install-active-plugin'
-						)
-					) {
-						const target = event.target;
-						target.classList.add( 'updating-message' );
-						target.textContent = message;
-
-						wp.a11y.speak( message );
-					}
-				} );
-			} );
-		}
-JS;
-
-	wp_print_inline_script_tag(
-		sprintf(
-			'( %s )( %s );',
-			$js_function,
-			wp_json_encode( __( 'Activating...', 'default' ) )
-		),
-		array( 'type' => 'module' )
-	);
-}
-
 /**
  * Gets the URL to the plugin settings screen if one exists.
  *

plugins/performance-lab/includes/admin/plugin-activate-ajax.js

@@ -0,0 +1,89 @@
+/**
+ * Handles activation of Performance Features (Plugins) using AJAX.
+ */
+
+( function () {
+	// @ts-ignore
+	const { i18n, a11y, apiFetch } = wp;
+	const { __ } = i18n;
+
+	/**
+	 * Handles click events on elements with the class 'perflab-install-active-plugin'.
+	 *
+	 * This asynchronous function listens for click events on the document and executes
+	 * the provided callback function if triggered.
+	 *
+	 * @param {MouseEvent} event - The click event object that is triggered when the user clicks on the document.
+	 *
+	 * @return {Promise<void>} - The asynchronous function returns a promise that resolves to void.
+	 */
+	async function handlePluginActivationClick( event ) {
+		const target = /** @type {HTMLElement} */ ( event.target );
+
+		if ( ! target.classList.contains( 'perflab-install-active-plugin' ) ) {
+			return;
+		}
+
+		// Prevent the default link behavior.
+		event.preventDefault();
+
+		if (
+			target.classList.contains( 'updating-message' ) ||
+			target.classList.contains( 'disabled' )
+		) {
+			return;
+		}
+
+		target.classList.add( 'updating-message' );
+		target.textContent = __( 'Activating…', 'performance-lab' );
+
+		a11y.speak( __( 'Activating…', 'performance-lab' ) );
+
+		const pluginSlug = target.dataset.pluginSlug;
+
+		try {
+			// Activate the plugin via the REST API.
+			await apiFetch( {
+				path: '/performance-lab/v1/activate-plugin',
+				method: 'POST',
+				data: { slug: pluginSlug },
+			} );
+
+			// Fetch the plugin settings URL via the REST API.
+			const settingsResponse = await apiFetch( {
+				path: '/performance-lab/v1/plugin-settings-url',
+				method: 'POST',
+				data: { slug: pluginSlug },
+			} );
+
+			a11y.speak( __( 'Plugin activated.', 'performance-lab' ) );
+
+			target.textContent = __( 'Active', 'performance-lab' );
+			target.classList.remove( 'updating-message' );
+			target.classList.add( 'disabled' );
+
+			const actionButtonList = document.querySelector(
+				`.plugin-card-${ pluginSlug } .plugin-action-buttons`
+			);
+
+			if ( settingsResponse?.pluginSettingsURL && actionButtonList ) {
+				const listItem = document.createElement( 'li' );
+				const anchor = document.createElement( 'a' );
+
+				anchor.href = settingsResponse?.pluginSettingsURL;
+				anchor.textContent = __( 'Settings', 'performance-lab' );
+
+				listItem.appendChild( anchor );
+				actionButtonList.appendChild( listItem );
+			}
+		} catch ( error ) {
+			a11y.speak( __( 'Plugin failed to activate.', 'performance-lab' ) );
+
+			target.classList.remove( 'updating-message' );
+			target.textContent = __( 'Activate', 'performance-lab' );
+		}
+	}
+
+	// Attach the event listener.
+	document.addEventListener( 'click', handlePluginActivationClick );
+} )();

plugins/performance-lab/includes/admin/plugins.php

@@ -431,8 +431,9 @@ function perflab_render_plugin_card( array $plugin_data ): void {
 		);
 
 		$action_links[] = sprintf(
-			'<a class="button perflab-install-active-plugin" href="%s">%s</a>',
+			'<a class="button perflab-install-active-plugin" href="%s" data-plugin-slug="%s">%s</a>',
 			esc_url( $url ),
+			esc_attr( $plugin_data['slug'] ),
 			esc_html__( 'Activate', 'default' )
 		);
 	} else {

plugins/performance-lab/includes/admin/rest-api.php

@@ -0,0 +1,201 @@
+<?php
+/**
+ * REST API integration for the plugin.
+ *
+ * @package performance-lab
+ * @since n.e.x.t
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Namespace for performance-lab REST API.
+ *
+ * @var string
+ */
+const PERFLAB_REST_API_NAMESPACE = 'performance-lab/v1';
+
+/**
+ * Route for activating plugin.
+ *
+ * @var string
+ */
+const PERFLAB_ACTIVATE_PLUGIN_ROUTE = '/activate-plugin';
+
+/**
+ * Route for fetching plugin settings URL.
+ *
+ * @var string
+ */
+const PERFLAB_PLUGIN_SETTINGS_URL_ROUTE = '/plugin-settings-url';
+
+/**
+ * Registers endpoint for performance-lab REST API.
+ *
+ * @since n.e.x.t
+ * @access private
+ */
+function perflab_register_endpoint(): void {
+	register_rest_route(
+		PERFLAB_REST_API_NAMESPACE,
+		PERFLAB_ACTIVATE_PLUGIN_ROUTE,
+		array(
+			'methods'             => 'POST',
+			'args'                => array(
+				'slug' => array(
+					'type'        => 'string',
+					'description' => __( 'Plugin slug of plugin that needs to be activated.', 'performance-lab' ),
+					'required'    => true,
+				),
+			),
+			'callback'            => 'perflab_handle_activate_plugin',
+			'permission_callback' => static function () {
+				if ( current_user_can( 'install_plugins' ) ) {
+					return true;
+				}
+
+				return new WP_Error( 'cannot_install_plugin', __( 'Sorry, you are not allowed to install plugins on this site.', 'performance-lab' ) );
+			},
+		)
+	);
+
+	register_rest_route(
+		PERFLAB_REST_API_NAMESPACE,
+		PERFLAB_PLUGIN_SETTINGS_URL_ROUTE,
+		array(
+			'methods'             => 'POST',
+			'args'                => array(
+				'slug' => array(
+					'type'        => 'string',
+					'description' => __( 'Plugin slug of plugin whose settings URL is needed.', 'performance-lab' ),
+					'required'    => true,
+				),
+			),
+			'callback'            => 'perflab_handle_get_plugin_settings_url',
+			'permission_callback' => static function () {
+				if ( current_user_can( 'manage_options' ) ) {
+					return true;
+				}
+
+				return new WP_Error( 'cannot_access_plugin_settings_url', __( 'Sorry, you are not allowed to access plugin settings URL on this site.', 'performance-lab' ) );
+			},
+		)
+	);
+}
+add_action( 'rest_api_init', 'perflab_register_endpoint' );
+
+/**
+ * Handles REST API request to activate plugin.
+ *
+ * @since n.e.x.t
+ * @access private
+ *
+ * @phpstan-param WP_REST_Request<array<string, mixed>> $request
+ *
+ * @param WP_REST_Request $request Request.
+ * @return WP_REST_Response|WP_Error Response.
+ */
+function perflab_handle_activate_plugin( WP_REST_Request $request ) {
+	require_once ABSPATH . 'wp-admin/includes/plugin.php';
+	require_once ABSPATH . 'wp-admin/includes/plugin-install.php';
+	require_once ABSPATH . 'wp-admin/includes/class-wp-upgrader.php';
+	require_once ABSPATH . 'wp-admin/includes/class-wp-ajax-upgrader-skin.php';
+
+	// Require to make helper functions available.
+	require_once PERFLAB_PLUGIN_DIR_PATH . 'includes/admin/load.php';
+	require_once PERFLAB_PLUGIN_DIR_PATH . 'includes/admin/plugins.php';
+
+	$params = $request->get_json_params();
+
+	// Ensure the 'slug' parameter is present.
+	if ( ! isset( $params['slug'] ) ) {
+		return new WP_Error(
+			'missing_parameter',
+			__( 'Missing required parameter "slug".', 'performance-lab' ),
+			array( 'status' => 400 )
+		);
+	}
+
+	$plugin_slug = perflab_sanitize_plugin_slug( wp_unslash( $params['slug'] ) );
+	if ( null === $plugin_slug ) {
+		return new WP_Error(
+			'invalid_plugin',
+			__( 'Invalid plugin slug provided.', 'performance-lab' ),
+			array( 'status' => 400 )
+		);
+	}
+
+	// Install and activate the plugin and its dependencies.
+	$result = perflab_install_and_activate_plugin( $plugin_slug );
+	if ( is_wp_error( $result ) ) {
+		return new WP_Error(
+			'plugin_activation_failed',
+			$result->get_error_message(),
+			array( 'status' => 500 )
+		);
+	}
+
+	return new WP_REST_Response(
+		array(
+			'success' => true,
+		)
+	);
+}
+
+/**
+ * Handles REST API request to get plugin settings URL.
+ *
+ * @since n.e.x.t
+ * @access private
+ *
+ * @phpstan-param WP_REST_Request<array<string, mixed>> $request
+ *
+ * @param WP_REST_Request $request Request.
+ * @return WP_REST_Response|WP_Error Response.
+ */
+function perflab_handle_get_plugin_settings_url( WP_REST_Request $request ) {
+	require_once ABSPATH . 'wp-admin/includes/plugin.php';
+
+	// Require to make helper functions available.
+	require_once PERFLAB_PLUGIN_DIR_PATH . 'includes/admin/load.php';
+	require_once PERFLAB_PLUGIN_DIR_PATH . 'includes/admin/plugins.php';
+
+	$params = $request->get_json_params();
+
+	// Ensure the 'slug' parameter is present.
+	if ( ! isset( $params['slug'] ) ) {
+		return new WP_Error(
+			'missing_parameter',
+			__( 'Missing required parameter "slug".', 'performance-lab' ),
+			array( 'status' => 400 )
+		);
+	}
+
+	$plugin_slug = perflab_sanitize_plugin_slug( wp_unslash( $params['slug'] ) );
+	if ( null === $plugin_slug ) {
+		return new WP_Error(
+			'invalid_plugin',
+			__( 'Invalid plugin slug provided.', 'performance-lab' ),
+			array( 'status' => 400 )
+		);
+	}
+
+	$plugin_settings_url = perflab_get_plugin_settings_url( $plugin_slug );
+	if ( null === $plugin_settings_url ) {
+		return new WP_REST_Response(
+			array(
+				'success'           => true,
+				'pluginSettingsURL' => false,
+			)
+		);
+	}
+
+	return new WP_REST_Response(
+		array(
+			'success'           => true,
+			'pluginSettingsURL' => esc_url_raw( $plugin_settings_url ),
+		)
+	);
+}

plugins/performance-lab/load.php

@@ -339,3 +339,6 @@ function perflab_cleanup_option(): void {
 	require_once PERFLAB_PLUGIN_DIR_PATH . 'includes/admin/server-timing.php';
 	require_once PERFLAB_PLUGIN_DIR_PATH . 'includes/admin/plugins.php';
 }
+
+// Load REST API.
+require_once PERFLAB_PLUGIN_DIR_PATH . 'includes/admin/rest-api.php';