@bundle-stats/ui 3.3.0-alpha.1 → 3.3.0-beta.1

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

@@ -29,10 +29,12 @@ var _icon = require("../../ui/icon");
 
 var _fileName = require("../../ui/file-name");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
 
 var _tooltip = require("../../ui/tooltip");
 
+var _tag = require("../../ui/tag");
+
 var _filters = require("../../ui/filters");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
@@ -126,53 +128,99 @@ TooltipNotPredictive.propTypes = {
 
 };
 
-var getRenderRowHeader = function getRenderRowHeader(_ref6) {
-  var labels = _ref6.labels,
-      CustomComponentLink = _ref6.CustomComponentLink,
-      chunks = _ref6.chunks;
-  return function (item) {
-    var label = item.label,
-        isNotPredictive = item.isNotPredictive,
-        runs = item.runs,
-        isChunk = item.isChunk,
-        isEntry = item.isEntry,
-        isInitial = item.isInitial;
-    return /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-      label: /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-        name: label
-      }),
-      icon: /*#__PURE__*/_react["default"].createElement("div", {
-        className: _bundleAssetsModule["default"].assetInfoFlags
-      }, isNotPredictive && /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
-        className: _bundleAssetsModule["default"].notPredictive,
-        title: /*#__PURE__*/_react["default"].createElement(TooltipNotPredictive, {
-          runs: runs
-        })
-      }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
-        className: _bundleAssetsModule["default"].notPredictiveIcon,
-        glyph: "warning"
-      })), isChunk && /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Chunk",
-        className: _bundleAssetsModule["default"].flagChunk
-      }, "c"), isEntry && /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Entrypoint",
-        className: _bundleAssetsModule["default"].flagEntry
-      }, "e"), isInitial && /*#__PURE__*/_react["default"].createElement("span", {
-        title: "Initial",
-        className: _bundleAssetsModule["default"].flagInitial
-      }, "i"))
-    }, /*#__PURE__*/_react["default"].createElement(_assetInfo.AssetInfo, {
-      className: _bundleAssetsModule["default"].assetInfo,
-      item: item,
-      labels: labels,
-      chunks: chunks,
-      CustomComponentLink: CustomComponentLink
+var RowHeader = function RowHeader(_ref6) {
+  var row = _ref6.row,
+      labels = _ref6.labels,
+      chunks = _ref6.chunks,
+      CustomComponentLink = _ref6.CustomComponentLink;
+  var label = row.label,
+      isNotPredictive = row.isNotPredictive,
+      runs = row.runs,
+      isChunk = row.isChunk,
+      isEntry = row.isEntry,
+      isInitial = row.isInitial;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showHoverCard = _useState2[0],
+      setHoverCard = _useState2[1];
+
+  var handleOnMouseEnter = (0, _react.useCallback)(function () {
+    return setHoverCard(true);
+  }, [showHoverCard]);
+  var content = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundleAssetsModule["default"].assetName
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundleAssetsModule["default"].assetNameTags
+    }, isNotPredictive && /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
+      className: _bundleAssetsModule["default"].notPredictive,
+      title: /*#__PURE__*/_react["default"].createElement(TooltipNotPredictive, {
+        runs: runs
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
+      className: _bundleAssetsModule["default"].notPredictiveIcon,
+      glyph: "warning"
+    })), isChunk && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: (0, _classnames["default"])(_bundleAssetsModule["default"].assetNameTag, _bundleAssetsModule["default"].assetNameTagChunk),
+      title: "Chunk",
+      size: _tag.Tag.SIZES.SMALL,
+      kind: _tag.Tag.KINDS.INFO
+    }), isEntry && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: (0, _classnames["default"])(_bundleAssetsModule["default"].assetNameTag, _bundleAssetsModule["default"].assetNameTagEntry),
+      title: "Entrypoint",
+      size: _tag.Tag.SIZES.SMALL,
+      kind: _tag.Tag.KINDS.INFO
+    }), isInitial && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: (0, _classnames["default"])(_bundleAssetsModule["default"].assetNameTag, _bundleAssetsModule["default"].assetNameTagInitial),
+      title: "Initial",
+      size: _tag.Tag.SIZES.SMALL,
+      kind: _tag.Tag.KINDS.INFO
+    })), /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+      className: _bundleAssetsModule["default"].assetNameText,
+      name: label
     }));
