refactor: BudgetInsightInfo - return template + data

Author: vio

packages/ui/src/components/budget-info/budget-info.jsx

@@ -29,9 +29,22 @@ export const BudgetInfo = ({ className = '', metricId, budgetInsight }) => {
   const { className: insightTypeClassName, glyph } = INSIGHT_TYPE_MAP[budgetInsightInfo.type];
 
   const rootClassName = cx(css.root, insightTypeClassName, className);
+  const { data: messageData } = budgetInsightInfo.message;
 
   return (
-    <Tooltip className={rootClassName} title={budgetInsightInfo.data.text}>
+    <Tooltip
+      className={rootClassName}
+      title={
+        <>
+          <strong>{messageData.metricLabel}</strong>
+          {` value (`}
+          <strong>{messageData.currentValue}</strong>
+          {`) is ${messageData.diffLabel} `}
+          <strong>{messageData.budgetValue}</strong>
+          {` budget `}
+        </>
+      }
+    >
       <Icon className={css.icon} glyph={glyph} size="medium" />
     </Tooltip>
   );

packages/ui/src/components/budget-insights/budget-insights.jsx

@@ -16,10 +16,16 @@ const Budget = (props) => {
   const { className, metricId, budgetInsight, CustomLink } = props;
   const componentLinkOptions = METRIC_COMPONENT_LINKS.get(metricId);
   const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
+  const { data: messageData } = budgetInsightInfo.message;
 
   return (
     <CustomLink className={cx(css.budget, className)} {...componentLinkOptions?.link}>
-      {budgetInsightInfo.data.text}
+      <strong>{messageData.metricLabel}</strong>
+      {` value (`}
+      <strong>{messageData.currentValue}</strong>
+      {`) is ${messageData.diffLabel} `}
+      <strong>{messageData.budgetValue}</strong>
+      {` budget `}
     </CustomLink>
   );
 };

packages/utils/src/transformers/__tests__/budgets-insights.ts

@@ -1,4 +1,4 @@
-import { getInfo, getExtract } from '../budgets-insights';
+import { INFO_MESSAGE_TEMPLATE, getInfo, getExtract } from '../budgets-insights';
 
 describe('transformers/budgetsInsights', () => {
   describe('extract', () => {
@@ -91,14 +91,22 @@ describe('transformers/budgetsInsights', () => {
         }),
       ).toEqual({
         type: 'ERROR',
-        data: {
-          md: '**Bundle Size** is over **256KB** budget',
-          text: 'Bundle Size is over 256KB budget',
+        message: {
+          template: INFO_MESSAGE_TEMPLATE,
+          data: {
+            metricLabel: 'Bundle Size',
+            diffLabel: 'over',
+            currentValue: '512KB',
+            budgetValue: '256KB',
+          },
         },
         source: {
-          currentValue: 512 * 1024,
-          budgetValue: 256 * 1024,
-          failed: true,
+          metricId: 'webpack.totalSizeByTypeALL',
+          budgetInsight: {
+            currentValue: 512 * 1024,
+            budgetValue: 256 * 1024,
+            failed: true,
+          },
         },
       });
     });
@@ -112,14 +120,22 @@ describe('transformers/budgetsInsights', () => {
         }),
       ).toEqual({
         type: 'SUCCESS',
-        data: {
-          md: '**Bundle Size** is under **1MB** budget',
-          text: 'Bundle Size is under 1MB budget',
+        message: {
+          template: INFO_MESSAGE_TEMPLATE,
+          data: {
+            metricLabel: 'Bundle Size',
+            diffLabel: 'under',
+            currentValue: '512KB',
+            budgetValue: '1MB',
+          },
         },
         source: {
-          currentValue: 512 * 1024,
-          budgetValue: 1024 * 1024,
-          failed: false,
+          metricId: 'webpack.totalSizeByTypeALL',
+          budgetInsight: {
+            currentValue: 512 * 1024,
+            budgetValue: 1024 * 1024,
+            failed: false,
+          },
         },
       });
     });
@@ -133,14 +149,22 @@ describe('transformers/budgetsInsights', () => {
         }),
       ).toEqual({
         type: 'WARNING',
-        data: {
-          md: '**Bundle Size** is equal with **512KB** budget',
-          text: 'Bundle Size is equal with 512KB budget',
+        message: {
+          template: INFO_MESSAGE_TEMPLATE,
+          data: {
+            metricLabel: 'Bundle Size',
+            diffLabel: 'equal with',
+            currentValue: '512KB',
+            budgetValue: '512KB',
+          },
         },
         source: {
-          currentValue: 512 * 1024,
-          budgetValue: 512 * 1024,
-          failed: false,
+          metricId: 'webpack.totalSizeByTypeALL',
+          budgetInsight: {
+            currentValue: 512 * 1024,
+            budgetValue: 512 * 1024,
+            failed: false,
+          },
         },
       });
     });

packages/utils/src/transformers/budgets-insights.ts

@@ -1,5 +1,4 @@
 import get from 'lodash/get';
-import template from 'lodash/template';
 
 import { InsightType } from '../constants';
 import { getGlobalMetricType } from '../utils';
@@ -21,11 +20,14 @@ interface BudgetInsight {
 
 interface BudgetInsightInfo {
   type: InsightType;
-  data: {
-    text: string;
-    md: string;
+  message: {
+    template: string;
+    data: Record<string, unknown>;
+  };
+  source: {
+    metricId: string;
+    budgetInsight: BudgetInsight;
   };
-  source: BudgetInsight;
 }
 
 interface BudgetInsights {
@@ -84,8 +86,6 @@ export const getExtract =
     };
   };
 
-const infoTemplate = template('<%= metric %> is <%= diff %> <%= value %> budget');
-
 const resolveDiffLabel = (budgetInsight: BudgetInsight): string => {
   const { currentValue, budgetValue } = budgetInsight;
 
@@ -112,23 +112,32 @@ const resolveType = (budgetInsight: BudgetInsight): InsightType => {
   return InsightType.SUCCESS;
 };
 
+// Add escapes for (|) to avoid lodash.template syntax errors
+// eslint-disable-next-line no-useless-escape
+export const INFO_MESSAGE_TEMPLATE = '<%= metricLabel %> value \(<%= currentValue %>\) is <%= diffLabel %> <%= budgetValue %> budget';
+
 export const getInfo = (globalMetricId: string, budgetInsight: BudgetInsight): BudgetInsightInfo => {
   const metric = getGlobalMetricType(globalMetricId);
 
-  const diff = resolveDiffLabel(budgetInsight);
+  const diffLabel = resolveDiffLabel(budgetInsight);
   const type = resolveType(budgetInsight);
-  const value = metric.formatter(budgetInsight.budgetValue);
+  const currentValue = metric.formatter(budgetInsight.currentValue);
+  const budgetValue = metric.formatter(budgetInsight.budgetValue);
 
   return {
     type,
-    data: {
-      text: infoTemplate({ metric: metric.label, diff, value }),
-      md: infoTemplate({
-        metric: `**${metric.label}**`,
-        diff,
-        value: `**${value}**`,
-      }),
+    message: {
+      template: INFO_MESSAGE_TEMPLATE,
+      data: {
+        metricLabel: metric.label,
+        diffLabel,
+        currentValue,
+        budgetValue,
+      },
+    },
+    source: {
+      metricId: globalMetricId,
+      budgetInsight,
     },
-    source: budgetInsight,
   };
 };