refactor(ui): Use budgetInsights getInfo

relative-ci · Mar 12, 2022 · de40ce9 · de40ce9
1 parent e6d6830
commit de40ce9
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 128 deletions.
diff --git a/packages/ui/src/components/budget-info/budget-info.jsx b/packages/ui/src/components/budget-info/budget-info.jsx
@@ -1,46 +1,49 @@
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import { InsightType } from '@bundle-stats/utils';
+import * as budgetsInsightsTransformer from '@bundle-stats/utils/lib-esm/transformers/budgets-insights';
 
 import { Icon } from '../../ui/icon';
 import { Tooltip } from '../../ui/tooltip';
 
 import css from './budget-info.module.css';
 
-export const BudgetInfo = ({ className = '', budget, metric }) => {
-  const rootClassName = cx(css.root, budget.failed ? css.over : css.under, className);
+const INSIGHT_TYPE_MAP = {
+  [InsightType.SUCCESS]: {
+    className: css.success,
+    glyph: Icon.ICONS.CHECK_CIRCLE,
+  },
+  [InsightType.ERROR]: {
+    className: css.error,
+    glyph: Icon.ICONS.ALERT_CIRCLE,
+  },
+  [InsightType.WARNING]: {
+    className: css.warning,
+    glyph: Icon.ICONS.WARNING,
+  },
+};
+
+export const BudgetInfo = ({ className = '', metricId, budgetInsight }) => {
+  const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
+  const { className: insightTypeClassName, glyph } = INSIGHT_TYPE_MAP[budgetInsightInfo.type];
+
+  const rootClassName = cx(css.root, insightTypeClassName, className);
 
   return (
-    <Tooltip
-      className={rootClassName}
-      title={
-        <>
-          <strong>{metric.label}</strong>
-          {` is ${budget.failed ? 'over' : 'under'} `}
-          {metric.formatter(budget.budgetValue)}
-          {` budget`}
-        </>
-      }
-    >
-      <Icon
-        className={css.icon}
-        glyph={budget.failed ? Icon.ICONS.ALERT_CIRCLE : Icon.ICONS.CHECK_CIRCLE}
-        size="medium"
-      />
+    <Tooltip className={rootClassName} title={budgetInsightInfo.data.text}>
+      <Icon className={css.icon} glyph={glyph} size="medium" />
     </Tooltip>
   );
 };
 
 BudgetInfo.propTypes = {
-  budget: PropTypes.shape({
+  metricId: PropTypes.string.isRequired,
+  budgetInsight: PropTypes.shape({
     currentValue: PropTypes.number,
     budgetValue: PropTypes.number,
     failed: PropTypes.bool,
   }).isRequired,
-  metric: PropTypes.shape({
-    label: PropTypes.string,
-    formatter: PropTypes.func,
-  }).isRequired,
   className: PropTypes.string,
 };
 

diff --git a/packages/ui/src/components/budget-info/budget-info.module.css b/packages/ui/src/components/budget-info/budget-info.module.css
@@ -3,26 +3,38 @@
   line-height: 1em;
 }
 
-/* Budget over */
-.over .icon {
-  color: var(--color-danger-light);
+/* Budget error */
+.error .icon {
+  color: var(--color-danger);
 }
 
-.over .icon:hover,
-.over .icon:focus,
-.over .icon:active
+.error .icon:hover,
+.error .icon:focus,
+.error .icon:active
 {
-  color: var(--color-danger);
+  color: var(--color-danger-light);
 }
 
-/* Budget under */
-.under .icon {
+/* Budget success */
+.success .icon {
+  color: var(--color-success);
+}
+
+.success .icon:hover,
+.success .icon:focus,
+.success .icon:active
+{
   color: var(--color-success-light);
 }
 
-.under .icon:hover,
-.under .icon:focus,
-.under .icon:active
+/* Budget warning */
+.warning .icon {
+  color: var(--color-warning-dark);
+}
+
+.warning .icon:hover,
+.warning .icon:focus,
+.warning .icon:active
 {
-  color: var(--color-success);
+  color: var(--color-warning);
 }
diff --git a/packages/ui/src/components/budget-info/budget-info.stories.jsx b/packages/ui/src/components/budget-info/budget-info.stories.jsx
@@ -9,26 +9,33 @@ stories.addDecorator(getWrapperDecorator());
 
 stories.add('default', () => (
   <BudgetInfo
-    budget={{
-      budget: 300,
-      value: 250,
-      overBudget: false,
-    }}
-    metric={{
-      formatter: (v) => v,
+    metricId="webpack.assetCount"
+    budgetInsight={{
+      budgetValue: 300,
+      currentValue: 250,
+      failed: false,
     }}
   />
 ));
 
-stories.add('over', () => (
+stories.add('error', () => (
   <BudgetInfo
-    budget={{
-      budget: 300,
-      value: 350,
-      overBudget: true,
+    metricId="webpack.assetCount"
+    budgetInsight={{
+      budgetValue: 300,
+      currentValue: 350,
+      failed: true,
     }}
-    metric={{
-      formatter: (v) => v,
+  />
+));
+
+stories.add('warning', () => (
+  <BudgetInfo
+    metricId="webpack.assetCount"
+    budgetInsight={{
+      budgetValue: 300,
+      currentValue: 300,
+      failed: false,
     }}
   />
 ));
diff --git a/packages/ui/src/components/budget-insights/budget-insights.jsx b/packages/ui/src/components/budget-insights/budget-insights.jsx
@@ -1,7 +1,8 @@
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { METRIC_COMPONENT_LINKS, getGlobalMetricType } from '@bundle-stats/utils';
+import { METRIC_COMPONENT_LINKS } from '@bundle-stats/utils';
+import * as budgetsInsightsTransformer from '@bundle-stats/utils/lib-esm/transformers/budgets-insights';
 
 import { Box } from '../../layout/box';
 import { Stack } from '../../layout/stack';
@@ -12,26 +13,25 @@ import { ComponentLink } from '../component-link';
 import css from './budget-insights.module.css';
 
 const Budget = (props) => {
-  const { className, metricKey, CustomLink, failed, budgetValue } = props;
-  const metric = getGlobalMetricType(metricKey);
-  const componentLinkOptions = METRIC_COMPONENT_LINKS.get(metricKey);
+  const { className, metricId, budgetInsight, CustomLink } = props;
+  const componentLinkOptions = METRIC_COMPONENT_LINKS.get(metricId);
+  const budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
 
   return (
     <CustomLink className={cx(css.budget, className)} {...componentLinkOptions?.link}>
-      <span className={css.budgetLabel}>{metric.label}</span>
-      {` is ${failed ? 'over' : 'under'} `}
-      <span className={css.budgetValue}>{metric.formatter(budgetValue)}</span>
-      {` budget`}
+      {budgetInsightInfo.data.text}
     </CustomLink>
   );
 };
 
 Budget.propTypes = {
   className: PropTypes.string,
-  metricKey: PropTypes.string.isRequired,
-  failed: PropTypes.bool.isRequired,
-  currentValue: PropTypes.number.isRequired,
-  budgetValue: PropTypes.number.isRequired,
+  metricId: PropTypes.string.isRequired,
+  budgetInsight: PropTypes.shape({
+    currentValue: PropTypes.number.isRequired,
+    budgetValue: PropTypes.number.isRequired,
+    failed: PropTypes.bool.isRequired,
+  }).isRequired,
   CustomLink: PropTypes.elementType.isRequired,
 };
 
@@ -73,10 +73,9 @@ const BudgetsGroup = (props) => {
             {budgets.map(([key, budget]) => (
               <Budget
                 key={key}
-                source={source}
-                metricKey={`${source}.${key}`}
+                metricId={`${source}.${key}`}
+                budgetInsight={budget}
                 CustomLink={CustomLink}
-                {...budget}
               />
             ))}
           </Stack>

diff --git a/packages/ui/src/components/budget-insights/budget-insights.stories.jsx b/packages/ui/src/components/budget-insights/budget-insights.stories.jsx
@@ -23,44 +23,44 @@ Default.args = {
   source: 'webpack',
   budgets: {
     totalSizeByTypeALL: {
-      value: 2097917,
-      budget: 2097152,
-      overBudget: true,
+      currentValue: 2097917,
+      budgetValue: 2097152,
+      failed: true,
     },
     totalInitialSizeJS: {
-      value: 1265645,
-      budget: 524288,
-      overBudget: true,
+      currentValue: 1265645,
+      budgetValue: 524288,
+      failed: true,
     },
     totalInitialSizeCSS: {
-      value: 48866,
-      budget: 51200,
-      overBudget: false,
+      currentValue: 48866,
+      budgetValue: 51200,
+      failed: false,
     },
     chunkCount: {
-      value: 12,
-      budget: 50,
-      overBudget: false,
+      currentValue: 12,
+      budgetValue: 50,
+      failed: false,
     },
     moduleCount: {
-      value: 1059,
-      budget: 2000,
-      overBudget: false,
+      currentValue: 1059,
+      budgetValue: 2000,
+      failed: false,
     },
     duplicatePackagesCount: {
-      value: 13,
-      budget: 5,
-      overBudget: true,
+      currentValue: 13,
+      budgetValue: 5,
+      failed: true,
     },
     'sizes.totalSizeByTypeJS': {
-      value: 1981470,
-      budget: 2097152,
-      overBudget: false,
+      currentValue: 1981470,
+      budgetValue: 2097152,
+      failed: false,
     },
     'sizes.totalSizeByTypeCSS': {
-      value: 56091,
-      budget: 20480,
-      overBudget: true,
+      currentValue: 56091,
+      budgetValue: 20480,
+      failed: true,
     },
   },
 };
@@ -71,14 +71,14 @@ FailedBudgets.args = {
   source: 'webpack',
   budgets: {
     totalSizeByTypeALL: {
-      value: 2097917,
-      budget: 2097152,
-      overBudget: true,
+      currentValue: 2097917,
+      budgetValue: 2097152,
+      failed: true,
     },
     totalInitialSizeJS: {
-      value: 1265645,
-      budget: 524288,
-      overBudget: true,
+      currentValue: 1265645,
+      budgetValue: 524288,
+      failed: true,
     },
   },
 };
@@ -89,9 +89,9 @@ SingleBudget.args = {
   source: 'webpack',
   budgets: {
     totalInitialSizeJS: {
-      value: 524288,
-      budget: 1265645,
-      overBudget: false,
+      currentValue: 524288,
+      budgetValue: 1265645,
+      failed: false,
     },
   },
 };
diff --git a/packages/ui/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx b/packages/ui/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx
@@ -27,13 +27,12 @@ export const BundleAssetsTotalsTable = ({
       const [_, ...metricSlugs] = item.key.split('.');
       const metricKey = metricSlugs.join('.');
       const budget = get(budgets, metricKey);
-      const metric = webpack.getMetricType(metricKey);
 
       return (
         <CustomComponentLink section={section} title={title} params={params}>
           <FlexStack space="xxsmall" className={css.itemTitleText}>
             <span>{item.label}</span>
-            {budget && <BudgetInfo budget={budget} metric={metric} />}
+            {budget && <BudgetInfo metricId={item.key} budgetInsight={budget} />}
           </FlexStack>
         </CustomComponentLink>
       );

diff --git a/packages/ui/src/components/summary-item/summary-item.jsx b/packages/ui/src/components/summary-item/summary-item.jsx
@@ -65,7 +65,7 @@ export const SummaryItem = ({
           </HoverCard>
         )}
 
-        {budget && <BudgetInfo className={css.budgetInfo} metric={metric} budget={budget} />}
+        {budget && <BudgetInfo className={css.budgetInfo} metricId={id} budgetInsight={budget} />}
       </FlexStack>
 
       {!loading ? (
@@ -133,10 +133,10 @@ SummaryItem.propTypes = {
   /** Show delta */
   showDelta: PropTypes.bool,
 
-  /** Budget data */
+  /** Budget insight data */
   budget: PropTypes.shape({
-    value: PropTypes.number,
-    budget: PropTypes.number,
-    overBudget: PropTypes.bool,
+    currentBalue: PropTypes.number,
+    budgetValue: PropTypes.number,
+    failed: PropTypes.bool,
   }),
 };