Merge pull request #893 from carstingaxion/feature/use-php-matrix-in-…

…playground-pr-preview

Use php matrix in playground PR preview

.github/scripts/create-preview-links.js

@@ -3,32 +3,35 @@
  * https://github.com/Automattic/themes/blob/a0c9b91f827f46ed60c502d41ef881b2f0552f03/.github/scripts/create-preview-links.js
  */
 
-/*
- * This function creates the URL where to download the built & zipped plugin.
+/**
+ * This function creates the URL to download the built & zipped plugin artifact.
+ * It uses a proxy because the artifact is not publicly accessible directly.
  *
  * @param {object} context - The context of the event that triggered the action.
- * @param {number} number - The PR number where the plugin changes are located.
- * @returns {string} - The URL where to download the built & zipped plugin, as an artifact of the workflow.
+ * @param {number} number - The pull request (PR) number where the plugin changes are located.
+ * @returns {string} - The URL to download the zipped plugin artifact.
  */
 function createBlueprintUrl(context, number) {
 	const { repo, owner } = context;
-	const workflow = encodeURI('Playground Preview');
-	const artifact = 'gatherpress-pr';
+	const workflow = encodeURI('Playground Preview');  // Encode the workflow name
+	const artifact = 'gatherpress-pr'; // GitHub Actions artifact name
 	// const proxy = 'https://gatherpress.org/playground-preview/plugin-proxy.php';
 	const proxy = 'https://hub.carsten-bach.de/gatherpress/plugin-proxy.php'; // RESTORED TO TEST // SHOULD BE REMOVED BEFORE #750 GETS MERGED //
 
 	return `${proxy}/?org=${owner}&repo=${repo}&workflow=${workflow}&artifact=${artifact}&pr=${number}`;
 }
 
-/*
- * This function creates a WordPress Playground blueprint JSON string for a given PR of the GatherPress plugin.
+/**
+ * Creates a WordPress Playground blueprint JSON string.
+ * The blueprint specifies the PHP version to use, among other configuration details.
  *
  * @param {object} context - The context of the event that triggered the action.
  * @param {number} number - The PR number where the plugin changes are located.
- * @param {string} zipArtifactUrl - The URL where to download the built & zipped plugin, as an artifact of the workflow.
- * @returns {string} - A JSON string representing the steps of a blueprint.
+ * @param {string} zipArtifactUrl - The URL where the built plugin artifact can be downloaded.
+ * @param {string} phpVersion - The PHP version to use in the WordPress Playground.
+ * @returns {string} - A JSON string representing the blueprint.
  */
