ci: add issue comment content limit and full verson html report (#46373)

.github/workflows/visual-regression-diff-finish.yml

@@ -113,8 +113,6 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           body: |
-            Visual-Regression Report Success
-            🥳 ✅ 📊 🎉 🎈
             ${{ steps.report.outputs.content }}
             <!-- VISUAL_DIFF_REGRESSION_HOOK -->
           body-include: '<!-- VISUAL_DIFF_REGRESSION_HOOK -->'
@@ -126,8 +124,7 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           body: |
-            Visual-Regression Report Failed
-            😔 📉 📊 ❌ 🚫
+            ## Visual-Regression Diff Failed
             <!-- VISUAL_DIFF_REGRESSION_HOOK -->
           body-include: '<!-- VISUAL_DIFF_REGRESSION_HOOK -->'
           number: ${{ steps.pr.outputs.id }}

.github/workflows/visual-regression-diff-start.yml

@@ -27,7 +27,6 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           body: |
-            Visual-Regression Diff Build Start
-            👀 📊 🔄 🔍 🐞
+            ## Visual-Regression Diff Building...
             <!-- VISUAL_DIFF_REGRESSION_HOOK -->
           body-include: '<!-- VISUAL_DIFF_REGRESSION_HOOK -->'

package.json

@@ -302,6 +302,8 @@
     "regenerator-runtime": "^0.14.0",
     "remark": "^15.0.1",
     "remark-cli": "^12.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-html": "^16.0.1",
     "remark-lint": "^9.1.2",
     "remark-lint-no-undefined-references": "^4.2.1",
     "remark-preset-lint-recommended": "^6.1.3",

scripts/visual-regression.ts

@@ -6,6 +6,9 @@ import os from 'os';
 import { Readable } from 'stream';
 import { finished } from 'stream/promises';
 
+import { remark } from 'remark';
+import remarkHtml from 'remark-html';
+import remarkGfm from 'remark-gfm';
 import minimist from 'minimist';
 import tar from 'tar';
 import fse from 'fs-extra';
@@ -103,46 +106,88 @@ interface IBadCase {
   filename: string;
 }
 
-function generateReportMd(badCases: IBadCase[], targetBranch: string, targetRef: string) {
-  if (badCases.length === 0) {
-    return 'Congrats! No visual-regression diff found.';
-  }
-
+function generateReport(badCases: IBadCase[], targetBranch: string, targetRef: string) {
   // parse args from -- --pr-id=123
   const argv = minimist(process.argv.slice(2));
   const prId = argv['pr-id'];
   assert(prId, 'Missing --pr-id');
   const publicPath = `${ossDomain}/pr-${prId}`;
 
+  const commonHeader = `
+## Visual Regression Report for PR #${prId}
+> **Target branch:** ${targetBranch} (${targetRef})
+  `.trim();
+
+  if (badCases.length === 0) {
+    return [
+      commonHeader,
+      '------------------------',
+      'Congrats! No visual-regression diff found',
+    ].join('\n');
+  }
+
+  const htmlReportLink = `${publicPath}/visualRegressionReport/report.html`;
+
+  const addonFullReportDesc = `\n\nToo many visual-regression diffs found, please check [Full Report](${htmlReportLink}) for details`;
+
+  // github action pr comment has limit of 65536 4-byte unicode characters
+  const limit = 65536 - addonFullReportDesc.length;
+
   let reportMdStr = `
-| image_name | expected | actual | diff |
+${commonHeader}
+> [View Full Report](${htmlReportLink})\n
+------------------------
+| image name | expected | actual | diff |
 | --- | --- | --- | --- |
     `.trim();
   reportMdStr += '\n';
 
+  let fullVersionMd = reportMdStr;
+
+  let addonFullReportDescAdded = false;
+
   for (const badCase of badCases) {
     const { filename, type } = badCase;
+    let lineReportMdStr = '';
     if (type === 'changed') {
-      reportMdStr += '| ';
-      reportMdStr += [
+      lineReportMdStr += '| ';
+      lineReportMdStr += [
         badCase.filename,
         `![${targetBranch}: ${targetRef}](${publicPath}/visualRegressionReport/images/base/${filename})`,
         `![current: pr-${prId}](${publicPath}/visualRegressionReport/images/current/${filename})`,
         `![diff](${publicPath}/visualRegressionReport/images/diff/${filename})`,
       ].join(' | ');
-      reportMdStr += ' |\n';
+      lineReportMdStr += ' |\n';
     } else if (type === 'removed') {
-      reportMdStr += '| ';
-      reportMdStr += [
+      lineReportMdStr += '| ';
+      lineReportMdStr += [
         badCase.filename,
-        `![master: ref](${publicPath}/visualRegressionReport/images/base/${filename})`,
+        `![${targetBranch}: ${targetRef}](${publicPath}/visualRegressionReport/images/base/${filename})`,
         `⛔️⛔️⛔️ Missing ⛔️⛔️⛔️`,
         `🚨🚨🚨 Removed 🚨🚨🚨`,
       ].join(' | ');
-      reportMdStr += ' |\n';
+      lineReportMdStr += ' |\n';
+    }
+
+    if (lineReportMdStr) {
+      if (reportMdStr.length + lineReportMdStr.length < limit) {
+        reportMdStr += lineReportMdStr;
+      } else if (!addonFullReportDescAdded) {
+        reportMdStr += addonFullReportDesc;
+        addonFullReportDescAdded = true;
+      }
+      fullVersionMd += lineReportMdStr;
     }
   }
-  return reportMdStr;
+
+  const reportHtmlStr = remark()
+    .use(remarkGfm)
+    .use(remarkHtml)
+    .processSync(fullVersionMd)
+    .toString();
+
+  // convert fullVersionMd to html
+  return [reportMdStr, reportHtmlStr];
 }
 
 async function boot() {
@@ -233,8 +278,9 @@ async function boot() {
   const jsonl = badCases.map((i) => JSON.stringify(i)).join('\n');
   // write jsonl and markdown report to diffImgDir
   await fse.writeFile(path.join(reportDir, './report.jsonl'), jsonl);
-  const mdStr = generateReportMd(badCases, targetBranch, targetRef);
-  await fse.writeFile(path.join(reportDir, './report.md'), mdStr);
+  const [reportMdStr, reportHtmlStr] = generateReport(badCases, targetBranch, targetRef);
+  await fse.writeFile(path.join(reportDir, './report.md'), reportMdStr);
+  await fse.writeFile(path.join(reportDir, './report.html'), reportHtmlStr);
 
   await tar.c(
     {