@bundle-stats/ui 4.8.2 → 4.8.4-beta.0

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

@@ -1,113 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import uniqBy from 'lodash/uniqBy';
-import {
-  MODULE_FILTERS,
-  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 { addRowFlags, generateGetRowFilter, getCustomSort } from './bundle-modules.utils';
-
-export const BundleModules = (props) => {
-  const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
-
-  const { chunks, chunkIds } = useMemo(() => {
-    const bundleChunks = uniqBy(
-      jobs.map((job) => job?.meta?.webpack?.chunks || []).flat(),
-      ({ id }) => id,
-    );
-    const bundleChunkIds = bundleChunks?.map(({ id }) => id);
-
-    return {
-      chunks: bundleChunks,
-      chunkIds: bundleChunkIds,
-    };
-  }, [jobs]);
-
-  const { defaultFilters, allEntriesFilters } = useMemo(
-    () => ({
-      defaultFilters: {
-        changed: jobs?.length > 1,
-        ...getModuleSourceTypeFilters(true),
-        ...getModuleChunkFilters(chunkIds, true),
-        ...getModuleFileTypeFilters(true),
-        [MODULE_FILTERS.DUPLICATED]: false,
-      },
-      allEntriesFilters: {
-        changed: false,
-        ...getModuleSourceTypeFilters(true),
-        ...getModuleChunkFilters(chunkIds, true),
-        ...getModuleFileTypeFilters(true),
-        [MODULE_FILTERS.DUPLICATED]: false,
-      },
-    }),
-    [jobs],
-  );
-
-  const searchParams = useSearchParams({
-    search,
-    filters,
-    defaultFilters,
-    allEntriesFilters,
-    setState,
-  });
-
-  const { rows, totalRowCount } = useMemo(() => {
-    const result = webpack.compareBySection.modules(jobs, [addRowFlags]);
-    return { rows: result, totalRowCount: result.length };
-  }, [jobs]);
-
-  const filteredRows = useRowsFilter({
-    rows,
-    searchPattern: searchParams.searchPattern,
-    filters: searchParams.filters,
-    getRowFilter: generateGetRowFilter({ chunkIds }),
-  });
-
-  const sortParams = useRowsSort({
-    rows: filteredRows,
-    initialField: sortBy,
-    initialDirection: direction,
-    getCustomSort,
-  });
-
-  const hideEntryInfo = useCallback(() => {
-    setState({ entryId: '' });
-  }, [setState]);
-
-  return (
-    <BundleModulesComponent
-      jobs={jobs}
-      chunks={chunks}
-      {...restProps}
-      {...searchParams}
-      {...sortParams}
-      allItems={rows}
-      totalRowCount={totalRowCount}
-      hideEntryInfo={hideEntryInfo}
-    />
-  );
-};
-
-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/metrics-table/index.jsx

@@ -1,11 +0,0 @@
-import React, { useState } from 'react';
-
-import { MetricsTable as BaseComponent } from './metrics-table';
-
-export const MetricsTable = (props) => {
-  const [showAllItems, setShowAllItems] = useState(false);
-
-  return (
-    <BaseComponent {...props} showAllItems={showAllItems}  setShowAllItems={setShowAllItems} />
-  );
-};

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

@@ -1,309 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import sum from 'lodash/sum';
-import { MetricTypes, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
-
-import { Icon } from '../../ui/icon';
-import { Table } from '../../ui/table';
-import { Stack } from '../../layout/stack';
-import { Metric } from '../metric';
-import { Delta } from '../delta';
-import { JobName } from '../job-name';
-import { SortButton } from '../sort-button';
-import styles from './metrics-table.module.css';
-
-const METRIC_TYPE_DATA = getGlobalMetricType(null, MetricTypes.FileSize);
-const VISIBLE_COUNT = 500;
-const BASELINE_COLUMN_SPAN = 1;
-const CURRENT_COLUMN_SPAN = 3;
-const BASELINE_TITLE = 'Baseline';
-const CURRENT_TITLE = 'Current';
-
-const getRowsRunTotal = (rows, runIndex) =>
-  sum(rows.map((row) => row?.runs?.[runIndex]?.value || 0));
-
-const ColumnJob = ({ run, isBaseline }) => {
-  const colSpan = isBaseline ? BASELINE_COLUMN_SPAN : CURRENT_COLUMN_SPAN;
-
-  if (!run) {
-    return <Table.Th colSpan={colSpan}>-</Table.Th>;
-  }
-
-  const { label, internalBuildNumber } = run;
-
-  return (
-    <Table.Th className={styles.job} colSpan={colSpan}>
-      <JobName
-        title={isBaseline ? BASELINE_TITLE : CURRENT_TITLE}
-        internalBuildNumber={internalBuildNumber}
-        className={styles.jobName}
-      >
-        {label}
-      </JobName>
-    </Table.Th>
-  );
-};
-
-const ColumnSum = ({ rows, isBaseline, runIndex, updateSort, sort }) => {
-  const currentRunTotal = getRowsRunTotal(rows, runIndex);
-  const baselineRunTotal = !isBaseline && getRowsRunTotal(rows, runIndex + 1);
-  const infoTotal = getMetricRunInfo(METRIC_TYPE_DATA, currentRunTotal, baselineRunTotal);
-  const fieldPath = `runs[${runIndex}]`;
-
-  return (
-    <>
-      <Table.Th className={cx(styles.value, styles.sum)}>
-        {(updateSort && sort) ? (
-          <SortButton
-            fieldPath={fieldPath}
-            fieldName="value"
-            label="absolute value"
-            updateSort={updateSort}
-            sort={sort}
-          >
-            <Metric value={infoTotal.displayValue} />
-          </SortButton>
-        ) : (
-          <Metric value={infoTotal.displayValue} />
-        )}
-      </Table.Th>
-      {!isBaseline && (
-        <>
-          <Table.Th className={cx(styles.delta, styles.sum)}>
-            {(updateSort && sort) ? (
-              <SortButton
-                fieldPath={fieldPath}
-                fieldName="delta"
-                label="absolute change"
-                updateSort={updateSort}
-                sort={sort}
-              >
-                <Delta displayValue={infoTotal.displayDelta} deltaType={infoTotal.deltaType} />
-              </SortButton>
-            ) : (
-              <Delta displayValue={infoTotal.displayDelta} deltaType={infoTotal.deltaType} />
-            )}
-          </Table.Th>
-          <Table.Th className={cx(styles.delta, styles.deltaPercentage, styles.sum)}>
-            {(updateSort && sort) ? (
-              <SortButton
-                fieldPath={fieldPath}
-                fieldName="deltaPercentage"
-                label="absolute percentual change"
-                updateSort={updateSort}
-                sort={sort}
-              >
-                <Delta
-                  displayValue={infoTotal.displayDeltaPercentage}
-                  deltaType={infoTotal.deltaType}
-                />
-              </SortButton>
-            ) : (
-              <Delta
-                displayValue={infoTotal.displayDeltaPercentage}
-                deltaType={infoTotal.deltaType}
-              />
-            )}
-          </Table.Th>
-        </>
-      )}
-    </>
-  );
-};
-
-const Row = ({ item, renderRowHeader }) => (
-  <Table.Tr className={cx(!item.changed && styles.unchanged)}>
-    <Table.Th className={styles.metricName}>{renderRowHeader(item)}</Table.Th>
-
-    {item.runs.map((run, index) => {
-      const isBaseline = index === item.runs.length - 1;
-      const valueClassName = cx(styles.value, !isBaseline && styles.current);
-
-      // Empty cells if no value
-      if (!run || typeof run.value === 'undefined') {
-        return (
-          <>
-            <Table.Td className={valueClassName}>-</Table.Td>
-            {!isBaseline && <Table.Td className={styles.delta} />}
-            {!isBaseline && <Table.Td className={cx(styles.delta, styles.deltaPercentage)} />}
-          </>
-        );
-      }
-
-      const { displayValue, deltaPercentage, displayDelta, displayDeltaPercentage, deltaType } =
-        run;
-
-      return (
-        <>
-          <Table.Td className={valueClassName}>
-            <Metric value={displayValue} />
-          </Table.Td>
-          {!isBaseline && typeof deltaPercentage === 'number' && (
-            <>
-              <Table.Td className={styles.delta}>
-                <Delta displayValue={displayDelta} deltaType={deltaType} />
-              </Table.Td>
-              <Table.Td className={cx(styles.delta, styles.deltaPercentage)}>
-                <Delta displayValue={displayDeltaPercentage} deltaType={deltaType} />
-              </Table.Td>
-            </>
-          )}
-        </>
-      );
-    })}
-  </Table.Tr>
-);
-
-Row.propTypes = {
-  item: PropTypes.shape({
-    changed: PropTypes.bool,
-    runs: PropTypes.arrayOf(
-      PropTypes.shape({
-        value: PropTypes.number,
-        displayValue: PropTypes.string,
-        deltaPercentage: PropTypes.number,
-        displayDeltaPercentage: PropTypes.string,
-        deltaType: PropTypes.string,
-      }),
-    ),
-  }).isRequired,
-  renderRowHeader: PropTypes.func.isRequired,
-};
-
-export const MetricsTable = ({
-  className,
-  renderRowHeader,
-  runs,
-  items,
-  emptyMessage,
-  showHeaderSum,
-  title,
-  showAllItems,
-  setShowAllItems,
-  sort,
-  updateSort,
-  ...restProps
-}) => {
-  const columnCount = (runs.length - 1) * CURRENT_COLUMN_SPAN + BASELINE_COLUMN_SPAN + 1;
-
-  const rootClassName = cx(
-    styles.root,
-    className,
-    runs.length > 1 && styles.multipleRuns,
-    showHeaderSum && styles.showHeaderSum,
-  );
-
-  const showEmpty = isEmpty(items);
-  const showItems = !showEmpty;
-  const hasHiddenItems = items?.length > VISIBLE_COUNT;
-  const visibleItems = !hasHiddenItems || showAllItems ? items : items?.slice(0, VISIBLE_COUNT);
-
-  return (
-    <Table className={rootClassName} compact {...restProps}>
-      <Table.THead>
-        <Table.Tr className={styles.headerRow}>
-          <Table.Th className={styles.metricName} rowSpan={showHeaderSum ? 2 : 1}>
-            {title || ' '}
-          </Table.Th>
-          {runs.map((run, runIndex) => (
-            <ColumnJob run={run} isBaseline={runIndex === runs.length - 1} />
-          ))}
-        </Table.Tr>
-        {showHeaderSum && (
-          <Table.Tr className={styles.headerRow}>
-            {runs.map((run, runIndex) => (
-              <ColumnSum
-                rows={items}
-                isBaseline={runIndex === runs.length - 1}
-                runIndex={runIndex}
-                updateSort={updateSort}
-                sort={sort}
-              />
-            ))}
-          </Table.Tr>
-        )}
-      </Table.THead>
-      <Table.TBody>
-        {showEmpty && (
-          <Table.Tr>
-            <Table.Td className={styles.empty} colSpan={columnCount}>
-              <Stack space="xxsmall">
-                <div>
-                  <Icon glyph={Icon.ICONS.INFO} className={styles.emptyIcon} size="large" />
-                </div>
-                {emptyMessage}
-              </Stack>
-            </Table.Td>
-          </Table.Tr>
-        )}
-
-        {showItems && (
-          <>
-            {visibleItems.map((item) => (
-              <Row key={item.key} item={item} renderRowHeader={renderRowHeader} />
-            ))}
-
-            {hasHiddenItems && (
-              <Table.Tr>
-                <Table.Td className={styles.showAllItems} colSpan={columnCount}>
-                  {showAllItems ? (
-                    <button
-                      onClick={() => setShowAllItems(false)}
-                      type="button"
-                      className={styles.showAllItemsButton}
-                    >
-                      Show less
-                    </button>
-                  ) : (
-                    <button
-                      onClick={() => setShowAllItems(true)}
-                      type="button"
-                      className={styles.showAllItemsButton}
-                    >
-                      Show all
-                    </button>
-                  )}
-                </Table.Td>
-              </Table.Tr>
-            )}
-          </>
-        )}
-      </Table.TBody>
-    </Table>
-  );
-};
-
-MetricsTable.defaultProps = {
-  className: '',
-  renderRowHeader: (item) => item.label,
-  emptyMessage: 'No entries found.',
-  showHeaderSum: false,
-  title: '',
-};
-
-MetricsTable.propTypes = {
-  className: PropTypes.string,
-  renderRowHeader: PropTypes.func,
-  runs: PropTypes.arrayOf(
-    PropTypes.shape({
-      internalBuildNumber: PropTypes.number,
-    }),
-  ).isRequired,
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string,
-      label: PropTypes.string,
-      runs: PropTypes.arrayOf(
-        PropTypes.shape({
-          displayValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-          displayDelta: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        }),
-      ),
-    }),
-  ).isRequired,
-  emptyMessage: PropTypes.element,
-  showHeaderSum: PropTypes.bool,
-  title: PropTypes.element,
-};

