@bundle-stats/ui 3.4.0-alpha.3 → 3.4.0-beta.0

package/lib/app/app.js

@@ -109,6 +109,7 @@ var Layout = function Layout(_ref) {
 
 Layout.propTypes = {
   jobs: _propTypes["default"].arrayOf(_propTypes["default"].object),
+  // eslint-disable-line react/forbid-prop-types
   version: _propTypes["default"].string
 };
 Layout.defaultProps = {
@@ -135,7 +136,8 @@ var JobsProvider = function JobsProvider(_ref2) {
 };
 
 JobsProvider.propTypes = {
-  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired
+  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired // eslint-disable-line react/forbid-prop-types
+
 };
 
 var OverviewContent = function OverviewContent() {

package/lib/app/header/header.js

@@ -36,7 +36,8 @@ var Header = function Header(_ref) {
 exports.Header = Header;
 Header.propTypes = {
   className: _propTypes["default"].string,
-  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object)
+  jobs: _propTypes["default"].arrayOf(_propTypes["default"].object) // eslint-disable-line react/forbid-prop-types
+
 };
 Header.defaultProps = {
   className: '',

package/lib/components/budget-info/budget-info.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,8 +13,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("@bundle-stats/utils");
 
-var budgetsInsightsTransformer = _interopRequireWildcard(require("@bundle-stats/utils/lib-esm/transformers/budgets-insights"));
-
 var _icon = require("../../ui/icon");
 
 var _tooltip = require("../../ui/tooltip");
@@ -25,10 +21,6 @@ var _budgetInfoModule = _interopRequireDefault(require("./budget-info.module.css
 
 var _INSIGHT_TYPE_MAP;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -47,17 +39,14 @@ var INSIGHT_TYPE_MAP = (_INSIGHT_TYPE_MAP = {}, _defineProperty(_INSIGHT_TYPE_MA
 var BudgetInfo = function BudgetInfo(_ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      metricId = _ref.metricId,
       budgetInsight = _ref.budgetInsight;
-  var budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
-  var _INSIGHT_TYPE_MAP$bud = INSIGHT_TYPE_MAP[budgetInsightInfo.type],
+  var _INSIGHT_TYPE_MAP$bud = INSIGHT_TYPE_MAP[budgetInsight.type],
       insightTypeClassName = _INSIGHT_TYPE_MAP$bud.className,
       glyph = _INSIGHT_TYPE_MAP$bud.glyph;
   var rootClassName = (0, _classnames["default"])(_budgetInfoModule["default"].root, insightTypeClassName, className);
-  var messageData = budgetInsightInfo.message.data;
   return /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
     className: rootClassName,
-    title: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, messageData.metricLabel), " value (", /*#__PURE__*/_react["default"].createElement("strong", null, messageData.currentValue), ") is ".concat(messageData.diffLabel, " "), /*#__PURE__*/_react["default"].createElement("strong", null, messageData.budgetValue), " budget ")
+    title: budgetInsight.message.text
   }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     className: _budgetInfoModule["default"].icon,
     glyph: glyph,
@@ -67,11 +56,16 @@ var BudgetInfo = function BudgetInfo(_ref) {
 
 exports.BudgetInfo = BudgetInfo;
 BudgetInfo.propTypes = {
-  metricId: _propTypes["default"].string.isRequired,
   budgetInsight: _propTypes["default"].shape({
-    currentValue: _propTypes["default"].number,
-    budgetValue: _propTypes["default"].number,
-    failed: _propTypes["default"].bool
+    type: _propTypes["default"].string,
+    message: _propTypes["default"].shape({
+      text: _propTypes["default"].string
+    }),
+    data: _propTypes["default"].shape({
+      currentValue: _propTypes["default"].number,
+      budgetValue: _propTypes["default"].number,
+      failed: _propTypes["default"].bool
+    })
   }).isRequired,
   className: _propTypes["default"].string
 };

package/lib/components/budget-info/budget-info.stories.js

@@ -14,31 +14,46 @@ var stories = (0, _react2.storiesOf)('Components/BudgetInfo', module);
 stories.addDecorator((0, _stories.getWrapperDecorator)());
 stories.add('default', function () {
   return /*#__PURE__*/_react["default"].createElement(_.BudgetInfo, {
-    metricId: "webpack.assetCount",
     budgetInsight: {
-      budgetValue: 300,
-      currentValue: 250,
-      failed: false
+      type: 'SUCCESS',
+      message: {
+        text: 'Metric is under the budget'
+      },
+      data: {
+        budgetValue: 300,
+        currentValue: 250,
+        failed: false
+      }
     }
   });
 });
 stories.add('error', function () {
   return /*#__PURE__*/_react["default"].createElement(_.BudgetInfo, {
-    metricId: "webpack.assetCount",
     budgetInsight: {
-      budgetValue: 300,
-      currentValue: 350,
-      failed: true
+      type: 'ERROR',
+      message: {
+        text: 'Metric is over the budget'
+      },
+      data: {
+        budgetValue: 300,
+        currentValue: 250,
+        failed: false
+      }
     }
   });
 });
 stories.add('warning', function () {
   return /*#__PURE__*/_react["default"].createElement(_.BudgetInfo, {
-    metricId: "webpack.assetCount",
     budgetInsight: {
-      budgetValue: 300,
-      currentValue: 300,
-      failed: false
+      type: 'WARNING',
+      message: {
+        text: 'Metric is equal the budget'
+      },
+      data: {
+        budgetValue: 300,
+        currentValue: 250,
+        failed: false
+      }
     }
   });
 });

package/lib/components/budget-insights/budget-insights.js

@@ -15,8 +15,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _utils = require("@bundle-stats/utils");
 
-var budgetsInsightsTransformer = _interopRequireWildcard(require("@bundle-stats/utils/lib-esm/transformers/budgets-insights"));
-
 var _box = require("../../layout/box");
 
 var _stack = require("../../layout/stack");
@@ -54,35 +52,40 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 var Budget = function Budget(props) {
   var className = props.className,
       metricId = props.metricId,
-      budgetInsight = props.budgetInsight,
+      budget = props.budget,
       CustomLink = props.CustomLink;
 
   var componentLinkOptions = _utils.METRIC_COMPONENT_LINKS.get(metricId);
 
-  var budgetInsightInfo = budgetsInsightsTransformer.getInfo(metricId, budgetInsight);
-  var messageData = budgetInsightInfo.message.data;
   return /*#__PURE__*/_react["default"].createElement(CustomLink, _extends({
-    className: (0, _classnames["default"])(_budgetInsightsModule["default"].budget, className)
-  }, componentLinkOptions === null || componentLinkOptions === void 0 ? void 0 : componentLinkOptions.link), /*#__PURE__*/_react["default"].createElement("strong", null, messageData.metricLabel), " value (", /*#__PURE__*/_react["default"].createElement("strong", null, messageData.currentValue), ") is ".concat(messageData.diffLabel, " "), /*#__PURE__*/_react["default"].createElement("strong", null, messageData.budgetValue), " budget ");
+    className: (0, _classnames["default"])(_budgetInsightsModule["default"].budget, className, budget.type === 'SUCCESS' && _budgetInsightsModule["default"].budgetSuccess)
+  }, componentLinkOptions === null || componentLinkOptions === void 0 ? void 0 : componentLinkOptions.link), budget.message.text);
 };
 
 Budget.propTypes = {
   className: _propTypes["default"].string,
   metricId: _propTypes["default"].string.isRequired,
-  budgetInsight: _propTypes["default"].shape({
-    currentValue: _propTypes["default"].number.isRequired,
-    budgetValue: _propTypes["default"].number.isRequired,
-    failed: _propTypes["default"].bool.isRequired
+  budget: _propTypes["default"].shape({
+    type: _propTypes["default"].string,
+    message: _propTypes["default"].shape({
+      text: _propTypes["default"].string
+    }),
+    data: _propTypes["default"].shape({
+      currentValue: _propTypes["default"].number.isRequired,
+      budgetValue: _propTypes["default"].number.isRequired,
+      failed: _propTypes["default"].bool.isRequired
+    })
   }).isRequired,
   CustomLink: _propTypes["default"].elementType.isRequired
 };
 Budget.defaultProps = {
   className: ''
 };
+var BUDGET_ALERT_KIND = new Map([['ERROR', 'danger'], ['WARNING', 'warning'], ['SUCCESS', 'success']]);
+var BUDGET_ICON = new Map([['ERROR', _icon.Icon.ICONS.ALERT_CIRCLE], ['WARNING', _icon.Icon.ICONS.WARNING], ['SUCCESS', _icon.Icon.ICONS.CHECK_CIRCLE]]);
 
-var BudgetsGroup = function BudgetsGroup(props) {
+var BudgetInsights = function BudgetInsights(props) {
   var className = props.className,
-      kind = props.kind,
       source = props.source,
       budgets = props.budgets,
       CustomLink = props.CustomLink;
@@ -92,11 +95,24 @@ var BudgetsGroup = function BudgetsGroup(props) {
       showBudgets = _useState2[0],
       setShowBudgets = _useState2[1];
 
-  var isFailed = kind === 'danger';
+  var iconGlyph = BUDGET_ICON.get(budgets.type);
+  var alertKind = BUDGET_ALERT_KIND.get(budgets.type);
+  var rootClassName = (0, _classnames["default"])(_budgetInsightsModule["default"].group, className, _budgetInsightsModule["default"]["group-".concat(alertKind)]);
+  var budgetItems = (0, _react.useMemo)(function () {
+    var items = Object.entries(budgets.data); // When there are errors/warnings, sort budget items first
+
+    if (['ERROR', 'WARNING'].includes(budgets.type)) {
+      items.sort(function (a) {
+        return a[1].type === budgets.type ? -1 : 1;
+      });
+    }
+
+    return items;
+  }, [budgets]);
   return /*#__PURE__*/_react["default"].createElement(_alert.Alert, {
-    kind: kind,
+    kind: alertKind,
     padding: "none",
-    className: (0, _classnames["default"])(_budgetInsightsModule["default"].group, _budgetInsightsModule["default"][kind], className)
+    className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
     padding: ['xsmall', 'small'],
     className: _budgetInsightsModule["default"].groupHeader,
@@ -108,17 +124,17 @@ var BudgetsGroup = function BudgetsGroup(props) {
   }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     space: "xxsmall",
     className: _budgetInsightsModule["default"].groupTitle
-  }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+  }, iconGlyph && /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     className: _budgetInsightsModule["default"].groupIcon,
-    glyph: isFailed ? _icon.Icon.ICONS.ALERT_CIRCLE : _icon.Icon.ICONS.CHECK_CIRCLE
-  }), /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("strong", null, budgets.length), " budget ".concat(budgets.length > 1 ? 'checks' : 'check', " ").concat(isFailed ? 'failed' : 'passed')), /*#__PURE__*/_react["default"].createElement("span", {
+    glyph: iconGlyph
+  }), /*#__PURE__*/_react["default"].createElement("span", null, budgets.message.text), /*#__PURE__*/_react["default"].createElement("span", {
     className: _budgetInsightsModule["default"].groupTitleToggle
   }, showBudgets ? 'hide' : 'show', " all"))), showBudgets && /*#__PURE__*/_react["default"].createElement(_box.Box, {
     padding: ['xsmall', 'small'],
     className: _budgetInsightsModule["default"].groupContent
   }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     space: "none"
-  }, budgets.map(function (_ref) {
+  }, budgetItems.map(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         key = _ref2[0],
         budget = _ref2[1];
@@ -126,66 +142,12 @@ var BudgetsGroup = function BudgetsGroup(props) {
     return /*#__PURE__*/_react["default"].createElement(Budget, {
       key: key,
       metricId: "".concat(source, ".").concat(key),
-      budgetInsight: budget,
+      budget: budget,
       CustomLink: CustomLink
     });
   }))));
 };
 
-BudgetsGroup.propTypes = {
-  className: _propTypes["default"].string,
-  kind: _propTypes["default"].oneOf(['success', 'danger']).isRequired,
-  source: _propTypes["default"].string.isRequired,
-  budgets: _propTypes["default"].object.isRequired,
-  // eslint-disable-line react/forbid-prop-types
-  CustomLink: _propTypes["default"].elementType.isRequired
-};
-BudgetsGroup.defaultProps = {
-  className: ''
-};
-
-var BudgetInsights = function BudgetInsights(props) {
-  var className = props.className,
-      source = props.source,
-      budgets = props.budgets,
-      CustomLink = props.CustomLink;
-
-  var _useMemo = (0, _react.useMemo)(function () {
-    var passed = [];
-    var failed = [];
-    Object.entries(budgets).forEach(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 2),
-          key = _ref4[0],
-          budget = _ref4[1];
-
-      if (budget.failed) {
-        failed.push([key, budget]);
-      } else {
-        passed.push([key, budget]);
-      }
-    });
-    return [failed, passed];
-  }, [budgets]),
-      _useMemo2 = _slicedToArray(_useMemo, 2),
-      failedBudgets = _useMemo2[0],
-      passedBudgets = _useMemo2[1];
-
-  return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-    className: className,
-    space: "xsmall"
-  }, failedBudgets.length > 0 && /*#__PURE__*/_react["default"].createElement(BudgetsGroup, {
-    kind: "danger",
-    source: source,
-    budgets: failedBudgets,
-    CustomLink: CustomLink
-  }), passedBudgets.length > 0 && /*#__PURE__*/_react["default"].createElement(BudgetsGroup, {
-    kind: "success",
-    source: source,
-    budgets: passedBudgets,
-    CustomLink: CustomLink
-  }));
-};
-
 exports.BudgetInsights = BudgetInsights;
 BudgetInsights.propTypes = {
   className: _propTypes["default"].string,

package/lib/components/budget-insights/budget-insights.module.css

@@ -20,11 +20,15 @@
   margin: 0 0 0 auto !important;
 }
 
