@bundle-stats/ui 3.2.0-beta.1 → 3.2.1-beta.3

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

@@ -0,0 +1,107 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { uniqBy, map } from 'lodash';
+import {
+  getModuleChunkFilters,
+  getModuleSourceTypeFilters,
+  getModuleFileTypeFilters,
+} from '@bundle-stats/utils';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+
+import { useRowsFilter } from '../../hooks/rows-filter';
+import { useRowsSort } from '../../hooks/rows-sort';
+import { useSearchParams } from '../../hooks/search-params';
+import { BundleModules as BundleModulesComponent } from './bundle-modules';
+import {
+  addRowSourceFlag,
+  getRowFilter,
+  getCustomSort,
+  useModuleFilterByChunk,
+} from './bundle-modules.utils';
+import { SORT_BY } from './bundle-modules.constants';
+
+export const BundleModules = (props) => {
+  const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
+
+  const chunks = uniqBy(jobs.map((job) => job?.meta?.webpack?.chunks || []).flat(), ({ id }) => id);
+  const chunkIds = map(chunks, 'id');
+
+  const { defaultFilters, allEntriesFilters } = useMemo(
+    () => ({
+      defaultFilters: {
+        changed: jobs?.length > 1,
+        ...getModuleSourceTypeFilters(true),
+        ...getModuleChunkFilters(chunkIds, true),
+        ...getModuleFileTypeFilters(true),
+      },
+      allEntriesFilters: {
+        changed: false,
+        ...getModuleSourceTypeFilters(true),
+        ...getModuleChunkFilters(chunkIds, true),
+        ...getModuleFileTypeFilters(true),
+      },
+    }),
+    [jobs],
+  );
+
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState,
+  });
+
+  const filteredJobsByChunkIds = useModuleFilterByChunk({
+    jobs,
+    filters: searchParams.filters,
+    chunkIds,
+  });
+
+  const { rows, totalRowCount } = useMemo(() => {
+    const result = webpack.compareBySection.modules(filteredJobsByChunkIds, [addRowSourceFlag]);
+    return { rows: result, totalRowCount: result.length };
+  }, [filteredJobsByChunkIds]);
+
+  const filteredRows = useRowsFilter({
+    rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter,
+  });
+
+  const sortParams = useRowsSort({
+    rows: filteredRows,
+    sortFields: SORT_BY,
+    sortBy,
+    sortDirection: direction,
+    getCustomSort,
+  });
+
+  return (
+    <BundleModulesComponent
+      jobs={jobs}
+      chunks={chunks}
+      {...restProps}
+      {...searchParams}
+      {...sortParams}
+      totalRowCount={totalRowCount}
+    />
+  );
+};
+
+BundleModules.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  filters: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  search: PropTypes.string,
+  sortBy: PropTypes.string,
+  direction: PropTypes.string,
+  setState: PropTypes.func.isRequired,
+};
+
+BundleModules.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined,
+};

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

