From 10a1d40f932f4f8225f2653256f1b64c2685c774 Mon Sep 17 00:00:00 2001 From: Kshitij Thareja Date: Sat, 10 Aug 2024 00:10:30 +0530 Subject: [PATCH 1/3] Update comment job to use github-script action --- .github/workflows/visual_tests.yml | 50 +++++++++++++++++++++++------- 1 file changed, 39 insertions(+), 11 deletions(-) diff --git a/.github/workflows/visual_tests.yml b/.github/workflows/visual_tests.yml index 79e99015a..b9906fa49 100644 --- a/.github/workflows/visual_tests.yml +++ b/.github/workflows/visual_tests.yml @@ -64,22 +64,50 @@ jobs: if: ${{ needs.visual_tests.result == 'success' }} runs-on: ubuntu-latest steps: - - name: Post results comment - uses: thollander/actions-comment-pull-request@v2 - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - with: - message: | - ### Percy Visual Test Results + - name: Define comment body + run: | + echo "### Percy Visual Test Results + **Percy Dashboard:** [View Detailed Report](${{ needs.visual_tests.outputs.percy_url }}) **Environment:** - **Node.js Version:** 18.x - **OS:** Ubuntu-latest - + **Instructions for Reviewers:** - Click on the [Percy Dashboard](${{ needs.visual_tests.outputs.percy_url }}) link to view detailed visual diffs. - Review the visual changes highlighted in the report. - - Approve or request changes based on the visual differences. - comment_tag: execution - mode: recreate + - Approve or request changes based on the visual differences." > comment_body.md + + - name: Create or update comment + uses: actions/github-script@v7 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + script: | + const fs = require('fs'); + const commentBody = fs.readFileSync('comment_body.md', 'utf8'); + + const { data: comments } = await github.rest.issues.listComments({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number + }); + + const comment = comments.find(comment => comment.body.includes('### Percy Visual Test Results')); + + if (comment) { + await github.rest.issues.updateComment({ + owner: context.repo.owner, + repo: context.repo.repo, + comment_id: comment.id, + body: commentBody + }); + } else { + await github.rest.issues.createComment({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + body: commentBody + }); + } + \ No newline at end of file From 0ff28b986884a4a1d53fe394504f1d311f5eb225 Mon Sep 17 00:00:00 2001 From: KshitijThareja Date: Tue, 13 Aug 2024 17:16:12 +0530 Subject: [PATCH 2/3] Updat comment job to use utils file --- .github/githubUtils.js | 48 +++++++++++++++++++++ .github/workflows/visual_tests.yml | 67 +++++++++++++----------------- 2 files changed, 77 insertions(+), 38 deletions(-) create mode 100644 .github/githubUtils.js diff --git a/.github/githubUtils.js b/.github/githubUtils.js new file mode 100644 index 000000000..9f7dbb254 --- /dev/null +++ b/.github/githubUtils.js @@ -0,0 +1,48 @@ +const fs = require('fs'); +const path = require('path'); + +async function generateComment(github, context) { + const percyUrl = context.outputs.percy_url; + + return ` +### Percy Visual Test Results + +**Percy Dashboard:** [View Detailed Report](${percyUrl}) + +**Environment:** +- **Node.js Version:** 18.x +- **OS:** Ubuntu-latest + +**Instructions for Reviewers:** +- Click on the [Percy Dashboard](${percyUrl}) link to view detailed visual diffs. +- Review the visual changes highlighted in the report. +- Approve or request changes based on the visual differences. +`; +} + +async function findComment(github, context, issue_number) { + let comment; + let page = 1 + while (!comment) { + const request = await github.rest.issues.listComments({ + issue_number, + owner: context.repo.owner, + repo: context.repo.repo, + page, + }) + const comments = request.data + if (!comments.length) { + return; + } + comment = comments.find(c => c.body && c.body.includes('### Percy Visual Test Results')); + if (comment) { + return comment.id.toString() + } + page += 1; + } +} + +module.exports = { + findComment, + generateComment, +} \ No newline at end of file diff --git a/.github/workflows/visual_tests.yml b/.github/workflows/visual_tests.yml index b9906fa49..b7294e1ae 100644 --- a/.github/workflows/visual_tests.yml +++ b/.github/workflows/visual_tests.yml @@ -65,49 +65,40 @@ jobs: runs-on: ubuntu-latest steps: - name: Define comment body - run: | - echo "### Percy Visual Test Results - - **Percy Dashboard:** [View Detailed Report](${{ needs.visual_tests.outputs.percy_url }}) - - **Environment:** - - **Node.js Version:** 18.x - - **OS:** Ubuntu-latest - - **Instructions for Reviewers:** - - Click on the [Percy Dashboard](${{ needs.visual_tests.outputs.percy_url }}) link to view detailed visual diffs. - - Review the visual changes highlighted in the report. - - Approve or request changes based on the visual differences." > comment_body.md - - - name: Create or update comment + id: comment-text + uses: actions/github-script@v7 + with: + script: | + const utils = require('./.github/githubUtils.js'); + return await utils.generateComment(github, context); + - name: Find existing comment + id: find-comment + uses: actions/github-script@v7 + with: + script: | + const utils = require('./.github/githubUtils.js'); + return await utils.findComment(github, context, context.issue.number); + - name: Create build comment + if: ${{!steps.find-comment.outputs.result}} uses: actions/github-script@v7 with: github-token: ${{ secrets.GITHUB_TOKEN }} script: | - const fs = require('fs'); - const commentBody = fs.readFileSync('comment_body.md', 'utf8'); - - const { data: comments } = await github.rest.issues.listComments({ - owner: context.repo.owner, - repo: context.repo.repo, - issue_number: context.issue.number - }); - - const comment = comments.find(comment => comment.body.includes('### Percy Visual Test Results')); - - if (comment) { - await github.rest.issues.updateComment({ + github.rest.issues.createComment({ + issue_number: context.issue.number, owner: context.repo.owner, repo: context.repo.repo, - comment_id: comment.id, - body: commentBody - }); - } else { - await github.rest.issues.createComment({ + body: ${{ steps.comment-text.outputs.result }} + }) + - name: Update build comment + if: ${{steps.find-comment.outputs.result}} + uses: actions/github-script@v7 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + script: | + github.rest.issues.updateComment({ owner: context.repo.owner, repo: context.repo.repo, - issue_number: context.issue.number, - body: commentBody - }); - } - \ No newline at end of file + comment_id: ${{steps.find-comment.outputs.result}}, + body: ${{ steps.comment-text.outputs.result }} + }) \ No newline at end of file From d536c848426fe6273cc8a9f6e15fc58e12195b14 Mon Sep 17 00:00:00 2001 From: KshitijThareja Date: Tue, 13 Aug 2024 19:00:33 +0530 Subject: [PATCH 3/3] Migrate findComment and generateComment functions to githubUtils.js --- .github/githubUtils.js | 11 +++-------- .github/workflows/visual_tests.yml | 9 +++++++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/.github/githubUtils.js b/.github/githubUtils.js index 9f7dbb254..18381ab78 100644 --- a/.github/githubUtils.js +++ b/.github/githubUtils.js @@ -1,10 +1,5 @@ -const fs = require('fs'); -const path = require('path'); - -async function generateComment(github, context) { - const percyUrl = context.outputs.percy_url; - - return ` +async function generateComment(percyUrl) { + return ` ### Percy Visual Test Results **Percy Dashboard:** [View Detailed Report](${percyUrl}) @@ -45,4 +40,4 @@ async function findComment(github, context, issue_number) { module.exports = { findComment, generateComment, -} \ No newline at end of file +} diff --git a/.github/workflows/visual_tests.yml b/.github/workflows/visual_tests.yml index b7294e1ae..39c6b64fb 100644 --- a/.github/workflows/visual_tests.yml +++ b/.github/workflows/visual_tests.yml @@ -64,13 +64,18 @@ jobs: if: ${{ needs.visual_tests.result == 'success' }} runs-on: ubuntu-latest steps: + - name: Checkout code from PR + uses: actions/checkout@v4 + with: + ref: ${{ github.event.pull_request.head.sha }} - name: Define comment body id: comment-text uses: actions/github-script@v7 with: script: | + const percyUrl = "${{ needs.visual_tests.outputs.percy_url }}"; const utils = require('./.github/githubUtils.js'); - return await utils.generateComment(github, context); + return await utils.generateComment(percyUrl); - name: Find existing comment id: find-comment uses: actions/github-script@v7 @@ -101,4 +106,4 @@ jobs: repo: context.repo.repo, comment_id: ${{steps.find-comment.outputs.result}}, body: ${{ steps.comment-text.outputs.result }} - }) \ No newline at end of file + })