feat(utils): include optional link to portal in markdown comment

Author: matejchalk

packages/utils/src/lib/reports/__snapshots__/report-diff-with-portal-link.md

@@ -0,0 +1,42 @@
+# Code PushUp
+
+🤨 Code PushUp report has both **improvements and regressions** – compared target commit 0123456789abcdef0123456789abcdef01234567 with source commit abcdef0123456789abcdef0123456789abcdef01.
+
+[🕵️ See full comparison in Code PushUp portal 🔍](https://app.code-pushup.dev/portal/dunder-mifflin/website/comparison/abcdef0123456789abcdef0123456789abcdef01/0123456789abcdef0123456789abcdef01234567)
+
+## 🏷️ Categories
+
+| 🏷️ Category   | ⭐ Previous score | ⭐ Current score |                         🔄 Score change                          |
+| :------------- | :--------------: | :-------------: | :--------------------------------------------------------------: |
+| Bug prevention |      🟡 68       |    🟡 **63**    | ![↓ −5](https://img.shields.io/badge/%E2%86%93%20%E2%88%925-red) |
+| Performance    |      🟢 92       |    🟢 **94**    |   ![↑ +2](https://img.shields.io/badge/%E2%86%91%20%2B2-green)   |
+| Code style     |      🟡 54       |    🟡 **54**    |                                –                                 |
+
+## 🗃️ Groups
+
+<details>
+<summary>👍 <strong>1</strong> group improved</summary>
+
+| 🔌 Plugin  | 🗃️ Group   | ⭐ Previous score | ⭐ Current score |                       🔄 Score change                        |
+| :--------- | :---------- | :--------------: | :-------------: | :----------------------------------------------------------: |
+| Lighthouse | Performance |      🟢 92       |    🟢 **94**    | ![↑ +2](https://img.shields.io/badge/%E2%86%91%20%2B2-green) |
+
+1 other group is unchanged.
+
+</details>
+
+## 🛡️ Audits
+
+<details>
+<summary>👍 <strong>3</strong> audits improved, 👎 <strong>1</strong> audit regressed</summary>
+
+| 🔌 Plugin                                                          | 🛡️ Audit                                                                                                      | 📏 Previous value | 📏 Current value |                                 🔄 Value change                                  |
+| :----------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :---------------: | :--------------: | :------------------------------------------------------------------------------: |
+| [ESLint](https://www.npmjs.com/package/@code-pushup/eslint-plugin) | [Disallow unused variables](https://eslint.org/docs/latest/rules/no-unused-vars)                               |     🟩 passed     |  🟥 **1 error**  | ![↑ +∞ %](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.5 s      |   🟨 **1.4 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.2 s      |   🟨 **1.1 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.2 s      |   🟩 **1.1 s**   | ![↓ −4 %](https://img.shields.io/badge/%E2%86%93%20%E2%88%924%E2%80%89%25-green) |
+
+48 other audits are unchanged.
+
+</details>

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

@@ -58,4 +58,17 @@ describe('generateMdReportsDiff', () => {
       generateMdReportsDiff(reportsDiffAddedPluginMock()),
     ).toMatchFileSnapshot('__snapshots__/report-diff-added.md');
   });
+
+  it('should format Markdown comment with link to portal', async () => {
+    const report = reportsDiffAltMock();
+    const shas = [
+      report.commits!.before.hash,
+      report.commits!.after.hash,
+    ] as const;
+    const portalUrl = `https://app.code-pushup.dev/portal/dunder-mifflin/website/comparison/${shas[0]}/${shas[1]}`;
+
+    await expect(generateMdReportsDiff(report, portalUrl)).toMatchFileSnapshot(
+      '__snapshots__/report-diff-with-portal-link.md',
+    );
+  });
 });

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

@@ -21,18 +21,24 @@ import {
 // to prevent exceeding Markdown comment character limit
 const MAX_ROWS = 100;
 
-export function generateMdReportsDiff(diff: ReportsDiff): string {
+export function generateMdReportsDiff(
+  diff: ReportsDiff,
+  portalUrl?: string,
+): string {
   return new MarkdownDocument()
     .$concat(
-      createDiffHeaderSection(diff),
+      createDiffHeaderSection(diff, portalUrl),
       createDiffCategoriesSection(diff),
       createDiffGroupsSection(diff),
       createDiffAuditsSection(diff),
     )
     .toString();
 }
 
-function createDiffHeaderSection(diff: ReportsDiff): MarkdownDocument {
+function createDiffHeaderSection(
+  diff: ReportsDiff,
+  portalUrl: string | undefined,
+): MarkdownDocument {
   const outcomeTexts = {
     positive: md`🥳 Code PushUp report has ${md.bold('improved')}`,
     negative: md`😟 Code PushUp report has ${md.bold('regressed')}`,
@@ -58,6 +64,10 @@ function createDiffHeaderSection(diff: ReportsDiff): MarkdownDocument {
       diff.commits
         ? md`${outcomeTexts[outcome]} – ${styleCommits(diff.commits)}.`
         : outcomeTexts[outcome],
+    )
+    .paragraph(
+      portalUrl &&
+        md.link(portalUrl, '🕵️ See full comparison in Code PushUp portal 🔍'),
     );
 }