@bundle-stats/ui 4.4.0-beta.0 → 4.4.0-beta.3

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

@@ -0,0 +1,159 @@
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+import noop from 'lodash/noop';
+import {
+  FILE_TYPE_LABELS,
+  MetricRunInfo,
+  getBundleModulesByChunk,
+  getBundleAssetsByEntryType,
+  getBundleAssetsFileTypeComponentLink,
+  getModuleFileType,
+} from '@bundle-stats/utils';
+import { Asset, MetaChunk } from '@bundle-stats/utils/types/webpack';
+
+import { FlexStack } from '../../layout/flex-stack';
+import { Tag } from '../../ui/tag';
+import { ComponentLink } from '../component-link';
+import { EntryInfo } from '../entry-info';
+import css from './asset-info.module.css';
+
+interface ChunkModulesLinkProps {
+  as: React.ElementType;
+  chunks: Array<MetaChunk>;
+  chunkId: string;
+  name: string;
+}
+
+const ChunkModulesLink = ({
+  as: Component,
+  chunks,
+  chunkId,
+  name,
+  onClick,
+}: ChunkModulesLinkProps & React.ComponentProps<'a'>) => {
+  const chunk = chunks?.find(({ id }) => id === chunkId);
+
+  if (!chunk) {
+    return null;
+  }
+
+  const chunkIds = chunks.map(({ id }) => id);
+  const fileType = getModuleFileType(name);
+
+  return (
+    <Component
+      className={css.viewModules}
+      {...getBundleModulesByChunk(chunkIds, chunkId, fileType)}
+      onClick={onClick}
+    >
+      View chunk modules
+    </Component>
+  );
+};
+
+interface AssetInfoProps {
+  item: {
+    label: string;
+    changed?: boolean;
+    isChunk?: boolean;
+    isEntry?: boolean;
+    isInitial?: boolean;
+    isNotPredictive?: boolean;
+    fileType?: string;
+    runs: Array<Asset & MetricRunInfo>;
+  };
+  chunks?: Array<MetaChunk>;
+  labels: Array<string>;
+  customComponentLink?: React.ElementType;
+  onClose: () => void;
+}
+
+export const AssetInfo = (props: AssetInfoProps & React.ComponentProps<'div'>) => {
+  const {
+    className = '',
+    chunks = null,
+    customComponentLink: CustomComponentLink = ComponentLink,
+    item,
+    labels,
+    onClick = noop,
+    onClose,
+  } = props;
+
+  const currentRun = item.runs?.[0];
+
+  const tags = useMemo(() => {
+    if (!item.isEntry && !item.isInitial && !item.isChunk) {
+      return null;
+    }
+
+    return (
+      <FlexStack space="xxxsmall" alignItems="center" className={css.tags}>
+        {item.isEntry && (
+          <Tag
+            as={CustomComponentLink}
+            {...getBundleAssetsByEntryType('entry')}
+            onClick={onClick}
+            className={cx(css.assetNameTag, css.assetNameTagEntry)}
+          >
+            Entrypoint
+          </Tag>
+        )}
+        {item.isInitial && (
+          <Tag
+            as={CustomComponentLink}
+            {...getBundleAssetsByEntryType('initial')}
+            onClick={onClick}
+            className={cx(css.assetNameTag, css.assetNameTagInitial)}
+          >
+            Initial
+          </Tag>
+        )}
+        {item.isChunk && (
+          <Tag
+            as={CustomComponentLink}
+            {...getBundleAssetsByEntryType('chunk')}
+            onClick={onClick}
+            className={cx(css.assetNameTag, css.assetNameTagChunk)}
+          >
+            Chunk
+          </Tag>
+        )}
+      </FlexStack>
+    );
+  }, [item]);
+
+  const fileTypeLabel = FILE_TYPE_LABELS[item.fileType as keyof typeof FILE_TYPE_LABELS];
+
+  return (
+    <EntryInfo
+      item={item}
+      labels={labels}
+      tags={tags}
+      onClose={onClose}
+      className={cx(css.root, className)}
+    >
+      {item.fileType && (
+        <EntryInfo.Meta label="File type">
+          <CustomComponentLink
+            {...getBundleAssetsFileTypeComponentLink(item.fileType, fileTypeLabel)}
+            onClick={onClick}
+          >
+            {fileTypeLabel}
+          </CustomComponentLink>
+        </EntryInfo.Meta>
+      )}
+
+      {currentRun?.chunkId && chunks && (
+        <div>
+          <ChunkModulesLink
+            as={CustomComponentLink}
+            chunks={chunks}
+            chunkId={currentRun?.chunkId}
+            name={currentRun?.name}
+            onClick={onClick}
+          />
+        </div>
+      )}
+    </EntryInfo>
+  );
+};

