@bundle-stats/ui 4.16.0-beta.9 → 4.17.0-beta.0

package/src/components/bundle-assets/__tests__/add-metric-report-asset-row-data.ts

@@ -0,0 +1,181 @@
+import { addMetricReportAssetRowData } from '../bundle-assets.utils';
+
+describe('BundleAssets / addMetricReportAssetRowData', () => {
+  test('should add data to a single run', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: false,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredictive: false,
+      runs: [
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+      ],
+    });
+  });
+
+  test('should add add data when baseline run is null', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          null,
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: false,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredictive: false,
+      runs: [
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+        null,
+      ],
+    });
+  });
+
+  test('should add add data when curent run is null', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: true,
+        runs: [
+          null,
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: true,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredictive: false,
+      runs: [
+        null,
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+      ],
+    });
+  });
+
+  test('should add data when baseline is not null', () => {
+    expect(
+      addMetricReportAssetRowData({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toEqual({
+      key: 'assets/main.js',
+      label: 'assets/main.js',
+      biggerIsBetter: false,
+      changed: false,
+      fileType: 'JS',
+      isAsset: false,
+      isChunk: true,
+      isEntry: true,
+      isInitial: true,
+      isNotPredictive: false,
+      runs: [
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+        {
+          name: 'assets/main.abc123.js',
+          value: 1024 * 10,
+          isEntry: true,
+          isChunk: true,
+          isInitial: true,
+        },
+      ],
+    });
+  });
+});

package/src/components/bundle-assets/__tests__/get-asset-meta-status.ts

@@ -0,0 +1,21 @@
+import { getAssetMetaStatus } from '../bundle-assets.utils';
+
+describe('BundleAssets / getAssetMetaStatus', () => {
+  test('should return true when all runs meta values are truthy', () => {
+    expect(getAssetMetaStatus([true])).toBeTruthy();
+    expect(getAssetMetaStatus([true, true])).toBeTruthy();
+  });
+
+  test('should return false when all runs meta values are falsy', () => {
+    expect(getAssetMetaStatus([false])).toBeFalsy();
+    expect(getAssetMetaStatus([false, false])).toBeFalsy();
+  });
+
+  test('should return "added" when current is truthy and baseline is falsy', () => {
+    expect(getAssetMetaStatus([true, false])).toEqual('added');
+  });
+
+  test('should return "removed" when current is false and baseline is truthy', () => {
+    expect(getAssetMetaStatus([false, true])).toEqual('removed');
+  });
+});

package/src/components/bundle-assets/__tests__/get-is-not-predictive.ts

@@ -0,0 +1,119 @@
+import { getIsNotPredictive } from '../bundle-assets.utils';
+
+describe('BundleAssets / getIsNotPredictive', () => {
+  test('should return false by default', () => {
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toBeFalsy();
+
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          null,
+        ],
+      }),
+    ).toBeFalsy();
+
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toBeFalsy();
+
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.def456.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 11,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toBeFalsy();
+  });
+
+  test('should return true when not predictive', () => {
+    expect(
+      getIsNotPredictive({
+        key: 'assets/main.js',
+        label: 'assets/main.js',
+        biggerIsBetter: false,
+        changed: false,
+        runs: [
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 10,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+          {
+            name: 'assets/main.abc123.js',
+            value: 1024 * 11,
+            isEntry: true,
+            isChunk: true,
+            isInitial: true,
+          },
+        ],
+      }),
+    ).toBeTruthy();
+  });
+});

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import get from 'lodash/get';
@@ -20,17 +20,12 @@ import { Box } from '../../layout/box';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Dialog, useDialogState } from '../../ui/dialog';
-import { Icon } from '../../ui/icon';
 import { InputSearch } from '../../ui/input-search';
-import { FileName } from '../../ui/file-name';
-import { HoverCard } from '../../ui/hover-card';
-import { Tag } from '../../ui/tag';
 import { Table } from '../../ui/table';
 import { Filters } from '../../ui/filters';
 import { EmptySet } from '../../ui/empty-set';
 import { Toolbar } from '../../ui/toolbar';
 import { AssetInfo } from '../asset-info';
-import { AssetNotPredictive } from '../asset-not-predictive';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableExport } from '../metrics-table-export';
@@ -41,10 +36,7 @@ import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
 import { SEARCH_PLACEHOLDER } from './bundle-assets.i18n';
 import css from './bundle-assets.module.css';
-
-const RUN_TITLE_CURRENT = 'Current';
-const RUN_TITLE_BASELINE = 'Baseline';
-const RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
+import { AssetName } from '../asset-name';
 
 const DISPLAY_TYPE_GROUPS = {
   [MetricsDisplayType.TREEMAP]: ['folder'],
@@ -94,77 +86,6 @@ const getFilters = ({ compareMode, filters }) => ({
   },
 });
 
