Henry/how to earn payout component

.github/actions/analyze/action.yml

@@ -27,6 +27,9 @@ inputs:
   DATADOG_SESSION_SAMPLE_RATE:
     description: 'Datadog session sample rate'
     required: false
+  GITHUB_TOKEN:
+    description: 'Github token for downloading artifacts'
+    required: true
   GD_API_KEY:
     description: 'Google drive api key'
     required: false
@@ -54,10 +57,40 @@ inputs:
   IS_GROWTHBOOK_ENABLED:
     description: 'Is growthbook enabled'
     required: true
+  ISSUE_NUMBER:
+    description: 'Issue to post a comment to'
+    required: false
 
 runs:
   using: composite
   steps:
+
+  - name: Get artifact URL
+    id: get_artifact_url
+    env:
+      GITHUB_TOKEN: ${{ inputs.GITHUB_TOKEN }}
+    shell: bash
+    run: |
+      ARTIFACT_URL=$(curl -s -H "Authorization: Bearer $GITHUB_TOKEN" \
+        "https://api.github.com/repos/${{ github.repository }}/actions/artifacts" | \
+        jq -r '.artifacts | map(select(.workflow_run.head_branch == "master" and (.name | startswith("reports-")))) | .[0] | .archive_download_url')
+      echo "artifact_url=$ARTIFACT_URL" >> $GITHUB_OUTPUT
+      echo "artifact_url=$ARTIFACT_URL"
+
+  - name: Download artifact
+    if: steps.get_artifact_url.outputs.artifact_url != 'null'
+    env:
+      ARTIFACT_URL: ${{ steps.get_artifact_url.outputs.artifact_url }}
+      GITHUB_TOKEN: ${{ inputs.GITHUB_TOKEN }}
+    shell: bash
+    run: |
+      curl -L -H "Authorization: Bearer $GITHUB_TOKEN" \
+        "$ARTIFACT_URL" \
+        -o artifact.zip
+      unzip artifact.zip -d old
+      cd old
+      unzip reports.zip
+
   - name: Analyze all packages
     env:
       NODE_ENV: ${{ inputs.NODE_ENV }}
@@ -78,17 +111,44 @@ runs:
       REF_NAME: ${{ inputs.REF_NAME }}
       REMOTE_CONFIG_URL: ${{ inputs.REMOTE_CONFIG_URL }}
       NODE_OPTIONS: "--max_old_space_size=4096"
-    run: npm run build:prod && npm run analyze:stats
     shell: bash
+    run: npm run build:prod && npm run analyze:stats && npm run analyze:build
 
-  - name: Zip all stats.json files
+  - name: Compare report to master
+    id: diff
+    if: steps.get_artifact_url.outputs.artifact_url != 'null'
+    shell: bash
     run: |
-      zip -r stats.zip packages/*/stats.json
+      DIFF_OUTPUT=$(node .github/actions/analyze/compareReports.js)
+      echo "diff_output<<EOF" >> $GITHUB_OUTPUT
+      echo "$DIFF_OUTPUT" >> $GITHUB_OUTPUT
+      echo "EOF" >> $GITHUB_OUTPUT
+
+  - name: Comment on PR with Diff Output
+    if: steps.get_artifact_url.outputs.artifact_url != 'null' && inputs.ISSUE_NUMBER
+    uses: actions/github-script@v5
+    env:
+      DIFF_OUTPUT: ${{ steps.diff.outputs.diff_output }}
+      ISSUE_NUMBER: ${{ inputs.ISSUE_NUMBER }}
+    with:
+      script: |
+        const diffOutput = process.env.DIFF_OUTPUT;
+        const issueNumber = process.env.ISSUE_NUMBER;
+        github.rest.issues.createComment({
+          owner: context.repo.owner,
+          repo: context.repo.repo,
+          issue_number: issueNumber,
+          body: `${diffOutput}`
+        });
+
+  - name: Zip all report.json files
     shell: bash
+    run: |
+      zip -r reports.zip packages/*/report.json
 
-  - name: Upload stats.zip
+  - name: Upload reports.zip
     uses: actions/upload-artifact@v4
     with:
-      name: stats-${{ github.sha }}
-      path: stats.zip
-      retention-days: 1
+      name: reports-${{ github.sha }}
+      path: reports.zip
+      retention-days: 5

.github/actions/analyze/compareReports.js