package/src/components/asset-not-predictive/asset-not-predictive.module.css

@@ -0,0 +1,3 @@
+.tableValue {
+  text-align: right;
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { AssetNotPredictive } from '.';
+
+export default {
+  title: 'Components/AssetNotPredictive',
+  component: AssetNotPredictive,
+};
+
+export const Default = () => <AssetNotPredictive />;
+
+const RUNS = [
+  {
+    name: 'static/vendor.abcd1234.js',
+    value: 1024 * 1024 - 1,
+  },
+  {
+    name: 'static/vendor.abcd1234.js',
+    value: 1024 * 1024,
+  },
+] as any;
+
+export const WithRuns = () => <AssetNotPredictive runs={RUNS} labels={['Job 2', 'Job 1']} />;

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import cx from 'classnames';
+import type { Asset } from '@bundle-stats/utils/types/webpack';
+
+import { Stack } from '../../layout/stack';
+import { Table } from '../../ui/table';
+import css from './asset-not-predictive.module.css';
+
+interface AssetNotPredictiveProps {
+  runs?: Array<Asset>;
+  labels?: Array<string>
+}
+
+export const AssetNotPredictive = (props: AssetNotPredictiveProps & React.ComponentProps<'div'>) => {
+  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>
+      {runs && (
+        <Table outline compact>
+          <Table.THead>
+            <Table.Tr>
+              <Table.Th>&nbsp;</Table.Th>
+              <Table.Th>File name</Table.Th>
+              <Table.Th className={css.tableValue}>Size</Table.Th>
+            </Table.Tr>
+          </Table.THead>
+          <Table.TBody>
+            {runs.map(({ name, value }, index) => (
+              <Table.Tr key={name}>
+                <Table.Th>{labels?.[index]}</Table.Th>
+                <Table.Td>{name}</Table.Td>
+                <Table.Td className={css.tableValue}>{value}</Table.Td>
+              </Table.Tr>
+            ))}
+          </Table.TBody>
+        </Table>
+      )}
+    </Stack>
+  );
+};

package/src/components/asset-not-predictive/index.ts

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

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import get from 'lodash/get';
@@ -6,7 +6,9 @@ import {
   ASSET_ENTRY_TYPE,
   ASSET_FILE_TYPE,
   ASSET_FILTERS,
+  COMPONENT,
   FILE_TYPE_LABELS,
+  SECTIONS,
 } from '@bundle-stats/utils';
 
 import config from '../../config.json';
@@ -15,13 +17,13 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Icon } from '../../ui/icon';
 import { FileName } from '../../ui/file-name';
 import { HoverCard } from '../../ui/hover-card';
-import { Tooltip } from '../../ui/tooltip';
 import { Tag } from '../../ui/tag';
 import { Filters } from '../../ui/filters';
 import { SortDropdown } from '../../ui/sort-dropdown';
 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 { MetricsTableSearch } from '../metrics-table-search';
@@ -80,56 +82,27 @@ const getFilters = ({ compareMode, filters }) => ({
   },
 });
 
