Updat comment job to use utils file

.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,
+}

.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
-              });
-            }
-
+                comment_id: ${{steps.find-comment.outputs.result}},
+                body: ${{ steps.comment-text.outputs.result }}
+              })