package/src/ui/filters/__tests__/filters-dropdown.utils.js

@@ -1,74 +0,0 @@
-import { getGroupFiltersLabelSuffix } from '../filters.utils';
-
-describe('UI / Filters / utils', () => {
-  describe('getGroupFiltersLabelSuffix', () => {
-    test('should return none', () => {
-      const suffix = getGroupFiltersLabelSuffix([
-        ['CSS', { label: 'CSS', defaultValue: false }],
-        ['JS', { label: 'JS', defaultValue: false }],
-        ['IMG', { label: 'IMG', defaultValue: false }],
-        ['MEDIA', { label: 'Media', defaultValue: false }],
-        ['FONTS', { label: 'Fonts', defaultValue: false }],
-        ['HTML', { label: 'HTML', defaultValue: false }],
-        ['OTHER', { label: 'Other', defaultValue: false }],
-      ]);
-
-      expect(suffix).toEqual('none');
-    });
-
-    test('should return all', () => {
-      const suffix = getGroupFiltersLabelSuffix([
-        ['CSS', { label: 'CSS', defaultValue: true }],
-        ['JS', { label: 'JS', defaultValue: true }],
-        ['IMG', { label: 'IMG', defaultValue: true }],
-        ['MEDIA', { label: 'Media', defaultValue: true }],
-        ['FONTS', { label: 'Fonts', defaultValue: true }],
-        ['HTML', { label: 'HTML', defaultValue: true }],
-        ['OTHER', { label: 'Other', defaultValue: true }],
-      ]);
-
-      expect(suffix).toEqual('all');
-    });
-    test('should return checked filters', () => {
-      const suffix = getGroupFiltersLabelSuffix([
-        ['CSS', { label: 'CSS', defaultValue: true }],
-        ['JS', { label: 'JS', defaultValue: true }],
-        ['IMG', { label: 'IMG', defaultValue: false }],
-        ['MEDIA', { label: 'Media', defaultValue: false }],
-        ['FONTS', { label: 'Fonts', defaultValue: false }],
-        ['HTML', { label: 'HTML', defaultValue: false }],
-        ['OTHER', { label: 'Other', defaultValue: false }],
-      ]);
-
-      expect(suffix).toEqual('CSS, JS');
-    });
-
-    test('should crop last filter if need it', () => {
-      const suffix = getGroupFiltersLabelSuffix([
-        ['CSS', { label: 'CSS', defaultValue: true }],
-        ['JS', { label: 'JS', defaultValue: true }],
-        ['IMG', { label: 'IMG', defaultValue: true }],
-        ['MEDIA', { label: 'Meeeeeeedia', defaultValue: true }],
-        ['FONTS', { label: 'Fonts', defaultValue: false }],
-        ['HTML', { label: 'HTML', defaultValue: false }],
-        ['OTHER', { label: 'Other', defaultValue: false }],
-      ]);
-
-      expect(suffix).toEqual('CSS, JS, IMG, Mee...');
-    });
-
-    test('should crop and add remaining filters count', () => {
-      const suffix = getGroupFiltersLabelSuffix([
-        ['CSS', { label: 'CSS', defaultValue: true }],
-        ['JS', { label: 'JS', defaultValue: true }],
-        ['IMG', { label: 'IMG', defaultValue: true }],
-        ['MEDIA', { label: 'Media', defaultValue: true }],
-        ['FONTS', { label: 'Fonts', defaultValue: true }],
-        ['HTML', { label: 'HTML', defaultValue: true }],
-        ['OTHER', { label: 'Other', defaultValue: false }],
-      ]);
-
-      expect(suffix).toEqual('CSS, JS, IMG, Media +2');
-    });
-  });
-});