-const RowHeader = ({ row, customComponentLink: CustomComponentLink, filters, search }) => {
-  const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
-
-  return (
-    <span className={css.assetNameWrapper}>
-      {isNotPredictive && (
-        <HoverCard
-          label={<Icon className={css.notPredictiveIcon} glyph={Icon.ICONS.WARNING} />}
-          className={css.notPredictive}
-          anchorClassName={css.notPredictiveAnchor}
-        >
-          <AssetNotPredictive runs={runs} labels={RUNS_LABELS} />
-        </HoverCard>
-      )}
-
-      <CustomComponentLink
-        section={SECTIONS.ASSETS}
-        params={{ [COMPONENT.BUNDLE_ASSETS]: { filters, search, entryId: row.key } }}
-        className={css.assetName}
-      >
-        <span className={css.assetNameTags}>
-          {isEntry && (
-            <Tag
-              className={cx(css.assetNameTag, css.assetNameTagEntry)}
-              title="Entrypoint"
-              size={Tag.SIZES.SMALL}
-              kind={Tag.KINDS.INFO}
-            />
-          )}
-          {isInitial && (
-            <Tag
-              className={cx(css.assetNameTag, css.assetNameTagInitial)}
-              title="Initial"
-              size={Tag.SIZES.SMALL}
-              kind={Tag.KINDS.INFO}
-            />
-          )}
-          {isChunk && (
-            <Tag
-              className={cx(css.assetNameTag, css.assetNameTagChunk)}
-              title="Chunk"
-              size={Tag.SIZES.SMALL}
-              kind={Tag.KINDS.INFO}
-            />
-          )}
-        </span>
-        <FileName className={css.assetNameText} name={label} />
-      </CustomComponentLink>
-    </span>
-  );
-};
-
-RowHeader.propTypes = {
-  row: PropTypes.shape({
-    key: PropTypes.string,
-    label: PropTypes.string,
-    isNotPredictive: PropTypes.bool,
-    isChunk: PropTypes.bool,
-    isInitial: PropTypes.bool,
-    isEntry: PropTypes.bool,
-    runs: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
-  }).isRequired,
-  customComponentLink: PropTypes.elementType.isRequired,
-  filters: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
-  search: PropTypes.string,
-};
-
-RowHeader.defaultProps = {
-  search: '',
-};
-
 const ViewMetricsTreemap = (props) => {
   const {
     metricsTableTitle,
@@ -283,13 +204,23 @@ export const BundleAssets = (props) => {
     [items, totalRowCount],
   );
 
+  const assetNameCustomComponentLink = useCallback(
+    ({ entryId: assetEntryId, ...assetNameRestProps }) => (
+      <CustomComponentLink
+        section={SECTIONS.ASSETS}
+        params={{ [COMPONENT.BUNDLE_ASSETS]: { filters, search, entryId: assetEntryId } }}
+        {...assetNameRestProps}
+      />
+    ),
+    [CustomComponentLink, filters, search],
+  );
+
   const renderRowHeader = useCallback(
     (row) => (
-      <RowHeader
+      <AssetName
         row={row}
-        customComponentLink={CustomComponentLink}
-        filters={filters}
-        search={search}
+        customComponentLink={assetNameCustomComponentLink}
+        className={css.assetName}
       />
     ),
     [CustomComponentLink, filters, search],
@@ -316,8 +247,10 @@ export const BundleAssets = (props) => {
   }, [allItems, entryId]);
 
   const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState(undefined);
 
-  const handleExportClick = useCallback(() => {
+  const handleExportClick = useCallback((sourceType) => {
+    setExportSourceType(sourceType);
     exportDialog.toggle();
   }, []);
 
@@ -396,7 +329,13 @@ export const BundleAssets = (props) => {
       )}
 
       <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
-        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--assets" />}
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--assets"
+          />
+        )}
       </Dialog>
     </>
   );

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

@@ -3,70 +3,6 @@
   max-width: 240px;
 }
 
