feat: comment-report-format option allow to summarize changed file co…

…mment format (#107)

README.md

@@ -165,6 +165,12 @@ Default is "reg_actions".
 
 The option to disable push to a branch. When set to false, the `branch` option is ignored, and images will not be displayed in the comments.
 
+#### `comment-report-format` (Optional)
+
+- Type: String
+- Default: `"raw"`
+
+The option how to render changed file in comment. This action will change PR and workflow summary report format. Available options are `raw` and `summarized`. `raw` will render report comment with expanded results. `summarized` will render report comment using `<details>` tag to summarize by changed files.
 
 ## Limitation
 

dist/action.yml

@@ -40,7 +40,10 @@ inputs:
     required: false
   report-file-path:
     description: "Path of the generated report html file. This file can be deployed in other Actions steps, but is not included in the artifact. If omitted, no html report is generated."
-    required: false    
+    required: false
+  comment-report-format:
+    description: "The option how to render changed file in comment. `raw` by default."
+    required: false
 runs:
   using: "node20"
   main: "lib/index.js"

src/comment.ts

@@ -15,6 +15,7 @@ export type CreateCommentWithTargetInput = {
   date: string;
   customReportPage: string | null;
   disableBranch: boolean;
+  commentReportFormat: 'raw' | 'summarized';
 };
 
 export type CreateCommentWithoutTargetInput = {
@@ -57,7 +58,15 @@ const createBaseUrl = ({
   return `https://github.com/${owner}/${repoName}/blob/${branch}/${date}_${runId}_${artifactName}/`;
 };
 
-const differences = ({ result, baseUrl }: { result: CompareOutput; baseUrl: string }): string => {
+const differences = ({
+  result,
+  baseUrl,
+  commentReportFormat,
+}: {
+  result: CompareOutput;
+  baseUrl: string;
+  commentReportFormat: 'raw' | 'summarized';
+}): string => {
   if (result.failedItems.length === 0) return '';
   const comment = `   
      
@@ -70,21 +79,37 @@ ${result.failedItems
     const actual = baseUrl + 'actual/' + filename + '?raw=true';
     const expected = baseUrl + 'expected/' + filename + '?raw=true';
     const diff = baseUrl + 'diff/' + filename + '?raw=true';
-
-    return `### \`${base}\`
-   
+    const table = `
 | actual|![Actual](${actual}) |
 |--|--|
 |expected|![Expected](${expected})|
-|difference|![Difference](${diff})|`;
+|difference|![Difference](${diff})|
+`;
+
+    if (commentReportFormat === 'summarized') {
+      return `<details><summary>${base}</summary>
+${table}
+</details>`;
+    } else {
+      return `### \`${base}\`
+${table}`;
+    }
   })
   .join('\n')}
   `;
 
   return comment;
 };
 
-const newItems = ({ result, baseUrl }: { result: CompareOutput; baseUrl: string }): string => {
+const newItems = ({
+  result,
+  baseUrl,
+  commentReportFormat,
+}: {
+  result: CompareOutput;
+  baseUrl: string;
+  commentReportFormat: 'raw' | 'summarized';
+}): string => {
   if (result.newItems.length === 0) return '';
   const comment = `   
      
@@ -95,20 +120,35 @@ ${result.newItems
     const base = basename(item);
     const filename = encodeURIComponent(base);
     const img = baseUrl + 'actual/' + filename + '?raw=true';
-    return `### \`${base}\`
-       
+    const table = `
 |  |
 |--|
 |![NewItem](${img})|
-       `;
+`;
+    if (commentReportFormat === 'summarized') {
+      return `<details><summary>${base}</summary>
+${table}
+</details>`;
+    } else {
+      return `### \`${base}\`
+${table}`;
+    }
   })
   .join('\n')}
   `;
 
   return comment;
 };
 
-const deletedItems = ({ result, baseUrl }: { result: CompareOutput; baseUrl: string }): string => {
+const deletedItems = ({
+  result,
+  baseUrl,
+  commentReportFormat,
+}: {
+  result: CompareOutput;
+  baseUrl: string;
+  commentReportFormat: 'raw' | 'summarized';
+}): string => {
   if (result.deletedItems.length === 0) return '';
   const comment = `   
    
@@ -119,12 +159,19 @@ ${result.deletedItems
     const base = basename(item);
     const filename = encodeURIComponent(base);
     const img = baseUrl + 'expected/' + filename + '?raw=true';
-    return `### \`${base}\`
-       
+    const table = `
 |  |
 |--|
 |![DeleteItem](${img})|
-       `;
+`;
+    if (commentReportFormat === 'summarized') {
+      return `<details><summary>${base}</summary>
+${table}
+</details>`;
+    } else {
+      return `### \`${base}\`
+${table}`;
+    }
   })
   .join('\n')}
   `;
@@ -143,6 +190,7 @@ export const createCommentWithTarget = ({
   date,
   customReportPage,
   disableBranch,
+  commentReportFormat,
 }: CreateCommentWithTargetInput): string => {
   const [owner, repoName] = event.repository.full_name.split('/');
   const targetHash = targetRun.head_sha;
@@ -157,9 +205,9 @@ export const createCommentWithTarget = ({
       : `   
 <details>
 <summary>📝 Report</summary>
-${differences({ result, baseUrl })}
-${newItems({ result, baseUrl })}
-${deletedItems({ result, baseUrl })}
+${differences({ result, baseUrl, commentReportFormat })}
+${newItems({ result, baseUrl, commentReportFormat })}
+${deletedItems({ result, baseUrl, commentReportFormat })}
 </details>`;
 
   const reportUrl = customReportPage

src/config.ts

@@ -16,6 +16,7 @@ export interface Config {
   disableBranch: boolean;
   customReportPage: string | null;
   reportFilePath: string | null;
+  commentReportFormat: 'raw' | 'summarized';
 }
 
 const validateGitHubToken = (githubToken: string | undefined) => {
@@ -94,6 +95,12 @@ const validateReportFilePath = (path: string | undefined) => {
   }
 };
 
+function validateCommentReportFormat(format: string): asserts format is 'raw' | 'summarized' {
+  if (format !== 'raw' && format !== 'summarized') {
+    throw new Error(`'comment-report-format' input must be 'raw' or 'summarized' but got '${format}'`);
+  }
+}
+
 export const getConfig = (): Config => {
   const githubToken = core.getInput('github-token');
   const imageDirectoryPath = core.getInput('image-directory-path');
@@ -112,6 +119,8 @@ export const getConfig = (): Config => {
   validateCustomReportPage(customReportPage);
   const reportFilePath = core.getInput('report-file-path');
   validateReportFilePath(reportFilePath);
+  const commentReportFormat = core.getInput('comment-report-format') || 'raw';
+  validateCommentReportFormat(commentReportFormat);
 
   return {
     githubToken,
@@ -126,5 +135,6 @@ export const getConfig = (): Config => {
     disableBranch: getBoolInput(core.getInput('disable-branch')),
     customReportPage,
     reportFilePath,
+    commentReportFormat,
   };
 };

src/service.ts

@@ -200,6 +200,7 @@ export const run = async ({
     regBranch: config.branch,
     customReportPage: config.customReportPage,
     disableBranch: config.disableBranch,
+    commentReportFormat: config.commentReportFormat,
   });
 
   await client.postComment(event.number, comment);