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

package/src/components/asset-name/asset-name.module.css

@@ -0,0 +1,32 @@
+.root {}
+
+.notPredictive {
+  margin-right: var(--space-xxsmall);
+  display: inline-block;
+  width: var(--space-small);
+  height: var(--space-small);
+}
+
+.notPredictiveAnchor {}
+
+.notPredictiveIcon {
+  color: var(--color-warning-dark);
+}
+
+.metaTags {
+  display: inline;
+  margin-right: var(--space-xxxsmall);
+}
+
+.metaTag + .metaTag {
+  margin-left: calc(var(--space-xxxsmall) / 2);
+}
+
+.metaTags:empty {
+  display: none;
+}
+
+.nameText {
+  display: inline-block;
+  vertical-align: middle;
+}

package/src/components/asset-name/asset-name.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AssetName } from '.';
+
+const ROW = {
+  key: 'asset/main.js',
+  label: 'asset/main.js',
+  changed: true,
+  isEntry: false,
+  isChunk: false,
+  isInitial: false,
+  isAsset: true,
+  isNotPredictive: false,
+  fileType: 'JS',
+  biggerIsBetter: false,
+  runs: [
+    { name: 'asset/main.abcd1234.js', value: 1024 * 10 },
+    { name: 'asset/main.abcd1234.js', value: 1024 * 11 },
+  ],
+};
+
+const meta = {
+  title: 'Components/AssetName',
+  component: AssetName,
+  args: {
+    customComponentLink: 'span',
+    filters: {},
+    search: '',
+  },
+} as Meta<typeof AssetName>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    row: ROW,
+  },
+};
+
+export const MetaDefault: Story = {
+  args: {
+    row: {
+      ...ROW,
+      isEntry: true,
+      isChunk: true,
+      isInitial: true,
+      isAsset: false,
+    },
+  },
+};
+
+export const MetaAdded: Story = {
+  args: {
+    row: {
+      ...ROW,
+      isEntry: 'added',
+      isChunk: 'added',
+      isInitial: 'added',
+      isAsset: false,
+    },
+  },
+};
+
+export const MetaRemoved: Story = {
+  args: {
+    row: {
+      ...ROW,
+      isEntry: 'removed',
+      isChunk: 'removed',
+      isInitial: 'removed',
+      isAsset: false,
+    },
+  },
+};
+
+export const NotPredictive: Story = {
+  args: {
+    row: {
+      ...ROW,
+      isNotPredictive: true,
+    },
+  },
+};

package/src/components/asset-name/asset-name.tsx

@@ -0,0 +1,60 @@
+import React, { ElementType } from 'react';
+import cx from 'classnames';
+
+import { Icon } from '../../ui/icon';
+import { FileName } from '../../ui/file-name';
+import { HoverCard } from '../../ui/hover-card';
+import { AssetNotPredictive } from '../asset-not-predictive';
+
+import { ReportMetricAssetRow } from '../../types';
+import { AssetMetaTag } from '../asset-meta-tag';
+import css from './asset-name.module.css';
+
+const RUN_TITLE_CURRENT = 'Current';
+const RUN_TITLE_BASELINE = 'Baseline';
+const RUNS_LABELS = [RUN_TITLE_CURRENT, RUN_TITLE_BASELINE];
+
+export type AssetNameProps = {
+  className?: string;
+  row: ReportMetricAssetRow;
+  customComponentLink: ElementType;
+};
+
+export const AssetName = (props: AssetNameProps) => {
+  const { className = '', customComponentLink: CustomComponentLink, row } = props;
+  const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
+
+  return (
+    <span className={cx(css.root, className)}>
+      {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 entryId={row.key} className={css.name}>
+        <span className={css.metaTags}>
+          {isEntry && (
+            <AssetMetaTag className={css.metaTag} title="Entrypoint" tag="entry" status={isEntry} />
+          )}
+          {isInitial && (
+            <AssetMetaTag
+              className={css.metaTag}
+              title="Initial"
+              tag="initial"
+              status={isInitial}
+            />
+          )}
+          {isChunk && (
+            <AssetMetaTag className={css.metaTag} title="Chunk" tag="chunk" status={isChunk} />
+          )}
+        </span>
+        <FileName className={css.nameText} name={label} />
+      </CustomComponentLink>
+    </span>
+  );
+};

package/src/components/asset-name/index.ts

@@ -0,0 +1 @@
+export * from './asset-name';

package/src/components/asset-not-predictive/asset-not-predictive.tsx

@@ -1,3 +1,4 @@
+import type { ComponentProps } from 'react';
 import React from 'react';
 import cx from 'classnames';
 import type { Asset } from '@bundle-stats/utils/types/webpack';
@@ -6,19 +7,20 @@ import { Stack } from '../../layout/stack';
 import { Table } from '../../ui/table';
 import css from './asset-not-predictive.module.css';
 
-interface AssetNotPredictiveProps {
+export type AssetNotPredictiveProps = {
   runs?: Array<Asset>;
-  labels?: Array<string>
-}
+  labels?: Array<string>;
+} & ComponentProps<'div'>;
 
-export const AssetNotPredictive = (props: AssetNotPredictiveProps & React.ComponentProps<'div'>) => {
+export const AssetNotPredictive = (props: AssetNotPredictiveProps) => {
   const { className = '', runs = null, labels = null, ...restProps } = props;
 
   return (
-    <Stack space="xsmall" {...restProps} className={cx(css.root, className)}>
-      <p className={css.text}>
-        Asset file name is the same, but the size has changed.
-      </p>
+    <Stack space="small" {...restProps} className={cx(css.root, className)}>
+      <Stack space="xxxsmall">
+        <h3>Asset hash is not predictive</h3>
+        <p className={css.text}>File names are equal, but the size is different.</p>
+      </Stack>
       {runs && (
         <Table outline compact>
           <Table.THead>

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

@@ -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],