Add live preview URL on Pull Request

.github/workflows/pull-request-automation.yml

@@ -2,12 +2,15 @@ on:
     pull_request_target:
         types: [opened]
     push:
+    workflow_run:
+        workflows: [Build Gutenberg Plugin Zip]
+        types: [completed, in_progress]
 name: Pull request automation
 
 jobs:
     pull-request-automation:
         runs-on: ubuntu-latest
-        if: ${{ github.repository == 'WordPress/gutenberg' }}
+        if: ${{ true || github.repository == 'WordPress/gutenberg' }}
         strategy:
             matrix:
                 node: ['16']

changelog.txt

@@ -224,6 +224,7 @@
 ### Tools
 
 - Try: Change PR label enforcer automation not to work on draft PRs by default. ([53417](https://github.com/WordPress/gutenberg/pull/53417))
+- Insert build status comment on new PRs. ([54303](https://github.com/WordPress/gutenberg/pull/54303))
 
 #### Testing
 - Attempt to fix intermittent end-to-end test failure. ([53905](https://github.com/WordPress/gutenberg/pull/53905))

packages/project-management-automation/README.md

@@ -5,6 +5,7 @@ This is a [GitHub Action](https://help.github.com/en/categories/automating-your-
 -   [First Time Contributor](https://github.com/WordPress/gutenberg/tree/HEAD/packages/project-management-automation/lib/tasks/first-time-contributor): Adds the "First Time Contributor" label to pull requests merged on behalf of contributors that have not previously made a contribution, and prompts the user to link their GitHub account to their WordPress.org profile if necessary for release notes credit.
 -   [Add Milestone](https://github.com/WordPress/gutenberg/tree/HEAD/packages/project-management-automation/lib/tasks/add-milestone): Assigns the plugin release milestone to a pull request once it is merged.
 -   [Assign Fixed Issues](https://github.com/WordPress/gutenberg/tree/HEAD/packages/project-management-automation/lib/tasks/assign-fixed-issues): Adds assignee for issues which are marked to be "Fixed" by a pull request, and adds the "In Progress" label.
+-   [PR Preview Link](https://github.com/WordPress/gutenberg/tree/HEAD/packages/project-management-automation/lib/tasks/pr-preview-link): Adds a comment to new PRs with a link to `http://gutenberg.run/{pr_number}` and Gutenberg plugin build file URL, making it easier for non-tech contributors to test.
 
 # Installation and usage
 
@@ -37,4 +38,4 @@ This is an individual package that's part of the Gutenberg project. The project
 
 To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
 
-<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/project-management-automation/lib/index.js

@@ -11,6 +11,7 @@ const assignFixedIssues = require( './tasks/assign-fixed-issues' );
 const firstTimeContributorAccountLink = require( './tasks/first-time-contributor-account-link' );
 const firstTimeContributorLabel = require( './tasks/first-time-contributor-label' );
 const addMilestone = require( './tasks/add-milestone' );
+const prPreviewLink = require( './tasks/pr-preview-link' );
 const debug = require( './debug' );
 
 /**
@@ -52,6 +53,10 @@ const automations = [
 		event: 'push',
 		task: addMilestone,
 	},
+	{
+		event: 'workflow_run',
+		task: prPreviewLink,
+	},
 ];
 
 ( async function main() {

packages/project-management-automation/lib/tasks/pr-preview-link/README.md

@@ -0,0 +1,12 @@
+PR Preview Link
+===
+
+Adds a comment to new PRs with a comment about Gutenberg plugin build status:
+- Latest commit
+- Build status of [Build Gutenberg Plugin Zip](https://github.com/WordPress/gutenberg/blob/d19eb92d96886f4bb8e1028c5d54d365e37d71e4/.github/workflows/build-plugin-zip.yml#L1)
+- Link to live preview `http://gutenberg.run/{pr_number}`
+- Link to artifact download URL
+
+## Rationale
+
+Preview sites make PRs much easier to test, especially for folks who don't have a dev environment setup. The comment also saves contributors some extra clicks to download the latest build of the Gutenberg plugin.

packages/project-management-automation/lib/tasks/pr-preview-link/index.js

@@ -0,0 +1,168 @@
+// @ts-nocheck
+
+/**
+ * Internal dependencies
+ */
+const debug = require( '../../debug' );
+
+/** @typedef {ReturnType<import('@actions/github').getOctokit>} GitHub */
+/** @typedef {any} WorkflowRunEvent */
+
+/**
+ * Identifier used to find existing comment.
+ *
+ * @type {string}
+ */
+const COMMENT_PLACEHOLDER = 'gutenberg-run-placeholder:cmt@v1';
+
+const createBuildSummary = async (
+	{ buildStatus, latestCommit, pullRequestNumber, artifact },
+	octokit
+) => {
+	let status, previewMsg, artifactMsg;
+	status = previewMsg = artifactMsg = '🚧  Building in progress...';
+	if ( buildStatus === 'success' ) {
+		status = '✅  Build successful!';
+		previewMsg = `🔗 [gutenberg.run/${ pullRequestNumber }](gutenberg.run/${ pullRequestNumber } )`;
+		artifactMsg = `📦 [gutenberg-plugin](${ artifact.url }) - ${ artifact.size } MB`;
+	} else if ( buildStatus === 'failure' ) {
+		status = previewMsg = artifactMsg = '🚫  Build failed!';
+	}
+
+	const response = await octokit.rest.markdown.render( {
+		mode: 'gfm',
+		text: `
+# Gutenberg Plugin build status
+
+| Name                    	| Result |
+| ----------------------- 	| - |
+| **Last commit:**        	| ${ latestCommit } |
+| **Status**:             	| ${ status } |
+| **Preview URL**:        	| ${ previewMsg } |
+| **Gutenberg plugin zip**: | ${ artifactMsg } |
+  `,
+	} );
+	return `<!--${ COMMENT_PLACEHOLDER }-->${ response.data }`;
+};
+
+const writeComment = async (
+	{ owner, repo, pullRequestNumber, commentBody },
+	octokit
+) => {
+	debug( 'pr-preview-link: Find and replace build status comment' );
+	// First check if there is already a comment from this action
+	const comments = await octokit.rest.issues.listComments( {
+		issue_number: pullRequestNumber,
+		owner,
+		repo,
+	} );
+
+	const existingComment = comments.data.filter( ( comment ) =>
+		comment.body.includes( COMMENT_PLACEHOLDER )
+	);
+
+	if ( existingComment.length ) {
+		await octokit.rest.issues.updateComment( {
+			owner,
+			repo,
+			comment_id: existingComment[ 0 ].id,
+			body: commentBody,
+		} );
+	} else {
+		await octokit.rest.issues.createComment( {
+			owner,
+			repo,
+			issue_number: pullRequestNumber,
+			body: commentBody,
+		} );
+	}
+};
+
+/**
+ * Adds a comment to new PRs with a link to the corresponding gutenberg.run preview site.
+ *
+ * @param {WorkflowRunEvent} payload Workflow Run event payload.
+ * @param {GitHub}           octokit Initialized Octokit REST client.
+ */
+async function prPreviewLink( payload, octokit ) {
+	const action = payload.action;
+	const repo = payload.repository.name;
+	const owner = payload.repository.owner.login;
+	const repoHtmlUrl = payload.repository.html_url;
+	const workflowRun = payload.workflow_run;
+	const workflowRunId = workflowRun.id;
+	const pullRequestNumber = workflowRun.pull_requests[ 0 ].number;
+	const checkSuiteId = workflowRun.check_suite_id;
+	const latestCommit = `${ repoHtmlUrl }/pull/${ pullRequestNumber }/commits/${ workflowRun.head_sha }`;
+
+	if ( action === 'in_progress' ) {
+		const commentBody = await createBuildSummary(
+			{
+				buildStatus: action,
+				latestCommit,
+				pullRequestNumber,
+				artifact: null,
+			},
+			octokit
+		);
+
+		await writeComment(
+			{ owner, repo, pullRequestNumber, commentBody },
+			octokit
+		);
+	}
+
+	if ( action === 'completed' ) {
+		debug( 'pr-preview-link: Build complete, request artifact from API' );
+		const artifactsResponse =
+			await octokit.rest.actions.listWorkflowRunArtifacts( {
+				owner,
+				repo,
+				run_id: workflowRunId,
+				name: 'gutenberg-plugin',
+				per_page: 1,
+			} );
+		const artifacts = artifactsResponse.data.artifacts;
+
+		let commentBody;
+		if ( ! artifacts.length ) {
+			debug( 'pr-preview-link: No artifact found, mark as failure' );
+
+			commentBody = await createBuildSummary(
+				{
+					buildStatus: 'failure',
+					latestCommit,
+					pullRequestNumber,
+					artifactsUrl: null,
+				},
+				octokit
+			);
+		} else {
+			debug( 'pr-preview-link: Found artifact, mark as success' );
+
+			const artifact = artifacts[ 0 ];
+			// The artifact URL on Checks screen
+			const artifactUrl = `${ repoHtmlUrl }/suites/${ checkSuiteId }/artifacts/${ artifact.id }`;
+			const sizeInMB = artifact.size_in_bytes / ( 1024 * 1024 );
+			commentBody = await createBuildSummary(
+				{
+					buildStatus: 'success',
+					latestCommit,
+					pullRequestNumber,
+					artifact: {
+						url: artifactUrl,
+						size: sizeInMB.toFixed( 2 ),
+					},
+				},
+				octokit
+			);
+		}
+
+		await writeComment(
+			{ owner, repo, pullRequestNumber, commentBody },
+			octokit
+		);
+	}
+}
+
+module.exports = prPreviewLink;