Add live playground links using woocommerce as inspiration (#347)

* Add live playground links using woocommerce as inspiration * Fix incorrect paths * Change name of plugin artifact * Attempting to make the playground url work * Drop the run id and simplify the versioning * Drop the run id and simplify the versioning * Use the uploaded artifact url as the blueprint url instead * Fix the name of the workflow and the formatting * Exclude the js file for generating playground links from the job * Run playground build job on all PRs * Remove the offending line from the playground job * Setup nodejs and php * Drop the colon * Correctly read the artifact url * Make the artifact url a string * Make the zip file valid * Corrected the artifact generation * Fix the link breakage, and match it to the playground proxy * Update the playground url * Fix the formatting * extra h * Remove uri encoding * Attempting to make the script redundant * Tweak the installing message * Fixing up the link * Trying to fix the link * uri encode the spaces * Forgot a character * Get the script working again to ensure comments are updated * Lint fix * Fix the url for playground * Replace composer.lock with the one from trunk * Attempting to reduce permissions that are risky * Turns out you need permission to write to a PR
Automattic · Feb 25, 2025 · 4908534 · 4908534
1 parent e6693d4
commit 4908534
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 0 deletions.
diff --git a/.github/workflows/pr-build-live-branch.yml b/.github/workflows/pr-build-live-branch.yml
@@ -0,0 +1,77 @@
+name: Build Live Branch
+
+on:
+  pull_request:
+    branches:
+      - trunk
+    paths-ignore:
+      - 'docs/**'
+      - 'examples/**'
+      - 'bin/**'
+      - '**/tests/**'
+      - '**/*.md'
+      - '.github/**'
+      - '!.github/workflows/pr-build-live-branch.yml'
+      - '!.github/workflows/scripts/generate-playground-blueprint.js'
+
+concurrency:
+  # Cancel concurrent jobs on pull_request but not push, by including the run_id in the concurrency group for the latter.
+  group: build-${{ github.event_name == 'push' && github.run_id || 'pr' }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  build:
+    if: github.repository_owner == 'Automattic' && github.event.pull_request.draft == false && github.event.pull_request.user.login != 'github-actions[bot]'
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.2'
+
+      - name: Setup Node.js
+        uses: Automattic/vip-actions/nodejs-setup@trunk
+        with:
+          node-version-file: .nvmrc
+          ignore-scripts: true
+
+      - name: Prepare plugin zips
+        id: prepare
+        run: |
+          echo "Generating zip file..."
+          cd "$GITHUB_WORKSPACE" || exit
+          npm run plugin-zip
+          echo "Generated zip file..."
+          mkdir "$GITHUB_WORKSPACE/zips"
+          mv remote-data-blocks.zip "$GITHUB_WORKSPACE/zips/remote-data-blocks.zip"
+          echo "Moved zip file to zips directory..."
+          mkdir "$GITHUB_WORKSPACE/unzips"
+          echo "Created unzips directory..."
+          unzip "$GITHUB_WORKSPACE/zips/remote-data-blocks.zip" -d "$GITHUB_WORKSPACE/unzips/remote-data-blocks"
+          echo "Unzipped zip file..."
+
+      - name: Create playground artifact
+        id: create-playground-artifact-step
+        uses: actions/upload-artifact@v4
+        with:
+          name: remote-data-blocks-${{ github.event.pull_request.number }}
+          path: unzips/remote-data-blocks
+          retention-days: 7
+          if-no-files-found: 'error'
+          overwrite: true
+
+      - name: Comment on PR with WordPress Playground details
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { run } = require('./.github/workflows/scripts/generate-playground-blueprint');
+            	run({ github, context });
diff --git a/.github/workflows/scripts/generate-playground-blueprint.js b/.github/workflows/scripts/generate-playground-blueprint.js
@@ -0,0 +1,33 @@
+async function run( { github, context } ) {
+	const commentInfo = {
+		owner: context.repo.owner,
+		repo: context.repo.repo,
+		issue_number: context.issue.number,
+	};
+
+	const comments = ( await github.rest.issues.listComments( commentInfo ) ).data;
+	let existingCommentId = null;
+
+	for ( const currentComment of comments ) {
+		if ( currentComment.user.type === 'Bot' && currentComment.body.includes( 'Test this PR in' ) ) {
+			existingCommentId = currentComment.id;
+			break;
+		}
+	}
+
+	const body = `Test this PR in [WordPress Playground](https://wordpress-playground.atomicsites.blog/#{"landingPage":"/wp-admin/admin.php?page=remote-data-blocks-settings","features":{"networking":true},"login":true,"preferredVersions":{"php":"8.2","wp":"latest"},"steps":[{"step":"setSiteOptions","options":{"blogname":"Remote%20Data%20Blocks%20PR#${ context.issue.number }","blogdescription":"Explore%20the%20Remote%20Data%20Blocks%20plugin%20in%20a%20WordPress%20Playground"}},{"step":"defineWpConfigConsts","consts":{"USE_PLAYGROUND_CORS_PROXY":true}},{"step":"installPlugin","pluginData":{"caption":"Installing%20RDB","resource":"url","url":"https://wordpress-playground.atomicsites.blog/plugin-proxy.php?org=Automattic&repo=remote-data-blocks&workflow=Build%20Live%20Branch&artifact=remote-data-blocks-${ context.issue.number }&pr=${ context.issue.number }"},"options":{"activate":true,"targetFolderName":"remote-data-blocks"}}]}).`;
+
+	if ( existingCommentId ) {
+		await github.rest.issues.updateComment( {
+			owner: commentInfo.owner,
+			repo: commentInfo.repo,
+			comment_id: existingCommentId,
+			body: body,
+		} );
+	} else {
+		commentInfo.body = body;
+		await github.rest.issues.createComment( commentInfo );
+	}
+}
+
+module.exports = { run };