feat(utils): format titles as links if docsUrl available in report-diff.md

Author: matejchalk

e2e/cli-e2e/tests/__snapshots__/compare.report-diff.md

@@ -16,7 +16,7 @@
 
 |🔌 Plugin|🗃️ Group|⭐ Current score|⭐ Previous score|🔄 Score change|
 |:--|:--|:--:|:--:|:--:|
-|ESLint|Suggestions|🟡 **71**|🟡 50|![↑ +21.4](https://img.shields.io/badge/%E2%86%91%20%2B21.4-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|Suggestions|🟡 **71**|🟡 50|![↑ +21.4](https://img.shields.io/badge/%E2%86%91%20%2B21.4-green)|
 
 3 other groups are unchanged.
 
@@ -30,9 +30,9 @@
 
 |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🔄 Value change|
 |:--|:--|:--:|:--:|:--:|
-|ESLint|Require or disallow method and property shorthand syntax for object literals|🟩 **passed**|🟥 3 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
-|ESLint|Require braces around arrow function bodies|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
-|ESLint|Require `const` declarations for variables that are never reassigned after declared|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require or disallow method and property shorthand syntax for object literals](https://eslint.org/docs/latest/rules/object-shorthand)|🟩 **passed**|🟥 3 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require braces around arrow function bodies](https://eslint.org/docs/latest/rules/arrow-body-style)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require `const` declarations for variables that are never reassigned after declared](https://eslint.org/docs/latest/rules/prefer-const)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
 
 44 other audits are unchanged.
 

packages/utils/src/lib/reports/__snapshots__/report-diff-added.md

@@ -23,7 +23,7 @@ All of 1 group is unchanged.
 
 |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🔄 Value change|
 |:--|:--|:--:|:--:|:--:|
-|ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-red)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Disallow unused variables](https://eslint.org/docs/latest/rules/no-unused-vars)|🟥 **1 error**|🟩 passed|![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-red)|
 
 48 other audits are unchanged.
 

packages/utils/src/lib/reports/__snapshots__/report-diff-improved.md

@@ -8,7 +8,7 @@
 |:--|:--:|:--:|:--:|
 |Code style|🟢 **100**|🟡 54|![↑ +46](https://img.shields.io/badge/%E2%86%91%20%2B46-green)|
 |Bug prevention|🟢 **95**|🟡 68|![↑ +27](https://img.shields.io/badge/%E2%86%91%20%2B27-green)|
-|Performance|🟢 **94**|🟢 92|![↑ +2](https://img.shields.io/badge/%E2%86%91%20%2B2-green)|
+|[Performance](https://developers.google.com/web/fundamentals/performance)|🟢 **94**|🟢 92|![↑ +2](https://img.shields.io/badge/%E2%86%91%20%2B2-green)|
 
 ## 🗃️ Groups
 
@@ -17,7 +17,7 @@
 
 |🔌 Plugin|🗃️ Group|⭐ Current score|⭐ Previous score|🔄 Score change|
 |:--|:--|:--:|:--:|:--:|
-|ESLint|Maximum lines limitation|🟢 **100**|🟡 50|![↑ +50](https://img.shields.io/badge/%E2%86%91%20%2B50-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|Maximum lines limitation|🟢 **100**|🟡 50|![↑ +50](https://img.shields.io/badge/%E2%86%91%20%2B50-green)|
 |Lighthouse|Performance|🟢 **94**|🟢 92|![↑ +2](https://img.shields.io/badge/%E2%86%91%20%2B2-green)|
 
 </details>
@@ -30,18 +30,18 @@
 
 |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🔄 Value change|
 |:--|:--|:--:|:--:|:--:|
-|ESLint|Disallow variable declarations from shadowing variables declared in the outer scope|🟩 **passed**|🟥 3 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
-|ESLint|Require or disallow method and property shorthand syntax for object literals|🟩 **passed**|🟥 3 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
-|ESLint|verifies the list of dependencies for Hooks like useEffect and similar|🟩 **passed**|🟥 2 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
-|ESLint|Disallow unused variables|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
-|ESLint|Require braces around arrow function bodies|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
-|ESLint|Require the use of `===` and `!==`|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
-|ESLint|Enforce a maximum number of lines of code in a function|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
-|ESLint|Require `const` declarations for variables that are never reassigned after declared|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
-|ESLint|Disallow missing `key` props in iterators/collection literals|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
-|Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|![↓ −8 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%928%E2%80%89%25-green)|
-|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)|
-|Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Disallow variable declarations from shadowing variables declared in the outer scope](https://eslint.org/docs/latest/rules/no-shadow)|🟩 **passed**|🟥 3 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require or disallow method and property shorthand syntax for object literals](https://eslint.org/docs/latest/rules/object-shorthand)|🟩 **passed**|🟥 3 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[verifies the list of dependencies for Hooks like useEffect and similar](https://github.com/facebook/react/issues/14920)|🟩 **passed**|🟥 2 warnings|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Disallow unused variables](https://eslint.org/docs/latest/rules/no-unused-vars)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require braces around arrow function bodies](https://eslint.org/docs/latest/rules/arrow-body-style)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require the use of `===` and `!==`](https://eslint.org/docs/latest/rules/eqeqeq)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Enforce a maximum number of lines of code in a function](https://eslint.org/docs/latest/rules/max-lines-per-function)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Require `const` declarations for variables that are never reassigned after declared](https://eslint.org/docs/latest/rules/prefer-const)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Disallow missing `key` props in iterators/collection literals](https://github.com/jsx-eslint/eslint-plugin-react/tree/master/docs/rules/jsx-key.md)|🟩 **passed**|🟥 1 warning|![↓ −100 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%92100%E2%80%89%25-green)|
+|Lighthouse|[Largest Contentful Paint](https://developer.chrome.com/docs/lighthouse/performance/largest-contentful-paint/)|🟨 **1.4 s**|🟨 1.5 s|![↓ −8 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%928%E2%80%89%25-green)|
+|Lighthouse|[First Contentful Paint](https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint/)|🟨 **1.1 s**|🟨 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)|
+|Lighthouse|[Speed Index](https://developer.chrome.com/docs/lighthouse/performance/speed-index/)|🟩 **1.1 s**|🟩 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)|
 
 40 other audits are unchanged.
 

packages/utils/src/lib/reports/__snapshots__/report-diff-mixed.md

@@ -31,10 +31,10 @@
 
 |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🔄 Value change|
 |:--|:--|:--:|:--:|:--:|
-|ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-red)|
-|Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|![↓ −8 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%928%E2%80%89%25-green)|
-|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)|
-|Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)|
+|[ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin)|[Disallow unused variables](https://eslint.org/docs/latest/rules/no-unused-vars)|🟥 **1 error**|🟩 passed|![↑ +∞ %](https://img.shields.io/badge/%E2%86%91%20%2B%E2%88%9E%E2%80%89%25-red)|
+|Lighthouse|[Largest Contentful Paint](https://developer.chrome.com/docs/lighthouse/performance/largest-contentful-paint/)|🟨 **1.4 s**|🟨 1.5 s|![↓ −8 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%928%E2%80%89%25-green)|
+|Lighthouse|[First Contentful Paint](https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint/)|🟨 **1.1 s**|🟨 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)|
+|Lighthouse|[Speed Index](https://developer.chrome.com/docs/lighthouse/performance/speed-index/)|🟩 **1.1 s**|🟩 1.2 s|![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green)|
 
 48 other audits are unchanged.
 

packages/utils/src/lib/reports/generate-md-reports-diff.ts

@@ -1,7 +1,16 @@
 import { AuditDiff, ReportsDiff } from '@code-pushup/models';
 import { pluralize, pluralizeToken } from '../formatting';
 import { objectToEntries } from '../transform';
-import { Alignment, details, h1, h2, paragraphs, style, tableMd } from './md';
+import {
+  Alignment,
+  details,
+  h1,
+  h2,
+  link,
+  paragraphs,
+  style,
+  tableMd,
+} from './md';
 import { DiffOutcome } from './types';
 import {
   colorByScoreDiff,
@@ -73,19 +82,19 @@ function formatDiffCategoriesSection(diff: ReportsDiff): string {
             '🔄 Score change',
           ],
           ...sortChanges(changed).map(category => [
-            category.title,
+            formatTitle(category),
             formatScoreWithColor(category.scores.after),
             formatScoreWithColor(category.scores.before, { skipBold: true }),
             formatScoreChange(category.scores.diff),
           ]),
           ...added.map(category => [
-            category.title,
+            formatTitle(category),
             formatScoreWithColor(category.score),
             style('n/a (\\*)', ['i']),
             style('n/a (\\*)', ['i']),
           ]),
           ...unchanged.map(category => [
-            category.title,
+            formatTitle(category),
             formatScoreWithColor(category.score),
             formatScoreWithColor(category.score, { skipBold: true }),
             '–',
@@ -112,8 +121,8 @@ function formatDiffGroupsSection(diff: ReportsDiff): string {
         '🔄 Score change',
       ],
       rows: sortChanges(diff.groups.changed).map(group => [
-        group.plugin.title,
-        group.title,
+        formatTitle(group.plugin),
+        formatTitle(group),
         formatScoreWithColor(group.scores.after),
         formatScoreWithColor(group.scores.before, { skipBold: true }),
         formatScoreChange(group.scores.diff),
@@ -135,8 +144,8 @@ function formatDiffAuditsSection(diff: ReportsDiff): string {
         '🔄 Value change',
       ],
       rows: sortChanges(diff.audits.changed).map(audit => [
-        audit.plugin.title,
-        audit.title,
+        formatTitle(audit.plugin),
+        formatTitle(audit),
         `${getSquaredScoreMarker(audit.scores.after)} ${style(
           audit.displayValues.after || audit.values.after.toString(),
         )}`,
@@ -235,6 +244,19 @@ function summarizeDiffOutcomes(outcomes: DiffOutcome[], token: string): string {
     .join(', ');
 }
 
+function formatTitle({
+  title,
+  docsUrl,
+}: {
+  title: string;
+  docsUrl?: string;
+}): string {
+  if (docsUrl) {
+    return link(docsUrl, title);
+  }
+  return title;
+}
+
 type Change = {
   scores: { diff: number };
   values?: { diff: number };