@bundle-stats/ui 4.17.0 → 4.18.0-beta.1

package/src/components/bundle-assets/{bundle-assets.jsx → bundle-assets.tsx}

@@ -1,17 +1,11 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
+import type { ElementType, ReactNode } from 'react';
+import React, { ComponentProps, useCallback, useMemo, useState } from 'react';
 import cx from 'classnames';
-import get from 'lodash/get';
 import escapeRegExp from 'lodash/escapeRegExp';
-import {
-  ASSET_ENTRY_TYPE,
-  ASSET_FILE_TYPE,
-  ASSET_FILTERS,
-  COMPONENT,
-  FILE_TYPE_LABELS,
-  SECTIONS,
-} from '@bundle-stats/utils';
+import type { Job, ReportMetricRow, WebpackChunk } from '@bundle-stats/utils';
+import { COMPONENT, SECTIONS } from '@bundle-stats/utils';
 
+import type { ReportMetricAssetRow, SortAction } from '../../types';
 import config from '../../config.json';
 import I18N from '../../i18n';
 import { MetricsDisplayType } from '../../constants';
@@ -26,6 +20,7 @@ import { Filters } from '../../ui/filters';
 import { EmptySet } from '../../ui/empty-set';
 import { Toolbar } from '../../ui/toolbar';
 import { AssetInfo } from '../asset-info';
+import { AssetName } from '../asset-name';
 import { ComponentLink } from '../component-link';
 import { MetricsTable } from '../metrics-table';
 import { MetricsTableExport } from '../metrics-table-export';
@@ -34,59 +29,26 @@ import { MetricsTableTitle } from '../metrics-table-title';
 import { MetricsDisplaySelector } from '../metrics-display-selector';
 import { MetricsTableHeader } from '../metrics-table-header';
 import { MetricsTreemap, getTreemapNodes, getTreemapNodesGroupedByPath } from '../metrics-treemap';
-import { SEARCH_PLACEHOLDER } from './bundle-assets.i18n';
+import * as BUNDLE_ASSETS_I18N from './bundle-assets.i18n';
+import { getFilters } from './bundle-assets.utils';
 import css from './bundle-assets.module.css';
-import { AssetName } from '../asset-name';
 
 const DISPLAY_TYPE_GROUPS = {
   [MetricsDisplayType.TREEMAP]: ['folder'],
 };
 
-const getFileTypeFilters = (filters) =>
-  Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
-  key,
-  label,
-  defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
-}));
-
-const getFilters = ({ compareMode, filters }) => ({
-  [ASSET_FILTERS.CHANGED]: {
-    label: 'Changed',
-    defaultValue: filters[ASSET_FILTERS.CHANGED],
-    disabled: !compareMode,
-  },
-  [ASSET_ENTRY_TYPE]: {
-    label: 'Type',
-    children: [
-      {
-        key: ASSET_FILTERS.ENTRY,
-        label: 'Entry',
-        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true),
-      },
-      {
-        key: ASSET_FILTERS.INITIAL,
-        label: 'Initial',
-        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true),
-      },
-      {
-        key: ASSET_FILTERS.CHUNK,
-        label: 'Chunk',
-        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true),
-      },
-      {
-        key: ASSET_FILTERS.OTHER,
-        label: 'Other',
-        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true),
-      },
-    ],
-  },
-  [ASSET_FILE_TYPE]: {
-    label: 'File type',
-    children: getFileTypeFilters(filters),
-  },
-});
+interface ViewMetricsTreemapProps {
+  metricsTableTitle: ReactNode;
+  jobs: Array<Job>;
+  items: Array<ReportMetricAssetRow>;
+  displayType: { value: MetricsDisplayType; groupBy?: string };
+  emptyMessage: ReactNode;
+  showEntryInfo: (entryId: string) => void;
+  updateSearch: (search: string) => void;
+  search: string;
+}
 
