Merge pull request #720 from KshitijThareja/vt-ghaction

[Visual Testing] Update comment job in workflow to use custom script

.github/githubUtils.js

@@ -0,0 +1,43 @@
+async function generateComment(percyUrl) {
+  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,
+}

.github/workflows/visual_tests.yml

@@ -64,22 +64,46 @@ 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 }}
+      - name: Checkout code from PR
+        uses: actions/checkout@v4
         with:
-          message: |
-            ### 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
+          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(percyUrl);
+      - 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: |
+              github.rest.issues.createComment({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                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,
+                comment_id: ${{steps.find-comment.outputs.result}},
+                body: ${{ steps.comment-text.outputs.result }}
+              })