@bundle-stats/ui 4.0.0-rc.6 → 4.0.0-rc.7

package/lib-esm/components/bundle-packages/bundle-packages.js

@@ -22,14 +22,32 @@ import { MetricsTableOptions } from '../metrics-table-options';
 import { MetricsTableTitle } from '../metrics-table-title';
 import css from './bundle-packages.module.css';
 
-const PackagePopoverContent = _ref => {
+const getDropdownFilters = _ref => {
+  let {
+    compareMode,
+    filters
+  } = _ref;
+  return {
+    [PACKAGE_FILTERS.CHANGED]: {
+      label: 'Changed',
+      defaultValue: filters[PACKAGE_FILTERS.CHANGED],
+      disabled: !compareMode
+    },
+    [PACKAGE_FILTERS.DUPLICATE]: {
+      label: 'Duplicate',
+      defaultValue: filters[PACKAGE_FILTERS.DUPLICATE]
+    }
+  };
+};
+
+const PackagePopoverContent = _ref2 => {
   let {
     name,
     fullName,
     path,
     duplicate,
     CustomComponentLink
-  } = _ref;
+  } = _ref2;
   const fallbackPackagePath = `node_modules/${fullName.split(PACKAGES_SEPARATOR).join('/node_modules/')}`;
   const normalizedPackagePath = `${path || fallbackPackagePath}/`;
   const [normalizedName, packageId] = name.split(PACKAGE_ID_SEPARATOR);
@@ -78,14 +96,14 @@ PackagePopoverContent.defaultProps = {
   path: ''
 };
 
-const PackageName = _ref2 => {
+const PackageName = _ref3 => {
   let {
     packageName,
     path,
     showDuplicateFlag,
     row,
     CustomComponentLink
-  } = _ref2;
+  } = _ref3;
   const [showHoverCard, setHoverCard] = useState(false);
   const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
   const label = useMemo(() => /*#__PURE__*/React.createElement(React.Fragment, null, showDuplicateFlag && row.duplicate && /*#__PURE__*/React.createElement(Tag, {
@@ -132,11 +150,11 @@ PackageName.propTypes = {
   CustomComponentLink: PropTypes.elementType.isRequired
 };
 
-const RowHeader = _ref3 => {
+const RowHeader = _ref4 => {
   let {
     row,
     CustomComponentLink
-  } = _ref3;
+  } = _ref4;
   const packageNames = row.label.split(PACKAGES_SEPARATOR);
   const {
     path
@@ -181,24 +199,34 @@ export const BundlePackages = props => {
     hasActiveFilters,
     customComponentLink: CustomComponentLink
   } = props;
-  const emptyMessage = /*#__PURE__*/React.createElement(EmptySet, {
-    resources: "packages",
-    filtered: totalRowCount !== 0,
-    handleResetFilters: resetFilters,
-    handleViewAll: resetAllFilters
-  });
+  const dropdownFilters = useMemo(() => getDropdownFilters({
+    compareMode: (jobs == null ? void 0 : jobs.length) > 1,
+    filters
+  }), [jobs, filters]);
+  const metricsTableTitle = useMemo(() => /*#__PURE__*/React.createElement(MetricsTableTitle, {
+    title: I18N.PACKAGES,
+    info: `${items.length}/${totalRowCount}`,
+    popoverInfo: I18N.PACKAGES_INFO,
+    popoverHref: config.documentation.packages
+  }), [items, totalRowCount]);
   const renderRowHeader = useCallback(row => /*#__PURE__*/React.createElement(RowHeader, {
     row: row,
     CustomComponentLink: CustomComponentLink
   }), [CustomComponentLink]);
+  const emptyMessage = useMemo(() => /*#__PURE__*/React.createElement(EmptySet, {
+    resources: "packages",
+    filtered: totalRowCount !== 0,
+    handleResetFilters: resetFilters,
+    handleViewAll: resetAllFilters
+  }), [totalRowCount, resetFilters, resetAllFilters]);
   return /*#__PURE__*/React.createElement("section", {
     className: cx(css.root, className)
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: css.toolbar,
-    renderActions: _ref4 => {
+    renderActions: _ref5 => {
       let {
         actionClassName
-      } = _ref4;
+      } = _ref5;
       return /*#__PURE__*/React.createElement(FlexStack, {
         space: "xxsmall",
         className: cx(css.dropdown, actionClassName)
@@ -219,17 +247,7 @@ export const BundlePackages = props => {
     search: search,
     updateSearch: updateSearch
   }), /*#__PURE__*/React.createElement(Filters, {
-    filters: {
-      [PACKAGE_FILTERS.CHANGED]: {
-        label: 'Changed',
-        defaultValue: filters[PACKAGE_FILTERS.CHANGED],
-        disabled: jobs.length <= 1
-      },
-      [PACKAGE_FILTERS.DUPLICATE]: {
-        label: 'Duplicate',
-        defaultValue: filters[PACKAGE_FILTERS.DUPLICATE]
-      }
-    },
+    filters: dropdownFilters,
     label: `Filters (${items.length}/${totalRowCount})`,
     onChange: updateFilters,
     hasActiveFilters: hasActiveFilters
@@ -239,12 +257,7 @@ export const BundlePackages = props => {
     emptyMessage: emptyMessage,
     renderRowHeader: renderRowHeader,
     showHeaderSum: true,
-    title: /*#__PURE__*/React.createElement(MetricsTableTitle, {
-      title: I18N.PACKAGES,
-      info: `(${items.length}/${totalRowCount})`,
-      popoverInfo: I18N.PACKAGES_INFO,
-      popoverHref: config.documentation.packages
-    })
+    title: metricsTableTitle
   })));
 };
 BundlePackages.defaultProps = {

package/lib-esm/components/metrics-table-title/metrics-table-title.js

@@ -16,22 +16,25 @@ export const MetricsTableTitle = props => {
     popoverHref
   } = props;
   const rootClassName = cx(css.root, className);
-  return /*#__PURE__*/React.createElement(FlexStack, {
-    space: "xxxsmall",
+  return /*#__PURE__*/React.createElement(Stack, {
     className: rootClassName
-  }, /*#__PURE__*/React.createElement("span", null, title), info && /*#__PURE__*/React.createElement("span", {
-    className: css.info
-  }, info), (popoverInfo || popoverHref) && /*#__PURE__*/React.createElement(HoverCard, {
+  }, /*#__PURE__*/React.createElement(FlexStack, {
+    space: "xxxsmall",
+    className: css.title
+  }, /*#__PURE__*/React.createElement("span", null, title), (popoverInfo || popoverHref) && /*#__PURE__*/React.createElement(HoverCard, {
     label: /*#__PURE__*/React.createElement(Icon, {
       glyph: "help"
-    })
+    }),
+    className: css.hoverCard
   }, /*#__PURE__*/React.createElement(Stack, {
     space: "xxxsmall"
   }, popoverInfo && /*#__PURE__*/React.createElement("p", null, popoverInfo), popoverHref && /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: () => window.open(popoverHref),
     className: css.readMoreLink
-  }, I18N.READ_MORE)))));
+  }, I18N.READ_MORE))))), info && /*#__PURE__*/React.createElement("p", {
+    className: css.info
+  }, info));
 };
 MetricsTableTitle.propTypes = {
   className: PropTypes.string,

package/lib-esm/components/metrics-table-title/metrics-table-title.module.css

@@ -1,14 +1,20 @@
 .root {
+}
+
+.title {
+  color: var(--color-text-light);
   align-items: center;
   font-weight: bold;
-  line-height: var(--space-small);
   text-transform: uppercase;
-  color: var(--color-text-light);
+}
+
+.hoverCard {
+  line-height: 1;
 }
 
 .info {
+  font-size: var(--size-xsmall);
   font-weight: normal;
-  text-transform: none;
 }
 
 .readMoreLink {

package/lib-esm/ui/filters/filters.js

@@ -1,4 +1,3 @@
-import _get from "lodash/get";
 import "core-js/modules/es.array.includes.js";
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
@@ -75,9 +74,9 @@ const FilterGroup = props => {
     let [itemKey, item] = _ref;
     return typeof (item == null ? void 0 : item.defaultValue) !== 'undefined';
   });
-  const isGroupChecked = groupCheckboxes.map(_ref2 => {
+  const areAllGroupItemsChecked = groupCheckboxes.map(_ref2 => {
     let [itemKey] = _ref2;
-    return _get(values, `${groupKey}.${itemKey}`);
+    return values == null ? void 0 : values[`${groupKey}.${itemKey}`];
   }).reduce((agg, val) => agg && val, true);
   const filterSuffix = getGroupFiltersLabelSuffix(groupItems);
   const hasCustomFilterSuffix = !Object.values(LABELS).includes(filterSuffix);
@@ -138,7 +137,7 @@ const FilterGroup = props => {
       }));
     })), /*#__PURE__*/React.createElement("div", {
       className: css.filterGroupActions
-    }, isGroupChecked ? /*#__PURE__*/React.createElement(MenuItem, {
+    }, areAllGroupItemsChecked ? /*#__PURE__*/React.createElement(MenuItem, {
       id: "clear-all",
       as: "button",
       className: menuItemClassName,

package/lib-esm/ui/filters/filters.utils.js

@@ -65,4 +65,22 @@ export const getGroupFiltersLabelSuffix = filters => {
 
   const skippedLabels = filterCheckedCount - inlinedLabelCount;
   return `${suffix}${skippedLabels > 0 ? ` +${skippedLabels}` : ''}`;
+};
+export const getInitialValues = (key, filters) => {
+  if (typeof (filters == null ? void 0 : filters.defaultValue) !== 'undefined') {
+    return {
+      [key]: filters.defaultValue
+    };
+  }
+
+  if (typeof filters === 'object') {
+    return Object.entries(filters).map(_ref3 => {
+      let [groupKey, groupFilters] = _ref3;
+      return getInitialValues([...(key ? [key] : []), groupKey].join('.'), groupFilters);
+    }).reduce((agg, current) => ({ ...agg,
+      ...current
+    }), {});
+  }
+
+  return {};
 };

package/lib-esm/ui/filters/index.js

@@ -1,3 +1,65 @@
-import { filtersDropdownContainer } from './filters.container';
-import { Filters as FiltersComponent } from './filters';
-export const Filters = filtersDropdownContainer(FiltersComponent);
+import _merge from "lodash/merge";
+import _isEqual from "lodash/isEqual";
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+
+import React, { useCallback, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { getInitialValues } from './filters.utils';
+import { Filters as BaseComponent } from './filters';
+export const Filters = props => {
+  const {
+    onChange,
+    filters,
+    ...restProps
+  } = props;
+  const [values, setValues] = useState(getInitialValues('', filters)); // Update values when the parent filters are changing (route with query string change)
+
+  useEffect(() => {
+    const parentValues = getInitialValues('', filters);
+
+    if (_isEqual(parentValues, values)) {
+      return;
+    }
+
+    setValues(parentValues);
+  }, // Do not trigger effect when the values are changing locally
+  [filters, setValues]);
+  const toggleFilter = useCallback((key, value) => {
+    const nextValues = _merge({}, values, {
+      [key]: value
+    });
+
+    setValues(nextValues);
+
+    if (onChange) {
+      onChange(nextValues);
+    }
+  }, [onChange, setValues, values]);
+  const toggleFilters = useCallback(newFilters => {
+    const nextValues = _merge({}, values, newFilters);
+
+    setValues(nextValues);
+
+    if (onChange) {
+      onChange(nextValues);
+    }
+  }, [onChange, setValues, values]);
+  return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, restProps, {
+    filters: filters,
+    values: values,
+    toggleFilter: toggleFilter,
+    toggleFilters: toggleFilters
+  }));
+};
+Filters.defaultProps = {
+  onChange: null
+};
+Filters.propTypes = {
+  /** Filter config */
+  filters: PropTypes.object.isRequired,
+  // eslint-disable-line react/forbid-prop-types
+
+  /** OnChange handler */
+  onChange: PropTypes.func
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.0.0-rc.6",
+  "version": "4.0.0-rc.7",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -51,7 +51,7 @@
     "@storybook/manager-webpack5": "6.5.9",
     "@storybook/react": "6.5.9",
     "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "28.1.2",
+    "babel-jest": "28.1.3",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-require-context-hook": "1.0.0",
     "chromatic": "6.7.0",
@@ -85,12 +85,12 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.0.0-rc.6",
+    "@bundle-stats/utils": "^4.0.0-rc.7",
     "ariakit": "^2.0.0-next.33",
     "date-fns": "^2.28.0",
     "modern-css-reset": "^1.4.0",
     "query-string": "^7.1.0",
     "use-query-params": "^1.2.3"
   },
-  "gitHead": "84d6e7d2df43ec89117238f676f32df9e56bfbeb"
+  "gitHead": "90c1cf0f7dd95326140e4184ac72b4baeeab8df1"
 }

package/src/components/bundle-assets/bundle-assets.jsx

@@ -49,6 +49,37 @@ const getFileTypeFilters = (filters) =>
       {},
     );
 
+const getFilters = ({ compareMode, filters }) => ({
+  [ASSET_FILTERS.CHANGED]: {
+    label: 'Changed',
+    defaultValue: filters[ASSET_FILTERS.CHANGED],
+    disabled: !compareMode,
+  },
+  [ASSET_ENTRY_TYPE]: {
+    label: 'Entry type',
+    [ASSET_FILTERS.ENTRY]: {
+      label: 'Entry',
+      defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true),
+    },
+    [ASSET_FILTERS.INITIAL]: {
+      label: 'Initial',
+      defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true),
+    },
+    [ASSET_FILTERS.CHUNK]: {
+      label: 'Chunk',
+      defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true),
+    },
+    [ASSET_FILTERS.ASSET]: {
+      label: 'Asset',
+      defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ASSET}`, true),
+    },
+  },
+  [ASSET_FILE_TYPE]: {
+    label: 'File type',
+    ...getFileTypeFilters(filters),
+  },
+});
+
 const TooltipNotPredictive = ({ runs }) => (
   <div className={css.tooltipNotPredictive}>
     <p className={css.tooltipNotPredictiveText}>File name is the same, but the size has changed:</p>
@@ -181,15 +212,20 @@ export const BundleAssets = (props) => {
     customComponentLink: CustomComponentLink,
   } = props;
 
-  const emptyMessage = (
-    <EmptySet
-      resources="assets"
-      filtered={totalRowCount !== 0}
-      handleResetFilters={resetFilters}
-      handleViewAll={resetAllFilters}
-    />
+  const dropdownFilters = useMemo(
+    () => getFilters({ compareMode: jobs?.length > 1, filters }),
+    [jobs, filters],
   );
 
+  const metricsTableTitle = useMemo(() => (
+    <MetricsTableTitle
+      title={I18N.ASSETS}
+      info={`${items.length}/${totalRowCount}`}
+      popoverInfo={I18N.ASSETS_INFO}
+      popoverHref={config.documentation.assets}
+    />
+  ), [items, totalRowCount]);
+
   const renderRowHeader = useCallback(
     (row) => (
       <RowHeader
@@ -202,6 +238,15 @@ export const BundleAssets = (props) => {
     [jobs, CustomComponentLink],
   );
 
+  const emptyMessage = useMemo(() => (
+    <EmptySet
+      resources="assets"
+      filtered={totalRowCount !== 0}
+      handleResetFilters={resetFilters}
+      handleViewAll={resetAllFilters}
+    />
+  ), [totalRowCount, resetFilters, resetAllFilters]);
+
   return (
     <section className={cx(css.root, className)}>
       <Toolbar
@@ -225,36 +270,7 @@ export const BundleAssets = (props) => {
           />
           <Filters
             className={css.toolbarFilters}
-            filters={{
-              [ASSET_FILTERS.CHANGED]: {
-                label: 'Changed',
-                defaultValue: filters[ASSET_FILTERS.CHANGED],
-                disabled: jobs.length <= 1,
-              },
-              [ASSET_ENTRY_TYPE]: {
-                label: 'Entry type',
-                [ASSET_FILTERS.ENTRY]: {
-                  label: 'Entry',
-                  defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true),
-                },
-                [ASSET_FILTERS.INITIAL]: {
-                  label: 'Initial',
-                  defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true),
-                },
-                [ASSET_FILTERS.CHUNK]: {
-                  label: 'Chunk',
-                  defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true),
-                },
-                [ASSET_FILTERS.ASSET]: {
-                  label: 'Asset',
-                  defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ASSET}`, true),
-                },
-              },
-              [ASSET_FILE_TYPE]: {
-                label: 'File type',
-                ...getFileTypeFilters(filters),
-              },
-            }}
+            filters={dropdownFilters}
             hasActiveFilters={hasActiveFilters}
             onChange={updateFilters}
           />
