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

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

@@ -0,0 +1,200 @@
+import React, { useCallback, useMemo } from 'react';
+import cx from 'classnames';
+import { SECTIONS, COMPONENT } from '@bundle-stats/utils';
+
+import type { SortAction } from '../../types';
+import config from '../../config.json';
+import I18N from '../../i18n';
+import { ComponentLink } from '../component-link';
+import { FlexStack } from '../../layout/flex-stack';
+import { EmptySet } from '../../ui/empty-set';
+import { FileName } from '../../ui/file-name';
+import { Filters } from '../../ui/filters';
+import { Tag } from '../../ui/tag';
+import { Toolbar } from '../../ui/toolbar';
+import { MetricsTable } from '../metrics-table';
+import { MetricsTableSearch } from '../metrics-table-search';
+import { MetricsTableOptions } from '../metrics-table-options';
+import { MetricsTableTitle } from '../metrics-table-title';
+import { ModuleInfo } from '../module-info';
+import { generateFilterFieldsData } from './bundle-modules.utils';
+import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+import * as I18N_MODULES from './bundle-modules.i18n';
+import css from './bundle-modules.module.css';
+
+interface RowHeaderProps {
+  row: ReportMetricModuleRow;
+  filters?: any;
+  search?: string;
+  customComponentLink: React.ElementType;
+}
+
+const RowHeader = (props: RowHeaderProps) => {
+  const { row, filters, search, customComponentLink: CustomComponentLink } = props;
+
+  return (
+    <CustomComponentLink
+      section={SECTIONS.MODULES}
+      params={{ [COMPONENT.BUNDLE_MODULES]: { filters, search, entryId: row.key } }}
+      className={css.name}
+    >
+      {row.duplicated && (
+        <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
+      )}
+      <FileName className={css.nameText} name={row.label} />
+    </CustomComponentLink>
+  );
+};
+
+interface BundleModulesProps extends React.ComponentProps<'div'> {
+  jobs?: Array<Job>;
+  items?: Array<ReportMetricModuleRow>;
+  allItems?: Array<ReportMetricModuleRow>;
+  chunks?: Array<Chunk>;
+
+  totalRowCount: number;
+
+  updateFilters: () => void;
+  resetFilters: () => void;
+  resetAllFilters: () => void;
+  filters: Record<string, boolean>;
+
+  sort: any;
+  updateSort: ({ field, direction }: SortAction) => void;
+
+  search: string;
+  updateSearch: (newSerarch: string) => void;
+
+  entryId?: string;
+  hideEntryInfo: () => void;
+
+  customComponentLink: React.ElementType;
+}
+
+export const BundleModules = (props: BundleModulesProps) => {
+  const {
+    className = '',
+    jobs = [],
+    items = [],
+    allItems = [],
+    chunks = [],
+    totalRowCount = 0,
+    updateFilters,
+    resetFilters,
+    resetAllFilters,
+    filters,
+    sort,
+    updateSort,
+    search,
+    updateSearch,
+    entryId,
+    hideEntryInfo,
+    customComponentLink: CustomComponentLink = ComponentLink,
+  } = props;
+
+  const rootClassName = cx(css.root, className);
+  const jobLabels = jobs?.map((job) => job?.label);
+
+  const filterFieldsData = useMemo(
+    () => generateFilterFieldsData({ 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: ReportMetricModuleRow) => (
+      <RowHeader
+        row={row}
+        filters={filters}
+        search={search}
+        customComponentLink={CustomComponentLink}
+      />
+    ),
+    [jobs, chunks, CustomComponentLink, filters, search],
+  );
+
+  const emptyMessage = useMemo(
+    () => (
+      <EmptySet
+        resources="modules"
+        filtered={totalRowCount !== 0}
+        handleResetFilters={resetFilters}
+        handleViewAll={resetAllFilters}
+      />
+    ),
+    [totalRowCount, resetFilters, resetAllFilters],
+  );
+
+  const entryItem = useMemo(() => {
+    if (!entryId) {
+      return null;
+    }
+
+    return allItems.find(({ key }) => key === entryId);
+  }, [allItems, entryId]);
+
+  return (
+    <>
+      <div className={rootClassName}>
+        <Toolbar
+          className={css.toolbar}
+          renderActions={({ actionClassName }) => (
+            <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
+              <MetricsTableOptions
+                handleViewAll={resetAllFilters}
+                handleResetFilters={resetFilters}
+              />
+            </FlexStack>
+          )}
+        >
+          <FlexStack space="xxsmall">
+            <MetricsTableSearch
+              className={css.toolbarSearch}
+              search={search}
+              updateSearch={updateSearch}
+              placeholder={I18N_MODULES.SEARCH}
+            />
+            <Filters
+              className={css.tableDropdown}
+              filters={filterFieldsData}
+              onChange={updateFilters}
+            />
+          </FlexStack>
+        </Toolbar>
+        <MetricsTable
+          className={css.table}
+          items={items}
+          runs={jobs}
+          renderRowHeader={renderRowHeader}
+          emptyMessage={emptyMessage}
+          showHeaderSum
+          title={metricsTableTitle}
+          sort={sort}
+          updateSort={updateSort}
+        />
+      </div>
+      {entryItem && (
+        <ModuleInfo
+          className={css.moduleInfo}
+          item={entryItem}
+          chunks={chunks}
+          chunkIds={chunks?.map(({ id }) => id)}
+          labels={jobLabels}
+          customComponentLink={CustomComponentLink}
+          onClose={hideEntryInfo}
+        />
+      )}
+    </>
+  );
+};

package/src/components/bundle-modules/bundle-modules.types.d.ts

@@ -0,0 +1,24 @@
+import { Module } from '@bundle-stats/utils/lib-esm/webpack/types';
+import { ReportMetricRun } from '@bundle-stats/utils/types/report/types';
+
+export interface Chunk {
+  id: string;
+  name: string;
+}
+
+export type ReportMetricModuleRow = {
+  thirdParty: boolean;
+  duplicated: boolean;
+  fileType: string;
+} & ReportMetricRun &
+  Module;
+
+interface Job {
+  label: string;
+  internalBuildNumber: number;
+  meta?: {
+    webpack?: {
+      chunks?: Array<Chunk>;
+    };
+  };
+}

package/src/components/bundle-modules/bundle-modules.utils.ts

@@ -0,0 +1,208 @@
+import intersection from 'lodash/intersection';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import union from 'lodash/union';
+import uniqBy from 'lodash/uniqBy';
+import orderBy from 'lodash/orderBy';
+import type { MetricRunInfo, ReportMetricRow } from '@bundle-stats/utils';
+// @ts-ignore
+import { MODULE_PATH_PACKAGES, type Module } from '@bundle-stats/utils/lib-esm/webpack';
+import {
+  FILE_TYPE_LABELS,
+  MODULE_CHUNK,
+  MODULE_FILTERS,
+  MODULE_FILE_TYPE,
+  MODULE_SOURCE_TYPE,
+  MODULE_SOURCE_FILE_TYPES,
+  getModuleSourceFileType,
+  getModuleChunkFilters,
+  getModuleSourceTypeFilters,
+  getModuleFileTypeFilters,
+} from '@bundle-stats/utils';
+import type { ReportMetricRun } from '@bundle-stats/utils/types/report/types';
+
+import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
+import type { Chunk, Job, ReportMetricModuleRow } from './bundle-modules.types';
+import * as I18N from './bundle-modules.i18n';
+
+export const addRowFlags = (row: Module & ReportMetricRow): ReportMetricModuleRow => {
+  const { key, runs } = row;
+
+  // @NOTE Assign instead destructuring for perf reasons
+  // eslint-disable-next-line no-param-reassign
+  row.thirdParty = Boolean(key.match(MODULE_PATH_PACKAGES));
+  // eslint-disable-next-line no-param-reassign
+  row.duplicated = Boolean(runs.find((run: Module & ReportMetricRun) => run?.duplicated === true));
+  // eslint-disable-next-line no-param-reassign
+  row.fileType = getModuleSourceFileType(row.key);
+
+  return row;
+};
+
+export const getCustomSort = (item: ReportMetricRow) => [!item.changed, item.key];
+
+/* eslint-disable prettier/prettier */
+export const generateGetRowFilter =
+  ({ chunkIds }: { chunkIds: Array<string> }) => (filters: Record<string, unknown>) => {
+    // eslint-disable-line prettier/prettier
+    // List of chunkIds with filter value set to `true`
+    const checkedChunkIds: Array<string> = [];
+
+    chunkIds.forEach((chunkId) => {
+      if (filters[`${MODULE_CHUNK}.${chunkId}`]) {
+        checkedChunkIds.push(chunkId);
+      }
+    });
+
+    const hasChunkFilters = checkedChunkIds.length !== chunkIds.length;
+
+    return (row: ReportMetricModuleRow) => {
+      // Skip not changed rows
+      if (filters[MODULE_FILTERS.CHANGED] && !row.changed) {
+        return false;
+      }
+
+      // Skip not duplicated rows
+      if (filters[MODULE_FILTERS.DUPLICATED] && !row.duplicated) {
+        return false;
+      }
+
+      // Skip not matching source type
+      if (
+        !(
+          (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`] &&
+            row.thirdParty === false) ||
+          (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`] &&
+            row.thirdParty === true)
+        )
+      ) {
+        return false;
+      }
+
+      // Skip not matching source file types
+      if (!filters[`${MODULE_FILE_TYPE}.${row.fileType}`]) {
+        return false;
+      }
+
+      // Filter if any of the chunkIds are checked
+      if (hasChunkFilters) {
+        const rowRunsChunkIds =
+          row?.runs?.map((run: Module & MetricRunInfo) => run?.chunkIds || []) || [];
+        const rowChunkIds = union(...rowRunsChunkIds);
+        const matchedChunkIds = intersection(rowChunkIds, checkedChunkIds);
+        return matchedChunkIds.length > 0;
+      }
+
+      return true;
+    };
+  };
+/* eslint-enable prettier/prettier */
+
+export const extractChunkData = (jobs: Array<Job>) => {
+  const jobChunks = jobs.map((job) => job?.meta?.webpack?.chunks || []);
+  const chunks = uniqBy(jobChunks.flat(), ({ id }) => id);
+
+  const chunkIds = chunks?.map(({ id }) => id);
+
+  return {
+    chunks,
+    chunkIds,
+  };
+};
+
+export const generateFilters = (chunkIds: Array<string>, multipleJobs: boolean) => {
+  const allEntriesFilters = {
+    [MODULE_FILTERS.CHANGED]: false,
+    [MODULE_FILTERS.DUPLICATED]: false,
+    ...getModuleSourceTypeFilters(true),
+    ...getModuleChunkFilters(chunkIds, true),
+    ...getModuleFileTypeFilters(true),
+  };
+
+  return {
+    defaultFilters: {
+      ...allEntriesFilters,
+      // By default, set 'changed' filter to `true` only when we have multiple jobs
+      [MODULE_FILTERS.CHANGED]: multipleJobs,
+    },
+    allEntriesFilters,
+  };
+};
+
+interface GetFiltersFormDataParams {
+  /**
+   * Filter values
+   */
+  filters: Record<string, boolean>;
+  /**
+   * Chunk data
+   */
+  chunks: Array<Chunk>;
+  /**
+   * Compare mode
+   */
+  compareMode: boolean;
+}
+
+/**
+ * Generate filter fields data
+ * @NOTE use assignments instead of Object.assign/destructuring for performance reson
+ */
+export const generateFilterFieldsData = (params: GetFiltersFormDataParams): FilterFieldsData => {
+  const { filters, chunks, compareMode } = params;
+
+  const result: FilterFieldsData = {
+    [MODULE_FILTERS.CHANGED]: {
+      label: I18N.CHANGED,
+      defaultValue: filters[MODULE_FILTERS.CHANGED],
+      disabled: !compareMode,
+    },
+    [MODULE_FILTERS.DUPLICATED]: {
+      label: I18N.DUPLICATE,
+      defaultValue: filters[MODULE_FILTERS.DUPLICATED],
+    },
+  };
+
+  result[MODULE_SOURCE_TYPE] = {
+    label: I18N.SOURCE,
+    children: [
+      {
+        key: MODULE_FILTERS.FIRST_PARTY,
+        label: I18N.SOURCE_FIRST_PARTY,
+        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`, true),
+      },
+      {
+        key: MODULE_FILTERS.THIRD_PARTY,
+        label: I18N.SOURCE_THIRD_PARTY,
+        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`, true),
+      },
+    ],
+  } as FilterGroupFieldData;
+
+  if (!isEmpty(chunks)) {
+    const chunksFilter = { label: I18N.CHUNK, children: [] } as FilterGroupFieldData;
+    const chunksOrderedByName = orderBy(chunks, 'name');
+    chunksOrderedByName.forEach((chunk) => {
+      chunksFilter.children.push({
+        key: chunk.id,
+        label: chunk.name,
+        defaultValue: filters[`${MODULE_CHUNK}.${chunk.id}`] ?? true,
+      });
+    });
+
+    result[MODULE_CHUNK] = chunksFilter;
+  }
+
+  const moduleFileTypeFilter = { label: I18N.FILE_TYPE, children: [] } as FilterGroupFieldData;
+  MODULE_SOURCE_FILE_TYPES.forEach((fileType: string) => {
+    moduleFileTypeFilter.children.push({
+      key: fileType,
+      label: FILE_TYPE_LABELS[fileType as keyof typeof FILE_TYPE_LABELS],
+      defaultValue: get(filters, `${MODULE_FILE_TYPE}.${fileType}`, true),
+    });
+  });
+
+  result[MODULE_FILE_TYPE] = moduleFileTypeFilter;
+
+  return result;
+};

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

