From 054a927007b5458cfe4e603aa3bbf10954d19119 Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Thu, 16 Jan 2020 19:26:47 +0100
Subject: [PATCH] feat(cli): Report info border color based on delta type

---
 packages/cli-utils/src/index.js               |  2 +-
 packages/cli/README.md                        | 26 +++++++-----
 packages/cli/bin/run.js                       | 41 +++++++++++++++++--
 packages/webpack-plugin/src/webpack-plugin.js |  2 +-
 4 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/packages/cli-utils/src/index.js b/packages/cli-utils/src/index.js
index ebaa5e3888..fe6d2ab7b7 100644
--- a/packages/cli-utils/src/index.js
+++ b/packages/cli-utils/src/index.js
@@ -8,4 +8,4 @@ export * from './constants';
 
 export const TEXT = T;
 
-export const getReportInfo = (report) => get(report, 'insights.webpack.assetsSizeTotal.data.text');
+export const getReportInfo = (report) => get(report, 'insights.webpack.assetsSizeTotal.data');
diff --git a/packages/cli/README.md b/packages/cli/README.md
index 1ab58a3096..f88c5fc6cc 100644
--- a/packages/cli/README.md
+++ b/packages/cli/README.md
@@ -102,9 +102,11 @@ $ bundle-stats --html --json __fixtures__/webpack-stats-0.json __fixtures__/webp
   ✔ Generate reports
   ✔ Save reports
 
-┌────────────────────────────────────────────┐
-│Bundle size decreased with -3.06KB (-0.38%).│
-└────────────────────────────────────────────┘
+┌─────────────────────────────────────────────────┐
+│                                                 │
+│   Bundle size decreased with 3.06KB (-0.38%).   │
+│                                                 │
+└─────────────────────────────────────────────────┘
 
 Artifacts saved:
 - ./dist/bundle-stats.html
@@ -132,15 +134,17 @@ $ bundle-stats --baseline artifacts/webpack-stats.json
  ✔ Generate reports
  ✔ Save reports
 
-┌────────────────────────────────────────────┐
-│Bundle size decreased with -3.06KB (-0.38%).│
-└────────────────────────────────────────────┘
+┌─────────────────────────────────────────────────┐
+│                                                 │
+│   Bundle size decreased with 3.06KB (-0.38%).   │
+│                                                 │
+└─────────────────────────────────────────────────┘
 
 Artifacts saved:
 - ./dist/bundle-stats.html
 ```
 
-```
+```shell
 # Checkout to the working branch/tag/commit
 $ git checkout MY_FEATURE_BRANCH
 
@@ -157,9 +161,11 @@ $ bundle-stats artifacts/webpack-stats.json
  ✔ Generate reports
  ✔ Save reports
 
-┌────────────────────────────────────────────┐
-│Bundle size decreased with -3.06KB (-0.38%).│
-└────────────────────────────────────────────┘
+┌─────────────────────────────────────────────────┐
+│                                                 │
+│   Bundle size decreased with 3.06KB (-0.38%).   │
+│                                                 │
+└─────────────────────────────────────────────────┘
 
 Artifacts saved:
 - ./dist/bundle-stats.html
diff --git a/packages/cli/bin/run.js b/packages/cli/bin/run.js
index 5fcd4e9e1f..e46e9bfca5 100644
--- a/packages/cli/bin/run.js
+++ b/packages/cli/bin/run.js
@@ -5,12 +5,37 @@ const Listr = require('listr');
 const { get } = require('lodash');
 const boxen = require('boxen');
 
-const { createJobs, createReport } = require('@bundle-stats/utils');
+const {
+  DELTA_TYPE_HIGH_NEGATIVE,
+  DELTA_TYPE_NEGATIVE,
+  DELTA_TYPE_LOW_NEGATIVE,
+  DELTA_TYPE_NO_CHANGE,
+  DELTA_TYPE_LOW_POSITIVE,
+  DELTA_TYPE_POSITIVE,
+  DELTA_TYPE_HIGH_POSITIVE,
+  createJobs,
+  createReport,
+} = require('@bundle-stats/utils');
 const { filter } = require('@bundle-stats/utils/lib/webpack');
 const {
   TEXT, createArtifacts, getBaselineStatsFilepath, getReportInfo, readBaseline, writeBaseline,
 } = require('@bundle-stats/cli-utils');
 
+const REPORT_INFO_COLORS = {
+  [DELTA_TYPE_HIGH_NEGATIVE]: 'red',
+  [DELTA_TYPE_NEGATIVE]: 'red',
+  [DELTA_TYPE_LOW_NEGATIVE]: 'yellow',
+  [DELTA_TYPE_NO_CHANGE]: 'gray',
+  [DELTA_TYPE_LOW_POSITIVE]: 'green',
+  [DELTA_TYPE_POSITIVE]: 'green',
+  [DELTA_TYPE_HIGH_POSITIVE]: 'green',
+};
+
+const getReportInfoBorderColor = (reportInfo) => {
+  const { deltaType } = reportInfo.info;
+  return REPORT_INFO_COLORS[deltaType];
+};
+
 module.exports = ({
   baseline, compare, html, json, outDir, artifactFilepaths,
 }) => {
@@ -105,10 +130,18 @@ module.exports = ({
 
   tasks.run()
     .then(({ output, report }) => {
-      const info = getReportInfo(report);
+      const reportInfo = getReportInfo(report);
+
+      if (reportInfo) {
+        const infoBox = boxen(
+          reportInfo.text,
+          {
+            padding: 1,
+            borderColor: getReportInfoBorderColor(reportInfo),
+          },
+        );
 
-      if (info) {
-        console.log(`\n${boxen(info)}`);
+        console.log(`\n${infoBox}`);
       }
 
       console.log('\nArtifacts:');
diff --git a/packages/webpack-plugin/src/webpack-plugin.js b/packages/webpack-plugin/src/webpack-plugin.js
index d17b2e2bcc..5141e7d389 100644
--- a/packages/webpack-plugin/src/webpack-plugin.js
+++ b/packages/webpack-plugin/src/webpack-plugin.js
@@ -92,7 +92,7 @@ const getOnEmit = (options) => async (compilation, callback) => {
   const info = getReportInfo(report);
 
   if (info) {
-    logger.info(info);
+    logger.info(info.text);
   }
 
   callback();