-.danger .groupIcon {
+.group-danger .groupIcon {
   color: var(--color-danger);
 }
 
-.success .groupIcon {
+.group-warning .groupIcon {
+  color: var(--color-warning);
+}
+
+.group-success .groupIcon {
   color: var(--color-success);
 }
 
@@ -39,6 +43,10 @@
   text-decoration: none;
 }
 
+.budgetSuccess {
+  color: var(--color-text-light);
+}
+
 .budgetLabel,
 .budgetValue {
   color: var(--color-text-dark);

package/lib/components/budget-insights/budget-insights.stories.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SingleBudget = exports.FailedBudgets = exports.Default = void 0;
+exports["default"] = exports.WarnedBudgets = exports.FailedBudgets = exports.Default = void 0;
+
+var _merge2 = _interopRequireDefault(require("lodash/merge"));
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,92 +15,151 @@ var _ = require(".");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = {
-  title: 'Components/BudgetInsights',
-  component: _.BudgetInsights,
-  decorators: [function (Story) {
-    return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.MemoryRouter, null, /*#__PURE__*/_react["default"].createElement(Story, null));
-  }]
-};
-exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_.BudgetInsights, args);
-};
-
-var Default = Template.bind();
-exports.Default = Default;
-Default.args = {
-  source: 'webpack',
-  budgets: {
+var BUDGETS = {
+  type: 'SUCCESS',
+  message: {
+    text: '8 budget checks passed',
+    md: '**8** budget checks passed'
+  },
+  data: {
     totalSizeByTypeALL: {
-      currentValue: 2097917,
-      budgetValue: 2097152,
-      failed: true
+      type: 'ERROR',
+      message: {
+        text: 'Bundle Size is above the budget',
+        md: 'Bundle Size is above the budget'
+      },
+      data: {
+        currentValue: 2097917,
+        budgetValue: 2097152,
+        failed: true
+      }
     },
     totalInitialSizeJS: {
-      currentValue: 1265645,
-      budgetValue: 524288,
-      failed: true
+      type: 'ERROR',
+      message: {
+        text: 'Initial JS is above the budget',
+        md: 'Initial JS is above the budget'
+      },
+      data: {
+        currentValue: 1265645,
+        budgetValue: 524288,
+        failed: true
+      }
     },
     totalInitialSizeCSS: {
-      currentValue: 48866,
-      budgetValue: 51200,
-      failed: false
+      type: 'SUCCESS',
+      message: {
+        text: 'Initial CSS is below the budget',
+        md: 'Initial CSS is below the budget'
+      },
+      data: {
+        currentValue: 48866,
+        budgetValue: 51200,
+        failed: false
+      }
     },
     chunkCount: {
-      currentValue: 12,
-      budgetValue: 50,
-      failed: false
+      type: 'SUCCESS',
+      message: {
+        text: 'Chunks is below the budget',
+        md: 'Chunks is below the budget'
+      },
+      data: {
+        currentValue: 12,
+        budgetValue: 50,
+        failed: false
+      }
     },
     moduleCount: {
-      currentValue: 1059,
-      budgetValue: 2000,
-      failed: false
+      type: 'SUCCESS',
+      message: {
+        text: 'Modules is below the budget',
+        md: 'Modules is below the budget'
+      },
+      data: {
+        currentValue: 1059,
+        budgetValue: 2000,
+        failed: false
+      }
     },
     duplicatePackagesCount: {
-      currentValue: 13,
-      budgetValue: 5,
-      failed: true
+      type: 'ERROR',
+      message: {
+        text: 'Duplicate packages is above the budget',
+        md: 'Duplicate packages is above the budget'
+      },
+      data: {
+        currentValue: 13,
+        budgetValue: 5,
+        failed: true
+      }
     },
     'sizes.totalSizeByTypeJS': {
-      currentValue: 1981470,
-      budgetValue: 2097152,
-      failed: false
+      type: 'SUCCESS',
+      message: {
+        text: 'JS is below the budget',
+        md: 'JS is below the budget'
+      },
+      data: {
+        currentValue: 1981470,
+        budgetValue: 2097152,
+        failed: false
+      }
     },
     'sizes.totalSizeByTypeCSS': {
-      currentValue: 56091,
-      budgetValue: 20480,
-      failed: true
+      type: 'SUCCESS',
+      message: {
+        text: 'CSS is below the budget',
+        md: 'CSS is below the budget'
+      },
+      data: {
+        currentValue: 56091,
+        budgetValue: 20480,
+        failed: true
+      }
     }
   }
 };
+var _default = {
+  title: 'Components/BudgetInsights',
+  component: _.BudgetInsights,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.MemoryRouter, null, /*#__PURE__*/_react["default"].createElement(Story, null));
+  }]
+};
+exports["default"] = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_.BudgetInsights, args);
+};
+
+var Default = Template.bind();
+exports.Default = Default;
+Default.args = {
+  source: 'webpack',
+  budgets: BUDGETS
+};
 var FailedBudgets = Template.bind();
 exports.FailedBudgets = FailedBudgets;
 FailedBudgets.args = {
   source: 'webpack',
-  budgets: {
-    totalSizeByTypeALL: {
-      currentValue: 2097917,
-      budgetValue: 2097152,
-      failed: true
-    },
-    totalInitialSizeJS: {
-      currentValue: 1265645,
-      budgetValue: 524288,
-      failed: true
+  budgets: (0, _merge2["default"])({}, BUDGETS, {
+    type: 'ERROR',
+    message: {
+      text: '2/8 budget checks failed',
+      md: '**2/8** budget checks failed'
     }
-  }
+  })
 };
-var SingleBudget = Template.bind();
-exports.SingleBudget = SingleBudget;
-SingleBudget.args = {
+var WarnedBudgets = Template.bind();
+exports.WarnedBudgets = WarnedBudgets;
+WarnedBudgets.args = {
   source: 'webpack',
-  budgets: {
-    totalInitialSizeJS: {
-      currentValue: 524288,
-      budgetValue: 1265645,
-      failed: false
+  budgets: (0, _merge2["default"])({}, BUDGETS, {
+    type: 'WARNING',
+    message: {
+      text: '2/8 budget checks warned',
+      md: '**2/8** budget checks warned'
     }
-  }
+  })
 };

package/lib/components/bundle-assets/bundle-assets.js

@@ -206,7 +206,8 @@ RowHeader.propTypes = {
     isChunk: _propTypes["default"].bool,
     isInitial: _propTypes["default"].bool,
     isEntry: _propTypes["default"].bool,
-    runs: _propTypes["default"].arrayOf(_propTypes["default"].object)
+    runs: _propTypes["default"].arrayOf(_propTypes["default"].object) // eslint-disable-line react/forbid-prop-types
+
   }).isRequired,
   chunks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     id: _propTypes["default"].string,

package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.js

@@ -56,7 +56,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
-  var _jobs$0$insights, _jobs$0$insights$webp;
+  var _jobs$0$insights, _jobs$0$insights$webp, _jobs$0$insights$webp2;
 
   var className = _ref.className,
       jobs = _ref.jobs,
@@ -66,7 +66,7 @@ var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
   var items = (0, _react.useMemo)(function () {
     return webpack.compareBySection.sizes(jobs);
   }, [jobs]);
-  var budgets = (_jobs$0$insights = jobs[0].insights) === null || _jobs$0$insights === void 0 ? void 0 : (_jobs$0$insights$webp = _jobs$0$insights.webpack) === null || _jobs$0$insights$webp === void 0 ? void 0 : _jobs$0$insights$webp.budgets;
+  var budgets = (_jobs$0$insights = jobs[0].insights) === null || _jobs$0$insights === void 0 ? void 0 : (_jobs$0$insights$webp = _jobs$0$insights.webpack) === null || _jobs$0$insights$webp === void 0 ? void 0 : (_jobs$0$insights$webp2 = _jobs$0$insights$webp.budgets) === null || _jobs$0$insights$webp2 === void 0 ? void 0 : _jobs$0$insights$webp2.data;
   var renderRowHeader = (0, _react.useCallback)(function (item) {
     var fileType = _constants.ASSETS_SIZES_FILE_TYPE_MAP[item.key];
 
@@ -87,10 +87,9 @@ var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
       title: title,
       params: params
     }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-      space: "xxsmall",
+      space: "xxxsmall",
       className: _bundleAssetsTotalsTableModule["default"].itemTitleText
     }, /*#__PURE__*/_react["default"].createElement("span", null, item.label), budget && /*#__PURE__*/_react["default"].createElement(_budgetInfo.BudgetInfo, {
-      metricId: item.key,
       budgetInsight: budget
     })));
   }, [CustomComponentLink]);

package/lib/components/bundle-modules/bundle-modules.js

@@ -184,7 +184,7 @@ var BundleModules = function BundleModules(_ref2) {
     defaultValue: filters.changed,
     disabled: jobs.length <= 1
   }), _defineProperty(_objectSpread2, _utils.MODULE_FILTERS.DUPLICATED, {
-    label: 'Duplicated',
+    label: 'Duplicate',
     defaultValue: filters[_utils.MODULE_FILTERS.DUPLICATED],
     disabled: jobs.length <= 1
   }), _defineProperty(_objectSpread2, _utils.MODULE_SOURCE_TYPE, (_MODULE_SOURCE_TYPE = {