-const ViewMetricsTreemap = (props) => {
+const ViewMetricsTreemap = (props: ViewMetricsTreemapProps) => {
   const {
     metricsTableTitle,
     jobs,
@@ -109,7 +71,7 @@ const ViewMetricsTreemap = (props) => {
 
   // Search based on the group path on group title click
   const onGroupClick = useCallback(
-    (groupPath) => {
+    (groupPath: string) => {
       // Clear seach when groupPath is emty (root)
       if (groupPath === '') {
         updateSearch('');
@@ -147,22 +109,29 @@ const ViewMetricsTreemap = (props) => {
   );
 };
 
-ViewMetricsTreemap.propTypes = {
-  jobs: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
-  items: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
-  metricsTableTitle: PropTypes.node.isRequired,
-  displayType: PropTypes.shape({
-    groupBy: PropTypes.string,
-  }).isRequired,
-  emptyMessage: PropTypes.node.isRequired,
-  showEntryInfo: PropTypes.func.isRequired,
-  updateSearch: PropTypes.func.isRequired,
-  search: PropTypes.string.isRequired,
-};
+export interface BundleAssetsProps extends ComponentProps<typeof Stack> {
+  jobs: Array<Job>;
+  chunks: Array<WebpackChunk>;
+  items: Array<ReportMetricAssetRow>;
+  allItems: Array<ReportMetricAssetRow>;
+  filters: Record<string, boolean>;
+  updateFilters: (newFilters: Record<string, boolean>) => void;
+  resetFilters: () => void;
+  resetAllFilters: () => void;
+  totalRowCount?: number;
+  entryId?: string;
+  sort: SortAction;
+  updateSort: (params: SortAction) => void;
+  search: string;
+  updateSearch: (search: string) => void;
+  customComponentLink?: ElementType;
+  hideEntryInfo: () => void;
+  showEntryInfo: (entryId: string) => void;
+}
 
-export const BundleAssets = (props) => {
+export const BundleAssets = (props: BundleAssetsProps) => {
   const {
-    className,
+    className = '',
     jobs,
     chunks,
     items,
@@ -170,15 +139,14 @@ export const BundleAssets = (props) => {
     updateFilters,
     resetFilters,
     resetAllFilters,
-    totalRowCount,
+    totalRowCount = 0,
     filters,
-    entryId,
-    hasActiveFilters,
+    entryId = '',
     sort,
     updateSort,
     search,
     updateSearch,
-    customComponentLink: CustomComponentLink,
+    customComponentLink: CustomComponentLink = ComponentLink,
     hideEntryInfo,
     showEntryInfo,
   } = props;
@@ -187,9 +155,9 @@ export const BundleAssets = (props) => {
 
   const [displayType, setDisplayType] = useMetricsDisplayType(DISPLAY_TYPE_GROUPS);
 
-  const dropdownFilters = useMemo(
-    () => getFilters({ compareMode: jobs?.length > 1, filters }),
-    [jobs, filters],
+  const filterFieldsData = useMemo(
+    () => getFilters({ compareMode: jobs?.length > 1, filters, chunks }),
+    [jobs, filters, chunks],
   );
 
   const metricsTableTitle = useMemo(
@@ -205,7 +173,10 @@ export const BundleAssets = (props) => {
   );
 
   const EntryComponentLink = useCallback(
-    ({ entryId: assetEntryId, ...assetNameRestProps }) => (
+    ({
+      entryId: assetEntryId,
+      ...assetNameRestProps
+    }: { entryId: string } & ComponentProps<typeof CustomComponentLink>) => (
       <CustomComponentLink
         section={SECTIONS.ASSETS}
         params={{
@@ -224,8 +195,12 @@ export const BundleAssets = (props) => {
   );
 
   const renderRowHeader = useCallback(
-    (row) => (
-      <AssetName row={row} EntryComponentLink={EntryComponentLink} className={css.assetName} />
+    (row: ReportMetricRow) => (
+      <AssetName
+        row={row as ReportMetricAssetRow}
+        EntryComponentLink={EntryComponentLink}
+        className={css.assetName}
+      />
     ),
     [EntryComponentLink],
   );
@@ -251,12 +226,15 @@ export const BundleAssets = (props) => {
   }, [allItems, entryId]);
 
   const exportDialog = useDialogState();
-  const [exportSourceType, setExportSourceType] = useState(undefined);
+  const [exportSourceType, setExportSourceType] = useState<string>();
 
-  const handleExportClick = useCallback((sourceType) => {
-    setExportSourceType(sourceType);
-    exportDialog.toggle();
-  }, []);
+  const handleExportClick = useCallback(
+    (sourceType: string) => {
+      setExportSourceType(sourceType);
+      exportDialog.toggle();
+    },
+    [exportDialog, setExportSourceType],
+  );
 
   return (
     <>
@@ -281,14 +259,13 @@ export const BundleAssets = (props) => {
           <FlexStack space="xxsmall">
             <InputSearch
               className={css.toolbarSearch}
-              placeholder={SEARCH_PLACEHOLDER}
+              placeholder={BUNDLE_ASSETS_I18N.SEARCH_PLACEHOLDER}
               defaultValue={search}
               onChange={updateSearch}
             />
             <Filters
               className={css.toolbarFilters}
-              filters={dropdownFilters}
-              hasActiveFilters={hasActiveFilters}
+              filters={filterFieldsData}
               onChange={updateFilters}
             />
           </FlexStack>
@@ -344,62 +321,3 @@ export const BundleAssets = (props) => {
     </>
   );
 };
-
-BundleAssets.defaultProps = {
-  className: '',
-  totalRowCount: 0,
-  hasActiveFilters: false,
-  customComponentLink: ComponentLink,
-  entryId: '',
-};
-
-BundleAssets.propTypes = {
-  className: PropTypes.string,
-  jobs: PropTypes.arrayOf(
-    PropTypes.shape({
-      internalBuildNumber: PropTypes.number,
-      label: PropTypes.string,
-    }),
-  ).isRequired,
-  chunks: PropTypes.arrayOf({
-    id: PropTypes.string,
-    name: PropTypes.string,
-  }).isRequired,
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string,
-      label: PropTypes.string,
-      runs: PropTypes.arrayOf(
-        PropTypes.shape({
-          displayValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-          displayDelta: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        }),
-      ),
-    }),
-  ).isRequired,
-  updateFilters: PropTypes.func.isRequired,
-  resetFilters: PropTypes.func.isRequired,
-  resetAllFilters: PropTypes.func.isRequired,
-  totalRowCount: PropTypes.number,
-  filters: PropTypes.shape({
-    changed: PropTypes.bool,
-    id: PropTypes.string,
-  }).isRequired,
-  entryId: PropTypes.string,
-  hasActiveFilters: PropTypes.bool,
-  search: PropTypes.string.isRequired,
-  updateSearch: PropTypes.func.isRequired,
-  sort: PropTypes.shape({
-    field: PropTypes.string,
-    direction: PropTypes.string,
-  }).isRequired,
-  updateSort: PropTypes.func.isRequired,
-  allItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      key: PropTypes.string,
-    }),
-  ).isRequired,
-  customComponentLink: PropTypes.elementType,
-  hideEntryInfo: PropTypes.func.isRequired,
-  showEntryInfo: PropTypes.func.isRequired,
-};

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

@@ -0,0 +1,276 @@
+import get from 'lodash/get';
+import intersection from 'lodash/intersection';
+import isEmpty from 'lodash/isEmpty';
+import orderBy from 'lodash/orderBy';
+import type { ReportMetricRow, WebpackChunk } from '@bundle-stats/utils';
+import type { AssetMetricRun } from '@bundle-stats/utils/types/webpack';
+import {
+  ASSET_CHUNK,
+  ASSET_ENTRY_TYPE,
+  ASSET_FILE_TYPE,
+  ASSET_FILTERS,
+  FILE_TYPE_LABELS,
+  getFileType,
+} from '@bundle-stats/utils';
+
+import type {
+  FilterFieldsData,
+  ReportMetricAssetRow,
+  ReportMetricAssetRowMetaStatus,
+  FilterGroupFieldData,
+} from '../../types';
+import * as I18N from './bundle-assets.i18n';
+
+const NO_CHUNK_FILTER = 'NO_CHUNK';
+
+/**
+ * Check if the asset cache is not predictive
+ */
+export const getIsNotPredictive = (row: ReportMetricRow): boolean => {
+  const { key, runs } = row;
+
+  return runs.reduce((agg, run, index) => {
+    if (agg) {
+      return agg;
+    }
+
+    if (index + 1 === runs.length) {
+      return agg;
+    }
+
+    const preRun = runs[index + 1];
+
+    if (
+      run &&
+      preRun &&
+      key !== run.name &&
+      run.name === preRun.name &&
+      run.value !== preRun.value
+    ) {
+      return true;
+    }
+
+    return agg;
+  }, false);
+};
+
+/**
+ * Return asset meta status
+ */
+export const getAssetMetaStatus = (
+  values: Array<boolean | undefined>,
+): ReportMetricAssetRowMetaStatus | boolean => {
+  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];
+
+  if (current && !baseline) {
+    return 'added';
+  }
+
+  if (!current && baseline) {
+    return 'removed';
+  }
+
+  return true;
+};
+
+/**
+ * Add asset row flags
+ */
+export const addMetricReportAssetRowData = (row: ReportMetricRow): ReportMetricAssetRow => {
+  const { changed, runs } = row;
+
+  // Collect meta for each run
+  const runsEntry: Array<boolean | undefined> = [];
+  const runsInitial: Array<boolean | undefined> = [];
+  const runsChunk: Array<boolean | undefined> = [];
+
+  (runs as Array<AssetMetricRun | null>).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);
+
+  // Flag asset as changed if name and value are identical, if one of the meta tags is changed
+  const assetChanged =
+    changed ||
+    typeof isEntry !== 'boolean' ||
+    typeof isInitial !== 'boolean' ||
+    typeof isChunk !== 'boolean';
+
+  return {
+    ...row,
+    changed: assetChanged,
+    isEntry,
+    isInitial,
+    isChunk,
+    isAsset,
+    isNotPredictive,
+    fileType,
+  };
+};
+
+type GenerateGetRowFilterOptions = {
+  chunkIds: Array<string>;
+};
+
+export const getCustomSort = (item: ReportMetricAssetRow): Array<boolean | string> => [
+  !item.isNotPredictive,
+  !item.changed,
+  !item.isInitial,
+  !item.isEntry,
+  !item.isChunk,
+  item.key,
+];
+
+/* eslint-disable prettier/prettier */
+const getFileTypeFilters = (filters: Record<string, unknown>): FilterGroupFieldData['children'] => Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
+  key,
+  label,
+  defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true) as boolean,
+}));
+
+type GetFiltersOptions = {
+  compareMode: boolean;
+  filters: Record<string, boolean>;
+  chunks: Array<WebpackChunk>;
+};
+
+export const getFilters = ({
+  compareMode,
+  filters,
+  chunks,
+}: GetFiltersOptions): FilterFieldsData => {
+  const result: FilterFieldsData = {
+    [ASSET_FILTERS.CHANGED]: {
+      label: I18N.CHANGED,
+      defaultValue: filters[ASSET_FILTERS.CHANGED],
+      disabled: !compareMode,
+    },
+  };
+
+  if (!isEmpty(chunks)) {
+    const chunksFilter: FilterGroupFieldData = {
+      label: I18N.CHUNKS,
+      children: [
+        {
+          key: NO_CHUNK_FILTER,
+          label: I18N.NO_CHUNK,
+          defaultValue: filters[`${ASSET_CHUNK}.${NO_CHUNK_FILTER}`] ?? true,
+        },
+      ],
+    };
+
+    const chunksOrderedByName = orderBy(chunks, 'name');
+
+    chunksOrderedByName.forEach((chunk) => {
+      chunksFilter.children.push({
+        key: chunk.id,
+        label: chunk.name,
+        defaultValue: filters[`${ASSET_CHUNK}.${chunk.id}`] ?? true,
+      });
+    });
+
+    result[ASSET_CHUNK] = chunksFilter;
+  }
+
+  result[ASSET_ENTRY_TYPE] = {
+    label: I18N.FILE_TYPE,
+    children: [
+      {
+        key: ASSET_FILTERS.ENTRY,
+        label: I18N.ENTRY,
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`, true),
+      },
+      {
+        key: ASSET_FILTERS.INITIAL,
+        label: I18N.INITIAL,
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`, true),
+      },
+      {
+        key: ASSET_FILTERS.CHUNK,
+        label: I18N.CHUNK,
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`, true),
+      },
+      {
+        key: ASSET_FILTERS.OTHER,
+        label: I18N.OTHER,
+        defaultValue: get(filters, `${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`, true),
+      },
+    ],
+  };
+
+  result[ASSET_FILE_TYPE] = {
+    label: I18N.FILE_TYPE,
+    children: getFileTypeFilters(filters),
+  };
+
+  return result;
+};
+
+/* eslint-disable prettier/prettier */
+export const generateGetRowFilter =
+  ({ chunkIds }: GenerateGetRowFilterOptions) => (filters: Record<string, unknown>) => {
+    // List of chunkIds with filter value set to `true`
+    const checkedChunkIds: Array<string> = [];
+    // List of chunks ids, including the NO_CHUNK
+    const filtersChunkIds = [NO_CHUNK_FILTER, ...chunkIds];
+
+    filtersChunkIds.forEach((chunkId) => {
+      if (filters[`${ASSET_CHUNK}.${chunkId}`]) {
+        checkedChunkIds.push(chunkId);
+      }
+    });
+
+    const hasChunkFilters =
+      checkedChunkIds.length > 0 && checkedChunkIds.length !== filtersChunkIds.length;
+
+    return (item: ReportMetricAssetRow) => {
+      if (filters[ASSET_FILTERS.CHANGED] && !item.changed) {
+        return false;
+      }
+
+      if (
+        !(
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`] && item.isEntry) ||
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`] && item.isInitial) ||
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`] && item.isChunk) ||
+          (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.OTHER}`] && item.isAsset)
+        )
+      ) {
+        return false;
+      }
+
+      if (!filters[`${ASSET_FILE_TYPE}.${item.fileType}`]) {
+        return false;
+      }
+
+      // Filter if any of the chunkIds are checked
+      if (hasChunkFilters) {
+        const rowRunsChunkIds = item?.runs?.map((run) => run?.chunkId || NO_CHUNK_FILTER) || [];
+        return intersection(rowRunsChunkIds, checkedChunkIds).length > 0;
+      }
+
+      return true;
+    };
+  };