@@ -149,7 +149,7 @@ export const BundlePackages = (props) => {
     resetAllFilters,
     totalRowCount,
     filters,
-    sortItems,
+    sortFields,
     sort,
     updateSort,
     search,
@@ -178,7 +178,7 @@ export const BundlePackages = (props) => {
         className={css.toolbar}
         renderActions={({ actionClassName }) => (
           <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-            <SortDropdown items={sortItems} {...sort} onChange={updateSort} />
+            <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
             <MetricsTableOptions
               handleViewAll={resetAllFilters}
               handleResetFilters={resetFilters}
@@ -266,7 +266,7 @@ BundlePackages.propTypes = {
     changed: PropTypes.bool,
   }).isRequired,
   hasActiveFilters: PropTypes.bool,
-  sortItems: PropTypes.shape({
+  sortFields: PropTypes.shape({
     [PropTypes.string]: PropTypes.shape({
       label: PropTypes.string,
       defaultDirection: PropTypes.bool,

package/src/components/bundle-packages/bundle-packages.utils.js

@@ -0,0 +1,47 @@
+import { get, flatten, uniq } from 'lodash';
+import { PACKAGE_FILTERS } from '@bundle-stats/utils';
+
+import { SORT_BY_NAME, SORT_BY_DELTA, SORT_BY_SIZE } from './bundle-packages.constants';
+
+// Get a list of duplicate packages across jobs
+export const getDuplicatePackages = (jobs) => {
+  const jobsDuplicatePackages = jobs.map((job) => {
+    const insightsData = job?.insights?.webpack?.duplicatePackages?.data || {};
+    return Object.values(insightsData).flat();
+  });
+
+  return uniq(flatten(jobsDuplicatePackages));
+};
+
+export const getRowFilter = (filters) => (item) => {
+  if (filters[PACKAGE_FILTERS.CHANGED] && !item.changed) {
+    return false;
+  }
+
+  if (filters[PACKAGE_FILTERS.DUPLICATE] && !item.duplicate) {
+    return false;
+  }
+
+  return true;
+};
+
+export const getCustomSort = (sortId) => (item) => {
+  if (sortId === SORT_BY_NAME) {
+    return item.key;
+  }
+
+  if (sortId === SORT_BY_DELTA) {
+    return get(item, 'runs[0].deltaPercentage', 0);
+  }
+
+  if (sortId === SORT_BY_SIZE) {
+    return get(item, 'runs[0].value', 0);
+  }
+
+  return [!item.changed, item.key];
+};
+
+export const getAddRowDuplicateFlag = (duplicateJobs) => (row) => ({
+  ...row,
+  duplicate: duplicateJobs.includes(row.key),
+});

package/src/components/bundle-packages/index.jsx

@@ -0,0 +1,84 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { PACKAGE_FILTERS } from '@bundle-stats/utils';
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack/compare';
+
+import { useRowsFilter } from '../../hooks/rows-filter';
+import { useRowsSort } from '../../hooks/rows-sort';
+import { useSearchParams } from '../../hooks/search-params';
+import { SORT_BY } from './bundle-packages.constants';
+import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
+import { getDuplicatePackages, getAddRowDuplicateFlag, getRowFilter, getCustomSort } from './bundle-packages.utils';
+
+export const BundlePackages = (props) => {
+  const { jobs, search, filters, setState, sortBy, direction, ...restProps } = props;
+
+  const { defaultFilters, allEntriesFilters } = useMemo(
+    () => ({
+      defaultFilters: {
+        [PACKAGE_FILTERS.CHANGED]: jobs?.length > 1,
+        [PACKAGE_FILTERS.DUPLICATE]: false,
+      },
+      allEntriesFilters: {
+        [PACKAGE_FILTERS.CHANGED]: false,
+        [PACKAGE_FILTERS.DUPLICATE]: false,
+      },
+    }),
+    [jobs],
+  );
+
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState,
+  });
+
+  const { rows, totalRowCount } = useMemo(() => {
+    const duplicateJobs = getDuplicatePackages(jobs);
+    const result = webpack.compareBySection.packages(jobs, [getAddRowDuplicateFlag(duplicateJobs)]);
+    return { rows: result, totalRowCount: result.length };
+  }, [jobs]);
+
+  const filteredRows = useRowsFilter({
+    rows,
+    searchPattern: searchParams.searchPattern,
+    filters: searchParams.filters,
+    getRowFilter,
+  });
+
+  const sortParams = useRowsSort({
+    rows: filteredRows,
+    sortFields: SORT_BY,
+    sortBy,
+    sortDirection: direction,
+    getCustomSort,
+  });
+
+  return (
+    <BundlePackagesComponent
+      jobs={jobs}
+      {...restProps}
+      {...searchParams}
+      {...sortParams}
+      totalRowCount={totalRowCount}
+    />
+  );
+};
+
+BundlePackages.propTypes = {
+  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  filters: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  search: PropTypes.string,
+  sortBy: PropTypes.string,
+  direction: PropTypes.string,
+  setState: PropTypes.func.isRequired,
+};
+
+BundlePackages.defaultProps = {
+  filters: undefined,
+  search: undefined,
+  sortBy: undefined,
+  direction: undefined,
+};

package/src/components/metrics-table/metrics-table.jsx

@@ -1,8 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { get, isEmpty } from 'lodash';
-import { flow, map, sum } from 'lodash/fp';
+import { get, isEmpty, sum } from 'lodash';
 import { METRIC_TYPE_FILE_SIZE, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { Table } from '../../ui/table';
@@ -13,11 +12,7 @@ import styles from './metrics-table.module.css';
 
 const METRIC_TYPE_DATA = getGlobalMetricType(null, METRIC_TYPE_FILE_SIZE);
 
-const getRowsRunTotal = (rows, runIndex) =>
-  flow(
-    map((row) => get(row, `runs[${runIndex}].value`, 0)),
-    sum,
-  )(rows);
+const getRowsRunTotal = (rows, runIndex) => sum(rows.map((row) => get(row, `runs[${runIndex}].value`, 0)));
 
 const getHeaderLabelCells = (rows) => (run, runIndex, runs) => {
   const isBaseline = runIndex === runs.length - 1;

package/src/components/metrics-table-search/metrics-table-search.jsx

@@ -48,6 +48,7 @@ export const MetricsTableSearch = (props) => {
         onChange={handleChangeValue}
         value={value}
         size="small"
+        autoComplete="off"
       />
       {search && (
         <button className={css.cancelButton} type="button" onClick={handleClearValue}>

package/src/components/metrics-table-search/metrics-table-search.module.css

@@ -5,6 +5,7 @@
 }
 
 .input {
+  height: var(--space-large);
   border-color: var(--color-outline);
 }
 
@@ -26,7 +27,7 @@
   padding: var(--space-xxsmall);
   width: var(--space-large);
   height: var(--space-large);
-  background: radial-gradient(var(--color-background), transparent 75%);
+  background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);
 }

package/src/hooks/rows-filter.js

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+
+export const useRowsFilter = ({ rows, searchPattern, filters, getRowFilter }) => {
+  const filteredRows = useMemo(() => {
+    const filterRow = getRowFilter(filters);
+    return rows.filter((row) => {
+      if (searchPattern && !searchPattern.test(row?.key)) {
+        return false;
+      }
+
+      return filterRow(row);
+    });
+  }, [rows, searchPattern, filters, getRowFilter]);
+
+  return filteredRows;
+};

package/src/hooks/rows-sort.js

@@ -0,0 +1,24 @@
+import { useState, useMemo } from 'react';
+import { orderBy } from 'lodash';
+
+export const useRowsSort = ({
+  rows,
+  sortFields,
+  sortBy = 'size',
+  sortDirection = 'desc',
+  getCustomSort,
+}) => {
+  const [sort, updateSort] = useState({ field: sortBy, direction: sortDirection });
+
+  const orderedRows = useMemo(
+    () => orderBy(rows, getCustomSort(sort.field), sort.direction),
+    [rows, sort],
+  );
+
+  return {
+    sortFields,
+    sort,
+    updateSort,
+    items: orderedRows,
+  };
+};

package/src/hooks/search-params.js

@@ -0,0 +1,153 @@
+import { useCallback, useLayoutEffect, useReducer } from 'react';
+import { isEqual, merge } from 'lodash';
+
+const ACTION_SET_FILTERS = 'SET_FILTERS';
+const ACTION_SET_SEARCH = 'SET_SEARCH';
+const ACTION_RESET_DEFAULT = 'RESET_DEFAULT';
+const ACTION_RESET_ALL = 'RESET_ALL';
+const ACTION_SET = 'SET';
+
+const getSearchPattern = (search) => {
+  let searchPattern = new RegExp(/.*/);
+
+  if (!search || !search.trim()) {
+    return searchPattern;
+  }
+
+  try {
+    searchPattern = new RegExp(search, 'i');
+  } catch (err) {
+    // noop
+    console.error(err); // eslint-disable-line no-console
+  }
+
+  return searchPattern;
+};
+
+const getSearchReducer =
+  ({ defaultFilters, allEntriesFilters, setParentState }) => (state, action) => {
+    const { type, payload } = action;
+
+    switch (type) {
+      case ACTION_SET_FILTERS: {
+        setParentState({
+          filters: payload,
+          search: state.search,
+        });
+
+        return {
+          ...state,
+          filters: payload,
+        };
+      }
+
+      case ACTION_SET_SEARCH: {
+        setParentState({
+          filters: state.filters,
+          search: payload,
+        });
+
+        return {
+          ...state,
+          search: payload,
+          searchPattern: getSearchPattern(payload),
+        };
+      }
+
+      case ACTION_RESET_DEFAULT: {
+        setParentState({
+          filters: defaultFilters,
+          search: '',
+        });
+
+        return {
+          filters: defaultFilters,
+          search: '',
+          searchPattern: getSearchPattern(),
+        };
+      }
+
+      case ACTION_RESET_ALL: {
+        setParentState({
+          filters: allEntriesFilters,
+          search: '',
+        });
+
+        return {
+          filters: allEntriesFilters,
+          search: '',
+          searchPattern: getSearchPattern(),
+        };
+      }
+
+      case ACTION_SET: {
+        return payload;
+      }
+
+      default:
+        return state;
+    }
+  };
+
+export const generateState = (filters, search) => ({
+  filters,
+  search,
+  searchPattern: getSearchPattern(search),
+});
+
+export const useSearchParams = ({
+  search: parentSearch,
+
+  filters: parentFilters,
+  defaultFilters,
+  allEntriesFilters,
+  setState: setParentState,
+}) => {
+  // When we pass custom filters, set the other flags to true (allEntries)
+  const initialFilters = parentFilters
+    ? merge({}, allEntriesFilters, parentFilters)
+    : defaultFilters;
+
+  const [{ search, searchPattern, filters }, dispatch] = useReducer(
+    getSearchReducer({ defaultFilters, allEntriesFilters, setParentState }),
+    generateState(initialFilters, parentSearch),
+  );
+
+  // Update state when the custom filters/search are changing - initial load or route updates
+  useLayoutEffect(() => {
+    // Run a deep comparison to prevent circular setState triggering
+    if (parentSearch === search || isEqual(parentFilters, filters)) {
+      return;
+    }
+
+    dispatch({ type: ACTION_SET, payload: generateState(initialFilters, parentSearch) });
+  }, [search, filters, parentFilters, parentSearch]);
+
+  /** Callbacks */
+  const handleUpdateSearch = useCallback((newValue) => {
+    dispatch({ type: ACTION_SET_SEARCH, payload: newValue });
+  }, []);
+
+  const handleUpdateFilters = useCallback((newFilters) => {
+    dispatch({ type: ACTION_SET_FILTERS, payload: newFilters });
+  }, []);
+
+  const handleResetFilters = useCallback(() => {
+    dispatch({ type: ACTION_RESET_DEFAULT });
+  }, []);
+
+  const handleResetAllFilters = useCallback(() => {
+    dispatch({ type: ACTION_RESET_ALL });
+  }, []);
+
+  return {
+    search,
+    searchPattern,
+    filters,
+    hasActiveFilters: !isEqual(allEntriesFilters, filters),
+    updateSearch: handleUpdateSearch,
+    updateFilters: handleUpdateFilters,
+    resetFilters: handleResetFilters,
+    resetAllFilters: handleResetAllFilters,
+  };
+};

package/src/ui/icon/icon.jsx

@@ -2,25 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
-import ArrowIcon from './assets/arrow.svg';
-import BranchIcon from './assets/branch.svg';
-import CancelIcon from './assets/cancel.svg';
-import ClockIcon from './assets/clock.svg';
-import CloseIcon from './assets/close.svg';
-import CommitIcon from './assets/commit.svg';
-import FilterIcon from './assets/filter.svg';
-import HelpIcon from './assets/help.svg';
-import MenuIcon from './assets/menu.svg';
-import PackageIcon from './assets/package.svg';
-import PullRequestIcon from './assets/pull-request.svg';
-import SortIcon from './assets/sort.svg';
-import WarningIcon from './assets/warning.svg';
-
 import css from './icon.module.css';
 
 const ICONS = {
   ARROW: 'arrow',
-  BRANCH: 'branch',
   CANCEL: 'cancel',
   CLOSE: 'close',
   CLOCK: 'clock',
@@ -28,37 +13,17 @@ const ICONS = {
   FILTER: 'filter',
   HELP: 'help',
   MENU: 'menu',
-  PACKAGE: 'package',
-  PR: 'pr',
   SORT: 'sort',
   WARNING: 'warning',
 };
 
-const ICON_MAP = {
-  [ICONS.ARROW]: ArrowIcon,
-  [ICONS.BRANCH]: BranchIcon,
-  [ICONS.CANCEL]: CancelIcon,
-  [ICONS.CLOCK]: ClockIcon,
-  [ICONS.CLOSE]: CloseIcon,
-  [ICONS.COMMIT]: CommitIcon,
-  [ICONS.FILTER]: FilterIcon,
-  [ICONS.HELP]: HelpIcon,
-  [ICONS.MENU]: MenuIcon,
-  [ICONS.PACKAGE]: PackageIcon,
-  [ICONS.PR]: PullRequestIcon,
-  [ICONS.SORT]: SortIcon,
-  [ICONS.WARNING]: WarningIcon,
-};
-
-export const Icon = ({ className, glyph, as: Component, size, ...restProps }) => {
-  const Svg = typeof glyph === 'string' ? ICON_MAP[glyph] : glyph;
-
-  return (
-    <Component className={cx(css.root, className, css[size])} {...restProps}>
-      <Svg className={css.icon} />
-    </Component>
-  );
-};
+export const Icon = ({ className, glyph, as: Component, size, ...restProps }) => (
+  <Component className={cx(css.root, className, css[size])} {...restProps}>
+    <svg className={css.icon}>
+      <use xlinkHref={`#${glyph}`} />
+    </svg>
+  </Component>
+);
 
 Icon.ICONS = ICONS;
 

package/src/ui/sort-dropdown/sort-dropdown.jsx

@@ -7,36 +7,35 @@ import { Icon } from '../icon';
 import css from './sort-dropdown.module.css';
 
 export const SortDropdown = (props) => {
-  const { className, label, items, sortBy, direction, onChange } = props;
+  const { className, label, fields, field, direction, onChange } = props;
   const rootClassName = cx(css.root, className);
 
-  const customLabel = items[sortBy] ? `Ordered by ${items[sortBy].label}` : label;
+  const customLabel = fields[field] ? `Ordered by ${fields[field].label}` : label;
 
   return (
     <Dropdown className={rootClassName} label={customLabel} glyph="sort" align="right">
       {({ MenuItem, menu, menuItemClassName, menuItemActiveClassName }) => {
-        const getButtonOnClick = (newSortBy, newDirection) => () => {
-          onChange({ sortBy: newSortBy, direction: newDirection });
+        const getButtonOnClick = (newField, newDirection) => () => {
+          onChange({ field: newField, direction: newDirection });
           menu.toggle();
         };
 
         return (
           <div className={css.items}>
-            {Object.entries(items).map(([key, item]) => {
+            {Object.entries(fields).map(([key, item]) => {
               const buttonProps =
                 direction === 'asc'
                   ? {
-                    className: cx(css.itemButton, css.itemAsc),
+                    className: css.itemAsc,
                     onClick: getButtonOnClick(key, 'desc'),
                     title: `Order data by ${item.label} descending`,
                   }
                   : {
-                    className: css.itemButton,
                     onClick: getButtonOnClick(key, 'asc'),
                     title: `Order data by ${item.label} ascending`,
                   };
 
-              const isActive = sortBy === key;
+              const isActive = field === key;
 
               return (
                 <MenuItem
@@ -44,6 +43,7 @@ export const SortDropdown = (props) => {
                   {...menu}
                   {...buttonProps}
                   className={cx(
+                    buttonProps.className,
                     menuItemClassName,
                     css.item,
                     isActive && menuItemActiveClassName,
@@ -66,17 +66,17 @@ SortDropdown.defaultProps = {
   className: '',
   label: 'Order by',
   onChange: () => {},
-  sortBy: '',
+  field: '',
   direction: 'asc',
 };
 
 SortDropdown.propTypes = {
   className: PropTypes.string,
   label: PropTypes.string,
-  items: PropTypes.shape({
+  fields: PropTypes.shape({
     [PropTypes.string]: PropTypes.string,
   }).isRequired,
   onChange: PropTypes.func,
-  sortBy: PropTypes.string,
+  field: PropTypes.string,
   direction: PropTypes.string,
 };

package/src/utils.jsx

@@ -25,12 +25,14 @@ export const getRenderChildWithClassName = (className) => (child) => {
     return null;
   }
 
-  if (!child?.props) {
+  const { props } = child;
+
+  if (!props) {
     return <div className={className}>{child}</div>;
   }
 
   return React.cloneElement(child, {
-    ...child.props,
-    className: cx(className, child.props.className),
+    ...props,
+    className: cx(className, props.className), // eslint-disable-line react/prop-types
   });
 };