Merge pull request #15 from brenoepics/code-health

feat: implement code health and new template

README.md

@@ -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 | 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    | "--group=file" |
+| entryPoint      | Entry point for Vue Mess Detector            | false    | ./             |
+| srcDir          | Source directory to analyze                  | true     | src/           |
 
 ## Contributing
 

action.yml

@@ -26,6 +26,7 @@ inputs:
     required: false
   runArgs:
     description: "Arguments to pass to Vue Mess Detector"
+    default: "--group=file"
     required: false
   entryPoint:
     description: "Entry point for Vue Mess Detector"

src/analyser.ts

@@ -1,10 +1,11 @@
 import { detectManager, installPackage, runPackage } from "./packageManager.js";
 import * as core from "@actions/core";
-import { ActionInputs, getPath, isPullRequest } from "./utils.js";
+import { ActionInputs, getPath, isPullRequest } from "./github/utils.js";
 import { VMDAnalysis } from "./types.js";
 import fs from "node:fs";
 import { uploadOutputArtifact } from "./github/artifact.js";
 import { commentOnPullRequest } from "./github/comments.js";
+import { tagsRemover } from "./utils/constants.js";
 
 const coveragePath: string = "vmd-analysis.json";
 
@@ -63,9 +64,7 @@ export async function runVueMessDetector(input: ActionInputs): Promise<void> {
 export function parseAnalysisOutput(resultPath: string): VMDAnalysis {
   try {
     const fileContent: string = fs.readFileSync(resultPath, "utf-8");
-    const tagRegex: RegExp = /<[^>]+>/g;
-
-    const cleanedContent: string = fileContent.replace(tagRegex, "");
+    const cleanedContent: string = tagsRemover(fileContent);
     const parsedOutput: VMDAnalysis = JSON.parse(cleanedContent) as VMDAnalysis;
 
     core.info("Parsed output:");

src/github/comments.ts

@@ -2,7 +2,7 @@ import * as github from "@actions/github";
 import * as core from "@actions/core";
 import { VMDAnalysis } from "../types.js";
 import { GitHub } from "@actions/github/lib/utils.js";
-import { getCommentTemplate } from "../templates/comment.js";
+import { getCommentTemplate } from "../templates/commentTemplate.js";
 
 export async function commentOnPullRequest(
   analysis: VMDAnalysis,
@@ -14,7 +14,7 @@ export async function commentOnPullRequest(
 
   if (core.getInput("github-token") === "") {
     throw new Error(
-      "Error: could not add a comment to pull request because github-token is missing!"
+      "Could not add a comment to pull request because github-token is missing!"
     );
   }
 

src/main.ts

@@ -1,6 +1,6 @@
 import * as core from "@actions/core";
 import { runVueMessDetector } from "./analyser.js";
-import { ActionInputs, readActionInputs } from "./utils.js";
+import { ActionInputs, readActionInputs } from "./github/utils.js";
 
 /**
  * The main function for the action, which reads the inputs and runs the Vue Mess Detector.

src/templates/badge.ts → src/templates/badgeTemplate.ts

@@ -1,4 +1,9 @@
 import * as core from "@actions/core";
+import {
+  LOW_HEALTH_THRESHOLD,
+  MEDIUM_HEALTH_THRESHOLD,
+  OK_HEALTH_THRESHOLD
+} from "../utils/constants.js";
 
 const baseUrl: string = "https://img.shields.io/badge/";
 
@@ -24,31 +29,39 @@ export function buildBadgeUrl({
   labelColor,
   color
 }: BadgeOptions): string {
+  text = encodeURIComponent(text);
   return `${baseUrl}${text}-${text}?style=${style}&label=${encodeURIComponent(label)}&labelColor=${labelColor}&color=${color}`;
 }
 
+function getHealthColor(percentage: number) {
+  if (percentage < LOW_HEALTH_THRESHOLD) {
+    return "#e74c3c";
+  }
+  if (percentage < MEDIUM_HEALTH_THRESHOLD) {
+    return "#f39c12";
+  }
+  if (percentage < OK_HEALTH_THRESHOLD) {
+    return "#3498db";
+  }
+  return "#2ecc71";
+}
+
 export function getCoverageBadge(
-  percentage: number | undefined | string
+  percentage: number | undefined | string | null
 ): string {
   let color: string = "blue";
   const label: string = "Code Health";
 
-  if (percentage === undefined) {
+  if (percentage === undefined || percentage == null) {
     percentage = "N/A";
-    color = "lightgrey";
+    color = "#8c8c8c";
     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";
-    }
+    color = getHealthColor(percentage);
   }
 
   const badgeUrl: string = buildBadgeUrl({

src/templates/commentTemplate.ts

@@ -0,0 +1,47 @@
+import { VMDAnalysis } from "../types.js";
+import {
+  getCoverageInfo,
+  replaceBadges,
+  replaceCodeHealth,
+  replaceRepoData
+} from "./utils.js";
+import { getReportTemplate } from "./reportTemplate.js";
+
+const commentTemplate: string = `
+## 📊 Vue Mess Detector Analysis Results
+
+#### {{coverageBadge}}
+{{coverageInfo}}
+
+{{reportBlock}}
+{{artifactText}}
+
+###### For any issues or feedback, feel free to [report them here](https://github.com/brenoepics/vmd-action/issues/).
+`;
+
+export const coverageInfo: string = `
+🚨 Errors: {{errors}}
+⚠️ Warnings: {{warnings}}
+📝 Total Lines: {{linesCount}}
+📁 Total Files: {{filesCount}}
+`;
+
+export const artifactText: string = `
+🔍 [View Full Analysis Details](../actions/runs/{{runId}}/artifacts/{{artifactId}})
+`;
+
+export function getCommentTemplate(
+  result: VMDAnalysis,
+  artifactId: number | undefined
+): string {
+  let message: string = replaceRepoData(commentTemplate, artifactId);
+  if (result.codeHealth) {
+    message = replaceCodeHealth(message, result.codeHealth);
+  } else {
+    message = message.replace(/{{coverageInfo}}/g, getCoverageInfo(result));
+  }
+
+  message = replaceBadges(message, result);
+  message = message.replace(/{{reportBlock}}/g, getReportTemplate(result));
+  return message;
+}

src/templates/reportTemplate.ts

@@ -0,0 +1,51 @@
+import { ReportOutput, VMDAnalysis } from "../types.js";
+import { getReportAsMap } from "./utils.js";
+import path from "node:path";
+const reportBlock: string = `
+<details>
+  <summary>VMD Report</summary>
+  
+  {{outputList}}
+
+</details>
+`;
+
+export function getReportTemplate(analysis: VMDAnalysis): string {
+  const codeBlock: string = `\`\`\`\n${renderReport(analysis.reportOutput)}\n\`\`\``;
+  return reportBlock.replace(/{{outputList}}/g, codeBlock);
+}
+
+export function renderReport(analysis: {
+  [key: string]: ReportOutput[];
+}): string {
+  let outputList: string = "";
+  const res: Map<string, ReportOutput[]> = getReportAsMap(analysis);
+
+  res.forEach((value, key) => {
+    outputList += renderReportsByKey(key, value);
+  });
+
+  return outputList;
+}
+
+function isPath(key: string): boolean {
+  return path.isAbsolute(key) || key.includes(path.sep);
+}
+
+function renderReportsByKey(key: string, value: ReportOutput[]) {
+  if (isPath(key)) {
+    key = path.relative(process.cwd(), key);
+  }
+  let output: string = `\n- ${key}:`;
+  value.forEach(report => (output += singleReport(report)));
+  return output;
+}
+
+const singleReport: (report: ReportOutput) => string = (
+  report: ReportOutput
+): string => {
+  if (isPath(report.id)) {
+    report.id = path.relative(process.cwd(), report.id);
+  }
+  return `\n    ${report.id}: ${report.message}`;
+};

src/templates/utils.ts

@@ -0,0 +1,52 @@
+import { CodeHealth, ReportOutput, VMDAnalysis } from "../types.js";
+import * as github from "@actions/github";
+import { artifactText, coverageInfo } from "./commentTemplate.js";
+import { getCoverageBadge } from "./badgeTemplate.js";
+
+export function getReportAsMap(report: {
+  [key: string]: ReportOutput[];
+}): Map<string, ReportOutput[]> {
+  const reportOutputMap: Map<string, ReportOutput[]> = new Map<
+    string,
+    ReportOutput[]
+  >();
+
+  for (const [parent, outputs] of Object.entries(report)) {
+    reportOutputMap.set(parent, outputs);
+  }
+
+  return reportOutputMap;
+}
+
+export function getCoverageInfo(result: VMDAnalysis): string {
+  return result.codeHealthOutput.map(element => element.info).join("\n");
+}
+
+export function replaceCodeHealth(message: string, health: CodeHealth): string {
+  return message
+    .replace(/{{coverageInfo}}/g, coverageInfo)
+    .replace(/{{errors}}/g, health.errors.toLocaleString())
+    .replace(/{{warnings}}/g, health.warnings.toLocaleString())
+    .replace(/{{linesCount}}/g, health.linesCount.toLocaleString())
+    .replace(/{{filesCount}}/g, health.filesCount.toLocaleString())
+    .replace(/{{points}}/g, health.points ? health.points.toString() : "0");
+}
+
+export function replaceRepoData(
+  message: string,
+  artifactId: number | undefined
+): string {
+  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);
+}
+
+export function replaceBadges(message: string, result: VMDAnalysis): string {
+  return message.replace(
+    /{{coverageBadge}}/g,
+    getCoverageBadge(result.codeHealth?.points)
+  );
+}

src/types.ts

@@ -14,7 +14,7 @@ export interface CodeHealth {
   warnings: number;
   linesCount: number;
   filesCount: number;
-  points: number;
+  points: number | null;
 }
 
 export interface CodeHealthOutputElement {
@@ -25,4 +25,5 @@ export interface ReportOutput {
   id: string;
   description: string;
   message: string;
+  level?: string;
 }