@@ -0,0 +1,102 @@
+import React, { useCallback, useMemo } from 'react';
+// @ts-ignore
+import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
+
+import type { SortAction } from '../../types';
+import { useRowsFilter } from '../../hooks/rows-filter';
+import { useRowsSort } from '../../hooks/rows-sort';
+import { useSearchParams } from '../../hooks/search-params';
+import { BundleModules as BaseComponent } from './bundle-modules';
+import {
+  addRowFlags,
+  extractChunkData,
+  generateGetRowFilter,
+  generateFilters,
+  getCustomSort,
+} from './bundle-modules.utils';
+import * as types from './bundle-modules.types';
+
+interface BundleModulesProps
+  extends Omit<
+    React.ComponentProps<typeof BaseComponent>,
+    | 'jobs'
+    | 'items'
+    | 'chunks'
+    | 'updateFilters'
+    | 'resetFilters'
+    | 'resetAllFilters'
+    | 'filters'
+    | 'sort'
+    | 'updateSort'
+    | 'search'
+    | 'updateSearch'
+    | 'entryId'
+    | 'allItems'
+    | 'totalRowCount'
+    | 'hideEntryInfo'
+  > {
+  jobs: Array<types.Job>;
+  filters: Record<string, boolean>;
+  search?: string;
+  setState: (params: any) => void;
+  sortBy?: string;
+  direction?: SortAction['direction'];
+}
+
+export const BundleModules = (props: BundleModulesProps) => {
+  const { jobs, filters, search, setState, sortBy, direction, ...restProps } = props;
+
+  const { chunks, chunkIds } = useMemo(() => extractChunkData(jobs), [jobs]);
+
+  const { defaultFilters, allEntriesFilters } = useMemo(
+    () => generateFilters(chunkIds, jobs.length > 1),
+    [chunkIds, jobs],
+  );
+
+  const searchParams = useSearchParams({
+    search,
+    filters,
+    defaultFilters,
+    allEntriesFilters,
+    setState,
+  });
+
+  const { rows, totalRowCount } = useMemo(() => {
+    const result = webpack.compareBySection.modules(jobs, [addRowFlags]);
+    return {
+      rows: result as Array<types.ReportMetricModuleRow>,
+      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 (
+    <BaseComponent
+      jobs={jobs}
+      chunks={chunks}
+      {...restProps}
+      {...searchParams}
+      {...sortParams}
+      allItems={rows}
+      totalRowCount={totalRowCount}
+      hideEntryInfo={hideEntryInfo}
+    />
+  );
+};

package/src/components/entry-info/entry-info.i18n.ts

@@ -0,0 +1,3 @@
+export const PATH = 'Path';
+export const CLOSE_TITLE = 'Close side panel';
+export const SIZE = 'Size';

package/src/components/entry-info/entry-info.tsx

@@ -9,6 +9,7 @@ import { FileName } from '../../ui/file-name';
 import { Icon } from '../../ui/icon';
 import { Table } from '../../ui/table';
 import { RunInfo } from '../run-info';
+import * as I18N from './entry-info.i18n';
 import css from './entry-info.module.css';
 
 interface EntryInfoMetaLinkProps {
@@ -59,7 +60,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
     item,
     labels,
     runNameSelector = 'name',
-    runNameLabel = 'Path',
+    runNameLabel = I18N.PATH,
     children,
     tags = null,
     onClose,
@@ -72,7 +73,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
     METRIC_TYPE_CONFIGS.METRIC_TYPE_FILE_SIZE,
     item.runs?.[0]?.value,
     baselineRun?.value || 0,
-  );
+  ) as MetricRunInfo;
 
   return (
     <Portal className={cx(css.root, className)}>
@@ -93,7 +94,12 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
             size="large"
           />
         </Stack>
-        <button type="button" onClick={onClose} className={css.headerClose}>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label={I18N.CLOSE_TITLE}
+          className={css.headerClose}
+        >
           <Icon glyph={Icon.ICONS.CLOSE} size="large" />
         </button>
       </Box>
@@ -106,7 +112,7 @@ export const EntryInfo = (props: EntryInfoProps & React.ComponentProps<'div'>) =
               <Table.Tr>
                 <Table.Th className={cx(css.runsCell, css.runsColJob)}>&nbsp;</Table.Th>
                 <Table.Th className={cx(css.runsCell, css.runsColName)}>{runNameLabel}</Table.Th>
-                <Table.Th className={cx(css.runsCell, css.runsColSize)}>Size</Table.Th>
+                <Table.Th className={cx(css.runsCell, css.runsColSize)}>{I18N.SIZE}</Table.Th>
               </Table.Tr>
             </Table.THead>
             <Table.TBody>

package/src/components/job-name/job-name.jsx

@@ -4,7 +4,13 @@ import PropTypes from 'prop-types';
 import { Tooltip } from '../../ui/tooltip';
 import css from './job-name.module.css';
 
-export const JobName = ({ as: Component, title, internalBuildNumber, children, ...restProps }) => (
+export const JobName = ({
+  as: Component = 'span',
+  title,
+  internalBuildNumber,
+  children,
+  ...restProps
+}) => (
   <Tooltip className={css.root} as={Component} title={title} {...restProps}>
     {children || `Job #${internalBuildNumber}`}
   </Tooltip>

package/src/components/metric-run-info/metric-run-info.tsx

@@ -76,6 +76,17 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
     return null;
   }, [showMetricDescription, metric]);
 
+  const deltaProps = useMemo(() => {
+    if (!showDelta || metric.skipDelta || !('delta' in metricRunInfo)) {
+      return {};
+    }
+
+    return {
+      delta: metricRunInfo.displayDeltaPercentage,
+      deltaType: metricRunInfo.deltaType,
+    };
+  }, [metricRunInfo]);
+
   return (
     <RunInfo
       title={metric.label}
@@ -86,11 +97,7 @@ export const MetricRunInfo = (props: MetricRunInfoProps & React.ComponentProps<'
       {...(showBaseline && {
         baseline: metric.formatter(baseline),
       })}
-      {...(showDelta &&
-        !metric.skipDelta && {
-          delta: metricRunInfo.displayDeltaPercentage,
-          deltaType: metricRunInfo.deltaType,
-        })}
+      {...deltaProps}
       {...restProps}
     />
   );

package/src/components/metrics-table/index.tsx

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

package/src/components/metrics-table/metrics-table.i18n.ts

@@ -0,0 +1,10 @@
+export const BASELINE_TITLE = 'Baseline';
+export const CURRENT_TITLE = 'Current';
+
+export const SORT_ABSOLUTE_VALUE = 'absolute value';
+export const SORT_ABSOLUTE_CHANGE = 'absolute change';
+export const SORT_PERCENTUAL_CHANGE = 'absolute percentual change';
+
+export const EMPTY_MESSAGE = 'No items found.';
+export const SHOW_ALL = 'Show all';
+export const SHOW_LESS = 'Show less';

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

@@ -15,7 +15,7 @@
   width: 55%;
 }
 
-.root .job {
+.root .jobCol {
   text-align: right;
 }
 
@@ -46,7 +46,7 @@
 }
 
 /* columns overrides for showHeaderSum */
-.showHeaderSum .headerRow .job {
+.showHeaderSum .headerRow .jobCol {
   border-bottom: 0;
   padding-bottom: 0;
 }