-function createBlueprint(context, number, zipArtifactUrl) {
+function createBlueprint(context, number, zipArtifactUrl, phpVersion) {
 	const { repo, owner } = context;
 
 	// TODO
@@ -38,7 +41,7 @@ function createBlueprint(context, number, zipArtifactUrl) {
 	const template = {
 		landingPage: '/wp-admin/post-new.php?post_type=gatherpress_event',
 		preferredVersions: {
-			php: '8.2',
+			php: phpVersion,
 			wp: 'latest'
 		},
 		phpExtensionBundles: [
@@ -127,86 +130,97 @@ function createBlueprint(context, number, zipArtifactUrl) {
 	return JSON.stringify(template);
 }
 
-/*
- * This function creates a comment on a PR with preview links.
- *
- * It is used by `playground-preview` workflow.
+/**
+ * Generates preview links for different modes of the WordPress Playground.
+ * It constructs URLs with an encoded blueprint that applies plugin changes for testing.
  *
- * @param {object} github - An authenticated instance of the GitHub API.
- * @param {object} context - The context of the event that triggered the action.
+ * @param {string} blueprint - The encoded blueprint JSON string.
+ * @param {string} prText - Text describing the pull request (e.g., "for PR#X").
+ * @returns {Array} - Array of link objects, each containing a title and URL for a specific Playground mode.
  */
-async function createPreviewLinksComment(github, context) {
-	const zipArtifactUrl = createBlueprintUrl(
-		context.repo,
-		context.payload.pull_request.number
-	);
-	const blueprint = encodeURI(createBlueprint(
-		context.repo,
-		context.payload.pull_request.number,
-		zipArtifactUrl
-	));
-	const prText = `for PR#${context.payload.pull_request.number}`
+function createPlaygroundLinks( blueprint, prText) {
 	const playgrounds = [
-		{
-			name: '**Normal** WordPress playground ' + prText,
-			url: 'https://playground.wordpress.net/#',
-		},
-		{
-			name: '**Seamless** WordPress playground ' + prText,
-			url: 'https://playground.wordpress.net/?mode=seamless#',
-		},
-		{
-			name: 'WordPress playground **Builder** ' + prText,
-			url: 'https://playground.wordpress.net/builder/builder.html#',
-		},
-	]
-	const links = playgrounds.map( ( playground ) => ({
-		title: playground.name,
+		{ name: '**Normal** WordPress playground ', url: 'https://playground.wordpress.net/#' },
+		{ name: '**Seamless** WordPress playground ', url: 'https://playground.wordpress.net/?mode=seamless#' },
+		{ name: 'WordPress playground **Builder** ', url: 'https://playground.wordpress.net/builder/builder.html#' }
+	];
+
+	return playgrounds.map(playground => ({
+		title: playground.name + prText,
 		url: playground.url + blueprint
 	}));
-	const previewLinks = links.map(link => (`- [${link.title}](${link.url})\n`));
-	const title   = '### Preview changes with Playground';
-	const comment = `
-You can preview the least recent changes ${prText} by following one of the links below:
+}
 
-${previewLinks.join(' ')}
+/**
+ * Main function to create and post a comment on the PR with preview links for different PHP versions.
+ * It generates Playground preview URLs for each PHP version specified.
+ *
+ * @param {object} github - An authenticated GitHub API instance.
+ * @param {object} context - The context of the event.
+ */
+async function createPreviewLinksComment(github, context) {
+	const prNumber       = context.payload.pull_request.number;
+	const zipArtifactUrl = createBlueprintUrl(context.repo, prNumber);  // URL to the built plugin artifact
+	const prText         = `for PR#${prNumber}`;  // Descriptive text for the PR
 
-- [Download <code>.zip</code> with build changes](${zipArtifactUrl})
+	// Retrieve PHP versions from environment variable (JSON string)
+	const phpVersionsEnv = process.env.PHP_VERSIONS || '["8.3","7.4"]';  // Default to common versions if not set
+	const phpVersions    = JSON.parse( phpVersionsEnv );  // Parse the JSON string into an array
 
-**⚠️ Note:** The preview sites are created using [WordPress Playground](https://wordpress.org/playground/). You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.
+	// Generate preview links for each PHP version
+	let previewLinks = '';
+	for (const phpVersion of phpVersions) {
+		const blueprint      = encodeURI(createBlueprint(context.repo, prNumber, zipArtifactUrl, phpVersion));  // Generate blueprint
+		const links          = createPlaygroundLinks( blueprint, prText );  // Create preview links
+		const versionHeading = `#### PHP Version ${phpVersion}\n`;
+		const versionLinks   = links.map(link => `- [${link.title}](${link.url})\n`).join('');
+		previewLinks        += `\n${versionHeading}\n${versionLinks}`;
+	}
+
+	// The title of the comment and its content, including preview links for all PHP versions
+	const title       = '### Preview changes with Playground';
+	const commentBody = `
+You can preview the recent changes ${prText} with the following PHP versions:
+
+${previewLinks}
+
+[Download <code>.zip</code> with build changes](${zipArtifactUrl})
+
+*Made with 💙 from GatherPress & a little bit of [WordPress Playground](https://wordpress.org/playground/). Changes will not persist between sessions.*
 `;
 
 	const repoData = {
 		owner: context.repo.owner,
 		repo: context.repo.repo,
 	};
 
-	// Check if a comment already exists and update it if it does
+	// Check if any comments already exists
 	const { data: comments } = await github.rest.issues.listComments({
-		issue_number: context.payload.pull_request.number,
+		issue_number: prNumber,
 		...repoData,
 	});
+
 	const existingComment = comments.find(
 		(comment) =>
 			comment.user.login === 'github-actions[bot]' &&
 			comment.body.startsWith( title )
 	);
 	const commentObject = {
-		body: `${title}\n${comment}`,
+		body: `${title}\n${commentBody}`,
 		...repoData,
 	};
 
-	if (existingComment) {
-		// Do not update, but delete and recreate Comment to have a new one after last commit.
+	// If an existing comment is found, delete it before creating a new one
+	if ( existingComment ) {
 		await github.rest.issues.deleteComment({
 			comment_id: existingComment.id,
 			...commentObject,
 		});
 	}
 
-	// Create a new comment if one doesn't exist
+	// Create a new comment with preview links
 	github.rest.issues.createComment({
-		issue_number: context.payload.pull_request.number,
+		issue_number: prNumber,
 		...commentObject,
 	});
 }