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

package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.jsx

@@ -5,29 +5,33 @@ import map from 'lodash/map';
 import max from 'lodash/max';
 import sum from 'lodash/sum';
 import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
-import { getBundleAssetsFileTypeComponentLink } from '@bundle-stats/utils';
+import { getBundleAssetsFileTypeComponentLink, getGlobalMetricType, getMetricRunInfo } from '@bundle-stats/utils';
 
 import { ASSETS_SIZES_FILE_TYPE_MAP } from '../../constants';
 import { HorizontalBarChart } from '../../ui/horizontal-bar-chart';
 import { ComponentLink } from '../component-link'
 import { getColors } from '../../utils';
 import { Stack } from '../../layout/stack';
-import { SummaryItem } from '../summary-item';
+import { JobName } from '../job-name';
+import { MetricRunInfo } from '../metric-run-info';
 import css from './bundle-assets-totals-chart-bars.module.css';
 
-const getTooltip = (items, jobs, itemIndex, runIndex) => () => (
-  <SummaryItem
-    className={css.itemTooltip}
-    id={items?.[itemIndex]?.key}
-    data={{
-      current: items?.[itemIndex]?.runs?.[runIndex]?.value || 0,
-      baseline: items?.[itemIndex]?.runs?.[runIndex + 1]?.value || 0,
-    }}
-    showDelta={runIndex < jobs.length - 1}
-    showBaselineValue={runIndex < jobs.length - 1}
-    size="large"
-  />
-);
+const getTooltip = (items, jobs, itemIndex, runIndex) => () => {
+  const metricId = items?.[itemIndex]?.key;
+  const current = items?.[itemIndex]?.runs?.[runIndex]?.value || 0;
+  const baseline = items?.[itemIndex]?.runs?.[runIndex + 1]?.value;
+
+  return (
+    <MetricRunInfo
+      className={css.itemTooltip}
+      metricId={metricId}
+      current={current}
+      baseline={baseline}
+      showMetridDescription={false}
+      size="large"
+    />
+  );
+};
 
 export const BundleAssetsTotalsChartBars = ({
   className,
@@ -60,7 +64,7 @@ export const BundleAssetsTotalsChartBars = ({
   const colors = getColors(max(map(dataGraphs, (values) => values.length)));
 
   return (
-    <Stack className={rootClassName} space="medium">
+    <Stack className={rootClassName} space="small">
       {dataGraphs.map((data, runIndex) => {
         const { internalBuildNumber } = jobs[runIndex];
 
@@ -73,7 +77,7 @@ export const BundleAssetsTotalsChartBars = ({
 
         return (
           <div key={internalBuildNumber || runIndex} className={css.item}>
-            <h3 className={css.itemTitle}>{`Job #${internalBuildNumber}`}</h3>
+            <h3 className={css.itemTitle}><JobName internalBuildNumber={internalBuildNumber} /></h3>
             <HorizontalBarChart
               className={css.itemChart}
               data={{ labels, values }}

package/src/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.module.css

@@ -6,7 +6,7 @@
   position: absolute;
   right: 0;
   bottom: 100%;
-  margin: 0 0 var(--space-xxxsmall);
+  margin: 0 0 2px;
 
   color: var(--color-text-light);
   font-size: var(--size-xsmall);

package/src/components/bundle-modules/bundle-modules.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 isEmpty from 'lodash/isEmpty';
@@ -10,6 +10,8 @@ import {
   MODULE_CHUNK,
   MODULE_FILTERS,
   MODULE_FILE_TYPE,
+  SECTIONS,
+  COMPONENT,
 } from '@bundle-stats/utils';
 
 import config from '../../config.json';
@@ -19,7 +21,6 @@ import { FlexStack } from '../../layout/flex-stack';
 import { EmptySet } from '../../ui/empty-set';
 import { FileName } from '../../ui/file-name';
 import { Filters } from '../../ui/filters';
-import { HoverCard } from '../../ui/hover-card';
 import { SortDropdown } from '../../ui/sort-dropdown';
 import { Tag } from '../../ui/tag';
 import { Toolbar } from '../../ui/toolbar';
@@ -40,17 +41,6 @@ const getFilters = ({ filters, compareMode, chunks }) => ({
       label: 'Duplicate',
       defaultValue: filters[MODULE_FILTERS.DUPLICATED],
     },
-    [MODULE_SOURCE_TYPE]: {
-      label: 'Source',
-      [MODULE_FILTERS.FIRST_PARTY]: {
-        label: 'First party',
-        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`, true),
-      },
-      [MODULE_FILTERS.THIRD_PARTY]: {
-        label: 'Third party',
-        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`, true),
-      },
-    },
 
     // When chunks data available, list available chunks as filters
     ...(!isEmpty(chunks) && {
@@ -69,6 +59,18 @@ const getFilters = ({ filters, compareMode, chunks }) => ({
       },
     }),
 
+    [MODULE_SOURCE_TYPE]: {
+      label: 'Source',
+      [MODULE_FILTERS.FIRST_PARTY]: {
+        label: 'First party',
+        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`, true),
+      },
+      [MODULE_FILTERS.THIRD_PARTY]: {
+        label: 'Third party',
+        defaultValue: get(filters, `${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`, true),
+      },
+    },
+
     // Module source types
     [MODULE_FILE_TYPE]: {
       label: 'File type',
@@ -85,56 +87,28 @@ const getFilters = ({ filters, compareMode, chunks }) => ({
     },
 })
 
-const RowHeader = ({ row, chunks, labels, CustomComponentLink }) => {
-  const chunkIds = chunks?.map(({ id }) => id);
-
-  const [showHoverCard, setHoverCard] = useState(false);
-  const handleOnMouseEnter = useCallback(() => setHoverCard(true), [showHoverCard]);
-  const content = useMemo(
-    () => (
-      <span className={css.name}>
-        {row.duplicated && (
-          <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
-        )}
-        <FileName className={css.nameText} name={row.label} />
-      </span>
-    ),
-    [row],
-  );
-
-  if (!showHoverCard) {
-    return <div onMouseEnter={handleOnMouseEnter}>{content}</div>;
-  }
-
-  return (
-    <HoverCard label={content} hoverCardClassName={css.nameHoverCard}>
-      {({ close }) => (
-        <ModuleInfo
-          item={row}
-          chunks={chunks}
-          chunkIds={chunkIds}
-          labels={labels}
-          customComponentLink={CustomComponentLink}
-          onClick={close}
-        />
+const RowHeader = ({ row, filters, search, customComponentLink: CustomComponentLink }) => (
+  <CustomComponentLink
+    section={SECTIONS.MODULES}
+    params={{ [COMPONENT.BUNDLE_MODULES]: { filters, search, entryId: row.key } }}
+  >
+    <span className={css.name}>
+      {row.duplicated && (
+        <Tag className={css.nameTagDuplicated} size="small" kind={Tag.KINDS.DANGER} />
       )}
-    </HoverCard>
-  );
-};
+      <FileName className={css.nameText} name={row.label} />
+    </span>
+  </CustomComponentLink>
+);
 
 RowHeader.propTypes = {
   row: PropTypes.shape({
     label: PropTypes.string,
     duplicated: PropTypes.bool,
   }).isRequired,
-  chunks: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string,
-    }),
-  ),
-  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
-  CustomComponentLink: PropTypes.elementType.isRequired,
+  search: PropTypes.string,
+  filters: PropTypes.object,
+  customComponentLink: PropTypes.elementType.isRequired,
 };
 
 RowHeader.defaultProps = {
@@ -151,6 +125,7 @@ export const BundleModules = ({
   resetFilters,
   resetAllFilters,
   filters,
+  entryId,
   sortFields,
   sort,
   updateSort,
@@ -158,6 +133,8 @@ export const BundleModules = ({
   updateSearch,
   hasActiveFilters,
   customComponentLink: CustomComponentLink,
+  allItems,
+  hideEntryInfo,
 }) => {
   const rootClassName = cx(css.root, className);
 
@@ -179,12 +156,12 @@ export const BundleModules = ({
     (row) => (
       <RowHeader
         row={row}
-        chunks={chunks}
-        labels={jobs?.map(({ label }) => label)}
-        CustomComponentLink={CustomComponentLink}
+        filters={filters}
+        search={search}
+        customComponentLink={CustomComponentLink}
       />
     ),
-    [jobs, chunks, CustomComponentLink],
+    [jobs, chunks, CustomComponentLink, filters, search],
   );
 
   const emptyMessage = useMemo(() => (
@@ -197,50 +174,63 @@ export const BundleModules = ({
   ), [totalRowCount, resetFilters, resetAllFilters]);
 
   return (
-    <div className={rootClassName}>
-      <Toolbar
-        className={css.toolbar}
-        renderActions={({ actionClassName }) => (
-          <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
-            <SortDropdown
-              className={css.tableDropdown}
-              fields={sortFields}
-              onChange={updateSort}
-              {...sort}
+    <>
+      <div className={rootClassName}>
+        <Toolbar
+          className={css.toolbar}
+          renderActions={({ actionClassName }) => (
+            <FlexStack space="xxsmall" className={cx(css.dropdown, actionClassName)}>
+              <SortDropdown
+                className={css.tableDropdown}
+                fields={sortFields}
+                onChange={updateSort}
+                {...sort}
+              />
+              <MetricsTableOptions
+                handleViewAll={resetAllFilters}
+                handleResetFilters={resetFilters}
+              />
+            </FlexStack>
+          )}
+        >
+          <FlexStack space="xxsmall">
+            <MetricsTableSearch
+              className={css.toolbarSearch}
+              search={search}
+              updateSearch={updateSearch}
+              placeholder="Search by name"
             />
-            <MetricsTableOptions
-              handleViewAll={resetAllFilters}
-              handleResetFilters={resetFilters}
+            <Filters
+              className={css.tableDropdown}
+              filters={dropdownFilters}
+              onChange={updateFilters}
+              hasActiveFilters={hasActiveFilters}
             />
           </FlexStack>
-        )}
-      >
-        <FlexStack space="xxsmall">
-          <MetricsTableSearch
-            className={css.toolbarSearch}
-            search={search}
-            updateSearch={updateSearch}
-            placeholder="Search by name"
-          />
-          <Filters
-            className={css.tableDropdown}
-            filters={dropdownFilters}
-            onChange={updateFilters}
-            hasActiveFilters={hasActiveFilters}
-          />
-        </FlexStack>
-      </Toolbar>
+        </Toolbar>
 
-      <MetricsTable
-        className={css.table}
-        items={items}
-        runs={jobs}
-        renderRowHeader={renderRowHeader}
-        emptyMessage={emptyMessage}
-        showHeaderSum
-        title={metricsTableTitle}
-      />
-    </div>
+        <MetricsTable
+          className={css.table}
+          items={items}
+          runs={jobs}
+          renderRowHeader={renderRowHeader}
+          emptyMessage={emptyMessage}
+          showHeaderSum
+          title={metricsTableTitle}
+        />
+      </div>
+      {entryId && (
+        <ModuleInfo
+          className={css.moduleInfo}
+          item={allItems.find(({ key }) => key === entryId)}
+          chunks={chunks}
+          chunkIds={chunks?.map(({ id }) => id)}
+          labels={jobs.map(({ label }) => label)}
+          customComponentLink={CustomComponentLink}
+          onClose={hideEntryInfo}
+        />
+      )}
+    </>
   );
 };
 
@@ -302,4 +292,5 @@ BundleModules.propTypes = {
   search: PropTypes.string.isRequired,
   updateSearch: PropTypes.func.isRequired,
   customComponentLink: PropTypes.elementType,
+  hideEntryInfo: PropTypes.func.isRequired,
 };

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

@@ -26,6 +26,7 @@
   vertical-align: middle;
 }
 
-.nameHoverCard {
-  max-width: 480px;
+.hoverCard {
+  max-width: var(--entry-info-hovercard-width);
 }
+

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

@@ -13,14 +13,17 @@ import {
 
 import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA } from './bundle-modules.constants';
 
-export const addRowSourceFlag = (row) => {
+export const addRowFlags = (row) => {
   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) => run?.duplicated === true));
+  // eslint-disable-next-line no-param-reassign
+  row.fileType = getModuleSourceFileType(row.key);
 
   return row;
 };
@@ -64,8 +67,7 @@ export const getRowFilter = (filters) => (row) => {
   }
 
   // Skip not matching source file types
-  const fileType = getModuleSourceFileType(row.key);
-  if (!filters[`${MODULE_FILE_TYPE}.${fileType}`]) {
+  if (!filters[`${MODULE_FILE_TYPE}.${row.fileType}`]) {
     return false;
   }
 

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import uniqBy from 'lodash/uniqBy';
 import {
@@ -14,7 +14,7 @@ import { useRowsSort } from '../../hooks/rows-sort';
 import { useSearchParams } from '../../hooks/search-params';
 import { BundleModules as BundleModulesComponent } from './bundle-modules';
 import {
-  addRowSourceFlag,
+  addRowFlags,
   getRowFilter,
   getCustomSort,
   useModuleFilterByChunk,
@@ -75,7 +75,7 @@ export const BundleModules = (props) => {
   });
 
   const { rows, totalRowCount } = useMemo(() => {
-    const result = webpack.compareBySection.modules(filteredJobsByChunkIds, [addRowSourceFlag]);
+    const result = webpack.compareBySection.modules(filteredJobsByChunkIds, [addRowFlags]);
     return { rows: result, totalRowCount: result.length };
   }, [filteredJobsByChunkIds]);
 
@@ -94,6 +94,10 @@ export const BundleModules = (props) => {
     getCustomSort,
   });
 
+  const hideEntryInfo = useCallback(() => {
+    setState({ entryId: '' });
+  }, [setState]);
+
   return (
     <BundleModulesComponent
       jobs={jobs}
@@ -101,7 +105,9 @@ export const BundleModules = (props) => {
       {...restProps}
       {...searchParams}
       {...sortParams}
+      allItems={rows}
       totalRowCount={totalRowCount}
+      hideEntryInfo={hideEntryInfo}
     />
   );
 };