-const TooltipNotPredictive = ({ runs }) => (
-  <div className={css.tooltipNotPredictive}>
-    <p className={css.tooltipNotPredictiveText}>File name is the same, but the size has changed:</p>
-    <table className={css.tooltipTable}>
-      <tr>
-        {runs.map(({ name, value }, index) => {
-          const key = index;
-          return (
-            <tr key={key}>
-              <th>{RUNS_LABELS[index]}</th>
-              <td>{name}</td>
-              <td>{value}</td>
-            </tr>
-          );
-        })}
-      </tr>
-    </table>
-  </div>
-);
-
-TooltipNotPredictive.defaultProps = {
-  runs: [],
-};
-
-TooltipNotPredictive.propTypes = {
-  runs: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-};
-
-const RowHeader = ({ row, labels, chunks, CustomComponentLink }) => {
+const RowHeader = ({ row, customComponentLink: CustomComponentLink, filters, search }) => {
   const { label, isNotPredictive, runs, isChunk, isEntry, isInitial } = row;
-  const [showHoverCard, setHoverCard] = useState(false);
-  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
 
-  const content = useMemo(
-    () => (
-      <span className={css.assetName}>
+  return (
+    <span className={css.assetNameWrapper}>
+      {isNotPredictive && (
+        <HoverCard
+          label={<Icon className={css.notPredictiveIcon} glyph="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}>
-          {isNotPredictive && (
-            <Tooltip className={css.notPredictive} title={<TooltipNotPredictive runs={runs} />}>
-              <Icon className={css.notPredictiveIcon} glyph="warning" />
-            </Tooltip>
-          )}
-          {isChunk && (
-            <Tag
-              className={cx(css.assetNameTag, css.assetNameTagChunk)}
-              title="Chunk"
-              size={Tag.SIZES.SMALL}
-              kind={Tag.KINDS.INFO}
-            />
-          )}
           {isEntry && (
             <Tag
               className={cx(css.assetNameTag, css.assetNameTagEntry)}
@@ -146,27 +119,18 @@ const RowHeader = ({ row, labels, chunks, CustomComponentLink }) => {
               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} />
-      </span>
-    ),
-    [isChunk, isEntry, isInitial, isNotPredictive, runs],
-  );
-
-  if (!showHoverCard) {
-    return <span onMouseEnter={handleOnMouseEnter}>{content}</span>;
-  }
-
-  return (
-    <HoverCard label={content}>
-      <AssetInfo
-        className={css.assetInfo}
-        item={row}
-        labels={labels}
-        chunks={chunks}
-        CustomComponentLink={CustomComponentLink}
-      />
-    </HoverCard>
+      </CustomComponentLink>
+    </span>
   );
 };
 
@@ -198,11 +162,13 @@ export const BundleAssets = (props) => {
     className,
     jobs,
     items,
+    allItems,
     updateFilters,
     resetFilters,
     resetAllFilters,
     totalRowCount,
     filters,
+    entryId,
     hasActiveFilters,
     sortFields,
     sort,
@@ -210,6 +176,7 @@ export const BundleAssets = (props) => {
     search,
     updateSearch,
     customComponentLink: CustomComponentLink,
+    hideEntryInfo,
   } = props;
 
   const dropdownFilters = useMemo(
@@ -230,12 +197,12 @@ export const BundleAssets = (props) => {
     (row) => (
       <RowHeader
         row={row}
-        labels={jobs?.map(({ label }) => label)}
-        chunks={jobs[0]?.meta?.webpack?.chunks || []}
-        CustomComponentLink={CustomComponentLink}
+        customComponentLink={CustomComponentLink}
+        filters={filters}
+        search={search}
       />
     ),
-    [jobs, CustomComponentLink],
+    [CustomComponentLink, filters, search],
   );
 
   const emptyMessage = useMemo(() => (
@@ -248,45 +215,58 @@ export const BundleAssets = (props) => {
   ), [totalRowCount, resetFilters, resetAllFilters]);
 
   return (
-    <section className={cx(css.root, className)}>
-      <Toolbar
-        className={css.toolbar}
-        renderActions={({ actionClassName }) => (
-          <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-            <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
-            <MetricsTableOptions
-              handleViewAll={resetAllFilters}
-              handleResetFilters={resetFilters}
+    <>
+      <section className={cx(css.root, className)}>
+        <Toolbar
+          className={css.toolbar}
+          renderActions={({ actionClassName }) => (
+            <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
+              <SortDropdown fields={sortFields} {...sort} onChange={updateSort} />
+              <MetricsTableOptions
+                handleViewAll={resetAllFilters}
+                handleResetFilters={resetFilters}
+              />
+            </FlexStack>
+          )}
+        >
+          <FlexStack space="xxsmall">
+            <MetricsTableSearch
+              className={css.toolbarSearch}
+              placeholder="Search by name"
+              search={search}
+              updateSearch={updateSearch}
+            />
+            <Filters
+              className={css.toolbarFilters}
+              filters={dropdownFilters}
+              hasActiveFilters={hasActiveFilters}
+              onChange={updateFilters}
             />
           </FlexStack>
-        )}
-      >
-        <FlexStack space="xxsmall">
-          <MetricsTableSearch
-            className={css.toolbarSearch}
-            placeholder="Search by name"
-            search={search}
-            updateSearch={updateSearch}
+        </Toolbar>
+        <main>
+          <MetricsTable
+            runs={jobs}
+            items={items}
+            renderRowHeader={renderRowHeader}
+            emptyMessage={emptyMessage}
+            showHeaderSum
+            title={metricsTableTitle}
           />
-          <Filters
-            className={css.toolbarFilters}
-            filters={dropdownFilters}
-            hasActiveFilters={hasActiveFilters}
-            onChange={updateFilters}
-          />
-        </FlexStack>
-      </Toolbar>
-      <main>
-        <MetricsTable
-          runs={jobs}
-          items={items}
-          renderRowHeader={renderRowHeader}
-          emptyMessage={emptyMessage}
-          showHeaderSum
-          title={metricsTableTitle}
+        </main>
+      </section>
+
+      {entryId && (
+        <AssetInfo
+          className={css.assetInfo}
+          item={allItems.find(({ key }) => key === entryId)}
+          labels={jobs?.map(({ label }) => label)}
+          chunks={jobs[0]?.meta?.webpack?.chunks || []}
+          customComponentLink={CustomComponentLink}
+          onClose={hideEntryInfo}
         />
-      </main>
-    </section>
+      )}
+    </>
   );
 };
 
@@ -295,6 +275,7 @@ BundleAssets.defaultProps = {
   totalRowCount: 0,
   hasActiveFilters: false,
   customComponentLink: ComponentLink,
+  entryId: '',
 };
 
 BundleAssets.propTypes = {
@@ -328,7 +309,9 @@ BundleAssets.propTypes = {
   totalRowCount: PropTypes.number,
   filters: PropTypes.shape({
     changed: PropTypes.bool,
+    id: PropTypes.string,
   }).isRequired,
+  entryId: PropTypes.string,
   hasActiveFilters: PropTypes.bool,
   sortFields: PropTypes.shape({
     [PropTypes.string]: PropTypes.shape({
@@ -343,5 +326,9 @@ BundleAssets.propTypes = {
     direction: PropTypes.string,
   }).isRequired,
   updateSort: PropTypes.func.isRequired,
+  allItems: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+  })),
   customComponentLink: PropTypes.elementType,
+  hideEntryInfo: PropTypes.func.isRequired,
 };

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

@@ -8,6 +8,9 @@
   margin-right: -1px; /** collapse border */
 }
 
+.assetNameWrapper {
+}
+
 .assetName {}
 
 .notPredictive {
@@ -15,12 +18,12 @@
   display: inline-block;
   width: var(--space-small);
   height: var(--space-small);
-  vertical-align: middle;
 }
 
+.notPredictiveAnchor {}
+
 .notPredictiveIcon {
   color: var(--color-warning-dark);
-  vertical-align: top;
 }
 
 .assetNameTags {
@@ -41,7 +44,7 @@
 }
 
 .assetNameTagEntry {
-  background: var(--color-info-light);
+  background: var(--color-info-dark);
 }
 
 .assetNameTagEntry::before {
@@ -49,13 +52,17 @@
 }
 
 .assetNameTagInitial {
-  background: var(--color-info-light);
+  background: var(--color-info);
 }
 
 .assetNameTagInitial::before {
   content: 'i';
 }
 
+.assetNameTagChunk {
+  background: var(--color-info-light);
+}
+
 .assetNameTagChunk::before {
   content: 'c';
 }
@@ -65,25 +72,7 @@
   vertical-align: middle;
 }
 
-/* Tooltip not predictive */
-.tooltipNotPredictive {
-  text-align: left;
-}
-
-.tooltipNotPredictiveText {
-  margin-bottom: var(--space-xxxsmall);
-}
-
-.tooltipNotPredictiveName {
-  display: block;
-  line-height: var(--line-height-heading);
-}
-
 .search {
   margin: 0;
   width: 100%;
 }
-
-.assetInfo {
-  min-width: 280px;
-}

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

@@ -8,8 +8,8 @@ export const addRowAssetFlags = (row) => {
   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);
 
   return {
     ...row,
@@ -17,6 +17,7 @@ export const addRowAssetFlags = (row) => {
     isInitial,
     isChunk,
     isAsset,
+    fileType,
   };
 };
 
@@ -64,7 +65,7 @@ export const getRowFilter = (filters) => (item) => {
     return false;
   }
 
-  if (!filters[`${ASSET_FILE_TYPE}.${getFileType(item.key)}`]) {
+  if (!filters[`${ASSET_FILE_TYPE}.${item.fileType}`]) {
     return false;
   }
 

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
 import { ASSET_FILTERS } from '@bundle-stats/utils';
@@ -61,13 +61,19 @@ export const BundleAssets = (props) => {
     getCustomSort,
   });
 
+  const hideEntryInfo = useCallback(() => {
+    setState({ entryId: '' });
+  }, [setState]);
+
   return (
     <BundleAssetsComponent
       jobs={jobs}
       {...restProps}
       {...searchParams}
       {...sortParams}
+      allItems={rows}
       totalRowCount={totalRowCount}
+      hideEntryInfo={hideEntryInfo}
     />
   );
 };