@@ -0,0 +1,122 @@
+const fs = require('fs');
+const path = require('path');
+
+function roundUpToDecimals(num, decimals) {
+    const factor = Math.pow(10, decimals);
+    return Math.ceil(num * factor) / factor;
+}
+
+function readJsonFile(filePath) {
+    if (fs.existsSync(filePath)) {
+        const data = fs.readFileSync(filePath, 'utf-8');
+        return JSON.parse(data);
+    }
+    return null;
+}
+
+function calculateDiff(oldSize, newSize) {
+    return newSize - oldSize;
+}
+
+function calculatePercentage(oldSize, newSize) {
+    if (oldSize === 0) {
+        return newSize === 0 ? 0 : 100;
+    }
+    return ((newSize - oldSize) / oldSize) * 100;
+}
+
+function formatSize(size, roundUp) {
+    if (size === null) {
+        return '-';
+    }
+
+    const formattedSize = roundUp ? roundUpToDecimals(size / 1024, 2) + 'kb' : (size / 1024).toFixed(2) + 'kb';
+    return formattedSize;
+}
+
+const packagesDir = './packages';
+const oldPackagesDir = './old/packages';
+const packages = [...new Set([...fs.readdirSync(packagesDir), ...fs.readdirSync(oldPackagesDir)])];
+
+let tableRows = '';
+
+for (const pkg of packages) {
+    const oldReport = readJsonFile(path.join(oldPackagesDir, pkg, 'report.json'));
+    const newReport = readJsonFile(path.join(packagesDir, pkg, 'report.json'));
+
+    const oldSize = oldReport ? oldReport[0].gzipSize : null;
+    const newSize = newReport ? newReport[0].gzipSize : null;
+    let diff = oldSize && newSize ? calculateDiff(oldSize, newSize) : null;
+
+    if (oldSize === null) {
+        diff = newSize;
+    }
+
+    if (newSize === null) {
+        diff = oldSize;
+    }
+
+    let diffText = '-';
+
+    if (diff !== 0) {
+        diffText = diff < 0 ? '-' : '+' + formatSize(diff, true);
+    } else {
+        diffText = '+0kb';
+    }
+
+    let percentage = oldSize && newSize ? calculatePercentage(oldSize, newSize) : null;
+
+    if (oldSize === null) {
+        percentage = 100;
+    }
+
+    if (newSize === null) {
+        percentage = -100;
+    }
+
+    let percentageText = '-';
+    let percentageEmoji;
+
+    if (percentage === 0) {
+        percentageEmoji = '';
+    } else if (percentage < 0) {
+        percentageEmoji = '🟢'; // green for decrease
+    } else if (percentage >= 0 && percentage <= 5) {
+        percentageEmoji = '🟡'; // yellow for small increase
+    } else {
+        percentageEmoji = '🔴'; // red for larger increase
+    }
+
+    if (percentage !== 0) {
+        percentageText = percentage.toFixed(2) + '%';
+    } else {
+        percentageText = '0%';
+    }
+
+    tableRows += `
+    <tr>
+      <td>${pkg}</td>
+      <td>${formatSize(oldSize)}</td>
+      <td>${formatSize(newSize)}</td>
+      <td>${diffText}</td>
+      <td>${percentageText} ${percentageEmoji}</td>
+    </tr>
+  `.trim();
+}
+
+console.log(
+    `
+<table>
+  <thead>
+    <th>package</th>
+    <th>old</th>
+    <th>new</th>
+    <th>diff</th>
+    <th>percentage</th>
+  </thead>
+  <tbody>
+    ${tableRows}
+  </tbody>
+</table>
+`.trim()
+);

.github/workflows/analyze.yml

@@ -7,11 +7,16 @@ on:
     branches:
     - master
 
+
 jobs:
   build_and_test:
     name: Analyze Bundle
     runs-on: Runner_16cores_Deriv-app
     environment: Preview
+    permissions:
+      contents: read
+      pull-requests: write
+      actions: read
     steps:
     - name: Checkout
       uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11
@@ -31,6 +36,7 @@ jobs:
         DATADOG_SESSION_REPLAY_SAMPLE_RATE: ${{ vars.DATADOG_SESSION_REPLAY_SAMPLE_RATE }}
         DATADOG_SESSION_SAMPLE_RATE: ${{ vars.DATADOG_SESSION_SAMPLE_RATE }}
         DATADOG_SESSION_SAMPLE_RATE_LOGS: ${{ vars.DATADOG_SESSION_SAMPLE_RATE_LOGS }}
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         GD_API_KEY: ${{ secrets.GD_API_KEY }}
         GD_APP_ID: ${{ secrets.GD_APP_ID }}
         GD_CLIENT_ID: ${{ secrets.GD_CLIENT_ID }}
@@ -39,3 +45,4 @@ jobs:
         GROWTHBOOK_DECRYPTION_KEY: ${{ vars.GROWTHBOOK_DECRYPTION_KEY }}
         REF_NAME: ${{ github.ref_name }}
         REMOTE_CONFIG_URL: ${{ vars.REMOTE_CONFIG_URL }}
+        ISSUE_NUMBER: ${{ github.event.pull_request.number }}