-  };
+  }, [isChunk, isEntry, isInitial, isNotPredictive, runs]);
+
+  if (!showHoverCard) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      onMouseEnter: handleOnMouseEnter
+    }, content);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
+    label: content
+  }, /*#__PURE__*/_react["default"].createElement(_assetInfo.AssetInfo, {
+    className: _bundleAssetsModule["default"].assetInfo,
+    item: row,
+    labels: labels,
+    chunks: chunks,
+    CustomComponentLink: CustomComponentLink
+  }));
+};
+
+RowHeader.propTypes = {
+  row: _propTypes["default"].shape({
+    label: _propTypes["default"].string,
+    isNotPredictive: _propTypes["default"].bool,
+    isChunk: _propTypes["default"].bool,
+    isInitial: _propTypes["default"].bool,
+    isEntry: _propTypes["default"].bool,
+    runs: _propTypes["default"].arrayOf(_propTypes["default"].object)
+  }).isRequired,
+  chunks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string,
+    name: _propTypes["default"].string
+  })),
+  labels: _propTypes["default"].arrayOf(_propTypes["default"].string).isRequired,
+  CustomComponentLink: _propTypes["default"].elementType.isRequired
+};
+RowHeader.defaultProps = {
+  chunks: []
 };
 
 var BundleAssets = function BundleAssets(props) {
-  var _jobs$, _jobs$$meta, _jobs$$meta$webpack, _ASSET_ENTRY_TYPE, _ref8;
+  var _ASSET_ENTRY_TYPE, _ref8;
 
   var className = props.className,
       jobs = props.jobs,
@@ -197,14 +245,16 @@ var BundleAssets = function BundleAssets(props) {
     handleViewAll: resetAllFilters
   });
 
