feat: implement new codeHealth output and new template

README.md

@@ -15,8 +15,8 @@ request alerts and display badges effortlessly.
 
 <details>
 <summary>Preview</summary>
-  
-  ![image](https://github.com/user-attachments/assets/975a8e08-ce7d-4b36-8f2d-3b16307a4d49)
+
+![image](https://github.com/user-attachments/assets/975a8e08-ce7d-4b36-8f2d-3b16307a4d49)
 </details>
 
 ## Installation
@@ -63,7 +63,7 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           # check inputs for full args list
-      
+
 ```
 
 ## Usage
@@ -76,16 +76,16 @@ artifacts.
 > [!TIP]
 > You can find the list of inputs and their descriptions in the [action.yml](action.yml) file.
 
-| Input           | Description                                                       | Required | Default  |
-|-----------------|-------------------------------------------------------------------|----------|----------|
-| github-token    | GitHub token for commenting on pull requests/generating artifacts | false    |          |
-| version         | Version of Vue Mess Detector                                      | true     | latest   |
-| skipInstall     | Skip the installation of Vue Mess Detector                        | true     | false    |
-| commentsEnabled | Comment on Pull requests?                                         | true     | true     |
-| packageManager  | Package manager to use                                            | false    | (detect) |
-| runArgs         | Arguments to pass to Vue Mess Detector                            | false    |          |
-| entryPoint      | Entry point for Vue Mess Detector                                 | false    | ./       |
-| srcDir          | Source directory to analyze                                       | true     | src/     |
+| Input           | Description                                  | Required | Default  |
+|-----------------|----------------------------------------------|----------|----------|
+| github-token    | GitHub token for commenting on pull requests | false    |          |
+| version         | Version of Vue Mess Detector                 | true     | latest   |
+| skipInstall     | Skip the installation of Vue Mess Detector   | true     | false    |
+| commentsEnabled | Comment on Pull requests?                    | true     | true     |
+| packageManager  | Package manager to use                       | false    | (detect) |
+| runArgs         | Arguments to pass to Vue Mess Detector       | false    |          |
+| entryPoint      | Entry point for Vue Mess Detector            | false    | ./       |
+| srcDir          | Source directory to analyze                  | true     | src/     |
 
 ## Contributing
 

action.yml

@@ -7,8 +7,7 @@ branding:
   color: "green"
 inputs:
   github-token:
-    description:
-      "GitHub token for commenting on pull requests/generating artifacts"
+    description: "GitHub token for commenting on pull requests"
     required: false
   version:
     description: "Version of Vue Mess Detector"

dist/index.js

@@ -137647,44 +137647,103 @@ async function uploadCoverageArtifact(filePath, artifactName) {
     return await artifactClient.uploadArtifact(artifactName, files, rootDirectory);
 }
 
+;// CONCATENATED MODULE: ./src/templates/badge.ts
+
+const baseUrl = "https://img.shields.io/badge/";
+function buildBadgeUrl({ text, style, label, labelColor, color }) {
+    return `${baseUrl}${text}-${text}?style=${style}&label=${encodeURIComponent(label)}&labelColor=${labelColor}&color=${color}`;
+}
+function getCoverageBadge(percentage) {
+    let color = "blue";
+    const label = "Code Health";
+    if (percentage === undefined) {
+        percentage = "N/A";
+        color = "lightgrey";
+        core.warning("No code health data found in the analysis output! you may need to update vue-mess-detector to >= 0.54.1");
+    }
+    if (typeof percentage === "number") {
+        if (percentage < 40) {
+            color = "red";
+        }
+        else if (percentage < 70) {
+            color = "yellow";
+        }
+        else {
+            color = "green";
+        }
+    }
+    const badgeUrl = buildBadgeUrl({
+        text: `${percentage.toString()}%`,
+        style: "flat",
+        label,
+        labelColor: "8A2BE2",
+        color
+    });
+    return `![${label}](${badgeUrl})`;
+}
+
 ;// CONCATENATED MODULE: ./src/templates/comment.ts
 
-const comment = `
-## 🎉 Vue Mess Detector Analysis Results 🎉
 
-📊 **Coverage Information:**
+const comment = `
+## 📊 Vue Mess Detector Analysis Results
 
+#### Code Health: {{coverageBadge}}
 {{coverageInfo}}
 {{artifactText}}
 
-_For any issues, please report them [here](https://github.com/brenoepics/vmd-action/issues) 🐞._
+###### For any issues, please [report them here](https://github.com/brenoepics/vmd-action/issues/).
+`;
+const coverageInfo = `
+Errors: {{errors}}
+Warnings: {{warnings}}
+Total Lines: {{linesCount}}
+Total Files: {{filesCount}}
+Points: {{points}}
 `;
 const artifactText = `
-🚀 The detailed coverage report has been successfully uploaded! You can access it [here](../actions/runs/{{runId}}/artifacts/{{artifactId}}) 🔗.
+[See analysis details here](../actions/runs/{{runId}}/artifacts/{{artifactId}})
 `;
-/**
- * TODO: this is a tweak to remove the progress,in the future would be great to have a fully parsed errors, warns... message.
- *
- */
-function getCommentTemplate(codeHealthOutput, artifactId) {
-    const coverageInfo = codeHealthOutput
-        .filter((_, index) => index !== 1) // Skip the progress element (index 1)
-        .map(element => element.info)
-        .join("\n");
-    return comment
+function getCoverageInfo(result) {
+    return result.codeHealthOutput.map(element => element.info).join("\n");
+}
+function replaceCodeHealth(message, health) {
+    return message
         .replace(/{{coverageInfo}}/g, coverageInfo)
+        .replace(/{{errors}}/g, health.errors.toString())
+        .replace(/{{warnings}}/g, health.warnings.toString())
+        .replace(/{{linesCount}}/g, health.linesCount.toString())
+        .replace(/{{filesCount}}/g, health.filesCount.toString())
+        .replace(/{{points}}/g, health.points.toString());
+}
+function replaceRepoData(message, artifactId) {
+    return message
         .replace(/{{artifactText}}/g, artifactId ? artifactText : "")
         .replace(/{{artifactId}}/g, String(artifactId ?? 0))
         .replace(/{{runId}}/g, github.context.runId.toString())
         .replace(/{{repository/g, github.context.repo.repo)
         .replace(/{{repositoryOwner/g, github.context.repo.owner);
 }
+function replaceBadges(message, result) {
+    return message.replace(/{{coverageBadge}}/g, getCoverageBadge(result.codeHealth?.points));
+}
+function getCommentTemplate(result, artifactId) {
+    let message = replaceRepoData(comment, artifactId);
+    if (result.codeHealth) {
+        message = replaceCodeHealth(message, result.codeHealth);
+    }
+    else {
+        message = message.replace(/{{coverageInfo}}/g, getCoverageInfo(result));
+    }
+    message = replaceBadges(message, result);
+    return message;
+}
 
 ;// CONCATENATED MODULE: ./src/github/comments.ts
 
 
 
-async function commentOnPullRequest(parsedOutput, artifactId) {
+async function commentOnPullRequest(analysis, artifactId) {
     if (!github.context.payload.pull_request) {
         throw new Error("No pull request found in the context!");
     }
@@ -137696,7 +137755,7 @@ async function commentOnPullRequest(parsedOutput, artifactId) {
     const { owner, repo } = github.context.repo;
     const pull_number = github.context.payload.pull_request.number;
     try {
-        const commentBody = getCommentTemplate(parsedOutput.codeHealthOutput, artifactId);
+        const commentBody = getCommentTemplate(analysis, artifactId);
         await octokit.rest.issues.createComment({
             owner,
             repo,

src/github/comments.ts

@@ -5,7 +5,7 @@ import { GitHub } from "@actions/github/lib/utils.js";
 import { getCommentTemplate } from "../templates/comment.js";
 
 export async function commentOnPullRequest(
-  parsedOutput: VMDAnalysis,
+  analysis: VMDAnalysis,
   artifactId: number | undefined
 ): Promise<void> {
   if (!github.context.payload.pull_request) {
@@ -22,10 +22,7 @@ export async function commentOnPullRequest(
   const pull_number: number = github.context.payload.pull_request.number;
 
   try {
-    const commentBody: string = getCommentTemplate(
-      parsedOutput.codeHealthOutput,
-      artifactId
-    );
+    const commentBody: string = getCommentTemplate(analysis, artifactId);
     await octokit.rest.issues.createComment({
       owner,
       repo,

src/templates/badge.ts

@@ -0,0 +1,63 @@
+import * as core from "@actions/core";
+
+const baseUrl: string = "https://img.shields.io/badge/";
+
+export type BadgeStyle =
+  | "flat"
+  | "plastic"
+  | "flat-square"
+  | "for-the-badge"
+  | "social";
+
+interface BadgeOptions {
+  text: string;
+  style: BadgeStyle;
+  label: string;
+  labelColor: string;
+  color: string;
+}
+
+export function buildBadgeUrl({
+  text,
+  style,
+  label,
+  labelColor,
+  color
+}: BadgeOptions): string {
+  return `${baseUrl}${text}-${text}?style=${style}&label=${encodeURIComponent(label)}&labelColor=${labelColor}&color=${color}`;
+}
+
+export function getCoverageBadge(
+  percentage: number | undefined | string
+): string {
+  let color: string = "blue";
+  const label: string = "Code Health";
+
+  if (percentage === undefined) {
+    percentage = "N/A";
+    color = "lightgrey";
+    core.warning(
+      "No code health data found in the analysis output! you may need to update vue-mess-detector to >= 0.54.1"
+    );
+  }
+
+  if (typeof percentage === "number") {
+    if (percentage < 40) {
+      color = "red";
+    } else if (percentage < 70) {
+      color = "yellow";
+    } else {
+      color = "green";
+    }
+  }
+
+  const badgeUrl: string = buildBadgeUrl({
+    text: `${percentage.toString()}%`,
+    style: "flat",
+    label,
+    labelColor: "8A2BE2",
+    color
+  });
+
+  return `![${label}](${badgeUrl})`;
+}

src/templates/comment.ts

@@ -1,39 +1,70 @@
-import { CodeHealthOutputElement } from "../types.js";
+import { CodeHealth, VMDAnalysis } from "../types.js";
 import * as github from "@actions/github";
+import { getCoverageBadge } from "./badge.js";
 
 const comment: string = `
-## 🎉 Vue Mess Detector Analysis Results 🎉
-
-📊 **Coverage Information:**
+## 📊 Vue Mess Detector Analysis Results
 
+#### Code Health: {{coverageBadge}}
 {{coverageInfo}}
 {{artifactText}}
 
-_For any issues, please report them [here](https://github.com/brenoepics/vmd-action/issues) 🐞._
+###### For any issues, please [report them here](https://github.com/brenoepics/vmd-action/issues/).
+`;
+
+const coverageInfo: string = `
+Errors: {{errors}}
+Warnings: {{warnings}}
+Total Lines: {{linesCount}}
+Total Files: {{filesCount}}
+Points: {{points}}
 `;
 
 const artifactText: string = `
-🚀 The detailed coverage report has been successfully uploaded! You can access it [here](../actions/runs/{{runId}}/artifacts/{{artifactId}}) 🔗.
+[See analysis details here](../actions/runs/{{runId}}/artifacts/{{artifactId}})
 `;
 
-/**
- * TODO: this is a tweak to remove the progress,in the future would be great to have a fully parsed errors, warns... message.
- *
- */
-export function getCommentTemplate(
-  codeHealthOutput: CodeHealthOutputElement[],
-  artifactId: number | undefined
-): string {
-  const coverageInfo: string = codeHealthOutput
-    .filter((_, index) => index !== 1) // Skip the progress element (index 1)
-    .map(element => element.info)
-    .join("\n");
+function getCoverageInfo(result: VMDAnalysis) {
+  return result.codeHealthOutput.map(element => element.info).join("\n");
+}
 
-  return comment
+function replaceCodeHealth(message: string, health: CodeHealth) {
+  return message
     .replace(/{{coverageInfo}}/g, coverageInfo)
+    .replace(/{{errors}}/g, health.errors.toString())
+    .replace(/{{warnings}}/g, health.warnings.toString())
+    .replace(/{{linesCount}}/g, health.linesCount.toString())
+    .replace(/{{filesCount}}/g, health.filesCount.toString())
+    .replace(/{{points}}/g, health.points.toString());
+}
+
+function replaceRepoData(message: string, artifactId: number | undefined) {
+  return message
     .replace(/{{artifactText}}/g, artifactId ? artifactText : "")
     .replace(/{{artifactId}}/g, String(artifactId ?? 0))
     .replace(/{{runId}}/g, github.context.runId.toString())
     .replace(/{{repository/g, github.context.repo.repo)
     .replace(/{{repositoryOwner/g, github.context.repo.owner);
 }
+
+function replaceBadges(message: string, result: VMDAnalysis) {
+  return message.replace(
+    /{{coverageBadge}}/g,
+    getCoverageBadge(result.codeHealth?.points)
+  );
+}
+
+export function getCommentTemplate(
+  result: VMDAnalysis,
+  artifactId: number | undefined
+): string {
+  let message: string = replaceRepoData(comment, artifactId);
+  if (result.codeHealth) {
+    message = replaceCodeHealth(message, result.codeHealth);
+  } else {
+    message = message.replace(/{{coverageInfo}}/g, getCoverageInfo(result));
+  }
+
+  message = replaceBadges(message, result);
+  return message;
+}

src/types.ts

@@ -1,7 +1,20 @@
+/**
+ * This file contains the typescript interfaces for the VMDAnalysis object
+ * codeHealth is only present on vue-mess-detector >= 0.54.1
+ */
 export interface VMDAnalysis {
   output: CodeHealthOutputElement[];
   codeHealthOutput: CodeHealthOutputElement[];
   reportOutput: { [key: string]: ReportOutput[] };
+  codeHealth?: CodeHealth;
+}
+
+export interface CodeHealth {
+  errors: number;
+  warnings: number;
+  linesCount: number;
+  filesCount: number;
+  points: number;
 }
 
 export interface CodeHealthOutputElement {