@@ -267,14 +283,7 @@ export const BundleAssets = (props) => {
           renderRowHeader={renderRowHeader}
           emptyMessage={emptyMessage}
           showHeaderSum
-          title={
-            <MetricsTableTitle
-              title={I18N.ASSETS}
-              info={`(${items.length}/${totalRowCount})`}
-              popoverInfo={I18N.ASSETS_INFO}
-              popoverHref={config.documentation.assets}
-            />
-          }
+          title={metricsTableTitle}
         />
       </main>
     </section>

package/src/components/bundle-modules/bundle-modules.jsx

@@ -29,6 +29,61 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import { ModuleInfo } from '../module-info';
 import css from './bundle-modules.module.css';
 
+const getFilters = ({ filters, compareMode, chunks }) => ({
+    [MODULE_FILTERS.CHANGED]: {
+      label: 'Changed',
+      defaultValue: filters.changed,
+      disabled: !compareMode,
+    },
+    [MODULE_FILTERS.DUPLICATED]: {
+      label: 'Duplicate',
+      defaultValue: filters[MODULE_FILTERS.DUPLICATED],
+    },
+    [MODULE_SOURCE_TYPE]: {
+      label: 'Source',
+      [MODULE_FILTERS.FIRST_PARTY]: {
+        label: 'First party',
+        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`, true),
+      },
+      [MODULE_FILTERS.THIRD_PARTY]: {
+        label: 'Third party',
+        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`, true),
+      },
+    },
+
+    // When chunks data available, list available chunks as filters
+    ...(!isEmpty(chunks) && {
+      [MODULE_CHUNK]: {
+        label: 'Chunk',
+        ...chunks.reduce(
+          (chunkFilters, { id, name }) => ({
+            ...chunkFilters,
+            [id]: {
+              label: name,
+              defaultValue: get(filters, `${MODULE_CHUNK}.${id}`, true),
+            },
+          }),
+          {},
+        ),
+      },
+    }),
+
+    // Module source types
+    [MODULE_FILE_TYPE]: {
+      label: 'File type',
+      ...MODULE_SOURCE_FILE_TYPES.reduce(
+        (agg, fileType) => ({
+          ...agg,
+          [fileType]: {
+            label: FILE_TYPE_LABELS[fileType],
+            defaultValue: get(filters, `${MODULE_FILE_TYPE}.${fileType}`, true),
+          },
+        }),
+        {},
+      ),
+    },
+})
+
 const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
   const chunkIds = map(chunks, 'id');
 