-.assetNameWrapper {
-}
-
-.assetName {}
-
-.notPredictive {
-  margin-right: var(--space-xxsmall);
-  display: inline-block;
-  width: var(--space-small);
-  height: var(--space-small);
-}
-
-.notPredictiveAnchor {}
-
-.notPredictiveIcon {
-  color: var(--color-warning-dark);
-}
-
-.assetNameTags {
-  display: inline;
-  margin-right: var(--space-xxxsmall);
-}
-
-.assetNameTags:empty {
-  display: none;
-}
-
-.assetNameTag {
-  vertical-align: middle;
-}
-
-.assetNameTag + .assetNameTag {
-  margin-left: 2px;
-}
-
-.assetNameTagEntry {
-  background: var(--color-info-dark);
-}
-
-.assetNameTagEntry::before {
-  content: 'e';
-}
-
-.assetNameTagInitial {
-  background: var(--color-info);
-}
-
-.assetNameTagInitial::before {
-  content: 'i';
-}
-
-.assetNameTagChunk {
-  background: var(--color-info-light);
-}
-
-.assetNameTagChunk::before {
-  content: 'c';
-}
-
-.assetNameText {
-  display: inline-block;
-  vertical-align: middle;
-}
-
 .root .assetName:hover,
 .root .assetName:active,
 .root .assetName:focus {

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

@@ -1,26 +1,21 @@
-import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
-
-export const addRowAssetFlags = (row) => {
-  const { runs } = row;
+/**
+ * @type {import('@bundle-stats/utils').ReportMetricRow} ReportMetricRow
+ * @type {import('../../types').ReportMetricAssetRow} ReportMetricAssetRow
+ * @type {import('../../types').ReportMetricAssetRowMetaStatus} ReportMetricAssetRowFlagStatus
+ */
 
-  const isEntry = runs.map((run) => run?.isEntry).includes(true);
-  const isInitial = runs.map((run) => run?.isInitial).includes(true);
-  const isChunk = runs.map((run) => run?.isChunk).includes(true);
-  const isAsset = !(isEntry || isInitial || isChunk);
-  const fileType = getFileType(row.key);
+import { ASSET_ENTRY_TYPE, ASSET_FILE_TYPE, ASSET_FILTERS, getFileType } from '@bundle-stats/utils';
 
-  return {
-    ...row,
-    isEntry,
-    isInitial,
-    isChunk,
-    isAsset,
-    fileType,
-  };
-};
+/**
+ * Check if the asset cache is not predictive
+ *
+ * @param {ReportMetricRow} row
+ * @returns {boolean}
+ */
+export const getIsNotPredictive = (row) => {
+  const { key, runs } = row;
 
-export const getIsNotPredictive = (key, runs) =>
-  runs.reduce((agg, current, index) => {
+  return runs.reduce((agg, current, index) => {
     if (agg) {
       return agg;
     }
@@ -32,20 +27,86 @@ export const getIsNotPredictive = (key, runs) =>
     if (
       current &&
       runs[index + 1] &&
-      current.delta !== 0 &&
       key !== current.name &&
-      current.name === runs[index + 1].name
+      current.name === runs[index + 1].name &&
+      current.value !== runs[index + 1].value
     ) {
       return true;
     }
 
     return agg;
   }, false);
+};
+
+/**
+ * @param {Array<boolean>}
+ * @returns {ReportMetricAssetRowFlagStatus | boolean}
+ */
+export const getAssetMetaStatus = (values) => {
+  if (!values.includes(true)) {
+    return false;
+  }
+
+  // filter empty runs
+  const metaValues = values.filter((value) => typeof value !== 'undefined');
+
+  const current = metaValues[0];
+  const metaValuesLength = metaValues.length;
+
+  if (metaValuesLength === 1) {
+    return Boolean(current);
+  }
+
+  const baseline = metaValues[metaValuesLength - 1];
 
-export const addRowIsNotPredictive = (row) => ({
-  ...row,
-  isNotPredictive: getIsNotPredictive(row.key, row.runs),
-});
+  if (current && !baseline) {
+    return 'added';
+  }
+
+  if (!current && baseline) {
+    return 'removed';
+  }
+
+  return true;
+};
+
+/**
+ * Add asset row flags
+ *
+ * @param {ReportMetricRow} row
+ * @returns {ReportMetricAssetRow}
+ */
+export const addMetricReportAssetRowData = (row) => {
+  const { runs } = row;
+
+  // Collect meta for each run
+  const runsEntry = [];
+  const runsInitial = [];
+  const runsChunk = [];
+
+  runs.forEach((run) => {
+    runsEntry.push(run?.isEntry);
+    runsInitial.push(run?.isInitial);
+    runsChunk.push(run?.isChunk);
+  });
+
+  const isEntry = getAssetMetaStatus(runsEntry);
+  const isInitial = getAssetMetaStatus(runsInitial);
+  const isChunk = getAssetMetaStatus(runsChunk);
+  const isAsset = !(isEntry || isInitial || isChunk);
+  const isNotPredictive = getIsNotPredictive(row);
+  const fileType = getFileType(row.key);
+
+  return {
+    ...row,
+    isEntry,
+    isInitial,
+    isChunk,
+    isAsset,
+    isNotPredictive,
+    fileType,
+  };
+};
 
 export const getRowFilter = (filters) => (item) => {
   if (filters[ASSET_FILTERS.CHANGED] && !item.changed) {