-  var chunks = ((_jobs$ = jobs[0]) === null || _jobs$ === void 0 ? void 0 : (_jobs$$meta = _jobs$.meta) === null || _jobs$$meta === void 0 ? void 0 : (_jobs$$meta$webpack = _jobs$$meta.webpack) === null || _jobs$$meta$webpack === void 0 ? void 0 : _jobs$$meta$webpack.chunks) || [];
-  var renderRowHeader = (0, _react.useMemo)(function () {
-    return getRenderRowHeader({
+  var renderRowHeader = (0, _react.useCallback)(function (row) {
+    var _jobs$, _jobs$$meta, _jobs$$meta$webpack;
+
+    return /*#__PURE__*/_react["default"].createElement(RowHeader, {
+      row: row,
       labels: (0, _map2["default"])(jobs, 'label'),
-      CustomComponentLink: CustomComponentLink,
-      chunks: chunks
+      chunks: ((_jobs$ = jobs[0]) === null || _jobs$ === void 0 ? void 0 : (_jobs$$meta = _jobs$.meta) === null || _jobs$$meta === void 0 ? void 0 : (_jobs$$meta$webpack = _jobs$$meta.webpack) === null || _jobs$$meta$webpack === void 0 ? void 0 : _jobs$$meta$webpack.chunks) || [],
+      CustomComponentLink: CustomComponentLink
     });
-  }, [jobs, chunks]);
+  }, [jobs, CustomComponentLink]);
   return /*#__PURE__*/_react["default"].createElement("section", {
     className: (0, _classnames["default"])(_bundleAssetsModule["default"].root, className)
   }, /*#__PURE__*/_react["default"].createElement(_toolbar.Toolbar, {
@@ -212,7 +262,7 @@ var BundleAssets = function BundleAssets(props) {
     renderActions: function renderActions(_ref7) {
       var actionClassName = _ref7.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-        space: "xsmall",
+        space: "xxsmall",
         className: (0, _classnames["default"])(_bundleAssetsModule["default"].dropdown, actionClassName)
       }, /*#__PURE__*/_react["default"].createElement(_sortDropdown.SortDropdown, _extends({
         fields: sortFields
@@ -223,7 +273,9 @@ var BundleAssets = function BundleAssets(props) {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
     className: _bundleAssetsModule["default"].toolbarSearch,
     placeholder: "Search by name",
     search: search,

package/lib/components/bundle-assets/bundle-assets.module.css

@@ -8,6 +8,8 @@
   margin-right: -1px; /** collapse border */
 }
 
+.assetName {}
+
 .notPredictive {
   margin-right: var(--space-xxsmall);
   display: inline-block;
@@ -21,50 +23,46 @@
   vertical-align: top;
 }
 
-.assetInfoFlags {
-  display: inline-block;
+.assetNameTags {
+  display: inline;
   margin-right: var(--space-xxxsmall);
 }
 
-.assetInfoFlags:empty {
+.assetNameTags:empty {
   display: none;
 }
 
-.flag {
-  display: inline-block;
-  width: var(--space-xsmall);
-  height: var(--space-xsmall);
-  font-family: var(--font-family);
-  font-size: 8px;
-  font-weight: bold;
-  background: var(--color-highlight);
-  color: var(--color-text-light);
-  line-height: var(--space-xsmall);
-  text-align: center;
-  text-transform: uppercase;
+.assetNameTag {
   vertical-align: middle;
 }
 
-.flag + .flag {
+.assetNameTag + .assetNameTag {
   margin-left: 2px;
 }
 
-.flagEntry {
-  composes: flag;
+.assetNameTagEntry {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagInitial {
-  composes: flag;
+.assetNameTagEntry::before {
+  content: 'e';
+}
+
+.assetNameTagInitial {
   background: var(--color-info-light);
-  color: var(--color-background);
 }
 
-.flagChunk {
-  composes: flag;
-  background: var(--color-info);
-  color: var(--color-background);
+.assetNameTagInitial::before {
+  content: 'i';
+}
+
+.assetNameTagChunk::before {
+  content: 'c';
+}
+
+.assetNameText {
+  display: inline;
+  vertical-align: middle;
 }
 
 /* Tooltip not predictive */

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

@@ -7,9 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BundleAssetsTotalsTable = void 0;
 
-var _get2 = _interopRequireDefault(require("lodash/get"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,15 +17,11 @@ var webpack = _interopRequireWildcard(require("@bundle-stats/utils/lib-esm/webpa
 
 var _constants = require("../../constants");
 
-var _flexStack = require("../../layout/flex-stack");
-
 var _metricsTable = require("../metrics-table");
 
 var _componentLink = require("../component-link");
 
-var _budgetInfo = require("../budget-info");
-
-var _bundleAssetsTotalsTableModule = _interopRequireDefault(require("./bundle-assets-totals-table.module.css"));
+var _excluded = ["className", "jobs", "customComponentLink"];
 
 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); }
 
@@ -35,29 +29,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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 className = _ref.className,
       jobs = _ref.jobs,
-      CustomComponentLink = _ref.customComponentLink;
-  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 renderRowHeader = (0, _react.useCallback)(function (item) {
+      CustomComponentLink = _ref.customComponentLink,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  var items = webpack.compareBySection.sizes(jobs);
+
+  var renderRowHeader = function renderRowHeader(item) {
     var fileType = _constants.ASSETS_SIZES_FILE_TYPE_MAP[item.key];
 
     var _getBundleAssetsFileT = (0, _utils.getBundleAssetsFileTypeComponentLink)(fileType, item.label),
@@ -65,32 +51,20 @@ var BundleAssetsTotalsTable = function BundleAssetsTotalsTable(_ref) {
         title = _getBundleAssetsFileT.title,
         params = _getBundleAssetsFileT.params;
 
-    var _item$key$split = item.key.split('.'),
-        _item$key$split2 = _toArray(_item$key$split),
-        _ = _item$key$split2[0],
-        metricSlugs = _item$key$split2.slice(1);
-
-    var metricKey = metricSlugs.join('.');
-    var budget = (0, _get2["default"])(budgets, metricKey);
     return /*#__PURE__*/_react["default"].createElement(CustomComponentLink, {
       section: section,
       title: title,
       params: params
-    }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
-      space: "xxsmall",
-      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]);
-  return /*#__PURE__*/_react["default"].createElement(_metricsTable.MetricsTable, {
+    }, item.label);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_metricsTable.MetricsTable, _extends({
     className: className,
     runs: jobs,
     items: items,
     renderRowHeader: renderRowHeader,
     showHeaderSum: true
-  });
+  }, restProps));
 };
 
 exports.BundleAssetsTotalsTable = BundleAssetsTotalsTable;

package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css

@@ -1,3 +1,3 @@
-.itemTitleText {
-  align-items: center;
+.title {
+  color: var(--color-text-light);
 }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithBudgets = exports.SingleJob = exports.MultipleJobs = exports.EmptyBaseline = void 0;
+exports["default"] = exports.SingleJob = exports.MultipleJobs = exports.EmptyBaseline = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -52,23 +52,4 @@ EmptyBaseline.args = {
   jobs: (0, _utils.createJobs)([{
     webpack: _webpackStatsCurrent["default"]
   }, null])
-};
-var WithBudgets = Template.bind();
-exports.WithBudgets = WithBudgets;
-WithBudgets.args = {
-  jobs: (0, _utils.createJobs)([{
-    webpack: _webpackStatsCurrent["default"]
-  }, {
-    webpack: _webpackStatsBaseline["default"]
-  }], {
-    webpack: {
-      budgets: [{
-        metric: 'sizes.totalSizeByTypeJS',
-        value: 2 * 1024 * 1024
-      }, {
-        metric: 'sizes.totalSizeByTypeCSS',
-        value: 20 * 1024
-      }]
-    }
-  })
 };

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

@@ -35,10 +35,12 @@ var _fileName = require("../../ui/file-name");
 
 var _filters = require("../../ui/filters");
 
-var _popover = require("../../ui/popover");
+var _hoverCard = require("../../ui/hover-card");
 
 var _sortDropdown = require("../../ui/sort-dropdown");
 
+var _tag = require("../../ui/tag");
+
 var _toolbar = require("../../ui/toolbar");
 
 var _metricsTable = require("../metrics-table");
@@ -88,39 +90,47 @@ var RowHeader = function RowHeader(_ref) {
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
-      showPopopver = _useState2[0],
-      setPopover = _useState2[1];
+      showHoverCard = _useState2[0],
+      setHoverCard = _useState2[1];
 
   var handleOnMouseEnter = (0, _react.useCallback)(function () {
-    return setPopover(true);
-  }, [showPopopver]);
+    return setHoverCard(true);
+  }, [showHoverCard]);
+  var content = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: _bundleModulesModule["default"].name
+    }, row.duplicated && /*#__PURE__*/_react["default"].createElement(_tag.Tag, {
+      className: _bundleModulesModule["default"].nameTagDuplicated,
+      size: "small",
+      kind: _tag.Tag.KINDS.DANGER
+    }), /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
+      className: _bundleModulesModule["default"].nameText,
+      name: row.label
+    }));
+  }, [row]);
 
-  var content = /*#__PURE__*/_react["default"].createElement(_fileName.FileName, {
-    name: row.label
-  });
+  if (!showHoverCard) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      onMouseEnter: handleOnMouseEnter
+    }, content);
+  }
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    onMouseEnter: handleOnMouseEnter
-  }, !showPopopver ? content : /*#__PURE__*/_react["default"].createElement(_popover.Popover, {
-    ariaLabel: "View module info",
+  return /*#__PURE__*/_react["default"].createElement(_hoverCard.HoverCard, {
     label: content
-  }, function (_ref2) {
-    var popoverToggle = _ref2.popoverToggle;
-    return /*#__PURE__*/_react["default"].createElement(_moduleInfo.ModuleInfo, {
-      className: _bundleModulesModule["default"].namePopover,
-      item: row,
-      chunks: chunks,
-      chunkIds: chunkIds,
-      labels: labels,
-      customComponentLink: CustomComponentLink,
-      onClick: popoverToggle
-    });
+  }, /*#__PURE__*/_react["default"].createElement(_moduleInfo.ModuleInfo, {
+    className: _bundleModulesModule["default"].namePopover,
+    item: row,
+    chunks: chunks,
+    chunkIds: chunkIds,
+    labels: labels,
+    customComponentLink: CustomComponentLink
   }));
 };
 
 RowHeader.propTypes = {
   row: _propTypes["default"].shape({
-    label: _propTypes["default"].string
+    label: _propTypes["default"].string,
+    duplicated: _propTypes["default"].bool
   }).isRequired,
   chunks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     id: _propTypes["default"].string,
@@ -133,50 +143,34 @@ RowHeader.defaultProps = {
   chunks: []
 };
 
-var getRenderRowHeader = function getRenderRowHeader(_ref3) {
-  var labels = _ref3.labels,
-      chunks = _ref3.chunks,
-      CustomComponentLink = _ref3.CustomComponentLink;
-  return function (row) {
-    return /*#__PURE__*/_react["default"].createElement(RowHeader, {
-      row: row,
-      chunks: chunks,
-      labels: labels,
-      CustomComponentLink: CustomComponentLink
-    });
-  };
-};
-
-var BundleModules = function BundleModules(_ref4) {
+var BundleModules = function BundleModules(_ref2) {
   var _MODULE_SOURCE_TYPE, _objectSpread2;
 
-  var className = _ref4.className,
-      jobs = _ref4.jobs,
-      items = _ref4.items,
-      chunks = _ref4.chunks,
-      totalRowCount = _ref4.totalRowCount,
-      updateFilters = _ref4.updateFilters,
-      resetFilters = _ref4.resetFilters,
-      resetAllFilters = _ref4.resetAllFilters,
-      filters = _ref4.filters,
-      sortFields = _ref4.sortFields,
-      sort = _ref4.sort,
-      updateSort = _ref4.updateSort,
-      search = _ref4.search,
-      updateSearch = _ref4.updateSearch,
-      hasActiveFilters = _ref4.hasActiveFilters,
-      CustomComponentLink = _ref4.customComponentLink;
+  var className = _ref2.className,
+      jobs = _ref2.jobs,
+      items = _ref2.items,
+      chunks = _ref2.chunks,
+      totalRowCount = _ref2.totalRowCount,
+      updateFilters = _ref2.updateFilters,
+      resetFilters = _ref2.resetFilters,
+      resetAllFilters = _ref2.resetAllFilters,
+      filters = _ref2.filters,
+      sortFields = _ref2.sortFields,
+      sort = _ref2.sort,
+      updateSort = _ref2.updateSort,
+      search = _ref2.search,
+      updateSearch = _ref2.updateSearch,
+      hasActiveFilters = _ref2.hasActiveFilters,
+      CustomComponentLink = _ref2.customComponentLink;
   var rootClassName = (0, _classnames["default"])(_bundleModulesModule["default"].root, className);
-  var labels = (0, _react.useMemo)(function () {
-    return (0, _map2["default"])(jobs, 'label');
-  }, [jobs]);
-  var renderRowHeader = (0, _react.useMemo)(function () {
-    return getRenderRowHeader({
-      labels: labels,
+  var renderRowHeader = (0, _react.useCallback)(function (row) {
+    return /*#__PURE__*/_react["default"].createElement(RowHeader, {
+      row: row,
       chunks: chunks,
+      labels: (0, _map2["default"])(jobs, 'label'),
       CustomComponentLink: CustomComponentLink
     });
-  }, [labels, chunks]);
+  }, [jobs, chunks, CustomComponentLink]);
 
   var emptyMessage = /*#__PURE__*/_react["default"].createElement(_emptySet.EmptySet, {
     resources: "modules",
@@ -189,6 +183,10 @@ var BundleModules = function BundleModules(_ref4) {
     label: 'Changed',
     defaultValue: filters.changed,
     disabled: jobs.length <= 1
+  }), _defineProperty(_objectSpread2, _utils.MODULE_FILTERS.DUPLICATED, {
+    label: 'Duplicated',
+    defaultValue: filters[_utils.MODULE_FILTERS.DUPLICATED],
+    disabled: jobs.length <= 1
   }), _defineProperty(_objectSpread2, _utils.MODULE_SOURCE_TYPE, (_MODULE_SOURCE_TYPE = {
     label: 'Source'
   }, _defineProperty(_MODULE_SOURCE_TYPE, _utils.MODULE_FILTERS.FIRST_PARTY, {
@@ -199,9 +197,9 @@ var BundleModules = function BundleModules(_ref4) {
     defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_SOURCE_TYPE, ".").concat(_utils.MODULE_FILTERS.THIRD_PARTY), true)
   }), _MODULE_SOURCE_TYPE)), _objectSpread2), !(0, _isEmpty2["default"])(chunks) && _defineProperty({}, _utils.MODULE_CHUNK, _objectSpread({
     label: 'Chunk'
-  }, chunks.reduce(function (chunkFilters, _ref5) {
-    var id = _ref5.id,
-        name = _ref5.name;
+  }, chunks.reduce(function (chunkFilters, _ref3) {
+    var id = _ref3.id,
+        name = _ref3.name;
     return _objectSpread(_objectSpread({}, chunkFilters), {}, _defineProperty({}, id, {
       label: name,
       defaultValue: (0, _get2["default"])(filters, "".concat(_utils.MODULE_CHUNK, ".").concat(id), true)
@@ -219,8 +217,8 @@ var BundleModules = function BundleModules(_ref4) {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement(_toolbar.Toolbar, {
     className: _bundleModulesModule["default"].toolbar,
-    renderActions: function renderActions(_ref7) {
-      var actionClassName = _ref7.actionClassName;
+    renderActions: function renderActions(_ref5) {
+      var actionClassName = _ref5.actionClassName;
       return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
         space: "xxsmall",
         className: (0, _classnames["default"])(_bundleModulesModule["default"].dropdown, actionClassName)
@@ -233,7 +231,9 @@ var BundleModules = function BundleModules(_ref4) {
         handleResetFilters: resetFilters
       }));
     }
-  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, null, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "xxsmall"
+  }, /*#__PURE__*/_react["default"].createElement(_metricsTableSearch.MetricsTableSearch, {
     className: _bundleModulesModule["default"].toolbarSearch,
     search: search,
     updateSearch: updateSearch,

package/lib/components/bundle-modules/bundle-modules.module.css

@@ -12,6 +12,15 @@
   margin-right: -1px; /** collapse border */
 }
 
-.namePopover {
-  min-width: 280px;
+.nameTagDuplicated {
+  margin-right: var(--space-xxxsmall);
+  vertical-align: baseline;
+}
+
+.nameTagDuplicated::before {
+  content: 'D';
+}
+
+.nameText {
+  vertical-align: middle;
 }