@@ -103,6 +158,20 @@ export const BundleModules = ({
 }) => {
   const rootClassName = cx(css.root, className);
 
+  const dropdownFilters = useMemo(
+    () => getFilters({ filters, chunks, compareMode: jobs.length > 1 }),
+    [jobs, filters, chunks]
+  );
+
+  const metricsTableTitle = useMemo(() => (
+    <MetricsTableTitle
+      title={I18N.MODULES}
+      info={`${items.length}/${totalRowCount}`}
+      popoverInfo={I18N.MODULES_INFO}
+      popoverHref={config.documentation.modules}
+    />
+  ), [items, totalRowCount]);
+
   const renderRowHeader = useCallback(
     (row) => (
       <RowHeader
@@ -115,69 +184,14 @@ export const BundleModules = ({
     [jobs, chunks, CustomComponentLink],
   );
 
-  const emptyMessage = (
+  const emptyMessage = useMemo(() => (
     <EmptySet
       resources="modules"
       filtered={totalRowCount !== 0}
       handleResetFilters={resetFilters}
       handleViewAll={resetAllFilters}
     />
-  );
-
-  const dropdownFilters = {
-    [MODULE_FILTERS.CHANGED]: {
-      label: 'Changed',
-      defaultValue: filters.changed,
-      disabled: jobs.length <= 1,
-    },
-    [MODULE_FILTERS.DUPLICATED]: {
-      label: 'Duplicate',
-      defaultValue: filters[MODULE_FILTERS.DUPLICATED],
-    },
-    [MODULE_SOURCE_TYPE]: {
-      label: 'Source',
-      [MODULE_FILTERS.FIRST_PARTY]: {
-        label: 'First party',
-        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`, true),
-      },
-      [MODULE_FILTERS.THIRD_PARTY]: {
-        label: 'Third party',
-        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`, true),
-      },
-    },
-
-    // When chunks data available, list available chunks as filters
-    ...(!isEmpty(chunks) && {
-      [MODULE_CHUNK]: {
-        label: 'Chunk',
-        ...chunks.reduce(
-          (chunkFilters, { id, name }) => ({
-            ...chunkFilters,
-            [id]: {
-              label: name,
-              defaultValue: get(filters, `${MODULE_CHUNK}.${id}`, true),
-            },
-          }),
-          {},
-        ),
-      },
-    }),
-
-    // Module source types
-    [MODULE_FILE_TYPE]: {
-      label: 'File type',
-      ...MODULE_SOURCE_FILE_TYPES.reduce(
-        (agg, fileType) => ({
-          ...agg,
-          [fileType]: {
-            label: FILE_TYPE_LABELS[fileType],
-            defaultValue: get(filters, `${MODULE_FILE_TYPE}.${fileType}`, true),
-          },
-        }),
-        {},
-      ),
-    },
-  };
+  ), [totalRowCount, resetFilters, resetAllFilters]);
 
   return (
     <div className={rootClassName}>
@@ -221,14 +235,7 @@ export const BundleModules = ({
         renderRowHeader={renderRowHeader}
         emptyMessage={emptyMessage}
         showHeaderSum
-        title={
-          <MetricsTableTitle
-            title={I18N.MODULES}
-            info={`(${items.length}/${totalRowCount})`}
-            popoverInfo={I18N.MODULES_INFO}
-            popoverHref={config.documentation.modules}
-          />
-        }
+        title={metricsTableTitle}
       />
     </div>
   );